目录
一、概述
CSS，全称层叠样式表（Cascading Style Sheets），是网页设计中不可或缺的一部分。它负责控制网页的样式，包括颜色、字体、布局等，使得网页内容能够以更加美观、易读的方式呈现给用户。
二、CSS的核心概念
1、选择器：
CSS选择器用于定位需要应用样式的HTML元素。它可以根据元素的类型、类名、ID等多种方式进行选择。
2、属性与值：
CSS样式由属性和值组成，例如“color: red”表示将文本颜色设置为红色。
3、盒模型：
CSS将HTML元素视为盒子，每个盒子都有内容、内边距、边框和外边距等属性，这些属性共同决定了元素在页面上的位置和大小。
4、布局：
CSS提供了多种布局方式，如流式布局、弹性布局和网格布局等。
三、选择器
CSS选择器是CSS（层叠样式表）中至关重要的一个概念，它负责精准地定位到HTML文档中的元素，以便为这些元素应用样式。选择器种类繁多，功能强大，使得我们能够以灵活多样的方式控制网页的样式。
1、标签选择器
根据HTML元素的标签名称来选择元素。
P{
属性：属性值；
}2、类选择器
使用HTML元素的class属性来选择元素。类选择器以点号【.】开头，后跟类名。
<p class="p1">这是一个类选择器</p>.p1{
属性：属性值；
}3、ID选择器
使用HTML元素的ID属性来选择元素。ID选择器以井号（#）开头，后跟ID值。
注意：ID值唯一
<div id="box3">id选择器的名称具有唯一性！！！！！！</div>
<div id="box4">id选择器的名称具有唯一性！！！！！！</div>#box3{
width: 500px;
height: 150px;
color: red;
background: #b85897;
}
#box4{
width: 500px;
height: 150px;
color: red;
background: #55a274;
}4、伪类选择器
伪类选择器: 用伪类定义的样式并不是作用在标记上，而是作用在标记的状态上
常用在超链接上
语法：
a:link（未被访问过,访问之前的状态）
a:visited(访问过后的状态)
a:hover （鼠标滑过的状态）所有标签都有该属性
a:active（鼠标按下时的状态）
使用顺序：L--V--H--A
<a href="./Demo_01初识CSS.HTML">Demo_01初识CSS</a>a:link{
color: #55a274;
}
a:visited{
color:#1536c8
}
a:hover{
color: #da19d7;
}
a:active{
color: red;
}5、通配符选择器（全局选择器）
设置所有标签使用统一样式
*{
属性：属性值；
}6、css的模块化
css的模块化：将Demo_02作为Deml_01的模块引入使用 [Demo_02作为样式的通用样式]
@import url(./Demo_02.css);7、后代选择器
后代选择器是CSS中的一种选择器，它可以用来选择某元素的后代元素。这种选择器以两个或多个选择器作为选择条件，选择同时符合这些选择条件的元素。后代选择器又称为包含选择器，可以选择某元素的后代元素。
注意：使用后代选择器时，需要注意其优先级和继承性，以避免样式冲突和不必要的复杂性。同时，为了优化性能，应尽量避免使用过于复杂或不必要的后代选择器，以减少浏览器的计算负担。
后代选择器的具体使用如下：
<!-- 后代选择器和子代选择器 -->
<h1>后代选择器</h1>
<div class="box">
<div>
<p>后代选择器</p>
<hr>
<p>子代选择器</p>
<div>asdsadas</div>
</div>
<ul>
<li>
<div>asdghashjdghjas</div>
</li>
</ul>
</div>.box div{
color: blueviolet;
font-weight: 200;
}8、子代选择器
子代选择器（也称为直接子元素选择器）在CSS中用于选择特定元素的直接子元素。这种选择器使用大于符号（>）来连接两个选择器，表示选择第一个元素的直接子元素，并且这个子元素需要满足第二个选择器的条件。
<h1>子代选择器</h1>
<div class="box1">
<div>
<p>后代选择器</p>
<hr>
<p>子代选择器</p>
<div>asdsadas</div>
</div>
<ul>
<li>
<div>asdghashjdghjas</div>
</li>
</ul>
</div>.box1>div{
color: rgb(67, 177, 202);
font-weight: 200;
}9、交集选择器
交集选择器在CSS中用于选择同时满足多个条件的元素。它由两个或多个选择器直接连接构成，之间不能有空格
<!-- 交集选择器 -->
<p class="box1">aaaaa</p>
<p class="box1 box2">aaaaa</p>
<p class="box1">aaaaa</p>
<p class="box1">aaaaa</p>/* 交集选择器 */
p.box2{
text-align: center;
}10、并集选择器
并集选择器（也称为分组选择器）在CSS中用于同时对多个选择器应用相同的样式。这些选择器之间使用逗号（,）分隔。任何形式的选择器（如元素选择器、class选择器、id选择器等）都可以作为并集选择器的一部分
<h1>aaaaa</h1>
<h1>aaaaa</h1>
<div>aaaaa</div>
<h2>aaaaa</h2>/* 并集选择器 */
h1,h2,div{
text-align: center;
}11、选择器的优先级
css 的权重（优先级）
!important > 行内样式 > id选择器 > 类选择器 > 标签选择器 > 全局选择器
四、文字属性
1、属性名称
文字属性有以下几种：
color: 文字颜色
font-size: 文字大小
font-family:字体
/* 100_900的整数 属性值也可以使bloder*/
font-weight: 字体加粗
/* 文字倾斜 */
font-style: italic;字体样式
2、代码实现
.p1{
color: blueviolet;
font-size: 25px;
font-family:华文新魏;
/* 100_900的整数 属性值也可以使bloder*/
font-weight: 500;
/* 文字倾斜 */
font-style: italic;
}五、行高的设置方式
行高的设置，在css中使用了line-height，具体实现如下：
<div class="box">sadasdasd</div>.box{
line-height: 50px;
}六、文字装饰效果
<a href="#" class="a1">sdadasdasd</a>
<p class="p1">sdasdadaad</p>
<p class="p2">sdasdadaad</p>
<p class="p3">sdasdadaad</p>/* 下划线 */
.p1{
text-decoration: underline;
}
/* 删除线 */
.p2{
text-decoration: line-through;
}
/* 上部线条 */
.p3{
text-decoration: overline;
}
/* 取消下划线 */
.a1{
text-decoration: none;
color: black;
}运行结果：
七、段落属性
段落属性包含首行缩进、字符间距、单词与单词的间距，下面我们依次展示效果
1、首行缩进
.p1{
font-size: 32px;
/* 首行缩进 */
text-indent: 2em;
}效果：
2、字符间距
.p1{
/* 字符间距 */
letter-spacing: 5px;
}效果：
字与字之间的间距会随着数值的增加而变大。
3、单词与单词之间的间距
.box1{
/* 单词与单词的间距 */
word-spacing: 20px;
}效果：
八、对齐方式
1、文本的对齐方式
属性名：text-align
文本对齐属性的属性值为：
left：左对齐
center：居中对齐
right：右对齐
justify：两端对齐
/* 左对齐 */
.p1{
text-align: left;
}
/* 居中对齐 */
.p2{
text-align: center;
}
/* 右对齐 */
.p3{
text-align: right;
}
/* 两端对齐 */
.p4{
text-align: justify;
}2、图片的对齐方式
由于img标签为行内块元素，所以无法使用文本对齐属性，所以需要使用块元素进行包裹，具体实现如下：
<!-- div为块元素，独占一行 -->
<div class="box1">
<!-- img为行内块元素，不独占一行 -->
<img src="./../img/头像.jpg">
</div>九、css的性质
1、继承性
样式继承：如果标签本身有该属性，就自身属性生效，如果没有，则继承上一级（直到找到最外层的body）
注意：仅仅文本的样式会继承
例如：
<p>sdsadasdasd</p>
<!-- 如果标签自己有样式则生效自己的样式，不继承（仅字体） -->
<a href="#">sdfsadfasdasd</a>body{
color: blueviolet;
font-size: 25px;
font-weight: 900;
font-style: italic;
}结果：
2、层叠性
层叠性：相同的选择器，下面的样式会覆盖上面的样式
例如：
<div>第一</div>
<hr>
<div>第二</div>
div{
color: blueviolet;
}
div{
color: pink;
}结果：
十、总结
此文章描述了css的一些选择器、文字属性等CSS实现，后续还会有其他的基础知识持续更新，本文章如果有侵权现象，请立即告知作者，谢谢
584
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
