面向初学者和非初学者的完整 CSS 指南

理解 CSS

标题：“适合初学者和非初学者的完整 CSS 指南”
发布：真实
描述：“CSS 工作流程、选择器、伪选择器和 CSS 操作的完整指南”
标签：初学者、职业、css、教程
封面图片：https://binima.com/wp-content/uploads/2018/05/css.jpg
--- 不

理解 CSS

什么是 CSS？

CSS 代表层叠样式表。

CSS 描述了如何使用规则显示 HTML 元素。

CSS语法

CSS 规则由选择器和一个或多个声明块组成：

如何向您的项目添加 CSS 样式？

有三种方法可以将 CSS 插入 HTML 文档：

作为外部源（例如，项目中的另一个文件或 CDN 链接）：<link rel="stylesheet" href="myStyles.css">
内部样式表（在 HTML 文件的标题或顶部正文中使用 style html 标签）：
```
<样式>
   // 我的 CSS 代码
</style>
```
内联。IE 在同一个 html 标签上使用 style 属性：<p style="font-weight: bold;">

基本选择器

点号.表示选择类名，井号#表示选择 ID。例如，在以下 HTML 中：

<div id="main-content" class="container>

选择器 #main-content 将指向 html id 属性， .container 将搜索以容器作为其类属性值的 html 标签， #container 并且 .main-content 不会匹配任何内容，因为文档上没有主内容类或容器 id。

下文会进行扩展。我会在讲完所有基础知识后，添加每个选择器的完整列表和解释。

层叠顺序

如果为 HTML 元素指定了不同的样式，则这些样式将按照以下优先级级联为新样式：

优先级 1：使用样式属性的内联样式。
优先级 2：内部和外部样式表。
优先级 3：浏览器默认
如果在同一优先级上定义了不同的样式，则最后一个样式具有最高优先级。*

这并不意味着你最后输入的、优先级相同的代码会被应用。如果代码被分块到不同的样式表中，那么你将它们链接到 HTML 的顺序也不是加载顺序。
“优先级最高的最后一个”特指浏览器最后渲染的那个。

好的，这是基础，但关于CSS 优先级还有很多需要了解：

最重要的一点是，它足够强大，能够覆盖上面列出的基本优先级，那就是SPECIFICITY。你可以创建一个更具体或更不具体的选择器，让我们看一些例子：

在给定的 html 上像这样：

<div id="main-content" class="container">
  <div class="header">
     <p>标题</p>
  </div>
  <div class="section1">
    <p> 文本内容 </p>
  </div>
</div>

以下 CSS 规则将应用于同一元素：

#main-content.container { 背景：绿色； }
#main-content { 背景：红色； }
.container { 背景：蓝色； }

那么我们将采用哪种背景颜色<div id="main-content class="container">？

它会显示蓝色，因为这是最后一个吗？不，它会显示绿色，因为它更具体。
我们选中的是 id="main-content" 的元素，这些元素的 class="container" 也包含在内，而不是分别选中每个元素。

好的，那么...如果我想要黄色，但是因为我正在做一个大项目而无法编辑这个 CSS 规则，这可能会破坏其他东西，该怎么办？

说得更具体一点！

div#main-content.container { 背景：黄色； }

现在我们专门选择一个<div>HTML 标签，该标签具有一个以 main-content 为值的 id 属性，并且还具有一个以 container 为值的 class html 属性。

好的，但是没有更多更具体的选项了。如果我在这种情况下需要它是白色的怎么办？

div#main-content.container { 背景：白色 ！重要； }

`!important`

这是一把来自日本大型战争机器人的双刃武士刀，请小心！重要事项，请小心。

使用 important 语句会使您的规则难以或无法被覆盖。这意味着，如果您在公司负责某个项目并使用它，您可能会阻止同事在设计变更时覆盖您的样式。此外，您可能会因为能够覆盖它而阻止自己未来的发展，所以请小心，不要怨恨过去的“我”。

您可以将优先选择项目从 html 标签添加到您需要的标签中。

子选择器

或者嵌套选择器是一个空格，它与一个（描述的）元素的所有子元素（描述的）匹配（将匹配直接或间接位于内部的 div#main p.bold所有元素）并且匹配直接子元素（将匹配的任何直接子元素）。<p class="bold"><div id="main">> div#main>p.bold<p class="bold"><div id="main">

