CSS分类

1.内联样式表

样式写在标签内部，可以控制当前标签的样式，特殊情况使用

2.内部样式表

写到<head>标签中，脱离结构，可以控制当前页面的所有标签，较为常用

3.外部样式表

单独新建一个CSS文件，完全脱离结构，可以控制整个网站的所有标签，最常用

CSS选择器

CSS选择器是CSS规则的第一部分。它是选择HTML元素的方法（选择标签）

CSS属性：采取键值对形式。属性名：属性值（选择样式）

p{
color：pink；

font-size：14px；

}

p{}是选择器，括号内部的是属性

类选择器

类名自定义，不能是中文、纯数字
多个英文单词组成尽量使用-链接
命名要有意义，尽量见名知义
class属性可以有多类名中间用空格隔开

id选择器

选择HTML中具有特定id属性的唯一元素

CSS

#header{

color：red；

}

#id名{样式声明；···}

HTML

<标签 id="id名">

id和类区别

类选择器

语法：以 . 开头，后跟类名（如 .nav）
作用：选择class属性的一个或多个元素
特点：可以使用多次
类似：身份证的名字，可以使用多次
场景：后期修改样式基本都是类选择器

id选择器

语法：以 # 开头，后跟id名（如#header）
作用：选择特定id属性的唯一元素
特点：同一页面中，id值必须唯一（不能重复）
类似：身份证的编号，唯一，只能用一次
场景：后期主要是配合JavaScript添加交互效果

基础选择器总结

选择器类型	语法示例	匹配范围	复用性	典型使用场景	注意事项
类型选择器	div{···}	匹配所有指定HTML标签元素	某一类型标签	全局样式重置、基础标签样式（如body，p）	避免滥用，可能导致样式冲突
类选择器	.nav{...}	匹配所有指定class的元素	多次使用	多元素共享样式	优先使用，避免与ID选择器冲突
ID选择器	#header{}	匹配唯一含指定id的元素	唯一性	唯一元素标识	必须唯一，避免样式覆盖风险
通配符选择器	*{...}	匹配所有元素	全局覆盖	全局样式重置	性能较差，慎用

大部分情况下，我们使用类选择器，是最重要的

关系选择器

关系选择器是通过位置关系来选择目标元素（标签），可以更精准选择某些元素。常见的有：

后代选择器

.box p{

color:pink

}

子代选择器

选择某个元素的直接子元素（仅限一层）可理解为亲儿子

.box>p{

color:pink

}

邻接兄弟选择器

h2+p{

color:red

}

通用兄弟连接器

h2~p{

color:blue

}

关系选择器总结

选择器	语法	选择范围	实例
后代选择器	A B	所有后代（跨层级）	ul li{color：pink；}
子代选择器	A>B	直接子元素（仅一层）	div>span{color:pink;}
临界兄弟	A+B	紧邻的下一个同级元素	h2+p{}标题后的第一个p元素
通用兄弟选择器	A~B	A之后的所有同级元素	h2~p{}标题后的所有元素

后代选择器是我们最常用的

CSS文本样式

CSS文本样式用于控制网页中文字的外观，包括字体、颜色、对齐、间距等，主要分为两大类：

1.字体样式

比如使用哪种字体，字体大小，字体粗体、斜体，等等

字体样式	说明
color	设置字体样式
font-family	字体族
font-size	字体大小
font-style	字体风格
font-weight	字体粗体
text-decoration	字体装饰

关键字

这些颜色通常不会在生产环境的网站中使用，主要学习使用。比如：red、green、blue、pink发、等。例如：p{color：pink}

十六进制

这个是开发最常用的。实际开发中，我们从设计稿直接复制即可。比如红色#FF0000或者#F00

例如：p{color：#f00}

rgb模式

rgb（）函数接受三个参数，分别表示颜色的红、绿和蓝。也是设计稿复制的

比如：红色rbg（255，0，0）

例如p{color：rgb（255，0，0）}

另有：rbga（255，0，0，0.3）文字透明

最后一个数值取值0~1

0完全透明，1完全不透明

字体颜色最常见的颜色指定方式：使用关键字，十六进制值和rgb（）值。

学习可以用关键字，开发用十六进制，特殊情况用rgb

2.文本布局

比如文本对齐、行高、字间距、首行缩进等

注意：文字是无法直接通过CSS来更改样式的，必须要用适合的标签来包裹它们，本质是修改标签样式，里面文字跟对样式变化