day26_css

news2024/10/7 18:29:37

今日内容

零、 复习昨日
一、CSS

零、 复习昨日

HTML - 页面基本骨架结构,内容展现

CSS - 美化页面,布局

JS - 动起来

一 、引言

1.1CSS概念

​ 层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

二、 CSS简介

2.1 什么是CSS

  • CSS :全称：Cascading Style Sheets 层叠样式表,定义如何显示HTML元素
  • 多个样式可以层层覆盖叠加，如果不同的css样式对同一html标签进行修饰，样式有冲突的应用优先级高的，不冲突的共同作用

2.2 CSS能干什么

  • 修饰美化html网页。
  • 外部样式表可以提高代码复用性从而提高工作效率。
  • html内容与样式表现分离，便于后期维护。
美化前
image-20230307175157869
美化后

2.3 CSS书写规范

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明

  • 选择器通常是您需要改变样式的 HTML 元素。
  • 每条声明由一个属性和一个值组成。

2.4 基础语法

选择器｛属性：值; 属性:值…… ｝

语法示例
css_selector
h1 {
    color:red;
    font-size:14px;
}

注意事项：

  • 请使用花括号来包围声明
  • 多个属性声明之间使用分号;分开
  • css对大小不敏感，如果涉及到与html文档一起使用时，class与id名称对大小写敏感

三、 CSS导入方式

3.1 内嵌方式(内联方式)

把CSS样式嵌入到html标签当中，类似属性的用法

 <div style="color:blue;font-size:50px">This is my HTML page. </div>

image-20231113112314702

3.2 内部方式

在head标签中使用style标签引入css

<style type=“text/css”> //告诉浏览器使用css解析器去解析
	div{
        color:red;
        font-size:50px
     }
</style>

image-20231113112343138

3.3 外部方式

将css样式抽成一个单独文件，使用者直接引用

创建单独文件 div.css
内容示例：div{color:green;font-size:50px}
引用语句写在head标签内部
	<link rel="stylesheet" type="text/css" href=“div.css" />
    rel:代表当前页面与href所指定文档的关系[固定]
    type:文件类型，告诉浏览器使用css解析器去解析[固定]
    href:css文件地址

image-20231113112503635

四、 CSS选择器

选择器主要就是选到标签,给其加样式

选择器 {
    属性:值
}

主要用于选择需要添加样式的html元素

4.1 基本选择器 [重点]

基本选择器

  • 元素选择器(标签名)
  • id选择器
  • 类选择器

元素选择器：(标签名选择器)

  • 在head中使用style标签引入

  • 在其中声明元素选择器

html标签{
    属性:属性值
}

<style type="text/css">
    span{color: red;font-size: 100px}
</style>

id选择器：

  • 给需要修改样式的html元素添加id属性标识

  • 在head中使用style标签引入

  • 在其中声明id选择器

     #id{
     属性:属性值
}

创建id选择器：
	<div id="s1">hello,everyone!</div>
	<div id="s2">hello,everyone!</div>
    <div id="s3">hello,everyone!</div>
根据id选择器进行html文件修饰 
    <style type="text/css">
		#s1{color: red;font-size: 100px}
		#s2{color: green;font-size: 100px}
		#s3{color: blue;font-size: 100px}
    </style>

class选择器：

  • 给需要修改样式的html元素添加class属性标识

  • 在head中使用style标签引入

  • 在其中声明class选择器

     .class名{
     属性:属性值
}

创建class选择器：
    <div class="s1">hello,everyone!</div>
    <div class="s2">hello,everyone!</div>
    <div class="s3">hello,everyone!</div>
根据id选择器进行html文件修饰：
    <style type="text/css">
        .s1{color: purple;font-size: 100px}
        .s2{color: pink;font-size: 100px}
        .s3{color: yellow;font-size: 100px}
    </style>

备注：以上基本选择器的优先级从高到低：id选择器>class选择器>元素选择器

