HTML 与 CSS

HTML（超文本标记语言）用于构建网页的结构和内容，而 CSS（层叠样式表）用于控制网页的外观和样式。HTML 和 CSS 通常一起使用，HTML 负责网页的结构，CSS 负责网页的设计与布局。

1. HTML 与 CSS 的关系

  • HTML：定义网页的结构，包含文本、图片、视频、表格等元素。
  • CSS：负责为 HTML 元素添加样式，例如颜色、字体、排版、间距等。

2. CSS 的基本语法

CSS 由 选择器和 声明两部分组成：

  • 选择器：指定要应用样式的 HTML 元素。
  • 声明：包含一组规则，描述样式属性和值。

CSS 语法格式：

selector {
    property: value;
}
  • selector：选择器，指定要应用样式的 HTML 元素（如 <p>、h1 等）。
  • property：样式属性，如 color、font-size、margin 等。
  • value：样式属性的值，如 red、16px、10px 等。

示例：

p {
    color: red;
    font-size: 16px;
}
  • 解释：上面的 CSS 规则设置所有 <p> 元素的文本颜色为红色，字体大小为 16 像素。

3. CSS 的应用方式

CSS 可以通过三种方式应用到 HTML 中：

3.1 内联样式（Inline Style）

直接在 HTML 元素的 style 属性中添加 CSS 代码。适用于快速修改单个元素的样式，但不利于维护。

示例：

<p style="color: red; font-size: 16px;">这是一个红色文本的段落。</p>

3.2 内部样式表（Internal Style Sheet）

将 CSS 代码嵌入到 HTML 文档的 <head> 部分，适用于单个网页。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内部样式表示例</title>
    <style>
        p {
            color: blue;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <p>这是一个蓝色文本的段落。</p>
</body>
</html>

3.3 外部样式表（External Style Sheet）

将 CSS 代码存放在外部 .css 文件中，适用于多个 HTML 页面共享相同的样式。最推荐的方式，因为它使代码更清晰，易于维护。

示例：

  1. styles.css 文件内容：
p {
    color: green;
    font-size: 20px;
}
  1. HTML 文件：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外部样式表示例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <p>这是一个绿色文本的段落。</p>
</body>
</html>
  • 解释：通过 <link> 标签引入外部 CSS 文件 styles.css，样式会应用于 HTML 页面。

4. CSS 选择器

CSS 选择器用于选择网页中需要应用样式的元素。常见的选择器有：

4.1 元素选择器

选择特定类型的 HTML 元素。

h1 {
    color: blue;
}
  • 解释：选择所有 <h1> 元素，将文本颜色设置为蓝色。

4.2 类选择器

选择具有指定 class 属性的 HTML 元素，类选择器以 . 开头。

.button {
    background-color: red;
    color: white;
}
  • 解释：选择所有具有 class="button" 的元素，将背景颜色设置为红色，文本颜色设置为白色。

示例：

<button class="button">点击我</button>

4.3 ID 选择器

选择具有指定 id 属性的 HTML 元素，ID 选择器以 # 开头。

#header {
    background-color: gray;
}
  • 解释：选择 id="header" 的元素，设置背景颜色为灰色。

示例：

<div id="header">这是头部内容</div>

4.4 通用选择器

选择所有 HTML 元素，使用 * 通用选择器。

* {
    margin: 0;
    padding: 0;
}
  • 解释：选择页面中的所有元素，移除它们的默认 margin 和 padding。

5. CSS 样式属性

以下是一些常见的 CSS 样式属性：

5.1 字体属性

  • font-family：设置字体。
  • font-size：设置字体大小。
  • font-weight：设置字体粗细。
  • font-style：设置字体样式（如斜体）。
p {
    font-family: Arial, sans-serif;
    font-size: 18px;
    font-weight: bold;
}

5.2 文本属性

  • color：设置文本颜色。
  • text-align：设置文本对齐方式。
  • line-height：设置行高。
h1 {
    color: blue;
    text-align: center;
    line-height: 1.5;
}

5.3 布局属性

  • margin：设置元素外边距。
  • padding：设置元素内边距。
  • border：设置元素边框。
div {
    margin: 20px;
    padding: 10px;
    border: 2px solid black;
}

5.4 背景属性

  • background-color：设置背景颜色。
  • background-image：设置背景图片。
  • background-size：设置背景图片的大小。
body {
    background-color: lightblue;
}

6. CSS 高级用法

6.1 浮动（float）

float 属性用于让元素浮动，常用于文本环绕效果。

img {
    float: left;
    margin-right: 10px;
}
  • 解释：使图片浮动到左边，文本围绕它排列。

6.2 定位（position）

通过 position 属性控制元素的位置。常见的值有 static、relative、absolute、fixed 和 sticky。

div {
    position: relative;
    top: 20px;
    left: 30px;
}
  • 解释：将元素相对定位，偏移 20 像素向下，30 像素向右。

6.3 媒体查询（Media Queries）

媒体查询用于响应式设计，根据设备屏幕的大小、方向等条件应用不同的样式。

@media (max-width: 600px) {
    body {
        background-color: lightgreen;
    }
}
  • 解释：当屏幕宽度小于或等于 600 像素时，背景颜色变为浅绿色。

7. 总结

  • HTML 用于网页的结构，而 CSS 用于网页的样式。
  • CSS 可以通过内联样式、内部样式表或外部样式表应用到 HTML 中。
  • CSS 通过选择器来定位网页元素，并为其设置各种样式属性。
  • 使用 CSS，可以控制字体、颜色、布局、背景、对齐方式等，打造现代和响应式的网页设计。

如果你有更多关于 CSS 的问题或需要更详细的示例，随时告诉我！