CSS – 初识css（DOM树、引入方式、书写规则）

🌈 个人主页：王子玉博客

🔆 免费专栏：HTML&CSS

❤️ 分享网站：《Python自学网》👉👉基础入门到逐步深入 | 适合新手入门到精通

体系课程：WEB前后端开发、爬虫、自动化运维、自动化测试、GUI图形界面化

🙏 如果觉得博主文章对你有所帮助的话，还望大家多多支持呀！关注 | 点赞 | 收藏 | 评论

HTML& CSS系列文章类目

内容序列	文章链接
HTML& CSS（1）	HTML与HTML5 知识点梳理总结

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;}

文章由半码博客整理，本文链接：https://www.bmabk.com/index.php/post/73297.html

CSS – 初识css（DOM树、引入方式、书写规则）

1、DOM树概念

2、嵌入方式

行内式（内联样式）

内部样式表

外部样式表（外链式）

三种样式表总结

3、css样式规则

相关推荐