本文介绍了CSS的三种引入方式：内部样式、外部样式和行内样式，并详细讲解了选择器的概念，包括标签选择器、类选择器、ID选择器以及各种复杂选择器的用法。此外，还讨论了CSS的特性，如继承性、层叠性和优先级规则，并简单提及了显示模式的基本概念。
CSS：（层叠样式表），用来美化HTML文档内容。
一、三种引入方式：
1.内部样式表：CSS代码写在style标签里里面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=u, initial-scale=1.0">
<title>Document</title>
<style>
div {
color: red;
font-size: 30px;
}
</style>
</head>
<body>
<div>我的第一个CSS</div>
</html>2.外部样式表：CSS代码写在单独的CSS文件中，在HTML使用link标签引入。
<link rel="stylesheet" href="./test.css">3.行内样式：配合Javascript使用。
<div style="color: blue;font-size: 30px;">我的第一个CSS</div>二、选择器
1.标签选择器：使用标签名作为选择器，选中同名标签设置相同的样式。
2.类选择器：查找标签，差异化设置标签的显示效果。
步骤：
定义类选择器：.类名
使用类选择器：标签添加class="类名"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=u, initial-scale=1.0">
<title>Document</title>
<style>
.m {
color: blueviolet;
}
.size {
font-size: 40px;
}
</style>
</head>
<body>
<!-- 多个类名，类名之间用空格隔开 -->
<div class="m size">我的第一个CSS</div>
</html>3.id选择器：查找标签，差异化设置标签的显示效果。id选择器一般配合Javascript使用，很少用来设置CSS样式，同一个id选择器在一个页面只能使用一次。
步骤：
定义id选择器：#id名
使用id选择器：标签添加id="id名"
4.通配符选择器：查找页面所有标签设置相同样式，使用 * ，不需要调用，浏览器自动查找页面所有标签，设置相同样式。
5.复合选择器：由两个或多个基础选择器，通过不同方式组合而成，更准确更高效的选择目标标签。
后代选择器：选中某元素的后代元素。写法：父选择器 子选择器（CSS属性），父子选择器之间用空格隔开。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=u, initial-scale=1.0">
<title>Document</title>
<style>
div span {
color:red;
}
</style>
</head>
<body>
<span>第一个span标签</span>
<div>
<span>第二个span标签</span>
</div>
</html>子代选择器：选中某元素的子代元素（最近的子级），写法：父选择器 > 子选择器（CSS属性），父子选择器之间用 > 隔开。
并集选择器：选中多组标签设置相同的样式。写法：选择器1，选择器2，选择器3......，选择器N（CSS）属性，选择器之间用逗号隔开。
交集选择器：选中同时满足多个条件的元素，写法：选择器1选择器2（CSS属性），选择器之间连写，没有任何符号。如果交集选择器中有标签，标签选择器必须写在最前面。
/* 第一个选择器p选择器，第二个选则器.m（类选择器） */
p.m {
color: #000;
}伪类选择器：伪类表示元素状态，选中元素的某个状态设置样式。
鼠标悬停状态：选择器：hover（CSS属性）
<style>
a:hover {
color: red;
}
</style>
</head>
<body>
<a href="#">a标签</a>
<div class="box">div标签</div>伪类-超链接：共有四个状态
：link（访问前），：visited（访问后），：hover（鼠标悬停），：active（点击时）
三、CSS特性（继承性、层叠性、优先级）
1.继承性：子级默认继承父级的文字控制属性。（子级有自己的样式则用自己的样式）。
2.层叠性：相同的属性会覆盖，后面的CSS属性覆盖前面的CSS属性，不同的属性会叠加，不同的CSS属性都生效。
3.优先级：也叫权重，当一个标签使用了多种选择器时，基于不同种类的选择器的匹配规则。
规则：选择器优先级高的生效。
公式：通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < ！important（选中标签的范围越大，优先级越低）
叠加计算规则：如果是复合选择器，则需要权重叠加计算。
公式（每一级之间不存在进位）：（行内样式，id选择器个数，类选择器个数，标签选择器个数）
规则：从左往右依次比较选择器个数，同一级个数多的优先级高，如果个数相同，则向后比较，
！important权重最高，继承权重最底。
四、显示模式
块级：独占一行，宽高属性生效，默认宽度是父级的100%。
行内：一行共存多个，宽高属性不生效，宽高由内容撑开。
行内块：一行共存多个，宽高属性生效，宽高默认由内容撑开。
扫一扫
981
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
