这篇博客总结了CSS的基本概念，包括样式规则、样式表（内联、嵌入、外部）、选择器（元素、类、ID、属性、伪类）以及层叠与继承。详细介绍了CSS在网页样式控制中的应用，是前端学习者入门CSS的良好参考资料。
CSS 学习总结
CSS（Cascading Style Sheets）是一种用于描述网页内容样式的语言。它可以控制网页中各种元素的外观和布局，包括字体、颜色、间距、边框、背景等。本文将介绍CSS的基本概念、语法和常用属性，帮助初学者快速掌握CSS的基础知识。
CSS 基本概念
1. 样式规则
CSS使用样式规则来描述元素的样式。样式规则由选择器和声明块组成，如下所示：
selector {
property1: value1;
property2: value2;
...
}
其中，selector表示选择器，用于选择要应用样式的元素；property表示属性，用于描述元素的某个样式特征；value表示属性的值，用于指定属性的具体取值。一个样式规则可以包含多个属性和值，用分号（;）分隔。
例如，下面的样式规则将<h1>元素的字体颜色设置为红色：
h1 {
color: red;
}
2. 样式表
CSS样式规则可以集中在一个或多个文件中，称为样式表。样式表可以嵌入在HTML文档中，也可以作为外部文件链接到HTML文档中。样式表的作用范围可以是整个网站，也可以是单个页面。
内联样式
内联样式是将CSS样式规则直接写在HTML元素的style属性中，如下所示：
<h1 style="color: red;">标题</h1>
嵌入样式表
嵌入样式表是将CSS样式规则写在HTML文档的<head>标签中的<style>标签内，如下所示：
<!DOCTYPE html>
<html>
<head>
<title>页面标题</title>
<style>
h1 {
color: red;
}
</style>
</head>
<body>
<h1>标题</h1>
<p>段落</p>
</body>
</html>
外部样式表
外部样式表是将CSS样式规则写在一个单独的CSS文件中，然后在HTML文档中通过<link>标签链接到该文件，如下所示：
<!DOCTYPE html>
<html>
<head>
<title>页面标题</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>标题</h1>
<p>段落</p>
</body>
</html>
其中，href属性指定外部样式表文件的URL。
3. 选择器
选择器用于选择要应用样式的元素。CSS提供了多种选择器，包括元素选择器、类选择器、ID选择器、属性选择器、伪类选择器等。
元素选择器
元素选择器是选择HTML文档中的元素来应用样式。例如，下面的样式规则将所有<p>元素的字体颜色设置为红色：
p {
color: red;
}
类选择器
类选择器是选择HTML文档中带有特定类名的元素来应用样式。类选择器以.开头，后面跟类名。例如，下面的样式规则将所有类名为highlight的元素的字体颜色设置为黄色：
.highlight {
color: yellow;
}
ID 选择器
ID 选择器用于选择HTML文档中带有特定 ID 的元素来应用样式。ID 选择器以#开头，后面跟 ID 名称。例如，下面的样式规则将 ID 为logo的元素的背景颜色设置为蓝色：
#logo {
background-color: blue;
}
属性选择器
属性选择器用于选择带有特定属性的元素来应用样式。属性选择器可以选择元素的任何属性，如title、href、src等。例如，下面的样式规则将所有带有title属性的元素的字体颜色设置为绿色：
[title] {
color: green;
}
伪类选择器
伪类选择器用于选择元素的特殊状态，如鼠标悬停、被访问等。伪类选择器以冒号（:）开头，后面跟伪类名称。例如，下面的样式规则将所有鼠标悬停在<a>元素上的链接的字体颜色设置为红色：
a:hover {
color: red;
}
4. 层叠与继承
CSS样式规则可以同时应用于一个元素，这种情况下就会出现样式冲突。CSS通过层叠和继承机制来解决这些冲突。
层叠
层叠是指多个样式规则同时应用于同一个元素时，根据不同样式规则的优先级来决定最终应用的样式。CSS样式规则的优先级由选择器的特殊性和来源（内联样式、嵌入样式表、外部样式表）决定。例如，内联样式的优先级最高，其次是ID选择器，其次是类选择器和属性选择器，最后是元素选择器。
继承
继承是指某些样式规则会被父元素传递给其子元素。例如，font-family属性和color属性就可以被继承。这意味着，如果某个元素未显式指定这些属性，它将继承其父元素的这些属性。
element {
property1: value1;
property2: value2;
…
}
盒子模型
CSS 盒子模型是指 HTML 元素所占据的空间 ，该空间由元素的内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。这些部分可以用 CSS 属性来分别进行设置。
| 部分 | 作用 |
|---|---|
| 内容（content） | 元素所包含的内容，如文字、图片，可以使用 width 和 height 属性来控制 |
| 内边距（padding） | 内容和边框之间的空间，可以使用 padding 属性来控制 |
| 边框（border） | 包裹内容和内边距的边框，可以使用 border 属性来控制 |
| 外边距（margin） | 位于元素和相邻元素之间的空间，可以使用 margin 属性来控制 |
盒子分类
块元素
块元素也称为行元素，在布局中常用的标签如：< div >, < p > ,< ul >, < li > < h1 >-< h6 >, < dl >, < dt >, < dd >等都是块元素，它在布局中的行为：
1、支持全部样式
2、如果没有设置宽度，默认宽度为父级元素宽度的100%
3、盒子占据一行，即使设置了宽度
内联元素
内联元素也成为内元素，布局中常用的标签如：< a >, < span >,< em >,< b >, < strong > < i >等都是内联元素，它们在布局中的行为：
1、支持部分样式(不支持宽、高、margin上下、padding上下)
2、宽高有内容决定
3、盒子并在一行
4、代码(html)换行，盒子之间会产生间距
5、子元素时内联块元素，父元素可以用text-align属性设置子元素水平对齐方式
内联块元素
内联块元素也叫内块元素，是新增的元素类型，现有元素没有归于此类别的，img和input元素的行为类似这个元素，但是也归类于内联元素，我们可以用display属性将块元素或者内联元素转化成这种元素，它们在布局中的行为：
1、支持全部样式
2、如果没有设置宽高，宽高由内容决定
3、盒子并在一行
4、代码换行，盒子产生间距
5、子元素是内联元素，父元素可以用text-aliign属性设置子元素的对齐方式
5.边框与边距
在 CSS 中，边框和边距是基本的样式属性，可以用于美化和调整 HTML 元素的外观和布局。
边框（border）
| 属性 | 作用 |
|---|---|
| border-style | 设置边框的样式，包括 solid、dashed、dotted、double、groove、ridge、inset 和 outset 等 |
| border-width | 设置边框的宽度，可以使用像素（px）、百分比（%）、em 或其他单位进行设置 |
| border-color | 设置边框的颜色，可以使用关键字或 RGB 值和十六进制颜色代码进行设置 |
边距（margin）
| 属性 | 作用 |
|---|---|
| margin-top | 设置元素上边缘与相邻元素的距离 |
| margin-right | 设置元素右边缘与相邻元素的距离 |
| margin-bottom | 设置元素下边缘与相邻元素的距离 |
| margin-left | 设置元素左边缘与相邻元素的距离 |
| margin | 设置所有边距 |
溢出
CSS 中，溢出（overflow）是控制 HTML 元素内容超出边框范围时的行为方式。当元素的内容超出其边框时，可以使用 overflow 属性设置如何处理溢出内容。
| 属性 | 作用 |
|---|---|
| visible | 默认值，内容会突破元素的边框，并会呈现在元素外面或覆盖在其他元素 |
| hidden | 内容不会突破元素的边框，超出部分会被隐藏 |
| scroll | 添加滚动条，让用户可以滚动显示整个内容 |
| auto | 当内容突破元素的边框时添加滚动条 |
浮动
在 CSS 中，浮动（float）是一种布局技术，可以将元素向左或向右移动，并允许其他元素环绕它。
使用浮动属性，可以为 HTML 元素创建一个类似于文本环绕图片的效果。当一个元素浮动之后，其他文档的内容会环绕着浮动元素。
| 标签 | 作用 |
|---|---|
| left | 表示将元素向左浮动 |
| right | 表示将元素向右浮动 |
| none | 表示元素不浮动（默认值) |
浮动元素会脱离文档流，因此也可能影响周围元素的布局。为了防止浮动元素对页面布局的影响，可以使用 clear 属性来清除浮动元素的影响。clear 属性可以设置以下值：
| 标签 | 作用 |
|---|---|
| left | 清除左侧浮动元素的影响 |
| right | 清除右侧浮动元素的影响 |
| both | 同时清除左右两侧浮动元素的影响 |
| none | 默认值，不清除浮动元素的影响 |
伪类（Pseudo-class）
| 标签 | 用法 |
|---|---|
| :hover | 当鼠标悬停在元素上时 |
| :active | 当元素被激活（例如鼠标被按下）时 |
| :visited | 用于访问过的链接 |
| :first-child | 第一个子元素 |
| :last-child | 最后一个子元素 |
| :nth-child(n) | 第 n 个子元素，n 可以是一个数字、表达式或关键字 |
伪元素（Pseudo-element）
| 标签 | 用法 |
|---|---|
| ::after | 在元素之前插入内容 |
| ::before | 在元素之后插入内容 |
| ::first-letter | 选择元素中的第一个字母 |
| ::first-line | 选择元素中的第一行文本 |
总结
本次对CSS的学习，学习的内容很多，要记的东西不少但是都很有趣，能够强化我自身的动手能力和学习领悟，深化了自身对于CSS一些基本概念的学习和掌握程度，收获了很多新的东西。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