4.2 属性选择器

  • 根据元素的属性及属性值来选择元素。

  • 在head中使用style标签引入在其中声明

htm标签[属性='属性值']{
   css属性:css属性值;
}

html标签[属性]{
    css属性:css属性值;
}

body内容：
	<form name="login" action="#" method="get">
        <font size="3">用户名：</font>
        <input type="text" name="username" value="zhangsan"><br>
		<font size="3">密码：</font>
        <input type="password" name="password" value="123456"><br/>
        <input type="submit" value="登录">
	</form>
head中书写：
    <style type="text/css">
        input[type='text'] {
            background-color: pink;
        }
        input[type='password'] {
            background-color: yellow;
        }
        font[size] {
            color: green
        }
        a[href] {
            color: blue;
        }
	</style>

/* 了解:组合选择,兄弟选择器,层级选择器等等 */https://www.w3school.com.cn

五、 CSS属性

5.1 文字属性

属性名取值描述
font-size数值设置字体大小（像素/百分比）
font-family默体、宋体、楷体等设置字体样式
font-stylenormal正常; italic斜体;设置斜体样式
font-weight100~900数值;bold;bolder;粗体样式

5.2 文本属性

属性名取值描述
color十六进制;表示颜色的英文单词;设置文本颜色
text-indent5px缩进5像素;20%缩进父容器宽度的百分之二十;缩进元素中文本的首行
text-decorationnone;underline;overline;blink;文本的装饰线
text-alignleft;right;center文本水平对齐方式
word-spacingnormal;固定值;像素英语单词之间的间隔,得有空格
line-heightnormal;固定值;像素设置文本的行高

5.3 背景属性

属性名取值描述
background-color16进制;用于表示颜色的英语单词;设置背景色
background-imageurl(‘图片路径’)设置背景图片
background-repeatrepeat-y;repeat-x;repeat;no-repeat;设置背景图的平铺方向
background-positiontop;bottom;left;right ; center;改变图像在背景中的位置
background-size像素;百分比设置图片大小

5.4 列表属性

属性名取值描述
list-style-typedisc等改变列表的标识类型
list-style-imageurl(“图片地址”)用图像表示标识

阿里巴巴矢量图标库

5.5 尺寸属性

  • width:设置元素的宽度,单位 px %
  • height:设置元素的高度,单位 px %

5.6 显示属性

显示属性display ，以下是常用取值：

  • none:不显示,即隐藏了
  • block:块级显示,占一行
  • inline:行级显示,占部分

5.7 定位属性

使用的是css属性position,属性值有

  • relative (相对)
  • absolute (绝对)
  • fixed (固定)

使用了定位属性后,才可以使用top,bottom,left,right这些位置属性

相对

相对定位(relative)：元素框偏移某个距离，**相对于父元素**中其正常位置(相对于自己)进行定位。元素仍保持其未定位前的形状，它原本所占的空间仍保留。

<head>
	<style type="text/css">
		h2.pos_left {
			position: relative;
			left: -20px
		}
        h2.pos_right {
			position: relative;
			left: 20px
		}
	</style>
</head>
<body>
    <h2>这是位于正常位置的标题</h2>
	<h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
	<h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>
	<p>相对定位会按照元素的原始位置对该元素进行移动。</p>
	<p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</p>
	<p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p>
</body>

绝对定位

绝对定位(absolute)：元素框从文档流完全删除，并相对于最近的定位祖先元素进行定位（祖先元素需要定位）。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框。

<html>
    <head>
		<meta charset="utf-8" />
		<style type="text/css">
			h2.pos_abs {
				position: absolute;
				left: 100px;
				top: 150px
			}
		</style>
	</head>
	<body>
		<h2 class="pos_abs">这是带有绝对定位的标题</h2>
		<p>通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px，距离页面顶部 150px。</p>
	</body>
</html>

绝对和相对定位: 最主要的区别

  • 相对定位后,原来位置还在
  • 绝对定位后,原来位置没了,其他标签元素内容会顶上

