CSS

最新推荐文章于 2024-03-03 12:59:43 发布

weixin_49717132

最新推荐文章于 2024-03-03 12:59:43 发布

阅读量51

点赞数

本文链接：https://blog.csdn.net/weixin_49717132/article/details/107689067

版权

css
1、入门
1) 什么是css
层叠样式表，用于修饰页面元素【人靠衣装马靠鞍，狗配铃铛跑的欢】

	层叠
		多个样式表修饰同一个元素
	样式表(声明块)
		{
			color:#fff;
		}

2) css语法
	选择器 {
		样式名:样式值;
		样式名:样式值;
		...
	}

3) css可读性【MDN】
	1. 空白字符
		空格、tab字符和换行
		.class {
			color:'red';
			font-size:18px;
		}
	2. 注释  ctrl + /
		/* 注释 */
		作用：
		 	解释说明，便于代码维护和管理
	3. 速写
		padding-top:5px;
		padding-right:10px;
		padding-bottom:15px;
		padding-left:20px;
		==>等价于
		padding: 5px 10px 15px 20px;
	4. 选择器组
		.one , .two , .three {
			color:'red';
		}

4) 在html中如何应用css
	1. 内部style标签【内部样式表】
		将样式添加到head标签中的style标签里
		<style></style>

	2. 内联style属性【内联样式表】
		在元素中添加style属性
		<div style="width:100px;height:100px;"></div>

	3. 外部link导入【外部样式表】
		将样式单独抽离出来，写成一个css文件，在head标签中通过link标签导入
		<link rel="stylesheet" href="">

	4. @import导入
		将样式单独抽离出来，写成一个css文件，在style标签内通过@import导入路径
		<style>
			@import './test.css';
		</style>

	link和@import的区别
		1) 所属范围
			@import 是css的语法，只能导入样式
			link是html的标签，不仅可以加载样式，还可以定义rel属性
				rel="stylesheet"表示调用外部样式表
		2) 加载顺序
			页面加载的时候，link标签引入的css被同时加载
			@import引入的css在页面加载完毕后再被加载
		3) 兼容性
			@import需要兼容IE5+
			link标签，不存在兼容性问题

2、选择器
1) 基本选择器
标签选择器
含义：根据指定的标签名，在当前文件中找到所有该名称的标签，设置属性
格式：
标签名 {
样式名:样式值
}
注意：
1. 标签选择器选中的是当前文件中所有的标签, 而不能单独选中某一个标签
2. 标签选择器无论标签藏得多深都能选中
3. 只要是HTML中的标签就可以作为标签选择器

	类选择器
		含义: 根据指定的类名找到对应的标签, 设置属性
		格式:
			.类名{
				属性:值;
			}
		注意:
			1. 在同一个文件中的class可以重复
			2. 使用class选择器时要在class前面加上.
			3. 类名的命名规范和id名称的命名规范一样
			4. 在HTML中每个标签可以同时绑定多个类名
				格式:
				<div class="类名1 类名2 ..."></div>
				错误的写法:
				<p class="para1" class="para2"></p>

	id选择器
		含义：根据指定的id找到对应的标签，设置属性
		格式：
			#id {
				样式名:样式值
			}
		注意：
			1. 在同一个文件中的id不可以重复
			2. 使用id选择器时要在id前面加上#
			3. id有一定的规范
				id的名称只能由字母/数字/下划线
					a-z 0-9 _
				id名称不能以数字开头
				id名称不能是HTML标签的名称

	逗号选择器
		含义: 同时给多个选择器选中的标签设置属性
		格式:
			选择器1,选择器2{
				样式名:样式值
			}
		注意:
			1. 逗号选择器使用,来连接
			2. 选择器可以使用 标签名称、id、class

	组合选择器【了解】
		含义: 给同时具备多个选择器的标签设置属性
		格式:
			选择器1选择器2{
				样式名:样式值;
			}
		注意:
			1. 选择器和选择器之间没有任何的连接符号
			2. 选择器可以使用 标签名称、id、class
			
	普遍选择器
		含义: 给当前文件所有的标签设置属性
		格式:
			* {
				样式名:样式值;
			}
		
2) 层次选择器
	子代选择器
		含义: 找到指定标签中所有的直接子元素, 设置属性
		格式:
			标签名称1>标签名称2{
				样式名:样式值;
			}
		先找到所有名称叫做"标签名称1"的元素, 然后在这个标签中查找所有第一代子元素名称叫做"标签名称2"的元素
		注意:
			1. 子元素选择器只会查找第一代子元素, 不会查找被嵌套的元素
			2. 子元素选择器之间需要用 > 连接

	后代选择器
		含义: 找到指定标签的所有的后代元素, 设置属性
		格式:
			标签名称1 标签名称2{
				样式名:样式值;
			}
		先找到所有名称叫做"标签名称1"的元素, 然后再在这个元素下面去查找所有名称叫做"标签名称2"的元素, 然后在设置属性
		注意:
		1. 后代选择器必须用空格隔开
		2. 后代不仅仅是儿子, 也包括孙子/重孙子, 只要最终是放到指定标签中的都是后代

	兄弟选择器
		1. 相邻兄弟选择器
			含义: 给指定选择器后面紧跟的那个选择器选中的标签设置属性
			格式:
				选择器1+选择器2{
					属性:值;
				}
			注意:
			1.相邻兄弟选择器必须通过+连接
			2.相邻兄弟选择器只能选中紧跟其后的那个标签, 不能选中被隔开的标签
		2. 通用兄弟选择器
			含义: 给指定选择器后面的选择器选中的所有标签设置属性
			格式:
				选择器1~选择器2{
					属性:值;
				}
			注意:
			1.通用兄弟选择器必须用~连接
			2.通用兄弟选择器选中的是指定选择器后面某个选择器选中的所有标签, 无论有没有被隔开都可以选中

3) 属性选择器
	含义: 根据指定的属性名称找到对应的标签, 然后设置属性
	格式:
		[attribute]
			找到所有具有该属性名的标签, 设置属性
		[attribute=value]
			找到所有属性值为value的标签, 设置属性
		[attribute^=value]
			找到所有以value开头的标签, 无论有没有被-隔开
		[attribute$=value]
			找到所有以value结尾的标签
		[attribute~=value]
			找到拥有独立value的标签, value不可以和其他属性连接
		[attribute*=value]
			只要包含value就可以找到
	最常见的应用场景, 用于区分input
		input[type=password] {

		}
		<input type="text">
		<input type="password">
		<input>

4) 伪类选择器
	在选择器的后面使用: 用于添加特殊的效果
	1. 与子元素相关
		:first-child	选中同级别中的第一个标签
		:last-child		选中同级别中的最后一个标签
		:nth-child(n)	选中同级别中的第n个标签
			数字
			字符
				odd
				even
			
		<p>段落一</p>
		<p>段落二</p>
		<p>段落三</p>
		<ul>
			<li>
				<p>段落四</p>
				<p>段落五</p>
			</li>
		</ul>

	2. 与状态相关
		:link  		未访问的链接
		:hover 		鼠标悬浮时的元素
		:active 	激活链接
		:visited 	已访问的链接
		:focus		聚焦时

5) 伪元素选择器
	在选择器的后面使用:: 用于添加元素
	::after		
	::before

6) 选择器优先级【级联】
	1. !important
		优先级最高，不推荐
	2. 特性值
		1000
			内联style属性
		100
			id			   
		10
			类名选择器、伪类选择器、属性选择器
		1
			标签选择器、伪元素选择器
	3. 代码顺序
		如果样式具有相同的特性值，则看代码顺序，样式离元素近的优先级更高