本文详细介绍了CSS（层叠样式表）的基本概念，包括外部样式表、内部样式表和行内样式表的使用。同时，重点阐述了CSS选择器的运用，如id选择器、class选择器、后代选择器、兄弟选择器和群组选择器，并通过实例展示了它们的用法。文章还强调了id的唯一性和class的复用性，以及样式表的优先级。最后，提供了相关的编程练习题，帮助读者巩固理解。
一、CSS简介
CSS，指的是“Cascading Style Sheet（层叠样式表）”，是用来控制网页外观的一门技术。HTML是网页的结构，CSS是网页的外观，JavaScript是网页的行为。
1.1 外部样式表
外部样式表在单独文件中定义，然后在HTML文件的<head></head>标签对中使用link标签来引用。
<link rel="stylesheet" type="text/css" href="文件路径" />
1.2 内部样式表
内部样式表，指的是把HTML代码和CSS代码放到同一个HTML文件中。
<style type="text/css">
……
</style>
1.3 行内样式表
内部样式表的CSS是在“style标签”内定义的，而行内样式表的CSS是在“标签的style属性”中定义的。
<div style="width=100px;"></div>
三种样式表的优先级中，行内样式表示最高的，它是最优先起作用的。
二、css选择器
2.1、id
•id属性具有唯一性，也就是说在同一个页面中相同的id只能出现一次。例如如下html代码：
<div id="myDiv">
My id selector test
</div>
在div标签内部 id=“xxx” 就表示本div的id是xxx，我们在css里面就可以用这个id来选择该标签，css里面针对该id的所有样式设计，只有对该标签有效
比如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#myDiv{
color: red;
}
</style>
</head>
<body>
<div id="myDiv">
My id selector test,我是有id的。
</div>
<div>
我没有id
</div>
</body>
</html>
以上html文件，保存后用浏览器打开，我们会发现，只有id=“myDiv”的标签字体是红色的，另一个没有设置id，字体是默认颜色。
2.2、class
•class属性不具有唯一性，我们可以为同一个页面的相同元素或者不同元素设置相同的class，然后使得相同的class的元素具有相同的CSS样式。
•id就像你的身份证号，而class就像你的名字（实际使用的时候，浏览器为了兼容性更好一点，有时候也没有区分的那么严格，我们只需要知道理论上是这个意思就对了）
class示例,在div标签内部 class=“xxx” 就表示本标签是属于xxx类的。
<div class="active">
My id selector test,我是有id的。
</div>
<h1 class="active">class selecotr</h1>
<csmcreate class="active">我自己创造的标签</csmcreate>
css里面定义的xxx类的样式，对所有标识class="xxx"的标签都会起作用。设计以下html代码，并运行看结果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.active {
color: white;
background-color: blue;
}
</style>
</head>
<body>
<div class="active">
My class selector test,我是有id的。
</div>
<div >
我没有设置class
</div>
<h1 class="active">class selecotr</h1>
<csmcreate class="active">我自己创造的标签</csmcreate>
</body>
</html>
有时候，id和class也混合使用（不建议采用这样的做法，我们设计的原则是尽量简洁，如果一个标签具有id又有class，比较容易混乱
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.active {
color: white;
background-color: blue;
}
#myId {
color: red;
background-color: black;
}
</style>
</head>
<body>
<div id="myId" class="active">
My class selector test,我是有id的。
</div>
<div id="myId">
我没有设置class
</div>
<h1 class="active">class selecotr</h1>
<csmcreate class="active" id="myId">我自己创造的标签</csmcreate>
</body>
</html>
设计并运行以上代码，观察一个标签同时指定id和class的时候，id会优先起作用。
2.3、css常用选择器
•选择器是一种选择方式。选中你想要的元素的方式，我们称之为“选择器”。
•在CSS中，有很多可以把你想要元素选中的方式，这些不同的方式其实就是不同的选择器。
•可以用某一种选择器来代替另外一种选择器，方式不同，但是目的相同。
可以这么理解，我们设置了一个样式，比如蓝底白字，如果我们希望页面上面的什么标签呈现出蓝底白字的效果，那我们就需要用选择器来选择需要呈现出这种效果的标签。
•最常用的选择器有5种：元素选择器、id选择器、class选择器、后代选择器、群组选择器；
•语法如下：
选择器
{
属性1 : 取值1;
……
属性n : 取值n;
}
css 常用的选择器有五种
2.3.1、标签选择器
标签选择器，就是“选中”相同的标签，然后对相同的标签定义同一个CSS样式。
标签选择器直接用标签名称命名。比如"div"。
如果你希望整个页面的所有div标签都是蓝底白字，你可以采用div选择器做样式，示例如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
color: white;
background-color: blue;
}
</style>
</head>
<body>
<div>
My class selector test,我是有id的。
</div>
<div>
我没有设置class
</div>
<h1>我不是div</h1>
<csmcreate>我自己创造的标签</csmcreate>
</body>
</html>
运行以上代码，我们发现所有的div标签都是蓝底白字
2.3.2、id选择器
我们可以为元素设置一个id属性，然后针对设置了这个id的元素定义CSS样式，这就是id选择器。
id选择器用“#”+Id组成，比如#my-div，其中"my-div"是标签的Id
示例：参考2.1的示例
2.3.3、class选择器
class选择器，也就是“类选择器”。通常都做法是：样式只针对一个特定的标签我们采用id选择器，样式针对所有同一种标签，我们可以考虑元素选择器。更多时候，我们设置好某个样式之后，我们希望可以自己定义一种“类”，只要是属于我们定义的类的元素，不论是什么标签，都可以呈现出我们设计的样式，那么class选择器是一个不错的选择。它可以对“相同的元素”或者“不同的元素”定义相同的class属性，然后针对拥有同一个class的元素进行CSS样式操作。
class选择器用“."+类名称组成，比如.active,其中"active"是我们定义的类名称
示例：参考2.2的示例
2.3.4、后代选择器
后代选择器，就是选择元素内部中所有的某一种元素，包括子元素和其他后代元素（“孙元素”）。比如，我们希望只是我们指定的id里面的所有div是蓝底白字，我们不能使用标签选择器，因为它会导致所以不是指定id的标签也受影响。我们也不能使用id选择器，因为它不能影响到它的所有子孙元素。这个时候后代选择器是一种不错的选择。
后代选择器的写法是在父选择器后面书写，和父选择器中间用空格隔开。比如#my-div div，或是：.active div
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.active div {
color: white;
background-color: blue;
}
</style>
</head>
<body>
<div class="active">
我是active类
<div>
|--我是active的子元素
<div>
|----我是active的孙元素
</div>
</div>
</div>
</body>
</html>
运行以上示例，我们发现active本身不呈现蓝底白字，它的子孙元素都呈现出了蓝底白字。
2.3.5、兄弟选择器
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器。
相邻兄弟选择器使用了加号，比如h1+p
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.active div+p {
color: white;
background-color: blue;
}
</style>
</head>
<body>
<div class="active">
我是active类
<div>
|--我是active的子元素
<div>
|----我是active的孙元素
</div>
</div>
<p>
我是紧跟在div后的第一个p标签
</p>
<p>
我是紧跟在div后面的第二个p标签
</p>
</div>
</body>
</html>
运行以上代码，发现只有紧跟在div后面的第一个p标签呈现蓝底白字。
2.3.6、群组选择器
群组选择器，指的是同时对几个选择器进行相同的操作。和兄弟选取器不同的是：群组选择器是选择器里面的都受样式影响，兄弟选择器里面一般来说就是只有一个受到影响。
群组选择器用逗号分隔不同元素，比如：h1,p
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.active h1, p {
color: white;
background-color: blue;
}
</style>
</head>
<body>
<div class="active">
我是active类
<div>
|--我是active的子元素
<div>
|----我是active的孙元素
</div>
</div>
<p>
我是紧跟在div后的第一个p标签
</p>
<p>
我是紧跟在div后面的第二个p标签
</p>
<h1>我是h1</h1>
<h2>我是h2</h2>
</div>
<h1>我是在非active元素内的h1</h1>
</body>
</html>
运行以上代码，体会群组选择器。
三、作业
一、单选题
1、每一个样式声明之后，要用（ ）表示一个声明的结束
A. 逗号 B. 分号 C. 句号 D. 顿号
2、下面哪一项是CSS正确的语法结构？（ ）
A. body:color=black B. {body;color:black}
C. {body:color=black;} D. body{color:black;}
3、下面有关id和class的说法中，正确的是（ ）
A. id是唯一的，不同页面中不允许出现相同的id
B. id就像你的名字，class就像你的身份证号
C. 同一个页面中，不允许出现两个相同的class
D. 可以为不同的元素设置相同的class来为他们定义相同的css样式
4、下面有关选择器的说法中，不正确的是（ ）。
A. 在class选择器中，我们只能对相同的元素定义相同的class属性
B. 后代选择器选择的不仅是子元素，还包括它的其他后代元素（如“孙元素”）
C. 群组选择器可以对几个选择器进行相同的操作
D. 想要为某一个元素定义样式，我们可以使用不同的选择器来实现
二、编程题
下面有一段代码，如果我们想要选中所有的div和p，请分别用2种不同的选择器方式来实现。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div></div>
<p></p>
<p></p>
<strong></strong>
<span></span>
</body>
</html>
扫一扫
682
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