练习: 登录框

GPT生成页面,再看看

固定定位

固定定位(fixed)：元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#left {
				width: 200px;
				height: 200px;
				background-color: red;
				position: fixed;
				left: 0px;
				bottom: 0px;
			}
			
			#right {
				width: 200px;
				height: 200px;
				background-color: green;
				position: fixed;
				right: 0px;
				bottom: 0px;
			}
			#middle{
				width: 200px;
				height: 200px;
				background-color: blue;
				position: fixed;
				left: 40%;
				bottom: 50%;
			}
			
		</style>
	</head>
	<body>
		<div id="left">左下</div>
		<div id="right">右下</div>
		<div id="middle">中间</div>
	</body>
</html>

六、 CSS盒子模型[重要]

盒子模型图
box

6.1 边框相关属性

属性名取值描述
border-stylesolid;double;dashed;dotted等设置边框的样式
border-color16进制;用于表示颜色的英文;设置边框的颜色
border-width数值设置边框的粗

6.2 外边距相关属性

margin：外间距,边框和边框外层的元素的距离 (相对于父级元素定位)

属性名描述
margintop;right;bottom;left四个方向的距离
margin-top数值上间距
margin-bottom数值下间距
margin-left数值左间距
margin-right数值右间距

6.3 内边距相关属性

padding：内间距,元素内容和边框之间的距离((top right bottom left))

属性值取值描述
padding-left
padding-right
padding-top
padding-bottom

七、完成登录页面

作业_千峰登录页

bottom | 数值 | 下间距 |
| margin-left | 数值 | 左间距 |
| margin-right | 数值 | 右间距 |

6.3 内边距相关属性

padding：内间距,元素内容和边框之间的距离((top right bottom left))

属性值取值描述
padding-left
padding-right
padding-top
padding-bottom

七、完成登录页面

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1213758.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

第十九章总结

第十九章总结

Java绘图类 Graphics 类 Grapics 类是所有图形上下文的抽象基类&#xff0c;它允许应用程序在组件以及闭屏图像上进行绘制。Graphics 类封装了Java 支持的基本绘图操作所需的状态信息&#xff0c;主要包括颜色、字体、画笔、文本、图像等。 Graphics 类提供了绘图常用的…
阅读更多...
Linux系统编程——进程中vfork函数

Linux系统编程——进程中vfork函数

函数原型 pid_t vfork(void);//pid_t是无符号整型 所需头文件 #include <sys/types.h> #include <unistd.h> 功能 vfork() 函数和 fork() 函数一样都是在已有的进程中创建一个新的进程&#xff0c;但它们创建的子进程是有区别的。 返回值 成功子进程中返回 …
阅读更多...
nginx基本配置-基于nuc980开发板的笔记

nginx基本配置-基于nuc980开发板的笔记

一、介绍 前面的文章<nginx交叉编译移植-基于nuc980开发板的笔记>,介绍了如何移植nginx到开发板&#xff0c;打开的网页面是默认的网页。下面介绍如何输入网址变为指定的网页。 二、配置 ①将编写的网页&#xff0c;放到html文件夹下&#xff0c;如下图&#xff1a; ②打…
阅读更多...
双点重发布路由策略实验

双点重发布路由策略实验

任务&IP分配如下&#xff1a; 双点重发布实验 第一步&#xff1a;配置IP地址&环回地址 以R1为例&#xff0c;R2、R3、R4同理 interface GigabitEthernet 0/0/0 ip address 12.0.0.1 24 interface GigabitEthernet 0/0/1 ip address 13.0.0.1 24 interface LookBack …
阅读更多...
docker 安装xxl-job

docker 安装xxl-job

1.拉取镜像 docker pull xuxueli/xxl-job-admin:2.4.0 2.docker镜像创建并运行 docker run -e PARAMS"--spring.datasource.urljdbc:mysql://xxxxx:3306/xxl_job?useUnicodetrue&characterEncodingUTF-8&autoReconnecttrue&serverTimezoneAsia/Shanghai&…
阅读更多...
5. HTML中常用标签