例如：

html>body>div#main-content p { 字体粗细：粗体； }

这将选择位于 <div id="main-content"> 内的所有<p> 标签（无论级别如何），该标签直接位于 body html 标签内，而 body html 标签又直接位于 html 标签内（事实上，body 始终是 html 的直接子标签）。

因此，以下代码片段中的所有 <p> 标签都将被选中（并且其字体将加粗）：

<html>
  <head>
    <title>我的例子</title>
  </head>
  <主体>
    <div id="main-content">
      <p> 乱码假文 </p>
      <div class="content-block">
        <p> 悲伤地坐着</p>
      </div>
    </div>
  </body>
</html>

CSS 组合器列表：

后代选择器（空格）
子选择器 (>)
相邻兄弟选择器 (+)
通用兄弟选择器（~）
通配符选择器 (*)

标签选择器

标签选择器很容易理解，只需输入要匹配的标签即可。例如，要匹配所有 p 标签（无论它们在结构体中的位置如何）：

p { 字体系列：'Ubuntu'，无衬线字体； }

属性选择器：

你也可以匹配属性和属性值对。
以下 CSS：

  [data-action="expand"] { 背景：金黄色； }
  [href="https://google.es"] { 字体粗细：粗体； 颜色：白色； }

将匹配以下 html：

<div data-action="expand">
    <a href="https://google.es">前往谷歌</a>
 </div>

伪选择器

pseudo 是一个前缀，意思是“假装的，不真实的”，那么为什么它们被称为伪选择器？

CSS 引入了伪元素和伪类的概念，以允许基于文档树（DOM）之外的信息进行格式化。

伪元素创建了文档树的抽象，超出了文档语言所规定的范围。例如，文档语言不提供访问元素内容首字母或首行的机制。CSS 伪元素允许样式表设计者引用这些原本无法访问的信息。伪元素还可以为样式表设计者提供一种方法来为源文档中不存在的内容分配样式（例如，:before和:after伪元素可以访问生成的内容）。
伪类根据元素的名称、属性或内容以外的特征对元素进行分类；原则上，这些特征无法从文档树中推断出来。伪类可能是动态的，也就是说，元素可能会在用户与文档交互时获得或丢失伪类。例外情况包括:first-child（以及另一个子和类型伪选择器），它们可以从文档树中推断出来，以及:lang()在某些情况下也可以从文档树中推断出来。

简单来说，伪类就是你可以附加样式，但你永远不会在 HTML 中直接打印出来的东西。此外，伪类的获取和丢失取决于用户与 UI 的交互。

伪类列表：

来源

选择器	例子	示例说明
：积极的	一个：活跃	选择活动链接
:checked	输入：已检查	选择每个选中的 <input> 元素
:disabled	输入：禁用	选择每个禁用的 <input> 元素
：空的	p：空	选择每个没有子元素的 <p> 元素
:启用	输入：启用	选择每个启用的 <input> 元素
:first-child	p：第一个孩子	选择每个 <p> 元素，这些元素是其父元素的第一个子元素
:first-of-type	p:第一个类型	选择其父级的第一个 <p> 元素的每个 <p> 元素
：重点	输入：焦点	选择具有焦点的 <input> 元素
：徘徊	悬停	鼠标悬停时选择链接
:在范围内	输入：在范围内	选择具有指定范围内的值的 <input> 元素
：无效的	输入：无效	选择所有具有无效值的 <input> 元素
:lang(语言)	p:lang(it)	选择每个 lang 属性值以“it”开头的 <p> 元素
:last-child	p：最后一个孩子	选择每个 <p> 元素，这些元素是其父元素的最后一个子元素
:last-of-type	p:最后一种类型	选择其父级的最后一个 <p> 元素的每个 <p> 元素
：关联	链接	选择所有未访问的链接
:not（选择器）	:不（p）	选择所有不属于 <p> 元素的元素
:nth-child(n)	p:第 n 个孩子(2)	选择每个 <p> 元素，这些元素是其父元素的第二个子元素
:nth-last-child(n)	p:倒数第 n 个孩子(2)	选择每个 <p> 元素，这些元素是其父元素的第二个子元素（从最后一个子元素开始算起）
:nth-last-of-type(n)	p:nth-last-of-type(2)	选择其父元素的第二个 <p> 元素（从最后一个子元素开始计算）的每个 <p> 元素
:nth-of-type(n)	p:nth-of-type(2)	选择其父级的第二个 <p> 元素的每个 <p> 元素
:only-of-type	p:only-of-type	选择其父级的唯一 <p> 元素的每个 <p> 元素
:only-child	p:独生子女	选择每个作为其父元素的唯一子元素的 <p> 元素
：选修的	输入：可选	选择没有“required”属性的 <input> 元素
:超出范围	输入：超出范围	选择值超出指定范围的 <input> 元素
:只读	输入：只读	选择指定了“readonly”属性的 <input> 元素
:读写	输入：读写	选择没有“readonly”属性的 <input> 元素
：必需的	输入：必填	选择指定了“required”属性的 <input> 元素
：根	根	选择文档的根元素
：目标	#新闻：目标	选择当前活动的#news元素（单击包含该锚点名称的URL）
：有效的	输入：有效	选择所有具有有效值的 <input> 元素
:访问过	已访问	选择所有访问过的链接

