CSS 创建
# CSS 创建
CSS（Cascading Style Sheets）允许您控制网页的外观和布局。您可以通过外部样式表、内部样式表和内联样式来定义和应用 CSS。
# 1. 外部样式表
外部样式表是定义网站样式的最佳方式之一。当样式需要应用于多个页面时，外部样式表是最理想的选择。通过改变一个文件，就可以更新整个网站的样式。
# 外部样式表的使用
每个页面通过 <link> 标签链接到外部样式表。这个标签应该放在文档的头部部分：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
2
3
浏览器会从文件 mystyle.css 中读取样式声明，并根据这些声明来格式化文档。
# 外部样式表的编写
外部样式表可以在任何文本编辑器中编写。文件中不能包含任何 HTML 标签，文件名应该以 .css 扩展名结尾。以下是一个外部样式表的示例：
hr {
color: sienna;
}
p {
margin-left: 20px;
}
body {
background-image: url("/images/back40.gif");
}
2
3
4
5
6
7
8
9
注意：不要在属性值和单位之间留有空格。例如，margin-left: 20 px 是错误的，应该写作 margin-left: 20px。
# 2. 内部样式表
当单个文档需要特殊的样式时，可以使用内部样式表。您可以在文档的头部通过 <style> 标签定义内部样式表：
<head>
<style>
hr {
color: sienna;
}
p {
margin-left: 20px;
}
body {
background-image: url("images/back40.gif");
}
</style>
</head>
2
3
4
5
6
7
8
9
10
11
12
13
# 3. 内联样式
内联样式用于单独设置某个 HTML 元素的样式。由于内联样式将样式和内容混合在一起，会丧失许多样式表的优势，因此应慎用这种方法。内联样式通过在相关标签内使用 style 属性来定义：
<p style="color: sienna; margin-left: 20px;">这是一个段落。</p>
# 4. 多重样式
当相同的选择器在不同的样式表中定义了不同的属性时，元素会继承更具体的样式。假设外部样式表中针对 h3 选择器定义了以下属性：
h3 {
color: red;
text-align: left;
font-size: 8pt;
}
2
3
4
5
而内部样式表中定义了以下属性：
h3 {
text-align: right;
font-size: 20pt;
}
2
3
4
如果页面同时引用了内部和外部样式表，则 h3 元素会继承以下样式：
color: red;
text-align: right;
font-size: 20pt;
2
3
即颜色属性来自外部样式表，而文本对齐和字体大小属性来自内部样式表。
# 5. 多重样式优先级
在一个 HTML 文档中，样式可以通过多种方式定义：内联样式、内部样式表、外部样式表和浏览器默认样式。通常情况下，优先级如下：
内联样式 > 内部样式表 > 外部样式表 > 浏览器默认样式
# 示例
以下示例展示了不同样式表的优先级：
<head>
<!-- 外部样式 style.css -->
<link rel="stylesheet" type="text/css" href="style.css">
<!-- 外部样式定义：h3 { color: blue; } -->
<style>
/* 内部样式 */
h3 {
color: green;
}
</style>
</head>
<body>
<h3 style="color: red;">测试！</h3>
</body>
2
3
4
5
6
7
8
9
10
11
12
13
14
在这个示例中，h3 元素会应用内联样式的红色文本，因为内联样式的优先级最高。假如外部样式表的引用在内部样式表之后，则外部样式表的样式会覆盖内部样式表。
# 6. 使用多个外部样式表
您可以在同一个 HTML 文档中引用多个外部样式表。顺序决定了优先级，后引用的样式表会覆盖先前引用的样式表。
<head>
<link rel="stylesheet" type="text/css" href="style1.css">
<link rel="stylesheet" type="text/css" href="style2.css">
</head>
2
3
4
在这个示例中，style2.css 的样式会覆盖 style1.css 的样式。
通过使用外部、内部和内联样式，您可以灵活地控制和管理网页的样式，从而实现复杂的布局和设计。