5. HTML中常用标签

5. html常用标签 5.1 标签语义 学习标签是有技巧的&#xff0c;重点是记住每个标签的语义。简单理解就是指标签的含义。即这个标签是用来干嘛的。 根据标签的语义&#xff0c;在合适的地方给一个最为合理的标签。可以让页面结构给清晰。 5.2 标题标签 <h1>-<h6>…
阅读更多...
《算法通关村——位运算常用技巧》

《算法通关村——位运算常用技巧》

《算法通关村——位运算常用技巧》 位运算的性质有很多&#xff0c;此处列举一些常见性质&#xff0c;假设以下出现的变量都是有符号整数。 ●幂等律&#xff1a;a &aa&#xff0c;a ∣ aa&#xff08;注意异或不满足幂等律&#xff09;&#xff1b; ●交换律&#xff1…
阅读更多...
WPF xaml Command用法介绍

WPF xaml Command用法介绍

WPF (Windows Presentation Foundation) 中的命令设计模式是一种用于分离用户界面逻辑和业务逻辑的方法。在WPF中&#xff0c;这种模式通过命令接口&#xff08;如 ICommand&#xff09;实现&#xff0c;使得用户界面组件&#xff08;如按钮、菜单项等&#xff09;可以触发不直…
阅读更多...
nodejs+vue电影在线预定与管理系统的设计与实现-微信小程序-安卓-python-PHP-计算机毕业设计

nodejs+vue电影在线预定与管理系统的设计与实现-微信小程序-安卓-python-PHP-计算机毕业设计

通过软件的需求分析已经获得了系统的基本功能需求&#xff0c;根据需求&#xff0c;将电影在线预定与管理系统功能模块主要分为管理员模块。 我国各行各业的发展在信息化浪潮的推动下也在不断进步&#xff0c;尤其是电影产业&#xff0c;在人们生活水平提高的同时&#xff0c;从…
阅读更多...
联盟 | Quick Creator X HelpLook ，AI助力打造出海企业内容营销

联盟 | Quick Creator X HelpLook ，AI助力打造出海企业内容营销

随着人工智能的快速发展&#xff0c;各行各业也加快了人工智能工具的探索&#xff0c;积极将AI融入到行业发展中&#xff0c;出海外贸也不例外。AI渐渐地融入到外贸的各个环节&#xff0c;为企业出海提速增效。 为此&#xff0c;「 Quick Creator 」与 「 HelpLook 」达成战略合…
阅读更多...
Leadshop开源商城小程序源码 – 支持公众号H5

Leadshop开源商城小程序源码 – 支持公众号H5

Leadshop是一款出色的开源电商系统&#xff0c;具备轻量级、高性能的特点&#xff0c;并提供持续更新和迭代服务。该系统采用前后端分离架构&#xff08;uniappyii2.0&#xff09;&#xff0c;以实现最佳用户体验为目标。 前端部分采用了uni-app、ES6、Vue、Vuex、Vue Router、…
阅读更多...
WordPress 媒体库文件夹管理插件 FileBird v5.5.4和谐版下载

WordPress 媒体库文件夹管理插件 FileBird v5.5.4和谐版下载

FileBird是一款WordPress 按照文件夹管理方式的插件。 拖放界面 拖放功能现已成为现代软件和网站的标配。本机拖动事件&#xff08;包括仅在刀片中将文件移动到文件夹以及将文件夹移动到文件夹&#xff09;极大地减少了完成任务所需的点击次数。 一流设计的文件夹树展示 我们…
阅读更多...
图解分布式事务实现原理（一）

图解分布式事务实现原理（一）

