这是我参与「第五届青训营」伴学笔记创作活动的第二天
课程重点
- CSS 代码构成
- CSS 使用方法
- CSS 是如何工作的
- 调试 CSS
CSS代码构成
最基础代码
h1{
color:white;
font-size: 14px;
}
比如选择器为h1，说明我们要给页面里所有的h1这样的标签定义样式。
我们选中一些元素之后，要给它设置一些样式，比如color就是颜色而white就是该元素的属性值，而我们把一个属性和属性值这样放在一起就称为一条声明。
CSS 使用方法
1. 外链
<link rel="stylesheet" href="/assets/style.css>
把一些css的定义放在一个单独的文件夹里面，通过link标签去把它引入到页面里面。
2. 嵌入
<style>
li { margin: 0; list-style: none;}
p { margin: lem 0;}
</style>
把规定样式的代码直接嵌入到html标签里面
3.内联
<p style="margin:le, 0">Examle Content</p>
利用html自带的style直接给当前的元素写样式
CSS 是如何工作的
这是浏览器中CSS工作的部分，当我们打开一个页面之后，浏览器会加载这个页面的html，然后对html进行解析，解析完之后会创建一个DOM树-树形的结构，html会加载上文中提到的CSS三种使用方式，去对CSS进行一个解析，最后把每个DOM树节点的CSS属性解析出来，形成一个渲染树，把这些属性渲染成一个页面。
调试 CSS
我们写完CSS样式之后，可以打开浏览器调试工具来检查我们写的CSS有没有问题。
- 右键点击页面，选择“检查”
- 使用快捷键
-
- ctrl+shift+T(Windows)
-
- Cmd+opt+I(Mac)
打开开发工具之后，在DOM树里面选择一个元素，后面样式的那一栏就会匹配到这个元素的所有的一些CSS包括它用的选择器以及属性和属性的一些值。
我们在别人的网站上面同样也可以进行一样的操作，十分的方便~
