续CSS基础知识1
文章标题
三丶CSS三大机制(重点)
3.1 CSS样式来源
CSS中的样式可以从三个不同的来源应用于HTML文档：创作人员、读者和用户代理。
- 创作者样式：创作人员是指网页开发者，他们可以使用CSS样式表直接为HTML元素指定样式，通过在
<style>标签内或使用外部CSS文件来定义样式。这些样式由创作者编写，并直接应用于HTML文档。
<style>
h1 {
color: blue;
font-size: 24px;
}
</style>
- 读者样式：读者是指浏览网页的用户。用户可以通过浏览器的样式设置或插件来自定义网页的显示样式。这些样式由读者选择，并覆盖或修改创作者样式。
- 用户代理样式：用户代理是指浏览器，它会为HTML元素应用默认的样式规则。用户代理样式是浏览器预定义的样式，用于在没有创作者样式或读者样式时提供默认样式。用户代理样式可以根据不同的浏览器而有所不同。
需要注意的是，创作者样式具有最高的优先级，其次是读者样式，最后是用户代理样式。如果存在冲突，则优先应用具有更高优先级的样式。
3.2 CSS三大机制
**CSS的三大机制是:特殊性[冲突]、继承、层叠。**样式最终的呈现由层叠机制决定，但层叠与特殊性、继承又有关系。换句话说， 一个元素某一样式要应用那个值，用户代理需要考虑继承，考虑声明的特殊性，考虑声明本身的来源，而这个过程就叫做层叠。
3.2.1 特殊性
所谓的特殊性，其实是CSS样式一种计算声明权重的规则。特殊性是由规则的选择器确定的，然后用户代理会将计算出来的特殊性 附加给相应的每一个声明上。
如何计算/比较选择器的特殊性：
选择器类型：
- ID #id
- class .class
- 标签 p
- 通用 *
- 属性[type=“text”]
- 伪类：hover
- 伪元素::first-line
- 子选择器、相邻选择器
权重计算规则：
第一等：代表内联样式，如: style=””，权值为1000。
第二等：代表ID选择器，如：#content，权值为0100。
第三等：代表类，伪类和属性选择器，如.content，权值为0010。
第四等：代表元素选择器和伪元素选择器，如div p，权值为0001。
通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。 继承的样式没有权值。
提权：!important 权值为10000
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
font-size: 30px;
color: red;
}
.att{
color: pink;
}
#box{
color: blue;
}
</style>
</head>
<body>
<p id="box" class="att">1111111111</p>
</body>
</html>
效果：
原理：由于样式之间是层叠关系，因此层叠之后font-size是30px，又由于三个选择器都设置了字体颜色，因此则比较其权重，由于ID选择器的权重高，因此采用ID选择器的字体颜色。
3.2.2 继承
CSS还有一个继承机制，即样式不仅会应用到指定的样式，而且会应用到其后代的元素。
**继承的机制需要注意的点:**并不是所有的属性都可以继承，一般的，大多数框模型属性（包括外边距、内边距、背景、边框）都不能继承。有关内容的属性，大多数都可以继承，就像字体颜色，字体大小等。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father{
width: 200px;
height: 200px;
background: pink;
border: 1px solid #333;
color: blue;
font-size: 28px;
}
</style>
</head>
<body>
<div class="father">
我是父亲盒子
<div class="son">
我是儿子盒子
</div>
</div>
</body>
</html>
效果图：
由此可见，最右侧继承了父亲盒子的color和font-size；但是并没有继承盒子模型的一些样式，包括宽高，背景颜色，边框都没有继承。
3.2.3 层叠
示例1：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 200px;
background: pink;
color: red;
}
#box{
height: 200px;
font-size: 30px;
}
.container{
border: 1px solid #333;
text-decoration: underline;
}
</style>
</head>
<body>
<div id="box" class="container">
我是一个盒子
</div>
</body>
</html>
效果图：
示例2：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 200px;
background: pink;
color: red;
}
#box{
color: green;
height: 200px;
font-size: 30px;
}
.container{
border: 1px solid #333;
text-decoration: underline;
}
</style>
</head>
<body>
<div id="box" class="container">
我是一个盒子
</div>
</body>
</html>
效果图：
四丶文本
4.1 文本颜色
CSS颜色的三种表示方式
- 英文名称表示法：
- 目前所有浏览器都支持以下颜色名。141个颜色名称是在HTML和CSS颜色规范定义的（17标准颜色，再加124）。提 示: 17标准颜色：黑色，蓝色，水，紫红色，灰色，绿色，石灰，栗色，海军，橄榄，橙，紫，红，白，银，蓝绿色， 黄色。
- 优点：方便快捷而且特定颜色比较准确。
- 缺点：表示颜色数量有限，不支持透明度的表示。
- 十六进制方式：
- 颜色值由十六进制来表示红、绿、蓝（RGB）。每个颜色的最低值为 0(十六进制为 00)，最高值为 255(十六进制为 FF)。十六进制值的写法为 # 号后跟三个或六个十六进制字符。
- 三位数表示法为：#RGB，转换为6位数表示为：#RRGGBB。
- 优点：表示颜色种类多，使用较方便。
- 缺点：不支持透明颜色。
- RGB方式:三原色配色方式：
- 颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。每种颜色的最小值是0（十六进 制：#00）。最大值是255（十六进制：#FF）。三种颜色 红，绿，蓝的组合从0到255，一共有1600万种不同颜色(256 x 256 x 256)。
- 优点：表示颜色种类多，使用较方便
- 缺点：不支持透明颜色。
- 每个参数 (red、green 以及 blue) 定义颜色的强度，可以是介于 0 与 255 之间的整数，或者是百分比值（从 0% 到 100%）。
color属于用于设置文本的颜色，颜色有以下值指定：
- 颜色名 - 比如
red - 十六进制值 - 比如
#ff0000 - RGB 值 - 比如
rgb(255, 0, 0)
4.2 文本对齐
text-align:属性用于设置文本的水平对齐方式
文本可以左对齐或右对齐，或居中对齐等等…
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8Wc1RAS2-1689774771955)(C:\Users\15997\AppData\Roaming\Typora\typora-user-images\image-20230719153954076.png)]
**text-align: justify;**这种对齐方式，将拉伸每一行，以使每一行具有相等的宽度，并且左右边距是直的（就像在杂志和报 纸中）：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
width: 700px;
text-align: justify;
}
p {
width: 300px;
height: 250px;
border: 1px solid #ccc;
padding: 10px;
margin: 10px;
float: left;
}
</style>
</head>
<body>
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius convallis metus in luctus. Duis vel
ante a risus convallis venenatis. Quisque tristique arcu vel ex vestibulum, a aliquet turpis fermentum.</p>
<p>
据中国载人航天工程办公室消息，神舟十四号载人飞船采
用自主快速交会对接模式，经过6次自主变轨，于北京时间
2022年6月5日17时42分，成功对接于天和核心舱径向端口，
整个对接过程历时约7小时。
</p>
</div>
</body>
</html>
效果图：
4.3 垂直对齐
vertical-align属性设置元素的垂直对齐方式。
vertical-align常用属性值
- baseline：默认值，元素放置在父元素的基线上。
- top：把元素的顶端与行中最高元素的顶端对齐；
- middle：把此元素放置在父元素的中部。
- bottom：把元素的顶端与行中最低的元素的顶端对齐。
样例：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img {
width: 100px;
height: 100px;
}
div:nth-child(1) img{
vertical-align: middle;
}
div:nth-child(2) img{
vertical-align:bottom;
}
div:nth-child(3) img{
vertical-align:baseline;
}
</style>
</head>
<body>
<div>
<img src="./222.jpg" alt=""><span>XXXXX</span>
</div>
<div>
<img src="./222.jpg" alt=""><span>XXXXX</span>
</div>
<div>
<img src="./222.jpg" alt=""><span>XXXXX</span>
</div>
</body>
</html>
4.4 文本装饰
text-decoration属性用于设置或删除文本装饰。
text-decoration: none; 通常用于从链接上删除下划线：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本装饰</title>
<style>
p{
font-size: 20px;
}
p:nth-child(1){
text-decoration: overline;
}
p:nth-child(2){
text-decoration: line-through;
}
p:nth-child(3){
text-decoration: underline;
}
</style>
</head>
<body>
<p>
我是一句很长很长很长的一句话
</p>
<p>
我是一句很长很长很长的一句话
</p>
<p>
我是一句很长很长很长的一句话
</p>
</body>
</html>
4.5 文本缩进
text-indent一般用于首行缩进两字符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
width: 300px;
height: 200px;
border: 2px solid #333;
/* 首行缩进两字符，em是根据当前元素的字体大小计算的 */
text-indent: 2em;
}
</style>
</head>
<body>
<p>
百度百科：电视动画《航海王》改编自尾田荣一郎创作的同名长篇少年漫画1999年10月20日起在富士电视台首播。中国大陆于每周日12:00后在爱奇艺独家正版更新。
</p>
</body>
</html>
4.6 字符间距
letter-spacing两个字之间的间距
p{
letter-spacing: 3px;
}
4.7 文本阴影
text-shadow为文本添加阴影，也可以说是文字的投影。
text-shadow 属性接受一个或多个阴影的参数，每个阴影参数由水平偏移量、垂直偏移量、模糊半径和颜色组成。以下是 text-shadow 属性的语法示例：
text-shadow: h-shadow v-shadow blur-radius color;
h-shadow：指定阴影的水平偏移量，可以是负值（向左）或正值（向右）。v-shadow：指定阴影的垂直偏移量，可以是负值（向上）或正值（向下）。blur-radius：指定阴影的模糊半径，值越大阴影越模糊，可以是零。color：指定阴影的颜色，可以使用颜色名称、十六进制值、RGB 值等表示。
以下是一个示例，展示如何使用 text-shadow 属性为文本添加阴影效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
color: red;
font-size: 30px;
letter-spacing: 25px;
text-align: center;
text-shadow: 6px 5px 4px black;
}
</style>
</head>
<body>
<p>我是一句话</p>
</body>
</html>
在上面的示例中，text-shadow 属性为 <p> 元素的文本添加了一个黑色的阴影，阴影的水平偏移量为 6px，垂直偏移量为 5px，模糊半径为 4px，颜色为黑色。
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
