1. CSS简介
CSS (Cascading Style Sheets) 是一种用来描述HTML或XML文档样式的语言。它使得开发者能够控制网页的布局和外观,包括字体、颜色、间距等。CSS通过选择器来指定要应用样式的元素,并定义这些元素的具体样式属性。
基本结构示例:
/*selector {property: value;
}*/
h1 {color: red;
}
2. CSS与HTML的关系
- 依赖性:CSS必须依附于HTML DOM来作用。DOM是HTML文档的一个对象模型,它将文档表示成树状结构。
- 作用机制:CSS通过选择DOM中的特定元素并应用规则来改变页面的视觉效果。
3. CSS引入方法
3.1 内联样式
直接在HTML标签内部使用style
属性:
<p style="color: blue;">这是一个段落。</p>
3.2 外部样式表
使用<link>
标签链接到一个独立的CSS文件:
<head><link rel="stylesheet" type="text/css" href="styles.css">
</head>
3.3 @import导入
在CSS文件中使用@import
指令引用另一个CSS文件:
@import url('anotherStylesheet.css');
3.4 行内样式
在HTML文档的<head>
部分使用<style>
标签嵌入CSS代码:
<head><style>body { background-color: lightblue; }</style>
</head>
4. 渲染流程
浏览器首先加载CSS文件,然后解析HTML文档形成DOM树。接着,根据CSS规则生成渲染树,最后由浏览器的渲染引擎基于渲染树绘制出最终显示给用户的界面。
5. 优先级计算
CSS样式的优先级按以下顺序递增:
- 标签选择器 (权重1)
- 类选择器 (权重10)
- ID选择器 (权重100)
- 行内样式 (权重1000)
!important
声明 (覆盖所有其他规则)
对于复合选择器,如.container ul li:nth-child(odd)
,其优先级为各个简单选择器优先级之和:10 (类) + 1 (后代) + 1 (后代) + 10 (伪类) = 22。
6. CSS选择器分类
6.1 基础选择器
- 标签选择器:直接针对HTML标签名设置样式,如
p {}
。 - 类选择器:以
.
开头,可以应用于多个元素,如.myClass {}
。 - ID选择器:以
#
开头,每个页面中唯一,如#myId {}
。 - 通配符选择器:用
*
表示,匹配所有元素,但不推荐频繁使用,因为性能较差。
6.2 组合选择器
- 后代选择器:空格分隔的选择器,例如
div p {}
匹配所有作为div
子元素的p
。 - 子元素选择器:使用
>
符号,仅匹配直接子元素,如div > p {}
。 - 相邻兄弟选择器:使用
+
连接,选择紧接在前一个元素之后的同级元素,如h1 + p {}
。 - 普通兄弟选择器:使用
~
连接,选择前面有指定元素的所有后续兄弟元素,如h1 ~ p {}
。
6.3 伪类选择器
- 链接伪类:用于定义不同状态下的链接样式,如
:hover
,:active
,:visited
等。 - 状态伪类:如
:focus
,::before
,::after
等,主要用于交互状态或内容插入。 - 结构伪类:如
:nth-child(n)
,:first-child
,:last-child
等,依据元素在父元素中的位置进行选择。
6.4 伪元素选择器
允许向某些选择器添加特殊的效果,比如::before
和::after
可以在内容前后插入额外的内容。
6.5 属性选择器
允许基于元素的属性及其值来选择元素,提供了更加灵活的选择方式,如[type="text"]
选择所有type
属性值为text
的元素。
以上内容包含了CSS的基础概念、引入方法、渲染过程以及各种类型的选择器,帮助你更深入地理解如何有效利用CSS来增强你的网页设计。