CSS知识总结与使用技巧 （万字详细版）

 

目录

一、CSS基础 

概念 

1.1 基本结构

1.2 选择器 

1.2.1 基本选择器

1.2.2 组合选择器

1.2.3 属性选择器

1.2.4 伪类与伪元素

1.3继承 

1.4 DIV图层和SPAN 

二 、CSS样式属性 

2 .1 字体样式font

2.2 文本样式 

2.3 背景 

2.4 列表样式 

2.5 CSS盒模型属性 

三、DIV + CSS页面布局 

3.1浮动布局

3.2定位布局

3.3弹性布局

3.4网格布局

四、表格

4.1基本标记

4.2表格属性

4.3边框相关属性

4.4背景相关属性

4.5对齐相关属性

4.6单元格相关属性

五、表单

六、CSS新特性 

新特性总结

6.1选择器

6.2盒模型

6.3背景和边框

6.4文本效果

6.5-2D 和 3D 转换

6.6动画

 七、总结

---

引言 
在前端开发的世界里，CSS（层叠样式表）无疑是让网页变得绚丽多彩的魔法画笔。它负责网页的外观设计，从字体样式到页面布局，从背景效果到交互细节，的影响力CSS无处不在。本文将全面深入地探讨CSS的知识内容与实用技巧，涵盖从基础概念到高级应用各个的方面，助你在前端开发领域更上一层楼。 
 

---

一、CSS基础 

概念 

CSS是一种用于描述HTML或XML文档样式的语言，旨在实现内容与表现的分离。通过CSS，开发者可以轻松控制网页元素的字体、颜色、大小、位置、布局等外观属性，从而创建出美观、易用的用户界面。 
 

1.1 基本结构

CSS 规则由 选择器 和 声明块 组成：

选择器 {
    属性: 值;
    属性: 值;
}

• 选择器：指定要样式化的 HTML 元素。

• 声明块：包含一对或多对 属性: 值，用 {} 包裹。

• 属性和值：用冒号 : 分隔，每对声明以分号 ; 结束。

示例：

h1 {
    color: blue;
    font-size: 24px;
}

1.2 选择器 

选择器是CSS的核心部分，用于指定要应用样式的HTML元素。 

1.2.1 基本选择器

选择器类型	语法	示例	说明
元素选择器	元素名	p { }	选择所有 <p> 元素
类选择器	.类名	.text-red { }	选择所有 class="text-red" 的元素
ID 选择器	#id名	#header { }	选择 id="header" 的元素
通配符选择器	*	* { }	选择所有元素

1.2.2 组合选择器

选择器类型	语法	示例	说明
后代选择器	A B	div p { }	选择 <div> 内所有 <p>
子元素选择器	A > B	ul > li { }	选择 <ul> 的直接子元素 <li>
相邻兄弟选择器	A + B	h1 + p { }	选择紧接在 <h1> 后的 <p>
通用兄弟选择器	A ~ B	h1 ~ p { }	选择 <h1> 后的所有 <p>

1.2.3 属性选择器

选择器类型	语法	示例	说明
属性存在	[属性]	[target] { }	选择带有 target 属性的元素
属性值匹配	[属性=值]	[type="text"] { }	选择 type="text" 的元素
属性值包含	[属性*=值]	[href*="example"]	选择 href 包含 example 的元素
属性值开头	[属性^=值]	[href^="https"]	选择 href 以 https 开头的元素
属性值结尾	[属性$=值]	[href$=".pdf"]	选择 href 以 .pdf 结尾的元素

1.2.4 伪类与伪元素

类型	语法	示例	说明
伪类	:伪类	a:hover { }	选择鼠标悬停时的 <a> 元素
伪元素	::伪元素	p::first-line { }	选择 <p> 的第一行

常用伪类：

• :hover：鼠标悬停

• :focus：获得焦点

• :nth-child(n)：第 n 个子元素

• :not(选择器)：排除匹配的元素

常用伪元素：

• ::before：在元素前插入内容

• ::after：在元素后插入内容

• ::first-letter：选择元素的第一个字母

• ::selection：选择用户选中的内容

---

1.3继承 

继承是CSS的一个特性重要，子元素会自动继承父的元素某些样式属性，如字体、颜色等。

