HTML CSS

使用 CSS 的 HTML 样式

CSS（层叠样式表，Cascading Style Sheets）是用来描述 HTML 文档呈现和样式的语言。它控制着布局、颜色、字体、间距等。

为什么使用 CSS？

HTML 负责构建内容结构，而 CSS 定义内容的呈现方式。将结构（HTML）与呈现（CSS）分离具有以下几个优点：

可维护性：修改一个 CSS 文件即可改变整个网站的外观。
一致性：确保多个页面具有一致的外观。
可访问性：结构良好的 HTML 与分离的 CSS 更易于辅助技术解析。
性能：浏览器可以缓存外部 CSS 文件，加快页面加载速度。
更整洁的代码：HTML 专注于内容结构，使其更易于阅读和管理。

避免使用已废弃的 HTML 属性，如 <font>、<center>、bgcolor 等。所有样式都应该使用 CSS 来完成。

向 HTML 添加 CSS 的方法

有三种主要方法可以应用 CSS 样式：

1. 外部 CSS（推荐）

样式在一个单独的 .css 文件中定义（例如，styles.css）。然后使用 <head> 部分中的 <link> 标签将该文件链接到 HTML 文档。

HTML (index.html)：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>External CSS Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Styled Heading</h1>
    <p>Styled paragraph.</p>
</body>
</html>

CSS (styles.css)：

body {
  font-family: sans-serif;
  background-color: #f0f0f0;
}

h1 {
  color: navy;
}

p {
  color: #333;
  line-height: 1.6;
}

这是大多数网站的最佳实践，因为它提供了最好的关注点分离和可维护性。

2. 内部 CSS

样式在 HTML 文档的 <head> 部分的 <style> 元素内定义。此方法适用于单页网站或仅属于单个页面的特定样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Internal CSS Example</title>
    <style>
        body {
            background-color: lightyellow;
        }
        h1 {
            color: maroon;
            text-align: center;
        }
        p {
            font-size: 1.1em;
        }
    </style>
</head>
<body>
    <h1>Internal Style Example</h1>
    <p>This paragraph is styled by the internal CSS.</p>
</body>
</html>

3. 内联 CSS

样式直接使用 style 属性应用于单个 HTML 元素。应谨慎使用此方法，因为它将呈现与结构混合在一起，使得维护更加困难。有时对于独特、仅针对单个元素的样式设置或使用 JavaScript 动态应用样式很有用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Inline CSS Example</title>
</head>
<body>
    <h1 style="color: blue; text-decoration: underline;">Blue Underlined Heading</h1>
    <p style="color: green; font-style: italic;">This paragraph has inline styles.</p>
</body>
</html>

基本 CSS 语法

CSS 规则由一个选择器和一个声明块组成：

selector {
  property: value; /* 这是一个声明 */
  another-property: another-value;
}

选择器：指向你想要应用样式的 HTML 元素（例如，h1, p, .my-class, #my-id）。
声明块：包含一个或多个用花括号 {} 括起来的声明。
声明：由 CSS 属性名（例如，color, font-size, background-color）后跟一个冒号 :，然后是值（例如，blue, 16px, #ffffff），最后以分号 ; 结束。

常用 CSS 属性

color：设置文本颜色。
background-color：设置元素的背景颜色。
font-family：指定文本字体。
font-size：设置文本大小（例如，16px, 1.2em, 120%）。
text-align：水平对齐文本（left、right、center、justify）。
width, height：设置元素的尺寸。
margin：控制元素边框外部的空间。
padding：控制元素边框内部、边框和内容之间的空间。
border：设置边框的宽度、样式（solid、dashed 等）和颜色。

结合使用多个属性的示例：

.button {
  display: inline-block; /* 允许设置 width/height/padding */
  padding: 10px 20px;
  margin: 5px;
  background-color: dodgerblue;
  color: white;
  border: none;
  border-radius: 5px; /* 圆角 */
  font-family: Arial, sans-serif;
  font-size: 16px;
  text-align: center;
  cursor: pointer; /* 悬停时改变鼠标光标样式 */
}

（注意：该盒子占用的总宽度为 width + padding-left + padding-right + border-left + border-right + margin-left + margin-right）

选择器：定位元素

元素选择器：选择所有特定类型的元素。

`p { color: gray; }` /* 为所有 <p> 元素应用样式 */

类选择器：选择具有特定 class 属性的元素。以点号（.）开头。可以应用于多个元素。

HTML: `<p class="highlight">Highlighted text.</p>`<br>CSS: `.highlight { background-color: yellow; }`

ID 选择器：选择具有特定 id 属性的单个元素。以井号（#）开头。在一个页面中，ID 必须是唯一的。

HTML: `<div id="main-content">...</div>`<br>CSS: `#main-content { border: 1px solid black; }`

指导原则
	使用 `class` 来为具有相同样式的多个元素设置样式。使用 `id` 来为页面上唯一的单个元素设置样式（通常用于布局分区或 JavaScript 钩子）。

CSS 盒模型

每个 HTML 元素都可以被想象成一个盒子。CSS 盒模型描述了元素的尺寸（width, height）、内边距（padding）、边框（border）和外边距（margin）是如何计算并相互关联的：

内容：盒子的实际内容，文本和图像显示在这里。
内边距：清除内容周围的区域。它位于边框内部。透明。
边框：围绕内边距和内容的边框。
外边距：清除边框外部的区域。它用于分隔元素与其他元素。透明。

理解盒模型对于控制布局和间距至关重要。

div.box {
  width: 300px;
  padding: 20px;
  border: 5px solid red;
  margin: 15px;
  background-color: lightblue;
}