CSS教程：HTML样式设计完全手册

admin

2025-3-10

HTML 样式设计完全手册：CSS 教程

引言

在 Web 开发的世界里，HTML 负责构建网页的骨架（结构），而 CSS 则负责赋予网页美丽的外观（样式）。如果说 HTML 是建筑的砖瓦，那么 CSS 就是粉刷、装饰和布局，让建筑变得宜居且赏心悦目。

本教程旨在成为一份全面的 CSS 指南，无论您是 CSS 新手，还是希望巩固和提升现有技能的开发者，都能从中获益。我们将从 CSS 的基础概念讲起，逐步深入到高级技术，并通过大量的示例代码帮助您理解和掌握每一个知识点。

第一部分：CSS 基础

1.1 什么是 CSS？

CSS（Cascading Style Sheets，层叠样式表）是一种样式表语言，用于描述 HTML 或 XML（包括如 SVG、MathML 等各种 XML 方言）文档的外观和格式。CSS 描述了应该如何显示 HTML 元素。

层叠（Cascading）：指的是当多个样式规则应用于同一个元素时，CSS 具有一套优先级规则来决定哪个样式最终生效。
样式表（Style Sheets）：CSS 代码通常保存在单独的 .css 文件中，或者嵌入在 HTML 文件的 <style> 标签内。

1.2 CSS 的作用

美化网页：控制字体、颜色、大小、背景、边框、间距等，使网页更具视觉吸引力。
布局控制：决定元素在页面上的位置、排列方式、响应式设计等。
提高可维护性：将样式与 HTML 结构分离，使代码更易于管理和更新。
改善用户体验：通过合理的样式设计，提高网页的可读性、易用性和访问性。

1.3 CSS 的引入方式

有三种方式可以将 CSS 应用到 HTML 文档：

内联样式（Inline Style）：直接在 HTML 元素的 style 属性中编写 CSS 代码。

html <p style="color: blue; font-size: 16px;">这段文字是蓝色的，字体大小为16像素。</p>
- 优点：简单直接，优先级最高。
- 缺点：难以复用，不适用于大型项目，不利于维护。
内部样式表（Internal Style Sheet）：在 HTML 文档的 <head> 标签内使用 <style> 标签包裹 CSS 代码。

html <head> <style> p { color: blue; font-size: 16px; } </style> </head>
- 优点：适用于单个 HTML 文件，比内联样式易于管理。
- 缺点：无法在多个 HTML 文件之间共享样式。
外部样式表（External Style Sheet）：将 CSS 代码保存在单独的 .css 文件中，然后在 HTML 文档的 <head> 标签内使用 <link> 标签引入。

html <head> <link rel="stylesheet" href="style.css"> </head>

style.css 文件内容：

css p { color: blue; font-size: 16px; }
- 优点：最佳实践，样式可以在多个 HTML 文件之间共享，易于维护和管理。
- 缺点：需要额外的 HTTP 请求加载 CSS 文件。

1.4 CSS 语法

CSS 规则由两个主要部分构成：选择器和声明块。

css selector { property: value; property: value; /* ... 更多声明 ... */ }

选择器（Selector）：指定要应用样式的 HTML 元素。
声明块（Declaration Block）：包含一个或多个声明（Declaration），每个声明由一个属性（Property）和一个值（Value）组成，用冒号分隔，并以分号结尾。

第二部分：CSS 选择器

选择器是 CSS 的核心，它决定了哪些 HTML 元素将受到样式规则的影响。以下是一些常用的 CSS 选择器：

2.1 基本选择器

元素选择器（Type Selector）：选择具有指定标签名称的所有元素。

css p { color: red; } /* 选择所有 <p> 元素 */
类选择器（Class Selector）：选择具有指定类名的所有元素。类名以 . 开头。

css .highlight { background-color: yellow; } /* 选择所有 class="highlight" 的元素 */
ID 选择器（ID Selector）：选择具有指定 ID 的元素。ID 名以 # 开头。ID 在一个 HTML 文档中应该是唯一的。

```css

header { font-size: 24px; } / 选择 id="header" 的元素 /

```
通配符选择器（Universal Selector）：选择所有元素。

css * { margin: 0; padding: 0; } /* 选择所有元素，通常用于重置样式 */

2.2 组合选择器

后代选择器（Descendant Combinator）：选择某个元素的后代元素（包括子元素、孙子元素等）。

css div p { color: blue; } /* 选择所有 <div> 元素内的 <p> 元素 */
子元素选择器（Child Combinator）：选择某个元素的直接子元素。

