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

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 文档：

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

    html
    <p style="color: blue; font-size: 16px;">这段文字是蓝色的，字体大小为16像素。</p>

    • 优点：简单直接，优先级最高。
    • 缺点：难以复用，不适用于大型项目，不利于维护。

  2. 内部样式表（Internal Style Sheet）：在 HTML 文档的 <head> 标签内使用 <style> 标签包裹 CSS 代码。

    html
    <head>
    <style>
    p {
    color: blue;
    font-size: 16px;
    }
    </style>
    </head>

    • 优点：适用于单个 HTML 文件，比内联样式易于管理。
    • 缺点：无法在多个 HTML 文件之间共享样式。

  3. 外部样式表（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）：边框与其他元素之间的空间。

相关属性：

  • width：设置内容的宽度。
  • height：设置内容的高度。
  • padding：设置内边距（可以分别设置上、右、下、左四个方向的内边距）。
  • margin：设置外边距（可以分别设置上、右、下、左四个方向的外边距）。

3.5 定位
position属性用于指定元素的定位方式。
* static：默认值，元素按照正常文档流进行布局。
* relative：相对定位，相对于元素自身在正常文档流中的位置进行定位。
* absolute：绝对定位，相对于最近的已定位祖先元素（即 position 属性不为 static 的祖先元素）进行定位，如果不存在已定位的祖先元素，则相对于初始包含块（通常是 <html> 元素）进行定位。
* fixed：固定定位，相对于浏览器窗口进行定位，即使页面滚动，元素的位置也不会改变。
* sticky：粘性定位，可以看做是relative和fixed的结合，当元素在正常文档流中时表现为relative,当页面滚动到一定位置时，元素固定在屏幕中，此时表现为fixed

相关属性：

  • top、right、bottom、left：用于设置元素相对于其定位上下文的偏移量。
  • z-index: 指定元素的堆叠顺序

3.6 浮动

float 属性用于创建浮动框，将元素向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

  • float: left;：元素向左浮动。
  • float: right;：元素向右浮动。
  • float: none;：默认值，元素不浮动。

清除浮动

浮动元素会脱离正常文档流，可能导致父元素高度塌陷等问题。为了解决这些问题，需要清除浮动。

常用的清除浮动方法：

  • 使用 clear 属性：在浮动元素的下方添加一个空元素，并设置 clear 属性为 both、left 或 right。

    html
    <div style="clear: both;"></div>

  • 使用 overflow 属性：将父元素的 overflow 属性设置为 hidden 或 auto。

    css
    .parent {
    overflow: hidden; /* 或 overflow: auto; */
    }

  • 使用伪元素 ::after（推荐）：

    css
    .clearfix::after {
    content: "";
    display: table;
    clear: both;
    }

3.7 显示与隐藏

  • display：控制元素的显示方式。
    • block：块级元素，独占一行，可以设置宽度和高度。
    • inline：行内元素，与其他行内元素共享一行，不能设置宽度和高度。
    • inline-block：行内块元素，兼具块级元素和行内元素的特性，可以设置宽度和高度，但与其他行内元素共享一行。
    • none：元素不显示，且不占据页面空间。
  • visibility：控制元素的可见性。
    • visible：元素可见。
    • hidden：元素隐藏，但仍占据页面空间。

第四部分：CSS 高级技术

4.1 响应式设计

响应式设计（Responsive Web Design，RWD）是指网页能够根据不同的设备（桌面、平板、手机）和屏幕尺寸自动调整布局和样式，以提供最佳的用户体验。

媒体查询（Media Queries）

媒体查询是实现响应式设计的关键技术，它允许您根据设备的特性（如屏幕宽度、高度、分辨率等）来应用不同的 CSS 样式。

css
/* 当屏幕宽度小于 768px 时应用的样式 */
@media (max-width: 768px) {
body {
font-size: 14px;
}
.container {
width: 100%;
}
}

弹性盒子布局（Flexbox）

Flexbox 是一种一维布局模型，非常适合用于创建灵活的、响应式的布局。

css
.container {
display: flex; /* 将容器设置为弹性盒子 */
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}

网格布局（Grid Layout）

Grid 是一种二维布局模型，更适合用于创建复杂的、多行多列的布局。

css
.container {
display: grid; /* 将容器设置为网格布局 */
grid-template-columns: 1fr 1fr 1fr; /* 三列等宽 */
grid-gap: 10px; /* 列间距 */
}

4.2 动画与过渡

  • 过渡（Transitions）：允许您在元素状态改变时（例如，鼠标悬停）平滑地过渡到新的样式。

    css
    button {
    background-color: blue;
    transition: background-color 0.3s ease; /* 0.3秒缓动过渡 */
    }
    button:hover {
    background-color: red;
    }

  • 动画（Animations）：允许您创建更复杂的动画效果，通过 @keyframes 规则定义动画的关键帧。

    css
    @keyframes my-animation {
    from {
    transform: translateX(0);
    }
    to {
    transform: translateX(100px);
    }
    }
    .element {
    animation: my-animation 2s infinite; /* 2秒无限循环动画 */
    }

4.3 CSS 预处理器

CSS 预处理器（如 Sass、Less、Stylus）是一种扩展 CSS 的语言，它们添加了变量、嵌套、混合（Mixins）、函数等功能，使 CSS 代码更易于编写、维护和复用。

总结

本教程涵盖了 CSS 的基础知识、常用属性、高级技术以及一些最佳实践。掌握这些知识，您将能够创建出美观、实用且具有良好用户体验的网页。

当然，CSS 的学习是一个持续的过程，随着 Web 技术的不断发展，新的 CSS 特性和技术也在不断涌现。建议您保持学习的热情，多实践、多探索，不断提升自己的 CSS 技能。

版权声明：
作者：admin
链接：https://hostlocvps.com/2025/03/10/css%e6%95%99%e7%a8%8b%ef%bc%9ahtml%e6%a0%b7%e5%bc%8f%e8%ae%be%e8%ae%a1%e5%ae%8c%e5%85%a8%e6%89%8b%e5%86%8c/
文章版权归作者所有，未经允许请勿转载。
THE END
React vs Angular vs Vue：哪个更适合你？（如果文章有对比）
<<上一篇
WPS Office for Mac：免费、强大的办公软件
下一篇>>
相关推荐
下载免费Kimi PPT模板
Hyper-V 高级特性及应用
使用 Boost.Asio 构建可扩展的网络服务
微PE启动盘：系统救援的最佳选择
解锁地域限制：使用SwitchyOmega访问被屏蔽网站
如何选择合适的 Boost 变换器
OpenCV Python教程：掌握图像处理核心技巧
SCP：安全、收容、保护 – 探索异常的边界
提升Django开发效率：GitHub工具与技巧
MATLAB 破解版不同版本区别