1. 什么是CSS?
CSS
(Cascading Style Sheets,层叠样式表)是一种用于描述HTML
或XML
文档外观和格式的样式表语言。它允许开发者控制网页的布局、字体、颜色以及其他视觉呈现效果。
/* css规则 */
h1 { /* 选择器 */
color: red; /* 声明:设置文本颜色为红色 */
text-align: center; /* 声明:将文本居中对齐 */
}
2. CSS的作用
- 美化页面:提供了一种方式来控制网页的布局、颜色、字体等视觉表现形式,使网站看起来更加美观且结构化。
- 分离结构与表现:使内容(
HTML
)与设计(CSS
)相分离,便于维护和修改。
3. HTML DOM为什么引入css?
HTML
文档对象模型(DOM
)单独存在时并不具备良好的外观或用户体验。DOM
是HTML
文档的一种编程接口,它将文档视为一个树状结构,其中每个节点都是一个HTML
元素。虽然DOM
本身提供了网页的基本结构,但如果不加以样式修饰,网页会显得单调乏味。因此,通常需要使用CSS
来“装扮”DOM
中的元素,使其具有更好的视觉效果。- CSS选择DOM元素运用样式规则:这是指通过
CSS
选择器来定位特定的HTML
元素,并为其应用样式规则的过程。CSS
选择器可以基于元素类型、类名、ID等多种方式来选取目标元素。
4. 如何引入CSS?
内联样式
直接在HTML
标签内使用style
属性定义样式。
- 特点:这种样式只对当前元素有效,优先级最高。但这种方法会导致内容与表现混杂,不利于维护和复用。
<p style="color: blue;">这是一个蓝色的段落。</p>
内部样式表
在HTML
文档的<head>
部分内使用<style>
标签定义样式。
- 特点:适用于单个页面的样式控制,比内联样式更易于管理和修改,但不便于跨多个页面共享样式。
<head>
<style>
body {
background-color: lightblue;
}
</style>
</head>
外部样式表
创建独立的.css
文件,并通过HTML
中的<link>
标签引用。
- 特点:这是最推荐的做法,因为它允许你将样式集中管理,并且可以轻松地应用于整个网站的所有页面。这有助于保持一致的设计风格,并简化了后期维护工作。
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
5. 如何生成最终页面?
下载资源: 当用户请求一个网页时,浏览器首先会下载HTML文件。如果该HTML文件中引用了外部CSS(通过标签),浏览器也会开始下载这些CSS文件。
解析DOM:
浏览器从上到下解析HTML文档,构建DOM树。DOM树是一个表示文档结构的节点树,每个节点代表文档中的一个元素或文本内容。
构建CSSOM (CSS Object Model): 同时,浏览器也会解析所有加载的CSS文件,构建CSSOM树。CSSOM树反映了CSS规则是如何应用于DOM元素的。
创建渲染树: 浏览器结合DOM树和CSSOM树来构建渲染树(Render Tree)。渲染树只包含那些需要在屏幕上显示的内容,例如可见的DOM元素以及它们的样式信息。不可见的元素(如带有display: none;样式的元素)不会被加入渲染树。
布局(Layout): 一旦渲染树构建完成,浏览器就会根据每个节点的样式属性计算其确切的位置和大小,这一过程称为布局或重排(reflow)。
绘制(Painting): 布局完成后,浏览器会遍历渲染树,并将各个节点绘制到屏幕上的指定位置,从而生成最终的视觉效果。
合成(Compositing): 在一些情况下,为了提高性能,浏览器可能会将页面的不同部分作为单独的层进行处理,然后把这些层组合起来形成最终的图像。这一步骤称为合成。
6. 优先级
当多个CSS规则应用于同一个元素时,浏览器会根据以下优先级规则决定最终应用哪个规则:
行内样式 > ID选择器 > 类选择器 > 标签选择器
当多个样式规则具有相同的特殊性和优先级时,后声明的规则会覆盖先声明的规则。
!important
声明可以覆盖其他所有规则,但不推荐滥用。
具体数值如下:
- 标签选择器 = 1
- 类选择器 = 10
- ID选择器 = 100
- 行内样式 = 1000
- !important = ∞ (无限大)
对于复合选择器,其优先级是各个组成部分的加总。
.container ul li:nth-child(odd) 的优先级为 10 + 1 + 1 + 10 = 22。
7. CSS选择器分类
基础选择器
- 类选择器:.classname
- ID选择器:#idname
- 通配符选择器:*(匹配所有元素,但性能较差)
组合选择器
- 后代选择器:A B(B是A的后代)
- 子元素选择器:A > B(B是A的直接子元素)
- 相邻兄弟选择器:A + B(B紧接在A之后且同级)
- 普通兄弟选择器:A ~ B(B是A之后的任意一个兄弟元素)
伪类选择器
:hover, :active, :focus, :first-child, 等
伪元素选择器
::before, ::after, ::first-line, ::selection, 等
属性选择器
[attribute], [attribute=value], [attribute^=value], 等
8. 实例代码分析
优先级示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css</title>
<style>
/* 1 */
p {
color: blue !important;
}
/* 101 */
#main p {
color: green;
}
/* 11 */
.container p {
color: red;
}
</style>
</head>
<body>
<div id="main" class ="container">
<p style="color: pink;">薛之谦的歌真好听</p>
</div>
</body>
</html>
在这个例子中,
标签的文本颜色将会是蓝色。如果移除行内样式和!important
,那么文本颜色将是绿色,因为#main p
的选择器优先级更高(101)。
组合选择器示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器</title>
<style>
/* 相邻兄弟选择器 连着 */
h1 + p {
color: red;
}
/* 通用兄弟选择器 */
h1 ~ p {
color: blue;
}
/* 子元素选择器 */
.container > p {
font-weight: bold;
}
.container p {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="container">
<h1>标题</h1>
<p>这是第一段文字</p>
<p>这是第二段文字</p>
<a href="">链接</a>
<span>这是一个span元素</span>
<div class="inner">
<p>这是一个内部的段落</p>
</div>
</div>
</body>
</html>
- /* 相邻兄弟选择器 连着 */:h1 + p 选择器使紧跟在
<h1>
后的第一个<p>
文本变为红色。 - /* 通用兄弟选择器 */:h1 ~ p 选择器使
<h1>
之后的所有<p>
文本变为蓝色。 - /* 子元素选择器 */:.container > p 选择器使
<div class="container">
下的直接子<p>
文本加粗。 - /* 后代选择器 */:.container p 选择器使
<div class="container">
下的所有<p>
文本带有下划线。
伪类选择器示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
button:active {
background-color: red;
color: white;
}
p:hover {
background-color: yellow;
}
::selection {
background-color: blue;
color: white;
}
input:focus {
border: 2px solid blue;
}
input:checked + label {
color: blue;
}
li:nth-child(odd) {
background-color: lightgray;
}
li:not(:last-child) {
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1>伪类选择器示例</h1>
<button>点击我</button>
<p>鼠标悬浮在这里</p>
<input type="text" placeholder="输入框">
<input type="checkbox" id="option1">
<label for="option1">选项1</label>
<input type="checkbox" id="option2" checked>
<label for="option2">选项2</label>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
</ul>
</div>
</body>
</html>
- button:active 选择器使按钮在被点击时背景色变为红色,文本颜色变为白色。
- p:hover 选择器使段落在鼠标悬停时背景色变为黄色。
- ::selection 选择器改变选中文本的背景色和文本颜色。
- input:focus 选择器使输入框获得焦点时边框变为蓝色。
- input:checked + label 选择器使复选框选中时跟随的标签文本颜色变为蓝色。
- li:nth-child(odd) 选择器使奇数位置的列表项背景色变为浅灰色。
- li:not(:last-child) 选择器使非最后一个列表项底部有10像素的间距。
nth-child 和 nth-of-type 示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container p:nth-child(3) {
background-color: yellow;
color: black;
}
.container p:nth-of-type(3) {
background-color: lightblue;
color: black;
}
</style>
</head>
<body>
<div class="container">
<h1>nth-child vs nth-of-type 例子</h1>
<p>这是一个段落</p>
<div>这是一个div</div>
<p>这是第二个段落</p>
<p>这是第三个段落</p>
<div>这是第二个div</div>
</div>
</body>
</html>
.container p:nth-child(3)
选择.container
类下的第三个子元素变为黄色,但只有当这个子元素是<p>
时才会生效。 由于第三个子元素不是<p>
(而是<div>
),所以没有任何<p>
元素会被选中,颜色不会改变。.container p:nth-of-type(3)
选择器使容器内的第三个<p>
元素背景色变为浅蓝色。
结语
通过本文的介绍,我们已经深入了解了CSS的基本概念、作用以及如何使用它来美化网页。从基础的选择器到复杂的伪类和伪元素,再到样式的引入方式和优先级规则,CSS提供了丰富的工具集,使开发者能够精确地控制网页的外观和布局。希望本文能成为你CSS学习旅程中的一个良好起点。无论你是初学者还是有一定经验的开发者,CSS都是一个值得深入研究的领域。通过不断练习和探索,相信你能创造出既美观又功能强大的网页。让我们一起用CSS为网络世界增添更多色彩吧!