CSS : Cascading Style Sheet 层叠式样式表
HTML 用于控制网页的结构，CSS则用于控制网页的外观，想要做出美观好看的网页，CSS是必须的
引入外部样式表：
它的属性 rel 和 type是固定的
语法：
<link rel="stylesheet" type="text/css" href="CSS文件路径" />
引入内部样式表
type属性也是固定的
语法：
<style type="text/css">
...
</style>
引入行内样式表
语法：
<!DOCTYPE html>
<html>
<head>
<title>表单</title>
<meta charset="utf-8"/>
</head>
<body>
<div style="color:red";> 这里有一段红色字体的话</div>
<div style="color:green";> 这里有一段绿色字体的话</div>
<div style="color:yellow";> 这里有一段黄色字体的话</div>
</body>
</html>
效果：
CSS选择器
HTML中有两个属性，如下：
id属性
id具有唯一性，不可重复
class属性
class元素可以重复
CSS选择器 – 元素选择器
<!DOCTYPE html>
<html>
<head>
<title>表单</title>
<meta charset="utf-8"/>
<style type="text/css">
div{color:red;}
</style>
</head>
<body>
<div>这里有一段红色字体的话</div>
<p>这里是另外一段话</p>
</body>
</html>
由于选择的元素是 div元素，所以只有div项能显示红色字体
效果：
CSS选择器 – id选择器
之前提到 id 是唯一的，可以用在这里进行选择
用法：
<!DOCTYPE html>
<html>
<head>
<title>表单</title>
<meta charset="utf-8"/>
<style type="text/css">
#x{color:red;}
</style>
</head>
<body>
<div id="x">这里有一段红色字体的话</div>
<p>这里是另外一段话</p>
<div>这里还有一段话</div>
</body>
</html>
这里我定义了一个id叫做 x , 然后css选择器使用了 #x 选择了 id选择器。
效果：
CSS选择器 – class选择器
用法：
<!DOCTYPE html>
<html>
<head>
<title>表单</title>
<meta charset="utf-8"/>
<style type="text/css">
.x{color:red;}
</style>
</head>
<body>
<div class="x">这里有一段红色字体的话</div>
<p>这里是另外一段话</p>
<div>这里还有一段话</div>
<div class="x">这里好像还有一段红色字体的话</div>
</body>
</html>
如例：
这里我有两个class，都叫做x,我使用 .x 选择器选中，相同class都会吃到样式
CSS选择器 – 后代选择器
用法：
这里我们使用id="x", id="y" 分别定义了父类x,y,然后分别设定了父类下的属性的样式
可以看到下面
<!DOCTYPE html>
<html>
<head>
<title>表单</title>
<meta charset="utf-8"/>
<style type="text/css">
#x div{color:red;}
#y p{color: brown;}
</style>
</head>
<body>
<div class="x">这里有一段红色字体的话</div>
<p>这里是另外一段话</p>
<div>这里还有一段话</div>
<div class="x">这里好像还有一段红色字体的话</div>
<div id="x">
<div>x---123</div>
<p>y --- 123 </p>
</div>
<div id="y">
<div>CSS</div>
<P> XAS </P>
</div>
</body>
</html>
结果：
CSS选择器 – 群组选择器
用法：
使用p, div {color:blue;} 定义群组 p和 div都显示蓝色字体，没有覆盖后代选择器定义的颜色文章来源：https://www.toymoban.com/news/detail-803669.html
<!DOCTYPE html>
<html>
<head>
<title>表单</title>
<meta charset="utf-8"/>
<style type="text/css">
#x div{color:red;}
#y p{color: brown;}
p, div {color:blue;}
</style>
</head>
<body>
<div class="x">这里有一段红色字体的话</div>
<p>这里是另外一段话</p>
<div>这里还有一段话</div>
<div class="x">这里好像还有一段红色字体的话</div>
<h6>h6-1</h6>
<div id="x">
<div>x---123</div>
<p>y --- 123 </p>
<h6>h6</h6>
</div>
<div id="y">
<div>CSS</div>
<P> XAS </P>
</div>
<div class="y">
<div>CSS</div>
<P> XAS </P>
</div>
<div class="y">
<div>CSS</div>
<P> XAS </P>
</div>
</body>
</html>
效果：
可以看到貌似两个父类下的所有未定义字体颜色的元素都变成了蓝色，而父类外的，也没被群组定义的，字体颜色未改变
文章来源地址https://www.toymoban.com/news/detail-803669.html
到了这里，关于HTML---CSS-引入样式表和选择器的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
