一文看懂网页开发中的CSS（Cascading Style Sheets,层叠样式表）

橙色小博

于 2025-05-12 09:14:00 发布

阅读量522

点赞数 12

分类专栏：前后端开发硬件与网络 python的学习之旅文章标签： css 前端

本文链接：https://blog.csdn.net/m0_69722969/article/details/147854161

版权

python的学习之旅同时被 3 个专栏收录

31 篇文章

订阅专栏

硬件与网络

12 篇文章

订阅专栏

前后端开发

3 篇文章

订阅专栏

1. 前言

在互联网的世界里，网页就如同一张张精致的名片，向用户展示着各种信息。而 CSS（Cascading Style Sheets,层叠样式表）就是为这些网页“化妆”的神奇工具。它能够让原本单调的 HTML 页面变得丰富多彩，富有层次感和吸引力。即使你对网页设计只是略知一二，掌握 CSS 的基本用法也能让你在网页制作的道路上迈出一大步。

CSS 是一种用于描述 HTML 或 XML（包括如 SVG、XML 等）文档呈现样式的计算机语言。简单来说，它就像是给网页穿上漂亮衣服的裁缝，负责定义网页元素的外观，比如字体、颜色、间距、布局等。通过 CSS，我们可以将网页的结构（HTML）与样式（CSS）分离，使网页更易于维护和更新。

2. CSS 的引入方式

2.1 行内样式

行内样式是直接在 HTML 元素的标签中使用 style 属性来设置样式。这种方式简单直接，但不利于样式的统一管理。

<!DOCTYPE html>
<html>
<head>
    <title>CSS 行内样式示例</title>
</head>
<body>
    <p style="color: red; font-size: 16px;">这是一个使用行内样式的段落文本。</p>
</body>
</html>

在上面的例子中，通过在 <p> 标签中添加 style="color: red; font-size: 16px;"，直接设置了该段落文本的颜色为红色，字体大小为 16 像素。

2.2 内部样式表

内部样式表是将 CSS 代码放在 HTML 文档的 <style> 标签内，通常位于文档的头部（<head> 标签内）。这种方式适合应用于单个页面的样式设置。

<!DOCTYPE html>
<html>
<head>
    <title>CSS 内部样式表示例</title>
    <style>
        .my-style {
            color: blue;
            font-size: 18px;
            text-align: center;
        }
    </style>
</head>
<body>
    <p class="my-style">这是一个使用内部样式表样式的段落文本。</p>
</body>
</html>

这里在 <style> 标签中定义了一个名为 my-style 的样式类，设置了文字颜色为蓝色、字体大小为 18 像素、文本居中对齐。然后在 <p> 标签中通过 class="my-style" 引用了该样式类，使得段落文本呈现出对应的样式效果。

2.3 外部样式表

外部样式表是将 CSS 代码单独存储在一个以 .css 为扩展名的文件中，然后通过 HTML 文档中的 <link> 标签引入。这种方式便于多个页面共享相同的样式，并且有利于样式的集中管理。

首先，创建一个名为 styles.css 的外部样式表文件，内容如下：

.external-style {
    color: green;
    font-size: 20px;
    font-family: Arial, sans-serif;
}

然后，在 HTML 文档中通过以下方式引入该外部样式表：

<!DOCTYPE html>
<html>
<head>
    <title>CSS 外部样式表示例</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <p class="external-style">这是一个使用外部样式表样式的段落文本。</p>
</body>
</html>

此时，段落文本将应用 styles.css 文件中定义的 external-style 样式类，呈现出绿色文字、20 像素字体大小以及 Arial 字体家族的样式效果。

3. CSS 选择器

CSS 选择器是用来选择 HTML 元素的模式或规则，以便对这些元素应用样式规则。

3.1 元素选择器

元素选择器是根据 HTML 元素的标签名来选择元素进行样式设置。例如：

p {
    color: red;
    line-height: 1.6;
}

这段代码表示选中所有的 <p> 元素，将其文字颜色设置为红色，并设置行高为 1.6 倍。

3.2 类选择器

类选择器是通过 HTML 元素的 class 属性来选择元素，其前面需要加上点（.）号。例如：

.my-class {
    background-color: yellow;
    padding: 10px;
}

在 HTML 中，可以给多个不同类型的元素添加相同的 class="my-class" 属性，这些元素都将应用该类选择器所定义的黄色背景色和 10 像素内边距的样式。

3.3 ID 选择器

ID 选择器是通过 HTML 元素的 id 属性来选择元素，其前面需要加上井号（#）号。ID 在一个 HTML 文档中应该是唯一的。例如：

#my-id {
    width: 300px;
    border: 1px solid black;
}

如果 HTML 中有一个元素设置了 id="my-id"，那么它将被应用宽度为 300 像素、黑色 1 像素实线边框的样式。

4. CSS 样式属性

4.1 字体属性

字体族（font - family） ：用于指定文本的字体系列。例如 font - family: 'Times New Roman', Times, serif; 表示优先使用 “Times New Roman” 字体，如果该字体不可用，则使用 “Times” 字体，最后使用系统默认的 serif 字体。
字体大小（font - size） ：用于设置文本的大小。常见的单位有像素（px）、相对单位（em、rem 等）。例如 font - size: 16px; 将字体大小设置为 16 像素。
字体粗细（font - weight） ：用于设置文本的粗细程度。可以使用关键词如 normal（正常粗细）、bold（加粗），或者使用数值范围（100 - 900），数值越大表示字体越粗。例如 font - weight: bold; 将文本加粗。

4.2 颜色属性

