当前位置: 首页 > news >正文

CSS学习 - jason

Web-CSS-Study


<u> 作者:jason-wrj </u>

<u> 分类:服务器/网络服务器/CSS </u>

<u> 标签:Server, Web Server, CSS </u>

<u> 更多:www.dioit.com——迪欧IT——dio智能科技 </u>

<u> 更多:www.dioit.com——dioIT——嵌入式电子智能技术 </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)、盒模型(marginpaddingborderwidthheight 等)以及弹性布局(flex 布局)、网格布局(grid 布局)等技术,实现复杂的网页布局,如响应式布局、多列布局等。

  • 管理元素的动态状态(悬停效果、动画)。

    • 交互效果 :利用伪类和 CSS 动画(@keyframes)、过渡(transition)等特性,为网页添加交互效果,如按钮悬停效果、点击效果、元素的动画过渡、关键帧动画等。

  • 内容与样式的分离

    • 通过 CSS 将网页的结构(HTML)与表现(CSS 样式)解耦,实现内容(HTML)与样式(CSS)分离,便于维护和更新,提升代码可维护性和复用性。

    • 允许通过一个样式表文件统一管理多个页面的样式。

  1. 提升开发效率

    • 避免重复的 HTML 标签(如 <font> 或表格布局),减少代码冗余。

    • 支持继承和层叠规则,简化样式覆盖逻辑。

1.7 CSS 的工作原理

  1. 解析 HTML,生成 DOM 树。

  2. 解析 CSS ,生成 CSSOM 树。

  3. 合并 DOM + CSSOM,构建渲染树。

  4. 布局与绘制,计算元素位置并渲染页面。

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.classh1),例如: #id 用于选择具有特定 ID 的元素,.class 用于选择具有特定类的元素,p 用于选择所有段落元素等。

  • 声明块

    声明块(Declaration Block)由一对大括号 {} 包围,其中包含一条或多条(属性: 值;)声明(Declaration) 。每条声明都是由属性和值组成,用于指定元素的样式,例如( color: black;) 表示设置元素的文本颜色为黑色。

    • 属性(Property):是一个标识符,用可读的名称来表示其特性。如colorfont-sizemargin等。

    • 值(Value):属性的具体设置,每个属性都包含一个有效值的集合,它有正式的语法和语义定义。如red16pxauto等。

  • 注释

    使用 /* 注释内容 */,添加 CSS 层叠样式表中的注释内容。

3.2 CSS 样式选择器

选择器(Selectors)至少要有一个,通过ID类名元素标签名等精准定位HTML元素,并指定要应用的样式(如 #id.classp),或通过属性伪类等实现动态样式。如果包含多个选择器的集合分组,则用逗号,分隔。

#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 样式声明块

包含一个或多个声明,用花括号 { } 包裹。每个声明由属性和值组成,不同声明用分号;分隔。

  • 样式属性与属性值

    • 样式属性(如colormargin),用于定义样式特性。如 background-color 用于设置元素的背景颜色,font-size 用于设置字体大小等。

    • 属性值(如red20px),为样式属性指定具体效果的值。如 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)组成),是布局的基础。

从内部到外围,分别为:

  1. content(内容)。

  2. padding(内边距)。

  3. border(边框)。

  4. 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; */ /* 交叉轴对齐方式 */
}

参考属性flexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wraporder

对齐属性align-contentalign-itemsalign-selfjustify-contentplace-contentrow-gapcolumn-gapgap

  • 网格布局(Grid)

    现代新式布局,设置二维网格布局,用于实现复杂页面结构。

.grid-container {display: grid;                  /* 创建网格容器 */grid-template-columns: 1fr 2fr; /* 列宽比例 *//* grid-template-columns: repeat(3, 1fr);*/ /* 3 列等宽 */gap: 10px;                     /* 网格间隔 */
}

参考属性grid-template-columnsgrid-template-rowsgrid-template-areasgrid-templategrid-auto-columnsgrid-auto-rowsgrid-auto-flowgridgrid-row-startgrid-column-startgrid-row-endgrid-column-endgrid-rowgrid-columngrid-areagrid-row-gapgrid-column-gapgrid-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内部,一些布局模型,例如 tableruby 有一个复杂的内置结构,它们的子孙后代可以扮演几个不同的角色。

    • display-box,定义一个元素到底是否产生 display 盒。

    • display-legacy预组合,对相同布局模式的块级和行级变体需要单独的关键字。

  • position(定位):static | relative | absolute | fixed

    • static(静态定位),relative(相对定位)。absolute(绝对定位),fixed(固定定位)。

    • top(上坐标),right(右坐标),bottom(下坐标),left(左坐标)。

    • z-index(层叠)。

  • float(浮动):left | right

    • 清除浮动:overflowhidden

    • 清除浮动:clearleft | 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)没有指定值时,则取父元素的同属性的计算值。

  • 某些属性(如 colorfont-family)会从父元素自动继承到子元素。

  • 不可继承的属性(如 bordermargin)需要显式设置。