例如，设置 `body { font-family: Arial, sans;-serif }`，页面中所有元素都会继承该字体，除非子元素单独设置了字体。有些属性可以通过使用特定关键字来强制继承父元素的值。 
 

---

1.4 DIV图层和SPAN 

• 标记 DIV：`<div>` 是HTML中的块级，作为元素一个容器通用，常用于网页布局。不同的 `div` 可以通过CSS设置不同的样式，实现各种布局效果。例如，可以将页面划分为页眉、导航栏、内容区、页脚等不同的 `div` 区域。
• SPAN：`<span>` 是行内元素，用于在文本一行中标记以便部分特定应用样式，不会换行。例如 `<p>这是一段 <span class="highlight">高亮</>span 文本</p，>`可以通过CSS为highlight` ` 类设置样式来突出显示 “高亮” 文本。 

---

二 、CSS样式属性 

2 .1 字体样式font

样式类型	语法	单位	举例	说明
字体大小	font-size	`px`（像素）、`em`相对（单位，相对于父元素字体大小）、`（`rem相对于根元素 `html` 的字体）、%	font-size: 16px;	设置字体大小
字体样式	font-style	3个属性	font-style: italic（斜体）,normal(不用斜体),oblique(倾斜体)	设置字体风格
字体系列	font-family		font-family: Arial, sans-serif;	设置字体
字体变体	font-variant	2个属性	normal(整车那个字体)，small-caps(小型的大写字母字体)	设置英文字体
字体粗细	font-weight	normal(正常),bold(标准粗体),bolder(特粗体),lighter(细体)	font-weight: bold;` 或 `font-weight: 700;	设置字体粗细

 

2.2 文本样式 

属性	描述	常见取值
color	设置文本颜色	颜色关键词（如red、blue）、十六进制值（如#FF0000）、RGB 值（如rgb(255, 0, 0)）
font-size	定义字体大小	绝对单位（如px、pt）、相对单位（如em、rem）、百分比
font-family	指定字体	字体名称（如Arial、Times New Roman），通用字体系列（如sans-serif、serif）
font-weight	设置字体粗细	数字（100 - 900）、关键词（normal、bold、bolder、lighter）
font-style	定义字体风格	normal（正常）、italic（斜体）、oblique（倾斜）
text-align	设置文本水平对齐方式	left（左对齐）、right（右对齐）、center（居中对齐）、justify（两端对齐）
text-decoration	添加或移除文本装饰	none（无）、underline（下划线）、overline（上划线）、line-through（删除线）
text-transform	控制文本大小写	none（无变化）、uppercase（全部大写）、lowercase（全部小写）、capitalize（首字母大写）
letter-spacing	调整字符间距	长度值（如px、em）
word-spacing	调整单词间距	长度值（如px、em）
line-height	设置行高	数字（无单位，为字体大小倍数）、长度值（如px、em）、百分比
white-space	设置空白处理方式	normal（合并空白符和换行）、nowrap（不换行）、pre（保留空白符和换行，类似<pre>标签）

letter-spacing	调整字符间距	长度值，如px（像素）、em、rem等
line-height	设置行距	数字（无单位，为字体大小倍数）、长度值（如px、em）、百分比
text-indent	设置首行缩进	长度值，如px、em等
text-decoration	添加字符装饰	none（无）、underline（下划线）、overline（上划线）、line-through（删除线）等
text-transform	控制英文大小写转换	none（无变化）、uppercase（全部大写）、lowercase（全部小写）、capitalize（首字母大写）
text-align	设置水平对齐方式	left（左对齐）、right（右对齐）、center（居中对齐）、justify（两端对齐）
vertical-align	设置垂直对齐方式	baseline（基线对齐）、top（顶部对齐）、middle（居中对齐）、bottom（底部对齐）等

2.3 背景 