颜色（color） ：用于设置文本的颜色。可以使用颜色名称（如 red、green、blue 等）、十六进制颜色值（如 #FF0000 表示红色）、RGB 颜色值（如 rgb(255, 0, 0) 表示红色）或 HSL 颜色值（如 hsl(0, 100%, 50%) 表示红色）来表示。例如 color: blue; 将文本颜色设置为蓝色。
背景颜色（background - color） ：用于设置元素的背景颜色。其取值方式与 color 属性类似。例如 background - color: #FFFF00; 将元素的背景颜色设置为黄色。

4.3 盒模型属性

宽度（width）和高度（height） ：用于设置元素的宽高尺寸。例如 width: 200px; height: 100px; 将元素的宽度设置为 200 像素，高度设置为 100 像素。
内边距（padding） ：用于设置元素内容与边框之间的空白区域。可以分别设置上（padding - top）、右（padding - right）、下（padding - bottom）、左（padding - left）四个方向的内边距，或者使用 padding: 上右下左; 的简写形式。例如 padding: 10px 20px; 表示上下内边距为 10 像素，左右内边距为 20 像素。
外边距（margin） ：用于设置元素与其他元素之间的空白区域。其设置方式与内边距类似。例如 margin: 0 auto; 常用于将元素水平居中（适用于块级元素）。
边框（border） ：用于设置元素的边框样式，包括边框宽度（border - width）、边框样式（border - style，如 solid、dashed、dotted 等）、边框颜色（border - color）。也可以使用 border: 边框宽度边框样式边框颜色; 的简写形式。例如 border: 2px solid #0000FF; 将边框设置为 2 像素宽的蓝色实线。

4.4 文本属性

文本对齐（text - align） ：用于设置文本的对齐方式。常见的取值有 left（左对齐）、right（右对齐）、center（居中对齐）、justify（两端对齐）。例如 text - align: center; 将文本在元素区域内居中对齐。
文本装饰（text - decoration） ：用于设置文本的装饰效果。常用值有 none（无装饰）、underline（下划线）、overline（上划线）、line - through（删除线）。例如 text - decoration: underline; 给文本添加下划线。
文本转换（text - transform） ：用于控制文本的大小写转换。取值包括 none（无转换）、capitalize（首字母大写）、uppercase（全部大写）、lowercase（全部小写）。例如 text - transform: uppercase; 将文本转换为全部大写字母显示。

5. CSS 的盒模型

盒模型是 CSS 中一个非常重要的概念，它描述了 HTML 元素在页面上如何布局和呈现。一个元素的盒模型包括内容区域（content）、内边距（padding）、边框（border）和外边距（margin）四部分。

内容区域是元素实际显示内容的区域，其大小由宽度（width）和高度（height）属性决定。内边距位于内容区域和边框之间，用于增加元素内容与边框之间的空白距离。边框则是围绕在内边距和内容区域的外围，用于给元素添加边框线。外边距位于元素与其他元素之间的空白区域，用于控制元素之间的距离。

例如：

.my-box {
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 2px solid black;
    margin: 30px;
}

在这个样式中，元素的总宽度将为 200（content 宽度） + 20×2（左右 padding） + 2×2（左右 border 宽度） + 30×2（左右 margin） = 200 + 40 + 4 + 60 = 304 像素；同理，总高度为 100（content 高度） + 20×2（上下 padding） + 2×2（上下 border 宽度） + 30×2（上下 margin） = 100 + 40 + 4 + 60 = 204 像素。

6. CSS 布局

6.1 块级元素与行内元素

块级元素（如 <div>、<p> 等）在页面布局中会独占一行，其宽度默认为父元素的 100%。而行内元素（如 <span>、<a> 等）则与其他元素在同一行显示，其宽度由内容决定。

6.2 浮动布局（`float`）

浮动布局可以将元素向左（float: left;）或向右（float: right;）移动，直到碰到父元素的边界或其他浮动元素。它常用于实现多列布局等效果。例如：

.left-column {
    float: left;
    width: 200px;
    background-color: #f0f0f0;
}

.main-content {
    margin-left: 220px;
    background-color: #ffffff;
}

这里将左侧的列设置为向左浮动，宽度为 200 像素；主内容区域通过设置左边距为 220 像素（比左列宽度稍大，避免内容重叠），从而在左列的右侧进行布局显示。

但需要注意，浮动布局可能会引发一些布局问题，如父元素高度塌陷等，通常需要使用 clearfix 等方法进行清理。

6.3 弹性布局（`flexbox`）

弹性布局是一种更加灵活、强大的布局方式。它允许子元素在容器内沿着一个方向（行或列）进行排列，并且可以方便地控制子元素的对齐、分布和换行等行为。例如：

.container {
    display: flex;
    justify - content: space - between; /* 子元素在主轴上两端对齐 */
    align - items: center; /* 子元素在交叉轴上居中对齐 */
}

.item {
    width: 100px;
    height: 100px;
    background - color: #e0e0e0;
}

在这个例子中，容器采用弹性布局，子元素（.item）在水平方向（默认主轴为水平方向）两端对齐，并且在垂直方向（交叉轴）居中对齐，从而实现了一个简洁整齐的布局效果。

7. 总结

CSS 作为网页设计中不可或缺的一部分，为我们的网页带来了丰富的视觉效果和灵活多样的布局方式。从简单的样式设置到复杂的功能实现，CSS 都发挥着关键作用。通过学习 CSS 的基本用法、选择器、样式属性、盒模型以及布局方式等内容，我们可以更加得心应手地打造美观且实用的网页。当然，CSS 的世界远不止于此，随着技术的不断发展，还有许多高级特性和技巧等待我们去探索和学习，我是橙色小博，关注我，一起在人工智能领域学习进步！