伪元素列表

选择器	例子	示例说明
：：后	p::之后	在每个 <p> 元素后插入内容
：：前	p::之前	在每个 <p> 元素之前插入内容
::首字母	p::首字母	选择每个 <p> 元素的首字母
::第一线	p::第一行	选择每个 <p> 元素的第一行
::选择	p::选择	选择用户选择的元素部分

CSS3 属性列表

- 已分类。按字母顺序排列 -

动画属性

财产	描述
动画片	指定基于关键帧的动画。
动画延迟	指定动画何时开始。
动画导演	指定动画是否应交替循环反向播放。
动画持续时间	指定动画完成一个周期所需的秒数或毫秒数。
动画填充模式	指定 CSS 动画在执行之前和之后应如何将样式应用于其目标。
动画迭代次数	指定动画停止前应播放的循环次数。
动画名称	指定应应用于所选元素的@keyframes 定义动画的名称。
动画播放状态	指定动画是正在运行还是暂停。
动画计时功能	指定 CSS 动画在每个循环期间应如何进行。

背景属性

财产	描述
背景	在一个声明中定义各种背景属性。
背景附件	指定背景图像是否固定在视口中或滚动。
背景混合模式	指定每个背景层（颜色/图像）的混合模式
背景剪辑	指定背景的绘画区域。
背景颜色	定义元素的背景颜色。
背景图像	定义元素的背景图像。
背景原点	指定背景图像的定位区域。
背景位置	定义背景图像的来源。
背景重复	指定背景图像是否/如何平铺。
背景尺寸	指定背景图像的大小。

边框属性

财产	描述
边界	设置元素边框四边的宽度、样式和颜色。
下边框	设置元素底部边框的宽度、样式和颜色。
边框底部颜色	设置元素底部边框的颜色。
边框左下角半径	定义元素左下角边框的形状。
边框右下角半径	定义元素右下角边框的形状。
边框底部样式	设置元素底部边框的样式。
边框底部宽度	设置元素底部边框的宽度。
边框颜色	设置元素四边边框的颜色。
边框图像	指定如何使用图像代替边框样式。
边框图像起始	指定边框图像区域超出边框的量。
边框图像重复	指定图像边框是否应重复、圆化或拉伸。
边框图像切片	指定图像边框的内部偏移。
边框图像源	指定用作边框的图像的位置。
边框图像宽度	指定图像边框的宽度。
左边框	设置元素左边框的宽度、样式和颜色。
左边框颜色	设置元素左边框的颜色。
左边框样式	设置元素左边框的样式。
左边框宽度	设置元素左边框的宽度。
边框半径	定义元素边框角的形状。
右边框	设置元素右边框的宽度、样式和颜色。
右边框颜色	设置元素右边框的颜色。
右边框样式	设置元素右边框的样式。
右边框宽度	设置元素右边框的宽度。
边框样式	设置元素四边的边框样式。
顶部边框	设置元素顶部边框的宽度、样式和颜色。
边框顶部颜色	设置元素顶部边框的颜色。
边框左上角半径	定义元素左上角边框的形状。
边框右上半径	定义元素右上角的形状。
边框顶部样式	设置元素顶部边框的样式。
边框顶部宽度	设置元素顶部边框的宽度。
边框宽度	设置元素四边边框的宽度。
盒子装饰破损	设置分页时元素的背景和边框的行为，或者对于内联元素，设置换行时元素的背景和边框的行为。