属性	描述	常见取值
background-color	设置元素的背景颜色	颜色关键词（如red、blue、green） 十六进制值（如#FF0000表示红色） RGB 值（如rgb(255, 0, 0)表示红色） RGBA 值（如rgba(255, 0, 0, 0.5)表示半透明红色）
background-image	为元素设置背景图像	图像的 URL 路径（如url('image.jpg')） 渐变函数（如linear-gradient(to bottom, red, blue)）
background-repeat	控制背景图像的重复方式	repeat（默认值，在水平和垂直方向重复） repeat-x（仅在水平方向重复） repeat-y（仅在垂直方向重复） no-repeat（不重复）
background-position	设置背景图像的起始位置	方位关键词（如top left、center、bottom right） 长度值（如20px 30px） 百分比（如50% 50%）
background-size	规定背景图像的大小	长度值（如100px 200px分别指定宽度和高度） 百分比（相对于元素的宽度和高度，如50% 50%） cover（缩放背景图像以完全覆盖元素，可能会裁剪图像） contain（缩放背景图像以适应元素，保证图像完整）
background-attachment	设置背景图像是否固定或随页面滚动	scroll（默认值，背景图像随页面内容滚动） fixed（背景图像固定，不随页面滚动） local（背景图像随元素内容滚动）
background-origin	指定背景图像的定位区域	padding-box（背景图像相对于内边距区域定位） border-box（背景图像相对于边框区域定位） content-box（背景图像相对于内容区域定位）
background-clip	规定背景的绘制区域	border-box（默认值，背景绘制到边框外边缘） padding-box（背景绘制到内边距外边缘） content-box（背景绘制到内容区域外边缘）
background	背景属性的简写形式，可同时设置多个背景属性	以空格分隔的多个属性值，顺序无严格要求，但一般遵循background-color、background-image、background-repeat、background-attachment、background-position、background-size、background-origin、background-clip的顺序

 

2.4 列表样式 

CSS 中的列表样式属性用于控制列表的外观和布局，包括无序列表（<ul>）和有序列表（<ol>），以下是对列表样式相关属性的详细介绍：

属性	描述	常见取值
list-style-type	设置列表项标记的类型	对于无序列表： disc（实心圆，默认值）、 circle（空心圆）、 square（实心方块） 对于有序列表： decimal（十进制数字，如 1、2、3）、 decimal-leading-zero（带前导零的十进制数字，如 01、02、03）、 lower-roman（小写罗马数字，如 i、ii、iii）、upper-roman（大写罗马数字，如 I、II、III）、 lower-alpha（小写英文字母，如 a、b、c）、 upper-alpha（大写英文字母，如 A、B、C）
list-style-image	使用图像作为列表项的标记	图像的 URL 路径，如url('bullet.png')
list-style-position	设置列表项标记的位置	inside（列表项标记位于列表项内容内部）、 outside（列表项标记位于列表项内容外部，默认值）
list-style	列表样式的简写属性，可同时设置list-style-type、list-style-position和list-style-image	取值顺序通常为list-style-type、list-style-position、list-style-image，中间以空格分隔，可省略某些值

2.5 CSS盒模型属性 

CSS盒模型由 `content`（内容）、`padding`（内填充）、`border`（边框）、`margin`（外边距）组成。 

属性分类	具体属性	描述	取值及示例
内容	width	设置内容区域的宽度	可以是具体长度值，如width: 200px;；百分比，如width: 50%;；或auto，如width: auto;
	height	设置内容区域的高度	取值方式与width类似，如height: 150px;或height: 30%;
内边距	padding-top padding-right padding-bottom padding-left	分别设置上、右、下、左四个方向的内边距	可以是长度值，如padding-top: 10px;；百分比，如padding-right: 5%; 简写属性padding可同时设置四个方向，如padding: 10px 20px 15px 25px;代表上、右、下、左内边距分别为 10px、20px、15px、25px
边框	border-width	设置边框的宽度	可分别设置四个方向，如border-top-width: 2px; 简写属性如border-width: 1px 2px 3px 4px;代表上、右、下、左边框宽度分别为 1px、2px、3px、4px
	border-style	设置边框的样式	常见取值有solid（实线），如border-style: solid; dashed（虚线），dotted（点线），double（双线）等
	border-color	设置边框的颜色	可使用颜色关键词，如border-color: red; 十六进制值，如border-color: #FF0000; RGB 值，如border-color: rgb(255,0,0); RGBA 值，如border-color: rgba(255,0,0,0.5);
	border-radius	设置边框的圆角效果	可分别设置四个角，如border-top-left-radius: 5px; 简写属性如border-radius: 10px 5px 15px 20px;代表上左、上右、下右、下左圆角半径分别为 10px、5px、15px、20px
