<u> 作者:jason-wrj </u>
<u> 分类:服务器/网络服务器/CSS </u>
<u> 标签:Server, Web Server, CSS </u>
<u> 更多:
<u> 更多:
1 概述
1.1 CSS 的基本概念
CSS(Cascading Style Sheets,层叠样式表)是一种用于描述HTML或XML(包括 SVG、XHTML 等)网页结构化文档(外观和格式视觉表现)呈现方式的样式表语言,由W3C制定标准。
CSS 通过定义网页元素的字体、间距、颜色、布局、动画等外观视觉属性,控制网页内容外观和布局,实现网页美化。
CSS 通过将样式与内容分离,使得网页设计更加灵活、高效,并支持动态变化的布局和交互效果。
CSS 是现代网页设计(前端开发)的核心技能之一,通过实践和参考优秀案例可以快速掌握。
1.2 CSS 的发展历程
-
1994年:由哈坤·利(Håkon Wium Lie)首次提出,旨在解决HTML样式与内容混杂导致的代码臃肿问题。
-
1996年:CSS1成为W3C推荐标准,支持基础样式控制。
-
1998年:CSS2增加浮动、定位等复杂布局功能。
-
2010年:CSS3引入圆角、阴影、动画等现代特性,与HTML5共同成为网页开发主流。
1.3 CSS 的版本演进
-
CSS3:当前主流版本,模块化引入弹性布局、动画、媒体查询等功能。
-
向后兼容:新特性在不支持的老浏览器中可平稳降级。
1.4 CSS 的应用场景
-
网页设计
-
网页视觉美化(字体、颜色、背景)。
-
构建响应式网站,适配不同设备(手机、平板、桌面)。
-
动态交互效果(悬停、点击反馈)。
-
打印样式优化(
@media print
)。 -
组件化开发(配合CSS-in-JS或CSS Modules)。
-
-
实现复杂的 UI 组件
-
如导航栏、卡片布局、模态框。
-
-
主题与样式库
-
开发可复用的 UI 框架(如 Bootstrap、Tailwind CSS)。
-
动态切换主题(如暗色模式)。
-
-
性能优化
-
使用 CSS 压缩工具减少文件体积。
-
利用缓存策略提升加载速度。
-
-
国际化与无障碍
-
通过逻辑属性支持多语言排版(如阿拉伯语的 RTL 布局)。
-
确保样式兼容屏幕阅读器。
-
1.5 CSS 的核心特点
-
分离性
内容与表现分离,HTML 专注结构,CSS 控制样式,便于维护和协作。CSS 将样式与 HTML 结构分离,提升代码可维护性。修改样式无需调整 HTML 结构,只需更新 CSS 文件。
-
层叠性
多个样式规则可叠加作用于同一元素,按优先级(如
!important
> 内联样式 > ID 选择器 > 类选择器 > 标签选择器)确定最终效果。 -
继承性
父元素的样式(如字体、颜色)可自动传递到子元素,减少重复代码。
-
响应式设计
通过媒体查询(Media Queries)适配不同设备屏幕(如手机、电脑),实现自适应布局。
-
精准控制
像素级调整元素位置、大小、边框等。
-
样式复用
一套样式可应用于多个页面,减少重复代码。
-
性能优化
支持外部样式表缓存,减少重复代码加载。
-
丰富效果
支持渐变、圆角、阴影、动画等现代视觉特性(CSS3)。
-
可扩展性
通过预处理器(如 Sass/Less)或后处理器(如PostCSS)增强功能。
-
跨浏览器一致性
通过标准化属性(如
display: flex
)减少样式差异。
1.6 CSS 的功能作用
-
控制网页外观
-
颜色表示:支持十六进制(如
#FFFF00
表示黄色)、RGB 等格式。 -
文本样式:字体、颜色、对齐方式。
-
排版控制 :可以精确地设置字体、字号、行距、字距等排版属性,实现丰富的文本排版效果,如不同的字体样式、大小写转换、文本阴影等。
-
外观美化 :可设置元素的颜色、背景图像、边框样式、圆角、阴影等外观属性,使网页更具视觉吸引力。
-
-
实现复杂的布局((Flexbox)弹性盒子、(Grid)网格布局、响应式设计)。
-
布局设计 :通过定位属性(如
position
)、盒模型(margin
、padding
、border
、width
、height
等)以及弹性布局(flex
布局)、网格布局(grid
布局)等技术,实现复杂的网页布局,如响应式布局、多列布局等。
-
-
管理元素的动态状态(悬停效果、动画)。
-
交互效果 :利用伪类和 CSS 动画(
@keyframes
)、过渡(transition
)等特性,为网页添加交互效果,如按钮悬停效果、点击效果、元素的动画过渡、关键帧动画等。
-
-
内容与样式的分离
-
通过 CSS 将网页的结构(HTML)与表现(CSS 样式)解耦,实现内容(HTML)与样式(CSS)分离,便于维护和更新,提升代码可维护性和复用性。
-
允许通过一个样式表文件统一管理多个页面的样式。
-
-
提升开发效率
-
避免重复的 HTML 标签(如
<font>
或表格布局),减少代码冗余。 -
支持继承和层叠规则,简化样式覆盖逻辑。
-
1.7 CSS 的工作原理
-
解析 HTML,生成 DOM 树。
-
解析 CSS ,生成 CSSOM 树。
-
合并 DOM + CSSOM,构建渲染树。
-
布局与绘制,计算元素位置并渲染页面。
1.8 CSS 的优势与局限
-
优势
-
性能优化:外部样式表可被浏览器缓存,减少重复加载。
-
SEO友好:结构清晰的HTML更易被搜索引擎抓取。
-
维护便捷:全局样式可通过单一CSS文件统一调整。
-
-
局限
-
浏览器兼容性问题(如旧版IE不支持部分CSS3属性)。
-
学习曲线较陡,需掌握选择器优先级、盒模型等复杂概念。
-
CSS 本身主要用于样式和布局,对于页面的结构和内容逻辑的控制能力较弱,通常需要与 HTML 和 JavaScript 配合使用来实现更复杂的网页功能。
-
一些复杂的样式效果可能需要使用较多的代码和技巧来实现,并且在不同浏览器中可能存在兼容性问题,需要进行额外的测试和调整。
-
2 CSS 引入方式与优先级
2.1 外部样式表(最常用)
编写在HTML文档中的<head> </head>
头部元素之间,通过<link>
元素标签引入独立 CSS 文件,方便实现多页面复用:
<head><link rel="stylesheet" href="style.css">
</head>
2.2 内部样式表
通常编写在HTML文档中的<head> </head>
头部元素之间的<style> </style>
元素内,通过在<style>
元素内,直接定义 CSS 样式,仅当前页面有效:
<style>body { background: #f0f0f0; } </style>
2.3 内联样式表
直接写在 HTML 文档元素标签的style
属性中,优先级最高但不利于维护:
<p style="color: purple;">示例文本</p>
2.4 样式表的优先级
内联样式 > 内部样式 > 外部样式。
3 CSS 的基础语法
3.1 CSS 样式规则
由一系列规则集组成,规则集(ruleset)常简称为规则(rule)。每条规则集(ruleset)是由选择器(selector)和声明块构成。如下所示:
selector_1, /* 选择器1 */ selector_2, /* 选择器2 */ selector_n { /* 选择器n */property_1: value_1; /* 声明块1 */ /* 属性名_1: 属性值_1 */property_2: value_2; /* 声明块2 */ /* 属性名_2: 属性值_2 */property_n: value_n; /* 声明块n */ /* 属性名_n: 属性值_n */ }
-
选择器
选择器(Selectors)用于指定要应用样式的 HTML 或 XML 元素(如
#id
、.class
、h1
),例如:#id
用于选择具有特定 ID 的元素,.class
用于选择具有特定类的元素,p
用于选择所有段落元素等。 -
声明块
声明块(Declaration Block)由一对大括号
{}
包围,其中包含一条或多条(属性: 值;
)声明(Declaration) 。每条声明都是由属性和值组成,用于指定元素的样式,例如(color: black;
) 表示设置元素的文本颜色为黑色。-
属性(Property):是一个标识符,用可读的名称来表示其特性。如
color
、font-size
、margin
等。 -
值(Value):属性的具体设置,每个属性都包含一个有效值的集合,它有正式的语法和语义定义。如
red
、16px
、auto
等。
-
-
注释
使用
/* 注释内容 */
,添加 CSS 层叠样式表中的注释内容。
3.2 CSS 样式选择器
选择器(Selectors)至少要有一个,通过ID、类名、元素标签名等精准定位HTML元素,并指定要应用的样式(如 #id
、.class
、p
),或通过属性、伪类等实现动态样式。如果包含多个选择器的集合分组,则用逗号,
分隔。
#header { background-color: gray; } /* ID选择器 */ .text-red { color: red; } /* 类选择器 */ [type="text"] { border: 1px solid black; } /* 属性选择器 */ :hover { } /* 伪类(状态) */ ::before { } /* 伪元素(生成内容) */ p { color: blue; } /* 元素标签选择器 */ div p { margin: 10px; } /* 关系组合选择器 */ /* 后代选择器 */ div > p { padding: 5px; } /* 关系组合选择器 */ /* 子选择器 */ h1 + p { font-weight: bold; } /* 关系组合选择器 */ /* 相邻兄弟选择器 */
常见的选择器类型,有以下几种:
-
ID 选择器
使用唯一的 ID 标识符来选择元素,匹配具有同名 ID 属性值的元素。ID 前需要加上井号
#
,如#myId
只会选中页面上唯一具有id="myId"
属性的元素。例如:
-
#bg1 { background: blue; }
,匹配具有id
属性,且id
属性值为bg1
的所有元素 。
-
-
类选择器
使用类名来选择元素,匹配具有同名 class 属性值的元素。类名前需要加上点号
.
,如.myClass
会选中所有具有class="myClass"
属性的元素。例如:
-
.text1 { font-size: 16px; }
,匹配具有class
属性,且class
属性值为text1
的所有元素。
-
-
属性选择器
根据元素的属性及其值来选择元素,如
[type="text"]
会选中所有具有type="text"
属性的元素。例如:
-
[attribute] { background: red; }
,匹配具有attribute
属性的所有元素。 -
[attribute1=value1] { background: red; }
,匹配具有attribute1
属性,且attribute1
属性值与value1
等同的所有元素。 -
[attribute2^=value2] { background: red; }
,匹配具有attribute2
属性,且attribute2
属性值以value2
开头的所有元素。 -
[attribute3$=value3] { background: red; }
,匹配具有attribute3
属性,且attribute3
属性值以value3
结尾的所有元素。 -
[attribute4*=value4] { background: red; }
,匹配具有attribute4
属性,且attribute4
属性值包含value4
的所有元素。 -
[attribute5~=value5] { background: red; }
,匹配具有attribute5
属性,且attribute5
属性值包含一个以空格分隔的值与value5
等同的所有元素。即attribute5
属性的值里,必须有value5
这个单词,并且value5
要与其它单词之间有空格分隔。 -
[attribute6|=value6] { background: red; }
,匹配具有attribute6
属性,且attribute6
属性值与value6
等同或以value6
开头的所有元素。
-
-
伪类选择器
用于选择处于特定状态的元素,如
:hover
用于选择鼠标悬停在元素上时的状态,:active
用于选择鼠标点击元素时的状态等。例如:a:hover { color: green; }
。例如:
-
:first-child
,结构性伪类选择器,匹配在一组兄弟元素中的第一个元素。 -
:last-child
,结构性伪类选择器,匹配在一组兄弟元素中的最后一个元素。 -
:first-of-type
,结构性伪类选择器,匹配在一组兄弟元素中其类型的第一个元素。 -
:last-of-type
,结构性伪类选择器,匹配在(它父元素的)子元素列表中,最后一个给定类型的元素。 -
:only-of-type
,结构性伪类选择器,匹配任意一个元素,这个元素没有其他相同类型的兄弟元素。 -
:nth-child(n)
,结构性伪类选择器,根据元素在父元素内的子元素列表中的索引来匹配选择元素。n
表示元素在子元素列表中的第几个。 -
:nth-child(odd)
,结构性伪类选择器,根据元素在父元素内的子元素列表中的索引来匹配选择元素。odd
表示元素在兄弟元素列表中的位置是奇数:1、3、5……。 -
:nth-child(even)
,结构性伪类选择器,根据元素在父元素内的子元素列表中的索引来匹配选择元素。even
表示元素在兄弟元素列表中的位置是偶数:2、4、6……。 -
:enabled
,UI元素状态伪类选择器,匹配任何已启用的元素。如果元素可以被激活(例如被选择、单击、输入文本等),或者能够获得焦点,那么它就是启用的。 -
:disabled
,UI元素状态伪类选择器,匹配任何被禁用的元素。如果一个元素不能被激活(如选择、点击或接受文本输入)或获取焦点,则该元素处于被禁用状态。 -
:read-only
,UI元素状态伪类选择器,匹配只读状态的元素,表示元素不可被用户编辑的状态(如锁定的文本输入框)。 -
:checked
,UI元素状态伪类选择器,匹配选中状态的元素,选择任何处于选中状态的radio(<input type="radio">
),checkbox (<input type="checkbox">
) 或 select 元素中的 ("option"
) 元素。即匹配任意被勾选/选中的 radio(单选按钮),checkbox(复选框),或者 option(select 中的一项) 。 -
:active
,UI元素状态伪类选择器,匹配被用户激活的元素。它让页面能在浏览器监测到激活时给出反馈。当用鼠标交互时,它代表的是用户按下按键和松开按键之间的时间。 -
:hover
,UI元素状态伪类选择器,匹配在用户使用指针设备与元素进行交互时匹配,但不一定激活它。通常在用户将光标(鼠标指针)悬停在元素上时触发。 -
:visited
,UI元素状态伪类选择器,匹配在用户访问链接后生效。但由于出于隐私保护的原因,使用该选择器可以修改的样式非常有限。 -
:focus
,UI元素状态伪类选择器,匹配获得焦点的元素(如表单输入)。当用户点击或轻触一个元素或使用键盘的Tab
键选择它时,它会被触发。
-
-
否定反选伪类选择器(negation pseudo-class)
用来匹配不符合一组选择器的元素,它的作用是防止特定的元素被选中。
例如:
-
:not(selectors)
,匹配与selectors
选择器相反的所有元素。
-
-
元素选择器
直接使用 HTML 元素的名称作为选择器,如
p
会选中页面上所有的<p>
元素。例如:
-
p { color: blue; }
,匹配所有p
元素。
-
-
伪元素选择器
-
::first-letter
,用于将样式应用于区块容器第一行的第一个字母,但仅当其前面没有其他内容(例如图像或行内表格)时才有效。 -
::first-line
,只能在块容器中,匹配在区块容器的第一行应用样式。 -
::before
,会创建一个伪元素,作为所选中元素的第一个子元素。通常用于为具有content
属性的元素添加修饰性的内容。此元素默认情况下是行级的。 -
::after
,会创建一个伪元素,作为所选中元素的最后一个子元素。通常用于为具有content
属性的元素添加修饰性的内容。此元素默认情况下是行向布局的。
-
-
关系组合选择器(combinator)
包含祖先后代选择器(
A B
)、第一级父子元素选择器(A > B
)、相邻兄弟选择器(A + B
)、后续兄弟选择器(A ~ B
)等。例如:
-
div p { color: blue; }
,祖先后代选择器,匹配所有div
元素内的所有p
元素。 -
.class1>p { color: blue; }
,第一级父子元素选择器,匹配具有class
类属性,且类属性的值为.class1
的所有元素下的第一级p
子元素。 -
h1+p { color: blue; }
,相邻兄弟选择器,匹配所有h1
元素后面紧接相邻着的第一个p
元素。 -
h2~p { color: blue; }
,后续兄弟选择器,匹配所有h2
元素后面所有的p
元素。
-
-
通配选择器(universal selector)
通配符选择器(
*
),用于匹配当前 HTML 文档中所有的元素。例如:
-
* { color: red; }
,匹配当前 HTML 文档中所有的元素,并设置颜色为红色。
-
-
集合分组选择器
上述所有选择器均可集合成同一分组选择器,通过逗号
,
分隔不同的选择器。例如:
-
div p, .class1>p, h1+p, h2~p { color: red; }
,集合匹配所有div
元素内的所有p
元素,集合匹配具有class
类属性,且类属性的值为.class1
的所有元素下的第一级p
子元素,集合匹配所有h1
元素后面紧接相邻着的第一个p
元素,集合匹配所有h2
元素后面所有的p
元素。
-
3.3 CSS 样式声明块
包含一个或多个声明,用花括号 { }
包裹。每个声明由属性和值组成,不同声明用分号;
分隔。
-
样式属性与属性值
-
样式属性(如
color
、margin
),用于定义样式特性。如background-color
用于设置元素的背景颜色,font-size
用于设置字体大小等。 -
属性值(如
red
、20px
),为样式属性指定具体效果的值。如background-color: #ff0000;
表示将背景颜色设置为红色,font-size: 16px;
表示将字体大小设置为 16 像素。
-
-
声明缩写优化
-
margin: 10px 20px;
(上下10px,左右20px)。
-
3.4 CSS 的 at 规则
以 @()开始,随后是标识符,一直到以分号或右大括号结束。
每个 at 规则由其标识符定义,可能有它自己的语法。
at 规则涵盖了 meta 信息(比如 @charset @import)、条件信息(比如 @media @document)、描述信息(比如 @font-face)。
-
@charset
——定义样式表使用的字符集。 -
@import
——告诉 CSS 引擎引入一个外部样式表。 -
@namespace
——告诉 CSS 引擎必须考虑 XML 命名空间。 -
@layer
——声明了一个层叠层,同一层内的规则将级联在一起,这给予了开发者对层叠机制的更多控制。
3.5 CSS 的语法示例
body {background: #f0f0f0; /* 浅灰色背景 */font-family: "Microsoft YaHei"; /* 字体 */ } h1 {color: #0A0000; /* 深红色标题(RGB 10,0,0) */ } /* 选择所有 <p> 标签,声明设置字体颜色和背景 */ p {color: blue;background-color: #f0f0f0; } /* 选择 class 为 "highlight" 的元素,声明 */ .highlight {font-weight: bold;border: 1px solid red; } /* 选择 id 为 "header" 的元素 */ #header {text-align: center;padding: 20px; }
4 核心组成
4.1 盒模型(Box Model)
定义元素的空间占用规则,每个元素在页面中都被视为一个矩形盒子,由内容区(content)、内边距(padding)、边框 (border)和 外边距(margin)组成),是布局的基础。
从内部到外围,分别为:
-
content
(内容)。 -
padding
(内边距)。 -
border
(边框)。 -
margin
(外边距)。
.box {width: 300px; /* 内容区宽度 */padding: 20px; /* 内边距 */border: 1px solid black; /* 边框 */margin: 10px; /* 外边距 */box-sizing: border-box; /* 宽度包含padding和border */ }
通过设置 box-sizing
属性,可分为两种盒模型。
-
box-sizing: content-box;
,设置为标准模式的盒模型,此种模式下,矩形盒子的总宽度和总高度,仅指内容区的宽度和高度。 -
box-sizing: border-box;
,设置为怪异模式的盒模型,此种模式下,矩形盒子的总宽度和总高度,包含了(内容区+内边距+边框)的宽度和高度。
/* 默认:width/height 仅指内容区域 */ box-sizing: content-box; /* width/height 包含内容、内边距和边框 */ box-sizing: border-box;
4.2 布局系统
-
浮动(Float)
传统布局,通过
float
实现元素左右对齐,实现文字环绕效果,常用于早期的多列布局。可分为设置浮动(float)、清除浮动(clear)。
.float-left { float: left; /* 浮动(Float) */ } .clearfix::after {content: " ";display: table;clear: both; /* 清除浮动 */ }
-
定位(Positioning)
传统布局,通过
position: static/relative/absolute/fixed/sticky;
控制元素的绝对或相对位置。可分为默认状态(static)、相对定位(relative)、绝对定位(absolute)、固定定位(fixed)、粘性定位(sticky)。
.static {position: static; /* 默认状态 */ } .relative {position: relative; /* 相对定位 */ } .absolute {position: absolute; /* 绝对定位 */top: 10px; left: 20px; } .fixed {position: fixed; /* 固定定位 */bottom: 0; } .sticky {position: sticky; /* 粘性定位 */top: 0; }
-
弹性盒子(Flexbox)
现代新式布局,设置一维弹性布局,用于简化响应式布局。适合简单对齐和空间分配。
.flexbox-container {display: flex; /* 创建弹性容器 */justify-content: center; /* 水平居中对齐 *//* justify-content: space-between; */ /* 主轴对齐方式 */align-items: center; /* 垂直居中对齐 *//* align-items: center; */ /* 交叉轴对齐方式 */ }
参考属性:flex
,flex-basis
,flex-direction
,flex-flow
,flex-grow
,flex-shrink
,flex-wrap
,order
。
对齐属性:align-content
,align-items
,align-self
,justify-content
,place-content
,row-gap
,column-gap
,gap
。
-
网格布局(Grid)
现代新式布局,设置二维网格布局,用于实现复杂页面结构。
.grid-container {display: grid; /* 创建网格容器 */grid-template-columns: 1fr 2fr; /* 列宽比例 *//* grid-template-columns: repeat(3, 1fr);*/ /* 3 列等宽 */gap: 10px; /* 网格间隔 */ }
参考属性:grid-template-columns
,grid-template-rows
,grid-template-areas
,grid-template
,grid-auto-columns
,grid-auto-rows
,grid-auto-flow
,grid
,grid-row-start
,grid-column-start
,grid-row-end
,grid-column-end
,grid-row
,grid-column
,grid-area
,grid-row-gap
,grid-column-gap
,grid-gap
。
参考函数:repeat()
,minmax()
,fit-content()
。
相关术语:网格(Grid),网格线(Grid lines),网格轨道(Grid tracks),网格单元格(Grid cell),网格区域(Grid areas),网格间隙(Gutters),网格轴(Grid Axis),网格行(Grid row),网格列(Grid column)。
-
弹性盒子和网格布局的示例
/* 示例:居中元素 */ .container {display: flex; /* 传统flex方案 */justify-content: center;align-items: center; } .container {display: grid; /* 现代grid方案 */place-items: center; /* 一行代码实现居中 */ }
4.3 响应式设计
-
媒体查询(Media Queries)
使用
@media
媒体查询,适配不同设备尺寸,根据设备特性(如屏幕宽度)应用不同的样式,适配不同终端(PC/平板/手机)。
@media (max-width: 768px) { /* 屏幕宽度小于768px时应用 */body { font-size: 14px; }.container { flex-direction: column; } }
-
视口单位(Viewport Units)
-
vw
(视口宽度)(视口宽度的百分比)。 -
vh
(视口高度)(视口高度的百分比)。
-
5 常用CSS样式
5.1 文本相关样式
-
color
(颜色):red | #ff0000 | rgb(255,0,0) | rgba(255,0,0,0.5)
。 -
font-size
(字号):14px | 1em | 2rem
。 -
font-weight
(字重):normal | light | bold | 500
。 -
font-style
(字体风格):normal | italic
。 -
font-family
(字体类型):"黑体", "宋体", "Microsoft Yahei"
。 -
text-decoration
(文本装饰线):none | underline | overline | line-through
。 -
text-indent
(文本缩进):16px | 2em | 1rem
。 -
text-align
(文本水平对齐):left | center | right
。 -
vertical-align
(非块级元素垂直对齐):top | middle | bottom
。 -
line-height
(文本行高):16px | 32px
。 -
list-style
(ul/ol列表样式):none | circle | disc | decimal
。
5.2 盒模型相关样式
-
content
(内容),用于在元素的::before
和::after
伪元素中插入内容。使用content
属性插入的内容都是匿名的可替换元素。 -
padding
(内边距),单个设置值会统一应用于(所有边),两个设置值则应用于(上边下边,左边右边),三个设置值则应用于(上边,左边右边,下边),四个设置值则分别按(顺时针方向)应用于(上边,右边,下边,左边)。padding
(内边距)可细分为:-
padding-top
:上方内边距。 -
padding-right
:右方内边距。 -
padding-bottom
:下方内边距。 -
padding-left
:左方内边距。
-
-
border
(边框),该属性最多只接受三个参数,分别是宽度、风格和颜色,所以这样会使得四条边的边框相同。也可以使用一个,两个或三个值来指定border
属性,值的顺序无关紧要。可细分为:
-
border-width
:边框宽度。 -
border-style
:边框风格。-
值为
none
:和关键字hidden
类似,不显示边框。 -
值为
hidden
:和关键字none
类似,不显示边框。 -
值为
dotted
:显示为一系列圆点,圆点半径是border-width
计算值的一半。 -
值为
dashed
:显示为一系列短的方形虚线。 -
值为
solid
:显示为一条实线。 -
值为
double
:显示为一条双实线,宽度是border-width
。 -
值为
groove
:显示为有雕刻效果的边框,样式与ridge
相反。 -
值为
ridge
:显示为有浮雕效果的边框,样式与groove
相反。 -
值为
inset
:显示为有陷入效果的边框,样式与outset
相反。 -
值为
outset
:显示为有突出效果的边框,样式与inset
相反。
-
-
border-color
:边框颜色。
-
-
border-radius
(边框圆角)。-
单值语法:
border-radius: 1em
,这一个值表示所有的边框宽度。 -
双值语法:
border-radius: 1em 2em
,第一个值表示 top-left 和 bottom-right 方向的角;第二个值表示 top-right 和 bottom-left 方向的角。 -
三值语法:
border-radius: 1em 2em 3em
,第一个值表示 top-left 方向的角,第二个值表示 top-right 和 bottom-left 方向的角,第三个值表示 bottom-right 方向的角。 -
四值语法:
border-radius: 1em 2em 3em 4em
,这四个值分别表示 top left、top right、bottom right、bottom left,即总是从 top left 开始的顺时针顺序。
-
-
margin
(外边距),该属性为给定元素设置所有四个(上右下左)方向的外边距属性。单个设置值会统一应用于(所有边),两个设置值则应用于(上边下边,左边右边),三个设置值则应用于(上边,左边右边,下边),四个设置值则分别按(顺时针方向)应用于(上边,右边,下边,左边)。
-
单值语法:
border-width: 1em
,这一个值表示所有的边框宽度。 -
双值语法:
border-width: 1em 2em
,第一个值表示垂直方向的值,即 top 和 bottom;第二个值表示水平方向的值,即 left 和 right。 -
三值语法:
border-width: 1em 2em 3em
,第一个值表示 top;第二个值表示水平方向的,即 left 和 right;第三个值表示 bottom。 -
四值语法:
border-width: 1em 2em 3em 4em
,这四个值分别表示 top、right、bottom、left,即总是从 top 开始的顺时针顺序。
margin
(外边距)可细分为:-
margin-top
:上方外边距。 -
margin-right
:右方外边距。 -
margin-bottom
:下方外边距。 -
margin-left
:左方外边距。
-
-
background-color
(背景色)。 -
box-shadow
(阴影)。 -
width
(宽度):100px | 1em | 2rem
。 -
height
(高度):100px | 1em | 2rem
。
5.3 显示相关样式
-
display
属性设置元素是否被视为块级盒子或为行级盒子,以及用于子元素的布局,例如:文档流式布局、弹性盒子布局、网格布局。
/* 预组合值 */ display: block; /* 块级 */ display: inline; /* 行内 */ display: inline-block; /* 行内块 */ display: flex; /* 弹性盒子 */ display: inline-flex; display: grid; /* 网格布局 */ display: inline-grid; display: flow-root; /* 生成盒子 */ display: none; display: contents; /* 多关键字语法 */ display: block flex; display: block flow; display: block flow-root; display: block grid; display: inline flex; display: inline flow; display: inline flow-root; display: inline grid; /* 其他值 */ display: table; display: table-row; /* 所有的 table 元素 都有等效的 CSS display 值 */ display: list-item; /* 全局值 */ display: inherit; display: initial; display: revert; display: revert-layer; display: unset;
-
关键值可以被分组为六个种类:
-
display-outside
,外部表现,规定元素的外部显示类型。 -
display-inside
,内部表现,元素的内部显示类型,其定义了该内容布局时的格式上下文的类型。 -
display-listitem
,列表元素,为内容生成一个块级盒子和一个单独的列表元素行级盒子。 -
display-internal
,内部,一些布局模型,例如table
和ruby
有一个复杂的内置结构,它们的子孙后代可以扮演几个不同的角色。 -
display-box
,盒,定义一个元素到底是否产生 display 盒。 -
display-legacy
,预组合,对相同布局模式的块级和行级变体需要单独的关键字。
-
-
position
(定位):static | relative | absolute | fixed
。-
static
(静态定位),relative
(相对定位)。absolute
(绝对定位),fixed(
固定定位)。 -
top
(上坐标),right
(右坐标),bottom
(下坐标),left
(左坐标)。 -
z-index
(层叠)。
-
-
float
(浮动):left | right
。-
清除浮动:
overflow
:hidden
。 -
清除浮动:
clear
:left | right | both
。 -
设置父级盒子的固定高度:
height
。
-
6 颜色与单位
6.1 颜色值
.color-name { color: red; } /* 颜色名称 */ .hex-code { color: #FF0000; } /* 十六进制 */ .rgb-value { color: rgb(255, 0, 0); } /* RGB值 */ .rgba-value { color: rgba(255, 0, 0, 0.5); } /* 带透明度 */
6.2 单位
.px-unit { font-size: 16px; } /* 固定像素 */ .em-unit { font-size: 1.5em; } /* 相对于父元素 */ .rem-unit { font-size: 1.2rem; } /* 相对于根元素 */ .percentage { width: 50%; } /* 百分比 */ .vw-vh { width: 50vw; } /* 视口宽度的50% */
7 关键特性
7.1 优先级(Specificity)
-
多个样式规则可叠加作用于同一元素,当多个样式规则冲突时,通过优先级规则(如特异性、来源顺序)确定最终应用的样式。CSS 样式有不同的优先级,优先级高的样式规则会覆盖优先级低的。
-
优先级规则(从高到低):
-
!important
(例外规则,强制覆盖)。应该尽量避免,因为这会破坏了样式表中的固有的级联规则 使得调试找 bug 变得更加困难了。 -
行内样式(inline),在 HTML 元素的
style
属性中定义的样式。 -
ID 选择器(例如
#example
)。 -
类选择器(例如
.example
),属性选择器(例如[type="radio"]
),伪类(例如:hover
)。 -
元素标签选择器(例如
h1
),伪元素(例如::before
)。 -
继承样式(inheritance)。
-
通配符选择器(
*
)。
-
-
通配选择器(universal selector)(
*
)、关系选择器(combinator)(+
、>
、~
、" "
、||
)和 否定伪类(negation pseudo-class)(:not()
)对优先级没有影响。但是,在:not()
内部声明的选择器会影响优先级。 -
优先级建议
-
更好地利用 CSS 级联属性。
-
使用更具体的规则。在你选择的元素之前,增加一个或多个其他元素,使选择器变得更加具体,并获得更高的优先级。
-
7.2 继承(Inheritance)
子元素自动继承父元素样式(如font-family
),部分属性(如margin
)不继承。
-
当元素的一个继承属性(inherited property)没有指定值时,则取父元素的同属性的计算值。
-
某些属性(如
color
、font-family
)会从父元素自动继承到子元素。 -
不可继承的属性(如
border
、margin
)需要显式设置。
7.3 层叠(Cascading)
层叠是 CSS 的一个基本特征,它是一个定义了如何合并来自多个源的属性值的算法。它在 CSS 处于核心地位,CSS 的全称层叠样式表正是强调了这一点。
-
CSS 声明的来源
-
用户代理样式:浏览器会有一个基本的样式表来给任何网页设置默认样式。
-
页面作者样式:网页的作者可以定义文档的样式,这是最常见的样式表。大多数情况下此类型样式表会定义多个,它们构成网站的视觉和体验,即主题。
-
读者用户样式:读者,作为浏览器的用户,可以使用自定义样式表定制使用体验。
-
-
层叠顺序(从高到低)
假如层叠顺序相等,则使用哪个值取决于优先级(Specificity)。
-
CSS 过渡 (CSS Transition)
-
用户代理样式的
!important
-
读者用户样式的
!important
-
页面作者样式的
!important
-
CSS 动画(CSS Animation)
-
页面作者样式
-
读者用户样式
-
用户代理样式
-
-
重置样式
当 CSS 对样式完成更改之后,也许会在某种情况下希望还原到一个已知样式上,这可能发生在动画、主题修改之类的情形中。CSS 属性
all
能够快速地把(几乎)所有 CSS 属性设置到一个已知样式上。 -
层叠层/级联层
使用
@layer
声明了一个层叠层/级联层,同一层内的规则将级联在一起,这给予了开发者对层叠机制的更多控制。-
一个层叠层同样可以通过
@import
来创建,规则存在于被引入的样式表内:@import (utilities.css) layer(utilities);
。 -
可以创建带命名的层叠层,但不指定任何样式。例如,单一的命名层:
@layer utilities;
。 -
多个命名层也可以被同时定义。例如:
@layer theme, layout, utilities;
。对于多个命名层的声明而言,如果同一声明在多个层叠层中被指定,最后一层中的将优先于其他层。因此,在上面的例子中,如果
theme
层和utilities
层中存在冲突的规则,那么utilities
层中的将优先被应用。
-
-
层叠层的嵌套
层叠层允许嵌套,例如:
@layer framework {@layer layout {} }
-
嵌套层的附加规则
向
framework
层内部的layout
层附加规则,只需用.
连接这两层。
@layer framework.layout {p {margin-block: 1rem;} }
-
匿名层
如果创建了一个层叠层但并未指定名字,则称为一个匿名层。除创建后无法向其添加规则外,该层和其他命名层功能一致。例如:
@layer {p {margin-block: 1rem;} }
7.4 格式化上下文(Formatting Context)
-
行内格式化上下文(Inline Formatting Context),是一个网页的渲染结果的一部分。
其中,各行内框(inline box)一个接一个地排列,其排列顺序根据书写模式(writing-mode)的设置来决定:
-
对于水平书写模式,各个框从左边开始水平地排列。
-
对于垂直书写模式,各个框从顶部开始水平地排列。
-
-
区块格式化上下文(Block Formatting Context,BFC),是 Web 页面的可视 CSS 渲染的一部分,是块级盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。
区块格式化上下文(BFC)是一个独立的布局环境,BFC 内部的元素布局与外部互相不影响。BFC 有一套属于自己的规则:
-
BFC 的区域不会与浮动 Box 重叠。
-
BFC 是一个独立容器,BFC 内部的元素布局与外部互相不影响。
-
计算 BFC 的高度时,浮动子元素也要参与计算。
下列方式会创建区块格式化上下文:
-
文档的根元素(
<html>
)。 -
浮动元素(即
float
值不为none
的元素)。 -
绝对定位元素(
position
值为absolute
或fixed
的元素)。 -
行内块元素(
display
值为inline-block
的元素)。 -
表格单元格(
display
值为table-cell
,HTML 表格单元格默认值)。 -
表格标题(
display
值为table-caption
,HTML 表格标题默认值)。 -
匿名表格单元格元素(
display
值为table
(HTML 表格默认值)、table-row
(表格行默认值)、table-row-group
(表格体默认值)、table-header-group
(表格头部默认值)、table-footer-group
(表格尾部默认值)或inline-table
)。 -
overflow
值不为visible
或clip
的块级元素。 -
display
值为flow-root
的元素。 -
contain
值为layout
、content
或paint
的元素。 -
弹性元素(
display
值为flex
或inline-flex
元素的直接子元素),如果它们本身既不是弹性、网格,也不是表格容器。 -
网格元素(
display
值为grid
或inline-grid
元素的直接子元素),如果它们本身既不是弹性、网格,也不是表格容器。 -
多列容器(
column-count
或column-width
值不为auto
,且含有column-count: 1
的元素)。 -
column-span
值为all
的元素始终会创建一个新的格式化上下文,即使该元素没有包裹在一个多列容器中)
-
-
格式化上下文影响布局,通常,我们会为定位和清除浮动创建新的 BFC,而不是更改布局,因为它将:
-
包含内部浮动。
-
排除外部浮动。
-
阻止外边距重叠。
-
-
块级格式化上下文(BFC )的常用场景
-
解决浮动元素使父级元素的高度坍塌问题。
-
解决非浮动元素被浮动元素覆盖问题。
-
解决盒子顶底外边距重合问题。
-
两栏自适应布局,一侧是有固定宽度和浮动的固定栏,另一侧为开启 BFC 的不固定栏。
-
7.5 变量(Custom Properties)
定义和复用样式值(可复用的值):
:root {--primary-color: #3498db; } button {background: var(--primary-color); }
7.6 函数与运算
-
使用
calc()
。 -
进行动态计算:
width: calc(100% - 20px);
7.7 逻辑属性(Logical Properties)
基于书写模式(如左到右或右到左)自动适配布局:
.text {margin-inline-start: 20px; /* 自动适配 LTR/RTL */ }
7.8 动画与过渡
-
过渡(Transition)
通过
transition
,平滑改变属性值,实现平滑动画效果,提升用户体验。
.button {background-color: blue;transition: background-color 0.3s ease; /* 过渡 */ } .button:hover { /* 悬停时颜色渐变 */background-color: red; } .box {transition: transform 0.3s ease; /* 过渡 */ } .box:hover { /* 悬停时颜色渐变 */transform: scale(1.1); }
-
动画(Animation)
通过
@keyframes
定义复杂动画,提升用户体验。
/* 关键帧动画 */ @keyframes fadeIn {from { opacity: 0; }to { opacity: 1; } } .element {animation: fadeIn 2s forwards; } @keyframes slide {0% {transform: translateX(0); }100% {transform: translateX(100px); } } .animate {animation: slide 2s infinite; }
7.9 CSS 的外边距折叠
区块的上下外边距有时会合并(折叠)为单个边距,其大小为两个边距中的最大值(或如果它们相等,则仅为其中一个),这种行为称为外边距折叠。
注意:有设定浮动和绝对定位的元素不会发生外边距折叠。
有三种情况会形成外边距折叠:
-
相邻的兄弟元素
相邻的同级元素之间的外边距会被折叠(除非后面的元素需要
-
没有内容将父元素和后代元素分开
如果没有设定边框(border)、内边距(padding)、行级(inline)内容,也没有创建区块格式化上下文或间隙来分隔块级元素的上边距
margin-top
与其内一个或多个子代块级元素的上边距margin-top
;或者没有设定边框、内边距、行级内容、高度
height
或最小高度min-height
来分隔块级元素的下边距margin-bottom
与其内部的一个或多个后代后代块元素的下边距margin-bottom
,则会出现这些外边距的折叠,重叠部分最终会溢出到父代元素的外面。 -
空的区块
如果块级元素没有设定边框、内边距、行级内容、高度
height
、最小高度min-height
来分隔块级元素的上边距margin-top
及其下边距margin-bottom
,则会出现其上下外边距的折叠。
7.10 现代 CSS 新特性
-
滚动条样式:
scrollbar-gutter
和scrollbar-color
。 -
Ruby 排版:
ruby-align
和ruby-position
(用于注音文本)。 -
锚点定位(Anchor Positioning):简化动态定位(如弹出框)。
-
嵌套(Nesting):支持类似 Sass 的嵌套语法(需浏览器支持)。
8 现代CSS技术
8.1 CSS预处理器
如Sass/Less,支持嵌套、变量、混合宏:
$primary: #3498db; .button {background: $primary;&:hover { background: darken($primary, 10%); } }
8.2 CSS框架
Bootstrap、Tailwind CSS等提供预设组件与工具类。
8.3 CSS-in-JS
在JavaScript中编写CSS(如Styled Components)。
9 学习实践建议
-
使用外部样式表:提升代码复用率与可维护性。
-
避免滥用
!important
:防止优先级混乱。 -
采用CSS预处理器:如Sass/Less,支持变量、嵌套等高级功能。
-
兼容性处理:使用Autoprefixer等工具自动添加浏览器前缀。
-
命名规范:使用BEM(Block__Element--Modifier)提高可维护性。
-
性能优化:
-
减少选择器复杂度(避免
div > ul > li
) -
使用
transform
/opacity
触发GPU加速动画
-
-
浏览器兼容性:通过Autoprefixer自动添加厂商前缀(如
-webkit-
)。
10 学习资源
文档教程
在线工具
进阶技巧与案例
网格布局工具
框架
书籍
《CSS 基础教程》(Simon Collison)
《CSS 权威指南》(Eric A. Meyer)
11 总结
CSS 是前端开发的基石之一,与 HTML(结构)、JavaScript(行为)并称网页三剑客。
CSS 作为网页设计的核心语言,通过简洁的语法实现对网页样式的精细控制。CSS 通过层叠、继承等机制实现样式与结构的分离,显著提升开发效率与用户体验。从基础的文本美化到复杂的响应式布局,其功能覆盖现代网页开发的全场景。掌握选择器、盒模型、布局技术等要点,是构建高性能、可维护网站的关键。
CSS通过推动响应式设计与动态效果的普及,不断演进(如CSS3模块化、变量--var()
、容器查询@container
),持续提升开发者对样式的底层控制能力,是构建现代Web界面的基石,是构建现代Web界面不可或缺的工具。
目录
Web-CSS-Study
1 概述
1.1 CSS 的基本概念1.2 CSS 的发展历程1.3 CSS 的版本演进1.4 CSS 的应用场景1.5 CSS 的核心特点1.6 CSS 的功能作用1.7 CSS 的工作原理1.8 CSS 的优势与局限
2 CSS 引入方式与优先级
2.1 外部样式表(最常用)2.2 内部样式表2.3 内联样式表2.4 样式表的优先级
3 CSS 的基础语法
3.1 CSS 样式规则3.2 CSS 样式选择器3.3 CSS 样式声明块3.4 CSS 的 at 规则3.5 CSS 的语法示例
4 核心组成
4.1 盒模型(Box Model)4.2 布局系统4.3 响应式设计
5 常用CSS样式
5.1 文本相关样式5.2 盒模型相关样式5.3 显示相关样式
6 颜色与单位
6.1 颜色值6.2 单位
7 关键特性
7.1 优先级(Specificity)7.2 继承(Inheritance)7.3 层叠(Cascading)7.4 格式化上下文(Formatting Context)7.5 变量(Custom Properties)7.6 函数与运算7.7 逻辑属性(Logical Properties)7.8 动画与过渡7.9 CSS 的外边距折叠7.10 现代 CSS 新特性
8 现代CSS技术
8.1 CSS预处理器8.2 CSS框架8.3 CSS-in-JS
9 学习实践建议
10 学习资源
11 总结