📅 最后修改于: 2023-12-03 15:38:01.754000 🧑 作者: Mango
HTML5 使用 Cascading Style Sheets (CSS) 来定义文档的样式信息。CSS 可以应用于 HTML5 元素、属性和值，实现文档的外观和布局。
内联样式是一种将样式定义应用到 HTML5 元素的方法。你可以在元素的 style 属性中定义内联样式。内联样式的优点是它们仅适用于一个元素，而不是整个文档。
<p style="color: blue; font-size: 18px;">这是使用内联样式定义的段落</p>
外部样式表是一种将样式应用到整个 HTML5 文档的方法。你可以在一个 CSS 文件中定义外部样式表，并将其链接到你的 HTML5 文档中。外部样式表的优点是它们可以应用于多个元素，并使代码更易于维护。
首先，你需要创建一个 .css 文件，并定义所需的样式。例如：
p {
color: blue;
font-size: 18px;
}
然后，在你的 HTML5 文档中，你需要使用 link 元素来链接到你的样式表文件：
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>这是一个样式定义位于外部样式表的段落</p>
</body>
内部样式表是一种将样式定义应用于整个 HTML5 文档的方法，但是它们和外部样式表有所不同，因为样式定义是写在样式标签中而不是在 .css 文件中。
<head>
<style>
p {
color: blue;
font-size: 18px;
}
</style>
</head>
<body>
<p>这是使用内部样式表定义的段落</p>
</body>
CSS 选择器允许你按类型、类、ID 或属性来选择 HTML5 元素。下面是 CSS 选择器的一些示例：
| 选择器类型 | 选择器示例 | 描述 |
| --- | --- | --- |
| 类别选择器 | p | 选择所有 <p> 元素 |
| 类选择器 | .my-class | 选择带有 class="my-class" 的元素 |
| ID 选择器 | #my-id | 选择带有 id="my-id" 的元素 |
| 属性选择器 | input[type="text"] | 选择类型为 text 的所有输入元素 |
CSS 样式属性控制 HTML5 元素的外观和布局。以下是一些常用样式属性的示例：
| 样式属性 | 示例 | 描述 |
| --- | --- | --- |
| color | color: blue; | 定义文本的颜色 |
| font-size | font-size: 18px; | 定义文本的字体大小 |
| font-weight | font-weight: bold; | 定义文本的字体加粗程度 |
| text-align | text-align: center; | 定义文本的水平对齐方式 |
| background-color | background-color: #eee; | 定义元素的背景颜色 |
| width | width: 100px; | 定义元素的宽度 |
| height | height: 100px; | 定义元素的高度 |
在 HTML5 中，你可以通过内联样式、外部样式表和内部样式表来定义文档的样式信息。同时，CSS 选择器和样式属性允许你精确控制 HTML5 元素的外观和布局。学习并熟练掌握 HTML5 和 CSS 将使你成为一名出色的前端开发人员。