颜色属性：

财产	描述
颜色	指定元素文本的颜色；可提供不同的格式。
不透明度	指定元素的透明度。

尺寸属性：

财产	描述
高度	指定元素的高度。
最大高度	指定元素的最大高度。
最大宽度	指定元素的最大宽度。
最小高度	指定元素的最小高度。
最小宽度	指定元素的最小宽度。
宽度	指定元素的宽度。

生成的内容属性：

财产	描述
内容	插入生成的内容。
引号	指定嵌入引文的引号。
反重置	创建或重置一个或多个计数器。
计数器增量	增加一个或多个计数器值。

灵活的盒子布局：

财产	描述
对齐内容	指定弹性容器内弹性容器项目的对齐方式。
对齐项目	指定弹性容器内项目的默认对齐方式。
对齐自身	指定弹性容器内选定项目的对齐方式。
弹性	指定灵活长度的组件。
弹性基础	指定弹性项目的初始主尺寸。
弹性方向	指定灵活项目的方向。
弹性流	flex-direction 和 flex-wrap 属性的简写属性。
flex-grow	指定弹性项目相对于弹性容器内的其他项目如何增长。
弹性收缩	指定弹性项目相对于弹性容器内的其他项目如何收缩。
弹性包裹	指定柔性项目是否应包装。
内容对齐	指定在解决任何弹性长度和自动边距后，弹性项目如何沿弹性容器的主轴对齐。
命令	指定弹性项目在弹性容器内显示和布局的顺序。

字体属性：

财产	描述
字体	在一个声明中定义多种字体属性。
字体系列	定义元素的字体列表。
字体功能设置	允许控制 OpenType 字体中的高级印刷功能
字体字距调整	控制字距调整信息（字母间距）的使用
字体语言覆盖	控制字体中特定语言字形的使用
字体大小	定义文本的字体大小。
字体大小调整	当字体回退时保留文本的可读性。
字体拉伸	从字体中选择普通、压缩或扩展字体。
字体样式	定义文本的字体样式。
字体合成	控制浏览器可以合成哪些缺失的字体（粗体或斜体）。
字体变体	指定字体变体。
字体变体替代	控制与@font-feature-values 中定义的替代名称相关的替代字形的使用。
字体变体大写	控制大写字母替代字形的使用
东亚字体变体	控制东亚文字（例如日语和中文）替代字形的使用。
字体变体连字	控制在其适用的元素的文本内容中使用哪些连字和上下文形式。
字体变体数字	控制数字、分数和序数标记的替代字形的使用。
字体变体位置	控制字体基线上方或下方较小尺寸的替代字形的使用情况。
字体粗细	指定文本的字体粗细。

网格布局属性：

财产	描述
网格	grid-template-rows、grid-template-columns、grid-template-areas、grid-auto-rows、grid-auto-columns 和 grid-auto-flow 属性的简写属性。
网格区域	为网格项指定一个名称，或者此属性是 grid-row-start、grid-column-start、grid-row-end 和 grid-column-end 属性的简写属性。
网格自动列	指定默认列大小
网格自动流	指定如何将自动放置的项目插入网格中。
网格自动行	指定默认行大小。
网格列	grid-column-start 和 grid-column-end 属性的简写属性。
网格列结束	指定网格项的结束位置。
网格列间隙	指定列之间间隙的大小。
网格列起始	指定网格项的起始位置。
网格间隙	grid-row-gap 和 grid-column-gap 属性的简写属性。
网格行	grid-row-start 和 grid-row-end 属性的简写属性。
网格行末端	指定网格项的结束位置。
网格行间隙	指定行之间的间隙大小。
网格行起始	指定网格项的起始位置。
网格模板	grid-template-rows、grid-template-columns 和 grid-areas 属性的简写属性。
网格模板区域	使用命名网格项指定如何显示列和行。
网格模板列	指定列的大小以及网格布局中的列数。
网格模板行	指定网格布局中行的大小。

列表属性：

