CSS，即层叠样式表（Cascading Style Sheets），是一种用于描述网页样式和布局的标记语言。它通过定义样式规则来控制网页元素的外观和排版，包括文字大小、颜色、边距、背景等，从而实现页面的美化和布局控制。
CSS 类似于给衣服设计款式和尺寸。HTML 负责创建网页的结构，就像制作衣服的基本模型一样。CSS 则为 HTML 添加美观、统一的外观，使网页更具吸引力和可读性。
接下来，咱们来聊聊它的 3 种创建方法。
1、内联样式（Inline Styles）
内联样式是将 CSS 样式直接写在 HTML 元素的 style 属性中，它的优先级最高，会覆盖外部和内部样式表定义的样式。
- <p style="color: red; font-size: 16px;">这是一个内联样式的段落。</p>
-
2、嵌入样式（Embedded Styles）
嵌入样式是将 CSS 样式写在 HTML 文档的<head>标签内的<style>标签中，它作用于整个文档，但优先级低于内联样式。
- <head>
- <style>
- p {
- color: blue;
- font-size: 18px;
- }
- </style>
- </head>
- <body>
- <p>这是一个嵌入样式的段落。</p>
- </body>
-
3、外部样式表（External Stylesheet）
外部样式表是将 CSS 样式定义在一个独立的.css 文件中，然后通过<link>标签将其引入到 HTML 文档中，它可以被多个页面共享，并且优先级最低。
HTML:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <title>External CSS Example</title>
- <!-- 在<head>标签中引入外部样式表 -->
- <link rel="stylesheet" type="text/css" href="styles.css" />
- </head>
- <body>
- <!-- 示例：修改链接颜色 -->
- <a href="#">Custom Link</a>
- <!-- 示例：修改标题背景颜色 -->
- <h1>Custom Heading</h1>
- </body>
- </html>
-
CSS(styles.css):
- /* 外部样式表中定义样式 */
- a {
- color: #ff69b4; /* 修改链接颜色为粉色 */
- }
-
- h1 {
- background-color: #6495ed; /* 修改标题背景颜色为蓝色 */
- }
-
本次只是简要介绍 CSS 的创建方法，因为后续的案例需要加样式，会用到上述场景，这 3 种不同场景，将在后续的 CSS 章节中详细解释。
湘公网安备 43102202000103号