本文详细介绍了CSS中的各种选择器，包括基础选择器（标签选择器、类选择器、ID选择器和通配符选择器）和复合选择器（后代选择器、子选择器、并集选择器），以及如何使用它们来设置样式。此外，还涵盖了CSS的字体属性、文本属性和三种样式表（行内、内部和外部）。文章还提及了emmet语法提高编码效率，以及伪类选择器在链接样式中的应用。
(1)css里面的属性和属性值是以键值对的形式存在的
eg:p {
color:red;
}
(2)选择器分类：
基础选择器和复合选择器
基础选择器：标签选择器，类选择器，id选择器和通配符选择器
复合选择器：
(3)标签选择器：
为某一类是标签设置样式
格式：
标签名 {
属性名：属性值；
属性名：属性值；
属性名：属性值；
...
}
如p {
color:red;
}
(4）类选择器：
差异化选择不同的标签
.类名 {
属性名：属性 值；
属性名：属性值；
属性名：属性值；
...
}
如.red {
color: red;
}
<div class="red">我也想</div>
多类名使用方式：以空格分开
<div class="red font20">开心<div>
把相同的部分抽取到一个类选择器来进行复用
（5）id选择器：
#pink {
color:red;
}
<div id="pink">第四个</div>
与类选择器的区别：id选择器只能调用一次
（6）通配符选择器：
通配符选择器使用"*"来定义，它表示选取页面中所有的元素（标签）
*{
属性名：属性值；
属性名：属性值；
属性名：属性值；
...
}
(7)CSS字体属性：
如：h2 {
font_family: "Microsoft Yahei";设置字体系列
font-size: 20px;设置字体大小,其中标题标签比较特殊，需要单独设置
font-weight：bold 设置字体的粗细,可以通过数字来设置，700等价于bold，加粗，400等于normal，注意，不要带px
font-style:italic 设d置文字风格 italic 倾斜 normal正常
font : font-style font-weight font-size/line-height font-family 复合属性，注意顺序,其中font-size和font-family必须写，其他可以不写
如font : ialic 700 16px "Microsoft yahei"
}
(8)CSS文本属性：
如：div {
color:deeppink 或者 color:#FF0000 或 rgb(255,0,0) 文本的颜色
text-align: center; 设置元素内文本内容的水平对齐方式,在盒子内
text-decoration:underline 添加到文本的修饰，如下划线，删除线(line-through)
删除下划线：text-decoration:none;
text-indent: 20px 设置文本的第一行缩进 em相当于一个文字的大小
text-indent: 2em 设置当前元素两个字的距离
line-light: 26px 设置行高：其中行高为上间距加下间距加文本高度
}
(9)CSS的三种样式表
行内样式表：
通过元素标签内部的style属性中设定CSS样式。
适合修改简单样式
<p style="color: pink">
内部样式表（内嵌样式表）：
写到html页面内部，是将所有的CSS代码抽取出来，单独放到一个<style>标签中，一般<style>是放到<head>标签内。控制的是整个html页面，没有将结构与样式完全分离
eg:
<style>
div {
color: red;
font-size: 12px;
}
</style>
外部样式表：
是将样式单独写到CSS文件中，然后把CSS文件引入到HTML页面中使用。
步骤：1.新建一个CSS文件
2.在HTML中引入CSS文件,一般是在<head>标签里面加入一下代码
<link rel="stylesheet" href="css文件路径">
emmet语法：元素首字母加属性值可以快速生成代码：
如：h100px->height:100px;
格式化代码：格式化文档：Shift+Alt+F
(10)复合选择器
后代选择器（重要）：
元素1 元素2 {样式声明}
元素1和元素2都是基础选择器且元素2是元素1的后代，可以是儿子也可以是孙子，最后改变的是元素2的样式
元素1里面所有的元素2（后代元素）
如:
ol li {
color: red;
}
.nav li a {
color:yelow;
}
子选择器：
只能选择作为某元素鹅最近一级子元素。简单理解就是选亲儿子元素
元素1>元素2 {
样式声明
}
改变的是元素2
div>p {
color: red;
}
并集选择器：
并集选择器可以选择多组标签，同时为他们定义相同的样式，用于集体声明
并集选择器是各选择器通过英文逗号（,）连接而成，任何形式的选择器都可以作为并集选择器的一种
元素1，元素2{
样式声明
}
伪类选择器：
伪类选择器用于向某个选择器添加特殊的效果，比如给链接添加特殊效果，或选择第一个，第n个元素。
它最大的特点就是用冒号（：）表示，比如：hover,:first-child.
伪类选择器有很多，比如有链接伪类，结构伪类等，所以之后这里先给大家讲解常用的链接伪类选择器。
伪类链接选择器：
a:link 选择所有未被访问的链接
a:visited 选择所有已被访问的链接
a:hover 选择鼠标指针位于其上的链接
a:active 选择活动链接（鼠标按下未弹起的链接）
必须按照上面的顺序来编写
现实开发中最常用的是a:hover
如：
a {
color:black;
text-decoration:none
}
a:hover {
color:blue
text-decoration:underline
}
focus伪类选择器：
用于选取获得交点的表单元素：
如：
input:focus {
background-color:yellow
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
