本文详细介绍了CSS中的基础选择器，包括标签选择器、类选择器、ID选择器和通配符选择器，强调了它们的特点和使用场景。类选择器允许差异化选择，而ID选择器具有唯一性，适合配合JavaScript使用。此外，还提到了复合选择器的使用，如后代选择器、子选择器、并集选择器和伪类选择器，以及如何通过它们进行元素的样式控制。最后，文章讨论了元素显示模式和背景属性，包括背景颜色、图片、平铺、位置和固定等概念。
1、标签基础选择器
1.1、标签选择器
标签选择器的作用是为页面中某一类标签指定统一的CSS样式
优点是能快速为页面中同类型的标签统一设置样式
缺点是不能设计差异化样式，只能选择全部的当前标签
标签名 {
属性1: 属性值1;
}
ul {
}
规范：属性值前面，冒号后面，保留一个空格 标签名和大括号中间保留空格
1.2、类选择器
如果想要差异化选择不同的标签，单独选一个或者几个标签，可以使用类选择器
.类名 {
属性1: 属性值1;
.....
}
.red {
color: red;
}结构需要用class属性来调用
<div class='red'> 变红色 </div>
注意：
类选择器在 HTML 中以 class 属性表示，在CSS中，类选择器以一个点 . 号表示
记忆口诀：样式点定义，结构类调用
1.2.1、类选择器多类名
我们可以给一个标签指定多个类名，简单理解就是一个标签有多个名字
林晓
在标签 class 属性中写多个类名
多个类名中间必须用空格分开
这个标签就可以分别具有这些类名的样式
多类名开发中使用场景：
可以把一些标签元素相同的样式(公共的部分)放到一个类里面
这些标签都可以调用这个公共的类，然后再调用自己独有的类
从而节省CSS代码，统一修改也方便
1.3、id选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式
HTML 元素以 id属性 来设置 id 选择器，CSS中 id 选择器 以 “#” 来定义
<style>
#pink {
color:pink;
}
</style>
<body>
<div id="pink">秦大林子</div>
</body>
注意：
id 属性只能在每个 HTML 文档中出现一次。
记忆口诀：样式 # 定义，结构 id 调用。只能调用一次，别人切勿使用
1.3.1、区别
id选择器和类选择器的区别？
类选择器（class）好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用
id 选择器好比人的身份证号码，全中国是唯一的，不得重复。
id 选择器和类选择器最大的不同在于使用次数上
类选择器在修改样式中用的最多，id 选择器一般用于页面唯一性的元素上，经常和 JavaScript 搭配使用。
记忆口诀：
样式点定义，结构类调用
样式 # 定义，结构 id 调用
1.5、通配符选择器
CSS 中， 通配符使用 * 定义，它表示选取页面中所有元素(标签)。
{
属性1：属性值1;
....
}
通配符选择器不需要调用，自动就给所有的元素使用样式
一般是用于清楚元素标签的内外边距
{
margin: 0;
padding: 0;
}
1.6、基础选择器总结
基础选择器 作用 特点 使用情况 语法
标签选择器 可以选出所有相同的标签 不能差异化选择 较多 p {color: red}
类选择器 可以选出1个或者多个标签 可以根据需求选择 非常多.nav {color: red}
id 选择器 一次只能选择1个标签 ID 属性只能在每个 HTML 文档中出现一次 一般和 js 搭配 #nav {color: red}
通配符选择器 选择所有的标签 选择的太多，有部分不需要 特殊情况使用 * {color: red}
2、CSS字体属性
CSS 字体属性用于定义字体系列、大小、粗细和文字样式(如斜体)
2.1、font-family
CSS 使用 font-family 属性设置文本的字体系列
div { font-family:Arial,"Microsoft Yahe","微软雅黑"; }
各种字体之间必须使用英文状态下的逗号隔开
一般情况下，如果有空格隔开的多个单词组成的字体，加引号
最常见的几个字体：
<
最低0.47元/天 解锁文章
扫一扫
922
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
