【一】CSS基础
【1】什么是CSS
- CSS（层叠样式表）是一种用于描述HTML（超文本标记语言）文档外观样式的语言。
- 它通过定义样式规则来控制网页的布局、字体、颜色、背景等外观效果，使网页变得更加美观和可读。
【2】注释语法
- 在CSS中，注释可以用来添加说明、注解或者暂时禁用一些代码。
- 注释在CSS文件中不会被浏览器解析和显示。
- 注释以
/*开始，以*/结束，之间的内容将被视为注释。
/* 注释内容 */
【3】语法结构
- CSS的语法结构由选择符和声明块组成。
- 选择符指定要应用样式的HTML元素或者元素组。例如，可以使用标签名、类名、ID等作为选择符。
-
声明块由一对花括号
{}包围，包含了一条或多条样式声明。每条样式声明由一个样式属性和对应的样式属性值组成，用冒号:分隔。多个样式属性之间用分号;分隔。
选择符 {
样式属性: 样式属性值;
样式属性: 样式属性值, 样式属性值, 样式属性值;
}
- 在实际的CSS文件中，通常会有大量的样式规则，可以根据需要对不同的HTML元素进行样式定义，使网页达到所需的外观效果。
- 当CSS样式规则较多时，可以使用注释来辅助辨别和查找，提高代码的可读性和维护性。
【4】css的三种引入方式
（1）行内式
- 在HTML标签内部使用
style属性直接编写CSS样式。这种方式将HTML和CSS混合在一起，增加了耦合度，一般不推荐使用。
<h1 style="color: blue">注册页面</h1>
（2）style标签内部直接书写
- 在HTML文件的
<head>标签内部使用<style>标签，直接编写CSS代码。 - 这种方式适合于简单的样式定义，方便查看和修改。
<head>
<style>
/*蓝色一级标题*/
h1 {
color: blue;
}
</style>
</head>
（3）引入外部CSS文件
- 在HTML文件的
<head>标签内使用<link>标签引入外部CSS文件。 - 这是最正规的方式，可以将CSS代码与HTML代码分离，提高代码的可维护性和复用性。
<!--html文件-->
<!DOCTYPE html>
<html>
<head>
<title>页面标题</title>
<meta charset="UTF8">
<link rel="stylesheet" href="test.css">
</head>
<body>
<h1>注册页面</h1>
</body>
</html>
/*test.css文件*/
h1 {
color: blue;
}
【二】选择器
【1】基本选择器
- 在CSS中，选择器用于选取HTML文档中的元素，并将样式应用于这些元素。
- 选择器根据其类型和语法的不同，可以选择不同的元素。
（1）元素/标签选择器（Element/Tag Selector）
- 通过HTML元素的标签名选择元素。
- 例：
h1选择器选取所有<h1>标签元素。
/* 元素/标签选择器 */
h1 {
/*一级标签为蓝色*/
color: blue;
}
（2）类选择器（Class Selector）
- 通过HTML元素的
class属性选择元素。 - 类选择器以
.开头，后面跟随类名。 - 例：
.highlight选择器选取所有具有class="highlight"的元素。
/* 类选择器 */
.highlight {
/*类为hightlight的背景设为黄色*/
background-color: yellow;
}
（3）ID选择器（ID Selector）
- 通过HTML元素的
id属性选择元素。 - ID选择器以
#开头，后面跟随ID名。 - 例：
#header选择器选取具有id="header"的元素。
/* ID选择器 */
#header {
/*ID为header的字体为24像素*/
font-size: 24px;
}
（4）通用选择器（Universal Selector）
- 选择所有的HTML元素。
- 通用选择器使用
*表示。 - 例：
*选择器选取所有元素。
/* 通用选择器 */
* {
/*所有元素的内外边距都设为0*/
margin: 0;
padding: 0;
}
【2】组合选择器
- 组合选择器是CSS中用于选择特定元素关系的选择器。常见的组合选择器包括后代选择器、儿子选择器、毗邻选择器和弟弟选择器。
（1）后代选择器（Descendant Selector）
- 使用空格表示，选择某个元素的后代元素。
- 例：
div p选择器选取所有在<div>标签内部的<p>标签元素。
（2）儿子选择器（Child Selector）
- 使用
>符号表示，选择某个元素的直接子元素。 - 例：
div > span选择器选取所有直接作为<div>标签子元素的<span>标签元素。
（3）毗邻选择器（Adjacent Sibling Selector）
- 使用
+符号表示，选择某个元素的下一个紧邻的兄弟元素。 - 例：
div + a选择器选取紧跟在<div>标签后面的第一个<a>标签元素。
（4）弟弟选择器（General Sibling Selector）
- 使用
~符号表示，选择某个元素之后的所有兄弟元素。 - 例如，
div ~ a选择器选取所有在<div>标签后面的<a>标签元素。
（5）示例说明
<div id="d1">div1
<div id="d2">div2
<p>p1</p>
</div>
<p>p2
<span>span1</span>
</p>
<span>span2</span>
</div>
- 对于
div1来说，div2、p2、span2都是儿子。 - 对于
div2、p2、span2来说，div1是父亲。 - 对于
p1来说，div2是父亲，div1是爷爷（可以将div1和div2统称为祖先）。 - 对于
span2来说，div2、p2是哥哥，span2是弟弟。 -
div1内部所有的标签，无论层级如何，都可以称之为div1的后代。
/* 1.儿子选择器（关键符号是大于号） */
#d1 > span {
/* 选择id为d1的标签内部所有的儿子span */
color: red;
}
/* 2.后代选择器（关键符号是空格） */
#d1 span {
/* 选择id为d1的标签内部所有的后代span */
color: blue;
}
/* 3.毗邻选择器（关键符号是加号） */
#d2 + p {
/* 选择id为d1的标签同级别下面紧挨着第一个p标签 */
color: green;
}
/* 4.弟弟选择器（关键符号是小波浪号） */
#d2 ~ p {
/* 选择id为d1的标签同级别下面所有p标签 */
color: brown;
}
【3】属性选择器
- 属性选择器是CSS中用于选择具有特定属性的元素的选择器。
- 属性选择器可以根据属性的存在、属性值的匹配等条件来选择元素。
（1）含有某个属性
- 选择具有指定属性的元素。
- 例：
[type]选择器选取所有具有type属性的元素。
（2）含有某个属性并且有某个值
- 选择具有指定属性且属性值与指定值匹配的元素。
- 例：
[type='text']选择器选取所有type属性值为text的元素。
（3）含有某个属性并且有某个值的某个标签
- 选择某个标签内具有指定属性且属性值与指定值匹配的元素。
- 例：
div[type='text']选择器选取所有<div>标签内具有type属性值为text的元素。
【4】选择器分组和嵌套
（1）分组
- 分组选择器允许同时选择多个不同类型的元素，并为它们应用相同的样式。
- 分组选择器使用逗号
,将不同的选择器进行分隔。
div, p, span {
color: red;
}
（2）嵌套
- 嵌套选择器允许选择某个元素内部的特定元素。
.container {
background-color: green;
/* 选择 .container 元素内部的 .box 元素 */
.box {
background-color: yellow;
}
}
【5】伪类选择器
-
伪类选择器是 CSS 中用于选择元素的特殊选择器文章来源：https://www.toymoban.com/news/detail-835656.html
-
根据元素的状态或位置选择元素，而不仅仅是根据元素本身的标记名、类名或其他属性来选择。文章来源地址https://www.toymoban.com/news/detail-835656.html
（1）:hover
- 选择鼠标悬停在元素上的状态。可以用来添加鼠标悬停时的样式效果。
/*鼠标悬停在链接上时将链接的文本颜色设置为红色*/
a:hover {
color: red;
}
（2）:active
- 选择元素被激活（被点击）的状态。
- 通常用于给按钮或链接添加点击效果。
/*按钮被点击时将按钮的背景颜色设置为蓝色*/
button:active {
background-color: blue;
}
（3）:focus
- 选择当前获得焦点的元素。
- 适用于表单元素，当用户点击或使用 Tab 键导航时，元素会获得焦点。
/*输入框获得焦点时将边框颜色设置为绿色*/
input:focus {
border-color: green;
}
（4）:first-child
- 选择作为其父元素的第一个子元素的元素。
- 可以用来选择列表中的第一个元素或某个容器中的第一个子元素。
/*将选择无序列表中的第一个列表项，并将其文本设置为粗体*/
ul li:first-child {
font-weight: bold;
}
（5）:last-child
- 选择作为其父元素的最后一个子元素的元素。类似于
:first-child，但选择的是最后一个子元素。
/*将选择无序列表中的最后一个列表项，并将其文本颜色设置为紫色*/
ul li:last-child {
color: purple;
}
（6）:nth-child(n)
- 选择作为其父元素的第
n个子元素的元素。 - 可以使用具体的数字、关键字（如
even表示偶数，odd表示奇数），或者公式来选择特定的子元素。
/*将选择无序列表中的奇数位置的列表项，并将它们的背景颜色设置为浅灰色*/
ul li:nth-child(odd) {
background-color: lightgray;
}
【6】伪元素选择器
- 伪元素选择器允许在元素的特定部分之前或之后插入内容，并对其进行样式化。
- 它们以双冒号
::开头，并用于选择元素的虚拟部分，而不是实际存在于 DOM 中的元素。 - befor 和 after 通常都是用来清除浮动带来的影响，即父标签塌陷的问题
（1）::before
- 在选定元素的内容之前插入生成的内容。可以用于添加装饰性的内容，如图标或装饰符号。
/*在每个p元素的内容之前插入>>，并将其颜色设置为红色*/
p::before {
content: ">>";
color: red;
}
（2）::after
- 在选定元素的内容之后插入生成的内容。可以用于添加额外的内容或装饰性元素。
/*在每个链接的内容之后插入 " (外部链接)"，并将其样式设置为斜体*/
a::after {
content: " (外部链接)";
font-style: italic;
}
（3）::first-line
- 选择元素的第一行文本。可以用于对段落的第一行或标题的第一行应用特殊样式。
/*将标题元素的第一行文本设置为 24 像素大小和粗体*/
h1::first-line {
font-size: 24px;
font-weight: bold;
}
（4）::selection
- 选择用户选择的文本部分。可以用于自定义用户选择文本的样式。
/*将用户选择的文本的背景颜色设置为黄色，文本颜色设置为黑色*/
::selection {
background-color: yellow;
color: black;
}
（5）::first-letter
- 选择元素的第一个字母或第一个字符，并对其应用样式。
- 这个选择器可以用于段落、标题、列表项等元素。
/*每个段落的第一个字母，字体大小设置为 24 像素，颜色设置为红色，并使其向左浮动*/
p::first-letter {
font-size: 24px;
color: red;
float: left;
}
【7】选择器优先级
- 选择器优先级是用于确定在多个选择器应用于同一个元素时，哪个选择器的样式将具有更高的优先级。
- 优先级是根据选择器的特定组合和权重来计算的，一般情况下，优先级越高的选择器的样式将被应用。
（1）选择器不同
- 内联样式：具有最高优先级的是直接应用在元素上的内联样式。内联样式是通过元素的
style属性来定义的。 - ID 选择器：ID 选择器具有比大多数其他选择器更高的优先级。ID 选择器以
#符号开头，后面跟着元素的唯一标识符。 - 类选择器、属性选择器和伪类选择器：这些选择器具有相同的优先级，它们以
.、[]或:开头。 - 元素选择器和伪元素选择器：这些选择器具有最低的优先级。元素选择器是指对元素类型进行选择，而伪元素选择器以
::开头。
（2）选择器相同
- 就近原则
到了这里，关于CSS基础和选择器的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
