HTML CSS
# HTML CSS
# 1. 如何使用 CSS 样式
CSS（层叠样式表）是在 HTML 4 中引入的，用于更好地渲染 HTML 元素。CSS 可以通过以下方式添加到 HTML 中：
- 内联样式：在 HTML 元素中使用
style属性 - 内部样式表：在 HTML 文档头部
<head>区域使用<style>元素包含 CSS - 外部引用：使用外部 CSS 文件
# 2. 内联样式
当需要对个别元素应用特殊样式时，可以使用内联样式。使用内联样式的方法是在相关标签中使用 style 属性。样式属性可以包含任何 CSS 属性。以下实例展示如何改变段落的颜色和左外边距：
<p style="color:blue;margin-left:20px;">这是一个段落。</p>
1
# 2-1 HTML 样式实例 - 背景颜色
背景色属性 background-color 定义一个元素的背景颜色：
<body style="background-color:yellow;">
<h2 style="background-color:red;">这是一个标题</h2>
<p style="background-color:green;">这是一个段落。</p>
</body>
1
2
3
4
2
3
4
# 2-2 HTML 样式实例 - 字体、字体颜色、字体大小
可以使用 font-family（字体）、color（颜色）、和 font-size（字体大小）属性来定义字体的样式：
<h1 style="font-family:verdana;">一个标题</h1>
<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>
1
2
2
现在通常使用 font-family（字体）、color（颜色）、和 font-size（字体大小）属性来定义文本样式，而不是使用 <font> 标签。
# 2-3 HTML 样式实例 - 文本对齐方式
使用 text-align（文字对齐）属性指定文本的水平对齐方式：
<h1 style="text-align:center;">居中对齐的标题</h1>
<p>这是一个段落。</p>
1
2
2
# 3. 内部样式表
当单个文件需要特别样式时，可以使用内部样式表。在 <head> 部分通过 <style> 标签定义内部样式表：
<head>
<style type="text/css">
body {background-color: yellow;}
p {color: blue;}
</style>
</head>
1
2
3
4
5
6
2
3
4
5
6
# 4. 外部样式表
当样式需要被应用到多个页面时，外部样式表是理想的选择。使用外部样式表，可以通过更改一个文件来改变整个站点的外观：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
1
2
3
2
3
# 5. HTML 样式标签
# 6. 外部样式表示例
假设 mystyle.css 文件内容如下：
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
将这个 CSS 文件链接到 HTML 文档中：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 7. 内部样式表示例
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
</style>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# 8. 内联样式示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body style="background-color:lightblue;">
<h1 style="color:navy;margin-left:20px;">这是一个标题</h1>
<p style="color:blue;margin-left:20px;">这是一个段落。</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# 9. 优先级规则
当相同的样式属性通过不同的方式应用时，优先级规则如下：
- 内联样式（最高优先级）
- 内部样式表
- 外部样式表
- 浏览器默认样式
# 10. 响应式设计
使用 CSS 媒体查询，可以使网页在不同设备和屏幕尺寸上具有不同的布局。例如：
/* 手机设备 */
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
/* 电脑设备 */
@media only screen and (min-width: 601px) {
body {
background-color: lightgreen;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# 11. CSS 类和 ID
使用 CSS 类和 ID，可以为特定的 HTML 元素应用样式：
<!DOCTYPE html>
<html>
<head>
<style>
/* 类选择器 */
.intro {
color: red;
}
/* ID 选择器 */
#main {
color: blue;
}
</style>
</head>
<body>
<h1 class="intro">这是一个标题</h1>
<p id="main">这是一个段落。</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
通过合理使用 CSS，可以极大地提升网页的美观度和用户体验。
编辑此页 (opens new window)
上次更新: 2025/01/25, 22:32:05