css ul > li { list-style: none; } /* 选择所有 <ul> 元素的直接子元素 <li> */
相邻兄弟选择器（Adjacent Sibling Combinator）：选择紧接在另一个元素后的元素，且两者具有相同的父元素。

css h2 + p { font-style: italic; } /* 选择紧接在 <h2> 元素后的 <p> 元素 */
通用兄弟选择器（General Sibling Combinator）：选择在另一个元素后的所有兄弟元素，且两者具有相同的父元素。

css h2 ~ p { color: gray; } /* 选择在 <h2> 元素后的所有 <p> 兄弟元素 */

2.3 属性选择器

属性选择器根据元素的属性和属性值来选择元素。

[attribute]：选择具有指定属性的元素。

css [title] { text-decoration: underline; } /* 选择所有具有 title 属性的元素 */
[attribute=value]：选择具有指定属性且属性值等于指定值的元素。

css [type="button"] { padding: 10px; } /* 选择所有 type="button" 的元素 */
[attribute^=value]：选择具有指定属性且属性值以指定值开头的元素。

css [href^="https"] { color: green; } /* 选择所有 href 属性以 "https" 开头的元素 */
* [attribute*=value]：选择具有指定属性且属性值包含指定值的元素

css [class*="container"] { width:90%; margin:auto; } /*选择所有class属性中包含"container"的元素*/

2.4 伪类选择器

伪类选择器用于选择元素的特定状态或位置。

:hover：鼠标悬停在元素上时的状态。

css a:hover { color: red; } /* 鼠标悬停在链接上时，链接变为红色 */
:active：元素被激活时的状态（例如，鼠标点击链接时）。

css button:active { background-color: darkgray; }
:focus：元素获得焦点时的状态（例如，用户点击输入框时）。

css input:focus { border: 2px solid blue; }
:first-child：选择作为其父元素的第一个子元素的元素。

css li:first-child { font-weight: bold; } /* 选择每个列表的第一个 <li> 元素 */
:last-child：选择作为其父元素的最后一个子元素的元素。

css li:last-child{ border-bottom:none }
:nth-child(n)：选择作为其父元素的第 n 个子元素的元素。

css tr:nth-child(even) { background-color: lightgray; } /* 选择表格中的偶数行 */

2.5 伪元素选择器

伪元素选择器用于创建一些文档树中不存在的元素，并为其添加样式。

::before：在元素内容之前插入内容。

css p::before { content: "• "; } /* 在每个 <p> 元素前添加一个圆点 */
::after：在元素内容之后插入内容。

css .clearfix::after { content: ""; display: table; clear: both; } /* 清除浮动 */
::first-line: 选择元素的第一行
::first-letter:选择元素的第一个字母

第三部分：CSS 常用属性

3.1 文本样式

color：设置文本颜色。
font-family：设置字体。
font-size：设置字体大小。
font-weight：设置字体粗细（normal、bold、lighter、bolder 或 100-900 的数值）。
font-style：设置字体样式（normal、italic、oblique）。
text-align：设置文本对齐方式（left、right、center、justify）。
text-decoration：设置文本装饰（none、underline、overline、line-through）。
text-transform：设置文本大小写（none、uppercase、lowercase、capitalize）。
line-height：设置行高。
letter-spacing：设置字符间距。
word-spacing：设置单词间距。
white-space: 控制元素中的空白，常用属性值有normal（默认，多个空格或制表符压缩成一个）,nowrap(强制不换行)

3.2 背景样式

background-color：设置背景颜色。
background-image：设置背景图像。
background-repeat：设置背景图像是否重复（repeat、repeat-x、repeat-y、no-repeat）。
background-position：设置背景图像的位置（top、bottom、left、right、center 或具体的像素值/百分比）。
background-size：设置背景图像的大小（auto、cover、contain 或具体的像素值/百分比）。
background: 复合属性，可以将上述属性合并到一起书写。

3.3 边框样式

border-width：设置边框宽度。
border-style：设置边框样式（none、solid、dashed、dotted、double、groove、ridge、inset、outset）。
border-color：设置边框颜色。
border：复合属性，可以将上述属性合并到一起书写。
border-radius：设置圆角边框。

3.4 盒模型

CSS 盒模型（Box Model）是 CSS 布局的基础，它将每个 HTML 元素都视为一个矩形盒子，这个盒子由四个部分组成：

内容（Content）：元素的实际内容，例如文本、图像等。
内边距（Padding）：内容与边框之间的空间。
边框（Border）：围绕内边距和内容的边框。
外边距（Margin）：边框与其他元素之间的空间。

CSS教程：HTML样式设计完全手册

HTML 样式设计完全手册：CSS 教程

header { font-size: 24px; } / 选择 id="header" 的元素 /