财产	描述
列表样式	定义列表和列表元素的显示样式。
列表样式图像	指定用作列表项标记的图像。
列表样式位置	指定列表项标记的位置。
列表样式类型	指定列表项的标记样式。

边距属性：

财产	描述
利润	设置元素四边的边距。
下边距	设置元素的底部边距。
左边距	设置元素的左边距。
右边距	设置元素的右边距。
上边距	设置元素的上边距。

多列布局属性：

财产	描述
列数	指定多列元素中的列数。
列填充	指定如何填充列。
柱间隙	指定多列元素中列之间的间隙。
列规则	指定在多列元素中每列之间绘制的直线或“规则”。
列规则颜色	指定多列布局中列与列之间绘制的规则的颜色。
列规则样式	指定多列布局中列与列之间绘制的规则的样式。
列规则宽度	指定多列布局中列之间绘制的规则的宽度。
列跨度	指定元素在多列布局中跨越多少列。
列宽	指定多列元素中列的最佳宽度。
列	用于设置列宽和列数属性的简写属性。

轮廓属性：

财产	描述
大纲	设置元素轮廓四边的宽度、样式和颜色。
轮廓颜色	设置轮廓的颜色。
轮廓偏移	设置元素轮廓和边框边缘之间的空间。
大纲样式	设置轮廓的样式。
轮廓宽度	设置轮廓的宽度。

填充属性：

财产	描述
填充	设置元素四边的填充。
填充底部	设置元素底部的填充。
左填充	设置元素左侧的填充。
右填充	设置元素右侧的填充。
顶部填充	设置元素顶部的填充。

打印属性：

财产	描述
之后分页	在元素后插入分页符。
分页符之前	在元素前插入分页符。
内部分页符	在元素内插入分页符。

表属性：

财产	描述
边界折叠	指定表格单元格边框是连接还是分离。
边框间距	设置相邻表格单元格边框之间的间距。
标题侧	指定表格标题的位置。
空单元格	显示或隐藏空表格单元格的边框和背景。
表格布局	指定表格布局算法。

文本属性：

财产	描述
方向	定义文本方向/书写方向。
制表符大小	指定制表符的长度。
文本对齐	设置内联内容的水平对齐方式。
文本最后对齐	指定当文本对齐为两端对齐时，块的最后一行或强制换行符之前的一行如何对齐。
文字装饰	指定添加到文本的装饰。
文字装饰颜色	指定文本装饰线的颜色。
文字装饰线	指定向元素添加哪种线条装饰。
文本装饰风格	指定由 text-decoration-line 属性指定的线条的样式。
文本缩进	缩进文本的第一行。
文本对齐	指定当文本对齐属性设置为对齐时要使用的对齐方法。
文本溢出	指定当文本内容溢出块容器时如何显示。
文字阴影	对元素的文本内容应用一个或多个阴影。
文本转换	转换文本的大小写。
行高	设置文本行之间的高度。
垂直对齐	设置元素相对于当前文本基线的垂直定位。
字母间距	设置字母之间的额外间距。
字间距	设置单词之间的间距。
空白	指定如何处理元素内的空白。
断词	指定如何在单词内换行。
自动换行	指定当内容溢出容器边界时是否断词。

变换属性：

财产	描述
背面可见性	指定当面向用户时转换元素的“背面”是否可见。
看法	定义查看对象所有子元素的视角。
视角起源	定义透视属性的原点（3D 空间的消失点）。
转换	对元素应用 2D 或 3D 转换。
变换原点	定义元素转换的原点。
变换风格	指定嵌套元素在 3D 空间中的呈现方式。

过渡属性：

财产	描述
过渡	定义元素两种状态之间的转换。
转换延迟	指定过渡效果何时开始。
过渡持续时间	指定完成过渡效果所需的秒数或毫秒数。
过渡属性	指定应应用过渡效果的 CSS 属性的名称。
过渡时间函数	指定过渡效果的速度曲线。

视觉格式属性：

