CSS概述 | CSS的引入方式 | 选择器
CSS（层叠样式表）是一种用来描述网页和其他HTML文档样式的语言。CSS可以用来为网页创建样式规则，控制页面布局，字体，颜色，背景和其他视觉元素。
CSS的引入方式主要有以下几种：
- 内联样式：直接在HTML元素的style属性中书写CSS代码。
<p style="color: red;">这是一个红色的段落。</p>- 内部样式表：在HTML文档的<head>标签内，使用<style>标签包含CSS代码。
<head>
<style>
p { color: blue; }
</style>
</head>
<body>
<p>这是一个蓝色的段落。</p>
</body>- 外部样式表：创建一个CSS文件，并通过HTML文档的<link>标签引入。
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>在"styles.css"文件中：
p {
color: green;
}- @import 规则：在内部样式表中使用@import 规则引入外部CSS文件。
<head>
<style>
@import url("styles.css");
</style>
</head>CSS选择器是用来选择HTML元素的模式，然后将样式应用到选择的元素上。主要有以下几种类型：
- 元素选择器：直接使用HTML标签作为选择器。
p { color: red; }- 类选择器：在前面加上"."。
.center { text-align: center; }- ID选择器：在前面加上"#"。
#header { background-color: blue; }- 属性选择器：可以根据元素的属性或属性值选择元素。
input[type="text"] { background-color: yellow; }- 伪类选择器：用于向某些选择器添加特殊的效果，如:hover，:active等。
a:hover { color: purple; }- 伪元素选择器：用于向某些选择器添加特殊的效果，如::before和::after。
p::before { content: "开始"; }CSS选择器可以结合使用，以实现更复杂的选择模式。例如，可以通过后代选择器选择特定元素的后代：
div p { color: pink; }这个选择器会选择div元素内部的所有p元素，并将它们的文字颜色设置为粉色。
评论已关闭