外边距	margin-top margin-right margin-bottom margin-left	分别设置上、右、下、左四个方向的外边距	可以是长度值，如margin-top: 20px;；百分比，如margin-right: 10%; 简写属性margin可同时设置四个方向，如margin: 20px 30px 25px 35px;代表上、右、下、左外边距分别为 20px、30px、25px、35px

三、DIV + CSS页面布局 

CSS+DIV 页面布局主要包括浮动布局、定位布局、弹性布局、网格布局等方式，以下以表格形式对其进行介绍：

布局方式	原理	优点	缺点
浮动布局	使用float属性让元素向左或向右浮动，脱离正常文档流，其他元素围绕其排列，常见取值为left、right和none	兼容性好，能方便地实现多列布局	需清除浮动，否则可能导致父元素高度塌陷
定位布局	通过position属性设置定位方式。static为默认，按正常文档流排列；relative是相对自身正常位置偏移；absolute相对于最近已定位祖先，无则相对于<html>；fixed相对于浏览器窗口固定；sticky为粘性定位	可精确控制元素位置	使用不当易造成元素重叠，影响页面可读性
弹性布局（Flexbox）	弹性盒模型是一维布局，通过设置容器和子元素属性，实现元素对齐、排列和分布	布局灵活，能自适应不同屏幕尺寸，代码简洁	对 IE9 及以下等旧版本浏览器兼容性差
网格布局（Grid）	二维布局模型，将页面划分为行和列的网格，把元素放置在网格单元格中实现布局	可实现复杂二维布局，更加精确灵活	对旧版本浏览器兼容性较差

布局的示例代码

3.1浮动布局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        /* 全局样式，去除默认边距 */
        * {
            margin: 0;
            padding: 0;
        }

        /* 头部样式 */
        header {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 20px;
        }

        /* 侧边栏样式 */
       .sidebar {
            float: left;
            width: 20%;
            background-color: #f4f4f4;
            padding: 20px;
            box-sizing: border-box;
        }

        /* 主内容区样式 */
       .main-content {
            float: left;
            width: 80%;
            padding: 20px;
            box-sizing: border-box;
        }

        /* 清除浮动 */
       .clearfix::after {
            content: "";
            display: table;
            clear: both;
        }

        /* 底部样式 */
        footer {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 10px;
        }
    </style>
</head>

<body>
    <header>
        <h1>浮动布局示例</h1>
    </header>
    <div class="clearfix">
        <div class="sidebar">
            <ul>
                <li>侧边栏链接1</li>
                <li>侧边栏链接2</li>
                <li>侧边栏链接3</li>
            </ul>
        </div>
        <div class="main-content">
            <h2>主内容区</h2>
            <p>这是主内容区的文本内容。这里可以展示文章、图片等各种信息。</p>
        </div>
    </div>
    <footer>
        <p>FF2025/p>
    </footer>
</body>

</html>

3.2定位布局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        /* 全局样式，去除默认边距 */
        * {
            margin: 0;
            padding: 0;
        }

        /* 页面容器，相对定位 */
       .container {
            position: relative;
            height: 100vh;
        }

        /* 头部样式，固定定位 */
        header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            background-color: #333;
            color: white;
            text-align: center;
            padding: 20px;
        }

        /* 侧边栏样式，固定定位 */
       .sidebar {
            position: fixed;
            top: 60px;
            left: 0;
            width: 20%;
            height: calc(100% - 60px);
            background-color: #f4f4f4;
            padding: 20px;
            box-sizing: border-box;
        }

        /* 主内容区样式，相对定位 */
       .main-content {
            position: relative;
            top: 60px;
            left: 20%;
            width: 80%;
            padding: 20px;
            box-sizing: border-box;
        }

        /* 底部样式，固定定位 */
        footer {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            background-color: #333;
            color: white;
            text-align: center;
            padding: 10px;
        }
    </style>
</head>

<body>
    <div class="container">
        <header>
            <h1>定位布局示例</h1>
        </header>
        <div class="sidebar">
            <ul>
                <li>侧边栏链接1</li>
                <li>侧边栏链接2</li>
                <li>侧边栏链接3</li>
            </ul>
        </div>
        <div class="main-content">
            <h2>主内容区</h2>
            <p>这是主内容区的文本内容。这里可以展示文章、图片等各种信息。</p>
        </div>
        <footer>
            <p>FF2025</p>
        </footer>
    </div>
