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来增强你的网页设计。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