财产	描述
插入符号颜色	指定输入、文本区域或任何可编辑元素中的光标（插入符号）的颜色
展示	指定元素在屏幕上的显示方式。
位置	指定元素的定位方式。
筛选	指定应用于元素或多媒体文件（图像、视频......）的过滤器
顶部	指定定位元素的顶边缘的位置。
正确的	指定定位元素右边缘的位置。
底部	指定定位元素的底边的位置。
左边	指定定位元素左边缘的位置。
漂浮	指定框是否应该浮动。
清除	指定元素相对于浮动元素的位置。
z-索引	指定定位元素的分层或堆叠顺序。
溢出	指定溢出元素框的内容的处理。
溢出-x	指定当内容溢出元素内容区域的宽度时如何管理内容。
溢出	指定当内容溢出元素内容区域的高度时如何管理内容。
溢出包装	指定浏览器是否可以在单词内换行以防止溢出（当字符串太长而无法容纳其包含框时）。
调整大小	指定元素是否可以由用户调整大小。
夹子	定义剪辑区域。
能见度	指定元素是否可见。
光标	指定游标的类型。
盒子阴影	将一个或多个阴影应用于元素的框。
盒子大小	改变默认的 CSS 盒模型。

其他属性：

连字符

财产	描述
全部	重置所有属性（unicode-bidi 和方向除外）
悬挂标点	指定标点符号是否可以放在行框外面。
	设置如何分割单词以改善段落的布局。
图像渲染	向浏览器提示在缩放图像时保留图像的哪些方面最重要。
隔离	定义元素是否必须创建新的堆叠内容。
混合模式	指定元素的内容应如何与其直接父背景混合
对象适配	指定替换元素的内容应如何适应其使用的高度和宽度所建立的框。
对象位置	指定替换元素在其框内的对齐方式。
指针事件	定义元素是否对指针事件做出反应。
滚动行为	指定是否以平滑的方式为可滚动框中的滚动位置设置动画，而不是直接跳转。
unicode-bidi	与 direction 属性一起使用来设置或返回是否应覆盖文本以支持同一文档中的多种语言
写作模式	指定文本行是水平排列还是垂直排列。

CSS3 规则：

财产	描述
@字符集	指定外部样式表的字符编码。
@font-face	允许使用可下载的网络字体。
@进口	导入外部样式表。
@关键帧	指定动画过程中各个点的动画属性值。
@媒体	为样式表中的一组规则设置媒体类型。
@页	定义打印环境中页框的尺寸、方向和边距。

来源

CSS 注释：

在 HTML 中，你可以使用 来注释文本

在 CSS 或 SCSS 中，您可以使用斜线 + 星号（以及星号 + 斜线表示闭合）进行多行注释，例如：

/* 
多

行

注释
*/

如果您使用 Sass / SCSS，您还可以使用双斜杠 // 添加注释，以获得单行注释，请参见下面的示例

//单行注释
#main-content.container { 背景：绿色； }
#main-content { 背景：红色； }
// .container { 背景：蓝色； }

供应商前缀/属性前缀：

因此，从前端 Web 开发者的角度来看，浏览器前缀可用于在网站上添加新的 CSS 功能，同时确保浏览器能够支持这些样式。当不同的浏览器制造商以略有不同的方式或语法实现属性时，这一点尤其有用。

您可以使用的 CSS 浏览器前缀（每个前缀特定于不同的浏览器）是：

Android、Chrome、iOS（包括 iOS 版 Firefox）、Safari、Opera（新版本）；任何基于 webkit 的浏览器。	-webkit-
火狐浏览器	-moz-
Internet Explorer、Edge	-多发性硬化症-
Opera（旧 WebKit 之前的版本）	-o-

大多数情况下，要使用全新的 CSS 样式属性，您需要使用标准 CSS 属性并添加针对每个浏览器的前缀。带前缀的版本始终会放在最前面（您可以按照自己喜欢的顺序排列），而普通 CSS 属性则会放在最后。例如，如果您想在文档中添加 CSS3 过渡效果，可以使用 transition 属性，如下所示：

-webkit-transition：所有 4s 轻松；

-moz-transition：所有 4s 轻松；

-ms-transition：所有 4s 轻松；

-o-transition：所有 4s 轻松；

过渡：四肢轻松；

请记住，某些浏览器对某些属性的语法与其他浏览器不同，因此不要假设属性的浏览器前缀版本与标准属性完全相同。例如，要创建 CSS 渐变，请使用 linear-gradient 属性。Firefox、Opera 以及 Chrome 和 Safari 的现代版本使用该属性并添加相应的前缀，而 Chrome 和 Safari 的早期版本则使用带前缀的属性 -webkit-gradient。