</body>

</html>

3.3弹性布局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        /* 全局样式，去除默认边距 */
        * {
            margin: 0;
            padding: 0;
        }

        /* 页面容器，弹性布局 */
       .container {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        /* 头部样式 */
        header {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 20px;
        }

        /* 中间内容区，弹性布局 */
       .content {
            display: flex;
            flex: 1;
        }

        /* 侧边栏样式 */
       .sidebar {
            flex-basis: 20%;
            background-color: #f4f4f4;
            padding: 20px;
            box-sizing: border-box;
        }

        /* 主内容区样式 */
       .main-content {
            flex-basis: 80%;
            padding: 20px;
            box-sizing: border-box;
        }

        /* 底部样式 */
        footer {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 10px;
        }
    </style>
</head>

<body>
    <div class="container">
        <header>
            <h1>弹性布局示例</h1>
        </header>
        <div class="content">
            <div class="sidebar">
                <ul>
                    <li>侧边栏链接1</li>
                    <li>侧边栏链接2</li>
                    <li>侧边栏链接3</li>
                </ul>
            </div>
            <div class="main-content">
                <h2>主内容区</h2>
                <p>这是主内容区的文本内容。这里可以展示文章、图片等各种信息。</p>
            </div>
        </div>
        <footer>
            <p>FF2025</p>
        </footer>
    </div>
</body>

</html>

3.4网格布局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        /* 全局样式，去除默认边距 */
        * {
            margin: 0;
            padding: 0;
        }

        /* 页面容器，网格布局 */
       .container {
            display: grid;
            grid-template-columns: 20% 80%;
            grid-template-rows: auto 1fr auto;
            min-height: 100vh;
        }

        /* 头部样式，跨两列 */
        header {
            grid-column: 1 / 3;
            background-color: #333;
            color: white;
            text-align: center;
            padding: 20px;
        }

        /* 侧边栏样式 */
       .sidebar {
            background-color: #f4f4f4;
            padding: 20px;
            box-sizing: border-box;
        }

        /* 主内容区样式 */
       .main-content {
            padding: 20px;
            box-sizing: border-box;
        }

        /* 底部样式，跨两列 */
        footer {
            grid-column: 1 / 3;
            background-color: #333;
            color: white;
            text-align: center;
            padding: 10px;
        }
    </style>
</head>

<body>
    <div class="container">
        <header>
            <h1>网格布局示例</h1>
        </header>
        <div class="sidebar">
            <ul>
                <li>侧边栏链接1</li>
                <li>侧边栏链接2</li>
                <li>侧边栏链接3</li>
            </ul>
        </div>
        <div class="main-content">
            <h2>主内容区</h2>
            <p>这是主内容区的文本内容。这里可以展示文章、图片等各种信息。</p>
        </div>
        <footer>
            <p>FF2025</p>
        </footer>
    </div>
</body>

</html>

四、表格

4.1基本标记

分类	内容	描述
基本结构与标记	<table>	表格的根标签，包裹整个表格内容
	<tr>	表示表格中的一行
	<td>	普通单元格标签，用于存放数据
	<th>	表头单元格标签，文本通常加粗居中
	<caption>	用于为表格添加标题

4.2表格属性

属性名	描述	取值及示例
border-collapse	定义相邻单元格边框的合并方式	collapse（合并边框）：table { border-collapse: collapse; } separate（分开边框）：table { border-collapse: separate; }
border-spacing	当 border-collapse 为 separate 时，设置相邻单元格边框之间的间距	长度值，如 table { border-spacing: 5px; }
caption-side	设置表格标题的位置	top（标题在表格顶部）：caption { caption-side: top; } bottom（标题在表格底部）：caption { caption-side: bottom; }
table-layout	定义表格列宽的计算方式	auto（列宽由内容决定）：table { table-layout: auto; } fixed（列宽由 width 属性决定）：table { table-layout: fixed; }
width	设置表格的宽度	长度值或百分比，如 table { width: 600px; } 或 table { width: 90%; }
height	设置表格的高度	长度值或百分比，如 table { height: 300px; }

4.3边框相关属性

属性名	描述	取值及示例
border	统一设置表格、行或单元格的边框样式	宽度、样式、颜色组合，如 table { border: 2px solid #ccc; }
border-width	设置边框的宽度	长度值，如 table { border-width: 3px; }
border-color	设置边框的颜色	颜色关键词、十六进制值、RGB 值等，如 table { border-color: blue; }
border-style	设置边框的线条样式	solid（实线）、dashed（虚线）、dotted（点线）等，如 table { border-style: dotted; }

4.4背景相关属性

属性名	描述	取值及示例
background-color	设置表格的背景颜色	颜色关键词、十六进制值、RGB 值等，如 table { background-color: lightgray; }
background-image	设置表格的背景图像	图像的 URL 路径，如 table { background-image: url('bg.png'); }

4.5对齐相关属性

属性名	描述	取值及示例
text-align	设置表格内容的水平对齐方式	left（左对齐）、center（居中对齐）、right（右对齐）等，如 table { text-align: center; }
vertical-align	设置表格内容的垂直对齐方式	top（顶部对齐）、middle（居中对齐）、bottom（底部对齐）等，如 td { vertical-align: middle; }

4.6单元格相关属性

属性名	描述	取值及示例
padding	设置单元格内容与边框之间的间距	长度值，可单值（全方向相同）、双值（上下、左右）、四值（上、右、下、左）设置，如 td { padding: 10px; }
width	设置单元格的宽度	长度值或百分比，如 td { width: 120px; }
height	设置单元格的高度	长度值或百分比，如 td { height: 40px; }

五、表单

表单元素	属性	描述
<form>	action	指定表单数据提交的目标 URL，即服务器端处理表单数据的脚本地址
	method	规定表单数据的提交方式，常用值为 GET 和 POST。GET 将数据附加在 URL 后，POST 将数据放在请求体中
	enctype	指定表单数据在发送到服务器之前的编码方式，常见值有 application/x-www-form-urlencoded（默认）、multipart/form-data（用于文件上传）、text/plain
	target	规定表单提交后服务器响应内容的显示位置，值有 _self（当前窗口）、_blank（新窗口）、_parent（父窗口）、_top（整个窗口）
	name	为表单指定一个名称，可用于在 JavaScript 中引用表单
	autocomplete	设置表单是否启用自动完成功能，值为 on 或 off
	novalidate	布尔属性，若设置该属性，表单提交时将不进行验证
<input>	type	定义输入字段的类型，常见值有 text（文本框）、password（密码框）、radio（单选按钮）、checkbox（复选框）、email（邮箱输入框）、number（数字输入框）、date（日期选择器）、submit（提交按钮）、reset（重置按钮）、button（普通按钮）、file（文件选择框）等
	name	指定输入字段的名称，用于在服务器端识别数据
	value	设置输入字段的初始值或默认值，对于 radio 和 checkbox，该值会在提交时被发送到服务器
	placeholder	提供一个简短的提示信息，显示在输入框内，当用户输入内容时提示信息消失
	required	布尔属性，设置该属性后，该输入字段为必填项，用户必须填写才能提交表单
	disabled	布尔属性，设置该属性后，输入字段将被禁用，用户无法与之交互，且该字段的值不会被提交
	readonly	布尔属性，设置该属性后，输入字段为只读状态，用户不能修改其值，但可以选中和复制内容
	min 和 max	对于 number、date 等类型的输入框，设置输入值的最小值和最大值
	step	对于 number、date 等类型的输入框，设置输入值的步进间隔
	pattern	使用正则表达式定义输入字段的合法格式
<textarea>	name	在服务器端标识该文本域
	rows	指定文本域的可见行数
	cols	指定文本域的可见列数
	placeholder	提供提示信息，显示在文本域内
	required	布尔属性，设置该属性后，文本域为必填项
	disabled	布尔属性，设置该属性后，文本域被禁用
	readonly	布尔属性，设置该属性后，文本域为只读状态
<select>	name	在服务器端识别该下拉列表
	disabled	布尔属性，设置该属性后，下拉列表被禁用
	multiple	布尔属性，设置该属性后，允许用户在下拉列表中选择多个选项
	size	指定下拉列表中可见选项的数量
<option>	value	指定选项的值，提交表单时该值会被发送到服务器
	selected	布尔属性，设置该属性后，该选项默认被选中
<button>	type	定义按钮的类型，值有 submit（提交表单）、reset（重置表单）、button（普通按钮，需配合 JavaScript 使用）
	name	为按钮指定一个名称，用于在服务器端识别按钮数据
	value	设置按钮的值，提交表单时该值会被发送到服务器
	disabled	布尔属性，设置该属性后，按钮被禁用

六、CSS新特性 

新特性总结

特性分类	特性名称	描述	示例代码
选择器	属性选择器增强	根据元素属性值的开头、结尾或包含的内容选择元素	[href^="https"] { color: blue; } 选择 href 属性以 "https" 开头的元素
	伪类选择器	精确选择元素的子元素或特定类型的子元素	li:nth-child(3) { background-color: yellow; } 选择父元素中第三个 li 元素
盒模型	弹性盒布局（Flexbox）	灵活布局网页元素，适应不同屏幕尺寸和方向	.parent { display: flex; justify-content: center; }
	多列布局（Multi - column Layout）	将文本内容分为多列显示	.column - container { column - count: 3; column - gap: 20px; }
背景和边框	背景渐变（Background Gradients）	创建线性和径向渐变背景	background: linear - gradient(to right, red, yellow);
	边框半径（Border Radius）	为元素创建圆角边框	border - radius: 10px;
	边框图像（Border Image）	使用图像作为元素边框	border - image - source: url('border.png'); border - image - slice: 30;
文本效果	文本阴影（Text Shadow）	为文本添加阴影效果	text - shadow: 3px 3px 5px gray;
	文字换行（Word Wrapping）	控制长单词或 URL 的换行规则	word - wrap: break - word;
2D 和 3D 转换	2D 转换（2D Transformations）	对元素进行平移、旋转、缩放和倾斜操作	transform: translate(20px, 30px) rotate(30deg);
	3D 转换（3D Transformations）	创建具有立体感的元素效果	transform: perspective(800px) rotateX(45deg);
动画	过渡（Transitions）	实现元素属性值的平滑过渡	transition: opacity 1s ease - in - out;
	动画（Animations）	使用关键帧定义并应用动画

6.1选择器

特性	属性	说明	示例
属性选择器增强	[attr^=value]	选择属性值以 value 开头的元素	a[href^="https"] { color: green; } 选择所有 href 属性以 "https" 开头的 <a> 元素
[attr$=value]	选择属性值以 value 结尾的元素	img[src$=".jpg"] { border: 1px solid red; } 选择所有 src 属性以 ".jpg" 结尾的 <img> 元素
[attr*=value]	选择属性值包含 value 的元素	input[name*="user"] { background-color: lightgray; } 选择所有 name 属性包含 "user" 的 <input> 元素
伪类选择器	:nth-child(n)	选择父元素的第 n 个子元素，n 可以是数字、关键字（如 odd 表示奇数，even 表示偶数）或公式（如 2n+1）	li:nth-child(2) { font-weight: bold; } 选择父元素下的第二个 <li> 元素
:nth-of-type(n)	选择父元素中特定类型的第 n 个子元素	p:nth-of-type(3) { color: blue; } 选择父元素下的第三个 <p> 元素

6.2盒模型

特性	属性	说明	示例
弹性盒布局（Flexbox）	display: flex / inline-flex	将元素设置为弹性容器，flex 为块级弹性容器，inline-flex 为行内弹性容器	.parent { display: flex; }
flex-direction	定义子元素的排列方向，值有 row（水平从左到右）、row-reverse（水平从右到左）、column（垂直从上到下）、column-reverse（垂直从下到上）	.parent { flex-direction: column; }
justify-content	定义子元素在主轴上的对齐方式，值有 flex-start（起始端对齐）、flex-end（结束端对齐）、center（居中对齐）、space-between（两端对齐，元素间间距相等）、space-around（元素周围间距相等）等	.parent { justify-content: space-around; }
align-items	定义子元素在交叉轴上的对齐方式，值有 flex-start、flex-end、center、baseline（基线对齐）、stretch（拉伸填充容器）	.parent { align-items: center; }
多列布局（Multi - column Layout）	column-count	指定列数	.column-container { column-count: 3; }
column-gap	设置列与列之间的间隙	.column-container { column-gap: 20px; }
column-rule	设置列之间的边框样式，可指定宽度、样式和颜色	.column-container { column-rule: 1px solid black; }

6.3背景和边框

特性	属性	说明	示例
背景渐变（Background Gradients）	linear-gradient()	创建线性渐变，可指定方向和颜色	background: linear-gradient(to bottom, red, yellow);
radial-gradient()	创建径向渐变，可指定中心位置、形状和颜色	background: radial-gradient(circle at center, white, black);
边框半径（Border Radius）	border-radius	设置元素的圆角，可使用单个值（四个角相同）、两个值（左上和右下，右上和左下）、四个值（左上、右上、右下、左下）	border-radius: 10px;
边框图像（Border Image）	border-image-source	指定边框图像的源文件	border-image-source: url('border.png');
border-image-slice	指定如何切割图像，值表示从图像边缘向内的切割距离	border-image-slice: 30;
border-image-width	指定边框图像的宽度	border-image-width: 20px;

6.4文本效果

特性	属性	说明	示例
文本阴影（Text Shadow）	text-shadow	为文本添加阴影，参数依次为水平偏移、垂直偏移、模糊半径和颜色	text-shadow: 2px 2px 5px gray;
文字换行（Word Wrapping）	word-wrap（现用 overflow-wrap）	控制长单词或 URL 在容器边界处的换行规则，break-word 表示在单词内换行	overflow-wrap: break-word;
word-break	控制文本的换行规则，值有 normal（默认）、break-all（在任意字符间换行）、keep-all（不允许在单词内换行）	word-break: break-all;

6.5-2D 和 3D 转换

特性	属性	说明	示例
2D 转换（2D Transformations）	transform: translate()	对元素进行平移操作，参数为水平和垂直偏移量	transform: translate(50px, 20px);
transform: rotate()	对元素进行旋转操作，参数为旋转角度（单位为度）	transform: rotate(45deg);
transform: scale()	对元素进行缩放操作，参数为缩放比例	transform: scale(1.5);
transform: skew()	对元素进行倾斜操作，参数为水平和垂直倾斜角度	transform: skew(20deg, 10deg);
3D 转换（3D Transformations）	transform: perspective()	设置 3D 场景的透视效果，参数为透视距离	transform: perspective(1000px);
transform: rotateX()、rotateY()、rotateZ()	分别绕 X、Y、Z 轴旋转元素，参数为旋转角度	transform: rotateY(60deg);
transform-style	指定子元素是否保留 3D 转换效果，值有 flat（不保留）、preserve-3d（保留）	.parent { transform-style: preserve-3d; }

6.6动画

特性	属性	说明	示例
过渡（Transitions）	transition-property	指定要过渡的属性，可使用 all 表示所有属性	transition-property: width;
transition-duration	指定过渡的持续时间	transition-duration: 2s;
transition-timing-function	指定过渡的时间函数，如 ease（默认，缓入缓出）、linear（匀速）、ease-in（缓入）等	transition-timing-function: linear;
transition-delay	指定过渡的延迟时间	transition-delay: 0.5s;
动画（Animations）	@keyframes	定义动画的关键帧，可指定动画在不同时间点的状态

 七、总结

CSS（层叠样式表）作为网页开发的关键技术，在网页呈现中扮演着不可或缺的角色。其语法规则是基础，选择器精准定位目标元素，声明块则以 “属性：值” 的形式赋予元素样式。

在实际应用中，CSS 首先对网页布局起着决定性作用。通过盒模型相关属性，如 width、height、padding、margin 和 border，可精确调控元素尺寸与位置；Flexbox 和 Grid 布局更是让复杂布局变得轻松，实现多列布局、响应式设计等，使网页在不同设备上都能完美适配。

从视觉设计层面，CSS 能设置丰富的文本样式，如字体、字号、颜色、对齐方式；利用背景属性定义背景颜色、图片及其展示方式；通过边框和阴影属性，让元素更具立体感。在交互效果上，过渡和动画属性使元素状态切换自然流畅，伪类选择器则为不同交互状态下的元素赋予独特样式。

总之，CSS 极大地提升了网页的美观度、交互性和用户体验，是网页开发中不可或缺的重要组成部分。