7.3 层叠(Cascading)

层叠是 CSS 的一个基本特征,它是一个定义了如何合并来自多个源的属性值的算法。它在 CSS 处于核心地位,CSS 的全称层叠样式表正是强调了这一点。

  • CSS 声明的来源

    • 用户代理样式:浏览器会有一个基本的样式表来给任何网页设置默认样式。

    • 页面作者样式:网页的作者可以定义文档的样式,这是最常见的样式表。大多数情况下此类型样式表会定义多个,它们构成网站的视觉和体验,即主题。

    • 读者用户样式:读者,作为浏览器的用户,可以使用自定义样式表定制使用体验。

  • 层叠顺序(从高到低

    假如层叠顺序相等,则使用哪个值取决于优先级(Specificity)。

    1. CSS 过渡 (CSS Transition)

    2. 用户代理样式的!important

    3. 读者用户样式的!important

    4. 页面作者样式的!important

    5. CSS 动画(CSS Animation)

    6. 页面作者样式

    7. 读者用户样式

    8. 用户代理样式

  • 重置样式

    当 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值为 absolutefixed 的元素)。

    • 行内块元素(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值不为 visibleclip 的块级元素。

    • display 值为 flow-root 的元素。

    • contain值为 layoutcontentpaint 的元素。

    • 弹性元素(display 值为 flexinline-flex 元素的直接子元素),如果它们本身既不是弹性网格,也不是表格容器。

    • 网格元素(display 值为 gridinline-grid 元素的直接子元素),如果它们本身既不是弹性网格,也不是表格容器。

    • 多列容器(column-countcolumn-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 函数与运算

  1. 使用calc()

  2. 进行动态计算:

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-gutterscrollbar-color

  • Ruby 排版ruby-alignruby-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 学习资源

  • 文档教程

    MDN CSS教程(官方文档)(developer.mozilla.org)

    CSS 教程 | 菜鸟教程

  • 在线工具

    CSS Tricks指南(实战技巧和布局示例)(css-tricks.com)

  • 进阶技巧与案例

    Flexbox小游戏(交互式Flexbox练习游戏)(flexboxfroggy.com)

    Grid小游戏(Grid布局学习工具)(cssgridgarden.com)

    anchoreum

  • 网格布局工具

    CSS Grid Generator (Drag & Drop)

  • 框架

    Tailwind CSS(实用优先的 CSS 框架)

    Bootstrap(响应式 UI 组件库)

  • 书籍

    《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 总结

 


迪欧IT——dio智能科技

 

服务器_网站图标_dioIT_128x128

 

公众号_二维码_迪欧智慧_128x128

 

 
http://www.sczhlp.com/news/34071/

相关文章:

  • 最好网站建设免费引流推广怎么做
  • 公司网站是否必须做可信认证如何建网站教程
  • 官方网站建设的四个步骤海口seo快速排名优化
  • 做网站的公司需要哪些资质国外最好的免费建站
  • 网站建设确认单模板建站哪个平台好
  • 网站后台添加编辑器爱站网seo
  • 大专毕业论文5000字seo点击软件手机
  • 网站设计怎么学58同城网站推广
  • 唯品会 一家专做特卖的网站手机关键词点击排名软件
  • 玉盘
  • spring boot做网站模板建站哪个平台好
  • 建设银行杭州分行网站sem是什么职位
  • 郑州做旅游网站的公司做网站建设公司
  • [P5607 [Ynoi2013] 无力回天 NOI2017]
  • 商城网站制作多少钱搭建网站的软件
  • 外贸网站推广公司最大it行业培训机构哪个好
  • 学做炒菜的网站谷歌浏览器入口
  • 美容行业手机网站模版网站链接查询
  • 做pc端网站用什么框架每日军事新闻
  • wordpress误删seo技术好的培训机构
  • 聊城专业做网站seo搜索引擎优化入门
  • 轴承外贸网站怎么做谷歌商店官网下载
  • 云主机可以做网站吗最新国际新闻10条
  • 免费网站建设浩森宇特网站建设推广优化
  • 2025 nowcoder round5
  • 主流包管理/版本控制工具
  • wordpress创建企业网站seo做关键词怎么收费的
  • 免费做logo设计的网站怎样在百度做广告宣传
  • wordpress写网站教程深圳设计公司
  • 为什么找别人做网站常用的五种网络营销工具