此外，Firefox 使用的值与标准值不同。

始终以 CSS 属性的普通、无前缀版本结尾声明的原因是，当浏览器支持该规则时，它会使用该规则。记住 CSS 的读取方式。如果优先级相同，则后面的规则优先于前面的规则，因此，如果浏览器不支持普通版本，它会读取并使用该规则的供应商版本；但一旦浏览器支持普通版本，它就会用实际的 CSS 规则覆盖供应商版本。

CSS 属性协同作用：

我几乎不可能创建一个关于所有 CSS 协同作用的完整文档，但我有义务通知您这一点。原因如下：

可能出现意外行为
达到单一属性未定义或在某些布局内不起作用的事物的方法。

例如，您可以将此属性设置到 div HTML 元素中：max-width: 600px; margin: 0 auto;它将位于屏幕中央，最大占用 600px。

我们没有设置 align-self: center，也没有设置 justif-content 或其他居中属性或值，但是将 x 轴边距设置为 auto 并结合 max-width 属性（显然，当窗口大于 600px 时）将使 div 分别显示在屏幕中央。

当然，你可以使用父 div 和display: flex; justify-content: center; 子 div 来实现相同的设置max-width: 600px;

阅读完最后一段后，您可能会发现表面上的混乱之间存在逻辑，只需思考一下属性的作用：

max-width: 600px; 将元素的宽度限制为 600px。
默认情况下，所有项目的位置都是“顶部：0；左侧：0；”，因此它将从左侧：0；开始到左侧：600；
边距指定对象之间的距离，设置 margin: 0 auto; 表示我们不希望 Y 轴边距为零，但希望 X 轴边距为自动。也就是说，读取元素的可用空间，将其除以 2，然后将元素的两边各设置一半。当然，这会导致元素居中。

所以不要担心协同效应，当你发现协同效应时，只需尝试理解它为什么会这样起作用，你就会学得很快。

建议：

我正在逐步添加大量属性。其中一些属性并非标准属性，或者并非所有浏览器都支持。有时，你会找到一些变通方法，例如为属性添加前缀，或者使用 JavaScript 来访问 DOM 属性（如果有的话）。

我强烈建议你在can I use上搜索要使用的属性。如果你在这里找不到你想要的属性，那么可以在mdn上搜索。

如果您要构建可以在 chrome 上运行的东西，这是可以的，因为它通常可以使用几乎所有的属性，但如果您需要与旧浏览器兼容或向后兼容，则需要更准确地搜索此属性兼容性。

例子：

我发布了一些关于使用 CSS 构建交互式组件的帖子，您可能会觉得有用，您可以在这里查看帖子：

我将在这里添加更多内容，以增加单个帖子中包含的信息内容，例如单位、颜色格式等。

希望您觉得这些有用，如果您有任何疑问，请发表评论并分享:)

编辑/变更日志

添加了 40 多个属性，每个属性都有其描述。
添加了网格布局属性块。
添加了其他属性块。
添加了前缀文档。
添加了建议，特别是针对新手的建议。
添加了外部来源。
添加了 css 属性协同解释。
关于评论的更正

此致

文章来源：https://dev.to/joelbonetr/complete-css-guide-for-beginners-1gjc

面向初学者和非初学者的完整 CSS 指南 理解 CSS

面向初学者和非初学者的完整 CSS 指南

理解 CSS

理解 CSS

什么是 CSS？

CSS语法

如何向您的项目添加 CSS 样式？

推荐：

基本选择器

层叠顺序

!important

子选择器

CSS 组合器列表：

标签选择器

属性选择器：

伪选择器

伪类列表：

伪元素列表

CSS3 属性列表

动画属性

背景属性

边框属性

颜色属性：

尺寸属性：

生成的内容属性：

灵活的盒子布局：

字体属性：

网格布局属性：

列表属性：

边距属性：

多列布局属性：

轮廓属性：

填充属性：

打印属性：

表属性：

文本属性：

变换属性：

过渡属性：

视觉格式属性：

其他属性：

CSS3 规则：

CSS 注释：

供应商前缀/属性前缀：

CSS 属性协同作用：

建议：

例子：

编辑/变更日志

面向初学者和非初学者的完整 CSS 指南理解 CSS

`!important`