在 HTML 中，样式是控制网页元素外观和布局的关键部分。通过 CSS（层叠样式表），你可以控制网页的颜色、字体、布局、间距等视觉效果。CSS 与 HTML 是分离的，HTML 用于定义内容结构，而 CSS 用于控制其样式和布局。

CSS 基本概念

  1. CSS 选择器：用于选择 HTML 元素，并为这些元素应用样式。
  2. CSS 声明：由 属性 和 值 组成，指定如何展示选定的元素。selector { property: value; }
    • 选择器：指定要应用样式的 HTML 元素。
    • 属性：定义元素样式的具体方面（如颜色、字体、大小）。
    • 值：为属性设置的具体数值（如 red、16px、#ff0000 等）。

1. CSS 样式的引入方式

CSS 样式可以通过三种方式引入到 HTML 文档中：

a. 内联样式（Inline Style）

直接在 HTML 标签中使用 style 属性定义样式。

<p style="color: red; font-size: 16px;">这是红色文字</p>

b. 内部样式（Internal Style）

将 CSS 样式嵌入到 HTML 文档的 <head> 部分，使用 <style> 标签。

&lt;!DOCTYPE html>
&lt;html lang="en">
&lt;head>
    &lt;meta charset="UTF-8">
    &lt;title>内部样式示例&lt;/title>
    &lt;style>
        body {
            background-color: lightblue;
        }
        p {
            color: green;
        }
    &lt;/style>
&lt;/head>
&lt;body>
    &lt;p>这是一个段落。&lt;/p>
&lt;/body>
&lt;/html>

c. 外部样式（External Style）

通过链接外部 CSS 文件来定义样式，适用于多个页面共享样式。

&lt;head>
    &lt;link rel="stylesheet" href="styles.css">
&lt;/head>

外部 CSS 文件 styles.css 示例：

body {
    background-color: lightblue;
}
p {
    color: green;
}

2. CSS 选择器

CSS 选择器用于选中 HTML 元素并为其添加样式。常见的选择器有：

a. 元素选择器

选择所有指定的 HTML 元素。

p {
    color: blue;
}

这会使页面中所有 <p> 标签中的文本颜色变为蓝色。

b. 类选择器

使用类名选择指定的 HTML 元素，类名以 . 开头。

.button {
    background-color: red;
    color: white;
}

HTML：

&lt;button class="button">点击我&lt;/button>

c. ID 选择器

使用 ID 选择器选择唯一的 HTML 元素，ID 以 # 开头。

#header {
    background-color: #333;
    color: white;
}

HTML：

&lt;div id="header">这是头部内容&lt;/div>

d. 组合选择器

可以将多个选择器组合在一起，应用相同的样式。

h1, h2, h3 {
    font-family: Arial, sans-serif;
}

e. 子元素选择器（>）

选择某个元素的直接子元素。

div > p {
    color: green;
}

3. CSS 常见属性

a. 颜色

使用 color 和 background-color 设置文本和背景颜色。

h1 {
    color: red;
}
body {
    background-color: #f0f0f0;
}

b. 字体

使用 font-family、font-size、font-weight 等设置字体的样式。

p {
    font-family: "Arial", sans-serif;
    font-size: 14px;
    font-weight: bold;
}

c. 文本效果

使用 text-align、line-height、text-decoration 等控制文本的对齐、行高和装饰。

h2 {
    text-align: center;
    text-decoration: underline;
}

d. 边框

使用 border 设置元素的边框。

div {
    border: 2px solid black;
}

e. 间距

使用 margin 和 padding 设置外边距和内边距。

div {
    margin: 20px;
    padding: 10px;
}

f. 布局

使用 display、position、flex 等属性来控制元素布局。

.container {
    display: flex;
    justify-content: space-between;
}

g. 尺寸

使用 width 和 height 设置元素的宽度和高度。

img {
    width: 100%;
    height: auto;
}

4. CSS 响应式设计

通过 CSS 媒体查询（Media Query），可以为不同屏幕尺寸的设备设置不同的样式，以实现响应式设计。

/* 默认样式 */
body {
    font-size: 16px;
}

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

5. CSS 示例

a. 基础样式示例

&lt;!DOCTYPE html>
&lt;html lang="en">
&lt;head>
    &lt;meta charset="UTF-8">
    &lt;title>CSS 样式示例&lt;/title>
    &lt;style>
        body {
            background-color: lightgray;
            font-family: Arial, sans-serif;
        }

        h1 {
            color: #333;
            text-align: center;
        }

        .button {
            background-color: blue;
            color: white;
            padding: 10px 20px;
            border-radius: 5px;
            text-align: center;
            display: inline-block;
            cursor: pointer;
        }

        .button:hover {
            background-color: darkblue;
        }
    &lt;/style>
&lt;/head>
&lt;body>

    &lt;h1>欢迎来到我的网页&lt;/h1>
    &lt;p>这是一个简单的 CSS 示例。&lt;/p>
    &lt;a href="#" class="button">点击我&lt;/a>

&lt;/body>
&lt;/html>

总结

CSS 是控制网页样式的强大工具，能够精确控制页面的外观、布局和响应式设计。通过内联样式、内部样式和外部样式等方式，可以轻松实现样式的应用。掌握 CSS 的基本属性、选择器和布局技术，能够帮助你设计出美观且高效的网页。

如果你对 CSS 有更多问题，或者需要更深入的示例和解释，随时告诉我！