HTML嵌入CSS样式超详解（尊享）

一、行内样式（Inline CSS）

1. 定义与语法

行内样式是直接在HTML标签中使用style属性来定义样式。这种方式只对当前标签生效。

html 复制代码

<tagname style="css 样式">

2. 示例

html 复制代码

<p style="color: red; font-size: 14px;">这是一个红色的段落文字。</p>
<div style="width: 200px; height: 100px; background-color: lightblue;"></div>

3. 优点

精准控制：可以对单个HTML元素进行精确的样式设置。
简单直接 ：无需额外的CSS文件或<style>标签，直接在标签中定义样式。

4. 缺点

可维护性差：每个元素都需要单独设置样式，修改时需要逐个修改。
代码冗余：如果多个元素有相同的样式，会导致代码重复。

5. 适用场景

适用于需要对单个元素进行临时样式调整的情况，或者在开发过程中进行快速样式测试。

二、内部样式表（Internal CSS）

1. 定义与语法

内部样式表是将CSS样式定义在HTML文件的<style>标签中，通常放在<head>部分。这种方式对整个HTML文档生效。

html 复制代码

<head>
    <style>
        选择器 {
            css 样式
        }
    </style>
</head>

2. 示例

html 复制代码

<head>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
        }
        h1 {
            color: blue;
            text-align: center;
        }
        p {
            color: green;
            line-height: 1.6;
        }
    </style>
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p>这是一个段落文字。</p>
</body>

3. 优点

集中管理：所有样式都在一个地方定义，便于维护和修改。
减少代码冗余：可以为多个元素定义相同的样式，避免重复代码。

4. 缺点

文件内嵌：样式代码嵌入在HTML文件中，如果HTML文件较大，可能会增加文件体积。
无法复用：样式仅在当前HTML文件中有效，无法在其他页面中复用。

5. 适用场景

适用于单个HTML文件的样式定义，或者在开发过程中进行样式测试和调试。

三、外部样式表（External CSS）

1. 定义与语法

外部样式表是将CSS样式定义在一个单独的.css文件中，然后在HTML文件中通过<link>标签引入。这种方式适用于多个HTML文件共享相同的样式。

2. 步骤

创建一个CSS文件（例如styles.css）。
在HTML文件的<head>部分使用<link>标签引入CSS文件。

3. CSS文件（styles.css）示例

css 复制代码

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
}
h1 {
    color: blue;
    text-align: center;
}
p {
    color: green;
    line-height: 1.6;
}

4. HTML文件示例

html 复制代码

<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p>这是一个段落文字。</p>
</body>

5. 优点

高度复用：一个CSS文件可以被多个HTML文件引用，便于统一管理样式。
提高可维护性：修改样式时只需修改CSS文件，所有引用该文件的HTML页面都会自动更新。
分离结构与表现：HTML文件专注于内容结构，CSS文件专注于样式表现，符合网页设计的最佳实践。

6. 缺点

额外文件：需要创建和维护额外的CSS文件。
加载时间：浏览器需要额外请求CSS文件，可能稍微增加页面加载时间（但可以通过缓存优化）。

7. 适用场景

适用于大型网站或项目，尤其是多个页面需要共享相同样式的情况。

四、选择器的使用

在CSS中，选择器用于选择要应用样式的HTML元素。常见的选择器包括：

元素选择器：选择特定的HTML元素。
css 复制代码
```
h1 {
    color: blue;
}
```
类选择器：选择具有特定类属性的元素。
css 复制代码
```
.my-class {
    color: green;
}
```
ID选择器：选择具有特定ID属性的元素。
css 复制代码
```
#my-id {
    width: 200px;
}
```
组合选择器：可以组合使用多种选择器，精确选择元素。
css 复制代码
```
div p {
    color: red;
}
```

五、CSS样式的作用范围

全局样式 ：在<style>标签或外部CSS文件中定义的样式，对整个文档或所有引用的HTML文件生效。
局部样式 ：在特定的HTML标签中使用style属性定义的样式，仅对该标签生效。

六、CSS样式的优先级

当多种样式规则同时作用于一个HTML元素时，优先级规则如下（从高到低）：

行内样式：直接在HTML标签中定义的样式。
内部样式表 ：在<style>标签中定义的样式。
外部样式表：在单独的CSS文件中定义的样式。

如果优先级相同，则后定义的样式会覆盖先定义的样式。

七、总结

行内样式：适用于单个元素的临时样式调整。
内部样式表：适用于单个HTML文件的样式定义。
外部样式表：适用于多个HTML文件共享的样式定义，便于维护和复用。