CSS样式的引用方式以及选择器使用
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 选择器等。