这是我参与「第五届青训营 」伴学笔记创作活动的第 3 天
一、本堂课重点内容：
- css代码构成
- css使用方法
- css流程之选择器组、文本渲染
- 调试css
二、详细知识点介绍：
1. css代码构成：
基础的css构成为选择器（Selector），和一条及以上的包含选择器（Property）与属性值（Value）的声明（Declaration）组成。
选择器（Selector）：选择页面元素进行设置。
声明（Declaration）：定义元素样式。其中，选择器（Property）设置元素的某个属性，其值为属性值（Value）。
2. css使用方法：
外链：使用link标签，将样式引入页面。
嵌入：通过style标签，将样式定义代码嵌入某一类标签中。
内联：使用style属性，将样式直接写在某一个元素中。
3. css流程之选择器组、文本渲染：
建立DOM树后渲染。
-
选择器Selector：
选择某类页面元素并设置样式。
选择方式：
1.按标签名（标签选择器）、类名（类选择器）、id（id选择器）
2.按属性
3.按元素在DOM树中的位置
- 标签选择器结构：
h1 {}
- 类选择器结构:
.className {}
- id选择器结构：
.id {}
- 属性选择器结构：
[disabled] {}
或
input[type="password"] {}
该例对应类似<input value="123" disabled>" 和<input type="password">" 的元素。
- 伪类：标签处于不同状态下的属性。以a标签为例：
a:link{}对应链接普通状态。
a:visited{}对应链接已访问状态。
a:hover{}对应鼠标在链接上方状态。
a:active{}对应链接正在被点击状态。
:focus{}对应元素被点击后状态。
- 结构伪类：标签处于DOM树中的位置。
例：li:first-child{}对应父元素的第一个子元素。
-
通配选择器：
选择所有元素进行样式设置。
- 通配选择器结构：
* {}
选择器之间可以进行组合，例：input.className{}。
不同的组合关系：
给多个选择器使用相同的样式时，可以直接使用,将不同的选择器隔开，例：h1,input{}。
-
属性值设置：
颜色设置：RGB、HSL、调用关键字（指定颜色名）、透明度alpha。
字体设置：font-family（字体类型）、font-size（字体大小）、font-style（字体样式）、font-weight（字体粗细）
文字设置：line-height（行高）、white-space（空格）
4. css调试：
三、课后个人总结：
学会了css的基础结构，使用css进行基础的样式设置，以及使用控制台对css进行调试的方式。
