HTML嵌入CSS样式超详解（尊享）
一、行内样式（Inline CSS）
1. 定义与语法
行内样式是直接在HTML标签中使用style属性来定义样式。这种方式只对当前标签生效。
<tagname style="css 样式">
2. 示例
<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文档生效。
<head>
<style>
选择器 {
css 样式
}
</style>
</head>
2. 示例
<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）示例
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: blue;
text-align: center;
}
p {
color: green;
line-height: 1.6;
}
4. 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元素。
h1 { color: blue; } -
类选择器：选择具有特定类属性的元素。
.my-class { color: green; } -
ID选择器：选择具有特定ID属性的元素。
#my-id { width: 200px; } -
组合选择器：可以组合使用多种选择器，精确选择元素。
div p { color: red; }
五、CSS样式的作用范围
- 全局样式：在
<style>标签或外部CSS文件中定义的样式，对整个文档或所有引用的HTML文件生效。 - 局部样式：在特定的HTML标签中使用
style属性定义的样式，仅对该标签生效。
六、CSS样式的优先级
当多种样式规则同时作用于一个HTML元素时，优先级规则如下（从高到低）：
- 行内样式：直接在HTML标签中定义的样式。
- 内部样式表：在
<style>标签中定义的样式。 - 外部样式表：在单独的CSS文件中定义的样式。
如果优先级相同，则后定义的样式会覆盖先定义的样式。
七、总结
- 行内样式：适用于单个元素的临时样式调整。
- 内部样式表：适用于单个HTML文件的样式定义。
- 外部样式表：适用于多个HTML文件共享的样式定义，便于维护和复用。