1 CSS基本语法
1.1 基本特性
由选取器、属性、属性值三部分形成 selector {property: value}
1.2 引用办法
行内样式
<div style="color: red;"...
内部样式表
<head>
<style type="text/css">
</style>
...
</head>
外边样式表（页面加载的同期亦加载css样式表，倘若多个页面引用同一个css样式，则没需重复加载）
<link href="./css/1.css" rel="stylesheet" type="text/css"/>
导入式（1.页面加载慢的时候可能会有问题 2.存在浏览器兼容性问题）
<style type="text/css">
@import url("./css/1.css");
</style>
1.3 引用优先级
行内样式 > 内部样式（内部定义 > @import引入） > 外边样式
注：链入外边样式和内部样式的优先级取决于离渲染的标签的位置，越近优先级越高（就近原则）
2 CSS选取器
2.1 选取器（标签选取器和类选取器）
标签选取器：标签名为选取器，引用该样式的页面的对应标签都会运用该样式
类选取器：
1.标签中的class属性值为选取器，以点开头，并且在html页面中能够被多次调用
2.一个标签能够加载多个类选取器，用空格隔开。不一样式进行叠加，冲突样式属性已最下面的样式的属性为准（就近原则）
2.2 选取器（ID选取器）
同一个id值不可赋给多个标签，但同一个ID选取器在CSS样式设置时，能够被多次运用。
<style type="text/css">
#diTest{
font-size: 60px;
}
#diTest{
color: blueviolet;
}
</style>
2.3 群组选取器和全局选取器
群组选取器（能够将任意多个选取器分组在一块，例如元素选取器、类选取器、ID选取器等）
p.classChoose,#diTest{text-decoration: underline}
全局选取器
*{text-decoration: underline}
2.4 后代选取器
1.写法（用空格隔开）：
h5.class em{color: blueviolet}
#id em{color: blueviolet}
2.优先级高于类选取器
2.5 伪类选取器
1.语法：选取器:伪类标识{}
2.应用场景：区别状态下表示不一样式
3.链接伪类的书写次序：:link > :visited > :hover > :active
a:hover必要置于a:link和a:visited之后，才有效，a:active必要在a：hover之后，才有效。而link、visited两个伪类之间次序没所说，谁在前都能够。
3 CSS继承、层叠和优先级
3.1 继承和层叠
1.继承：子元素能够从父元素处继承部分样式
字体体积、颜色能够继承，border没法继承
兼容性问题：IE6以下版本预览器无继承特性
默认样式与继承样式冲突时，默认运用默认样式。针对有默认样式的元素，例如h1标签的默认字体体积为2倍于预览器的默认字体（16px），倘若设置body标签选取器的字体大小为12px，则h1的体积就为24px
2.层叠
可定义多个样式
不冲突时，多个样式层叠为一个
冲突时，按照样式的优先级来应用样式
3.2 选取器优先级
id选取器 > class选取器（class属性有多个样式时，按样式的定义就近原则，与引用的次序无关系） > 标签选取器
3.3 权值
权值相同
| 
发表于 2024-6-30 10:59:23
