1. CSS 引用方式
CSS 可以通过三种方式引用到 HTML 文件中:
- 行内样式(Inline Styles):直接在 HTML 元素中定义样式。
- 内部样式表(Internal CSS):在 HTML 文档的
<head>
部分使用<style>
标签定义样式。 - 外部样式表(External CSS):将样式写在单独的
.css
文件中,并通过<link>
标签进行引用。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 示例</title>
<!-- 引入外部样式表 -->
<link rel="stylesheet" href="styles.css">
<!-- 内部样式表 -->
<style>
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
} h1 { color: #333; }
</style>
</head>
<body>
<!-- 行内样式 -->
<h1 style="color: blue;">这是一个标题</h1>
<p class="text">这是一个段落。</p>
</body>
</html>
2. CSS 选择器的简单使用
CSS 选择器用于选取 HTML 元素并对其应用样式。以下是一些常用的 CSS 选择器。
1. 元素选择器
用于选择所有某一类型的 HTML 元素。
p { color: green; }
以上代码会将所有 <p>
标签中的文本颜色设置为绿色。
2. 类选择器(Class Selector)
使用类选择器可以为具有相同类名的元素应用样式。类选择器前面加上 .
。
.text { font-size: 16px; color: #555; }
HTML:
<p class="text">这是一个段落。</p>
3. ID 选择器
ID 选择器用于选取具有特定 ID 的元素,前面加上 #
。
#header { background-color: #4CAF50; color: white; padding: 10px; }
HTML:
<div id="header">网站头部</div>
4. 组合选择器
组合选择器用于选取多个元素或特定条件下的元素。
-
后代选择器:选取某个元素内的所有指定后代元素。
div p { color: red; }
以上代码会选取所有位于
<div>
元素内的<p>
标签。 -
群组选择器:同时选取多个元素,并为其应用相同的样式。
h1, h2, h3 { font-family: 'Arial', sans-serif; }
3. CSS 示例
外部样式表 styles.css
:
/* 为所有 h1 标签设置样式 */
h1 {
color: darkblue;
font-size: 24px;
}
/* 为类为 text 的元素设置样式 */
.text {
font-size: 14px;
line-height: 1.6;
color: #666;
}
/* 为 ID 为 footer 的元素设置样式 */
#footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
}
HTML 文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 简单使用</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>这是一个标题</h1>
<p class="text">这是段落内容。</p>
<div id="footer">网站底部</div> <
/body>
</html>
4. 总结
- 行内样式:将样式直接写在元素内,不推荐使用,因为不利于维护。
- 内部样式表:适合小型页面,但无法跨页面复用。
- 外部样式表:最常用的方式,推荐用于大型项目,方便复用与管理。
使用 CSS 选择器可以为网页中的不同元素应用样式,选择器种类包括:元素选择器、类选择器、ID 选择器等。