CSS基础教程：DOM树、引入方式和书写规则详解
发表时间: 2023-02-21 13:56
css：层叠样式表
css主要设置HTML页面中的文本内容、图片的外形以及版面的布局等外观显示样式，而且还可以针对不同的浏览器设置不同的样式。
1、DOM树概念
DOM：
（document object model）文档对象模型
DOM节点：
文档当中每一个元素称作是DOM节点
元素 = 开始标签 + 结束标签 + 元素内容 + 属性
DOM树：
根据DOM节点的嵌套关系, 可以映射成一个树状结构
节点关系：（都是相对的：根节点、父子、祖先和后代、兄弟）
根节点
html
父子（直接关系）
head和body是html的子节点，html是head和body的父节点
祖先和后代
一个元素后面的元素无论多少代都可以叫做后代，也包括直接的子元素也可以叫做后代，反之的第一个元素叫祖先
body可以叫做它里面所有元素的祖先，反之它里面所有元素是body的后代
兄弟（平级关系）
head 和 body 元素 之间是兄弟关系
2、嵌入方式
行内式（内联样式）
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>内部样式表
<head><style type="text/CSS">选择器 {属性1:属性值1; 属性2:属性值2;}</style></head>语法中，style标签一般位于head标签中title标签之后，也可以把他放在HTML文档的任何地方。
type="text/CSS" 在html5中可以省略， 写上也比较符合规范。
外部样式表（外链式）
<head><link href="CSS文件的路径" rel="stylesheet" /></head>注意： link 是个单标签，写项目用外部样式表最好管理。
href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。
rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。
三种样式表总结
样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
行内样式表 | 书写方便，权重高 | 没有实现样式和结构相分离 | 较少 | 控制一个标签 （少） |
内部样式表 | 部分结构和样式相分离 | 没有彻底分离 | 较多 | 控制一个页面 （中） |
外部样式 表 | 完全实现结构和样式相分离 | 需要引入 | 最多，强烈推 | 控制整个站点 （多） |
3、css样式规则
要想熟练地使用CSS对网页进行修饰，首先需要了解CSS样式规则，基本如下：
1.选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式
2.属性和属性值以“键值对”的形式出现
3.属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等
4.属性和属性值之间用英文“:”连接
5.多个“键值对”之间用英文“;”进行区分
选择器{属性1:属性值1; 属性2:属性值2;} .box{color: #fff;background-color: red;}
鲁公网安备37020202000738号