参考 本文参考https://zhuanlan.zhihu.com/p/648556608&#xff0c;在小徐的基础上做了个人的笔记。 分布式事务场景 事务核心特性 在聊分布式事务之前&#xff0c;我们先理清楚有关于 “事务” 的定义. 事务 Transaction&#xff0c;是一段特殊的执行程序&#xff0c;其需…
阅读更多...
STM32与ZigBee技术在智能家居无线通信中的应用研究

STM32与ZigBee技术在智能家居无线通信中的应用研究

一、引言 智能家居系统是利用物联网技术将家庭各种设备进行互联互通&#xff0c;实现智能化控制和管理的系统。在智能家居系统中&#xff0c;无线通信技术起着至关重要的作用&#xff0c;而STM32微控制器和ZigBee技术则是实现智能家居无线通信的关键技术。本文将对STM32与ZigB…
阅读更多...
C/C++最大质数 2021年9月电子学会青少年软件编程（C/C++）等级考试一级真题答案解析

C/C++最大质数 2021年9月电子学会青少年软件编程（C/C++）等级考试一级真题答案解析

目录 C/C比n小的最大质数 一、题目要求 1、编程实现 2、输入输出 二、算法分析 三、程序编写 四、程序说明 五、运行结果 六、考点分析 C/C比n小的最大质数 2021年9月 C/C编程等级考试一级编程题 一、题目要求 1、编程实现 对于给定的n&#xff0c;求比n小的质数中…
阅读更多...
Spring-IoC与DI入门案例

Spring-IoC与DI入门案例

IoC入门案例 IoC入门案例思路分析 管理什么&#xff1f;&#xff08;Service与Dao&#xff09;如何将被管理的对象告知IoC容器&#xff1f;&#xff08;配置&#xff09;被管理的对象交给IoC容器&#xff0c;如何获取到IoC容器&#xff1f;&#xff08;接口&#xff09;IoC容…
阅读更多...
代码随想录算法训练营第五十一天|309. 买卖股票的最佳时机含冷冻期、714. 买卖股票的最佳时机含手续费

代码随想录算法训练营第五十一天|309. 买卖股票的最佳时机含冷冻期、714. 买卖股票的最佳时机含手续费

第九章 动态规划part12 309. 买卖股票的最佳时机含冷冻期 给定一个整数数组prices&#xff0c;其中第 prices[i] 表示第 i 天的股票价格 。​ 设计一个算法计算出最大利润。在满足以下约束条件下&#xff0c;你可以尽可能地完成更多的交易&#xff08;多次买卖一支股票&…
阅读更多...
STM32 独立看门狗

STM32 独立看门狗

目录 1.独立看门狗介绍 2.独立看门狗本质 3.独立看门狗框图​编辑 4.独立看门狗时钟 5.预分频寄存器&#xff08;IWDG_PR)​编辑 6.重装载寄存器&#xff08;IWDG_RLR) 7.键寄存器&#xff08;IWDG_KR) 8.独立看门狗实验和代码示例 9.独立看门狗和窗口看门狗的异同点 …
阅读更多...
GB/T 1032-2023 三相异步电机试验方法 笔记

GB/T 1032-2023 三相异步电机试验方法 笔记

仅仅是为了技术分享。如有侵权请随时告知&#xff0c;我会尽快删除相关内容&#xff0c;谢谢&#xff01; 1.阻值的温度效应 7.x 2.温升与负载电 7.x 3.力矩修正公式及功率公式 8.3 3.1铁损和铜损测量 4.空载特性曲线 9.3 4.1 空载损耗 5.堵转特性 6.剩余损耗 6.1 另一种由转子…
阅读更多...
自己动手实现一个深度学习算法——六、与学习相关的技巧

自己动手实现一个深度学习算法——六、与学习相关的技巧

文章目录 1.参数的更新1&#xff09;SGD2&#xff09;Momentum3&#xff09;AdaGrad4&#xff09;Adam5&#xff09;最优化方法的比较6&#xff09;基于MNIST数据集的更新方法的比较 2.权重的初始值1&#xff09;权重初始值不能为02&#xff09;隐藏层的激活值的分布3&#xff…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023