理解CSS | 青训营笔记

这是我参与「第四届青训营」笔记创作活动的的第2天

基础班第二课的内容为理解CSS,笔记分为以下几个部分：初步了解CSS和深入了解CSS。

初步了解CSS

找出页面中的元素，以便给他们设置样式
使用多方式选择元素
- 按照标签名、类名或id
- 按照属性
- 按照DOM树中的位置
通配选择器 *
标签选择器：标签选择器可以定义多个标签的样式,标签名为HTML页面中的标签名称，不可自定义。
```
标签名{
        属性:属性值;
        }
```
id选择器：ID选择器定义在style标签内，使用"#"作前缀，id名可以自定义。用于修改该id名称标签样式。在一个HTML页面中每个id名称都是唯一的
```
#id名{
        属性:属性值;
        }
```
类选择器：类选择器定义style标签内，使用"." 来做前缀，类名可以自定义。用于修改该类名标签样式。在一个HTML页面中可以有多个相同的类名
```
.类名{
        属性:属性值;
        }
```
属性选择器：属性选择器可以根据元素的属性及属性值来选择元素。如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器
```
*[title] {color:red;}
```

伪类包含状态伪类和结构性伪类

 状态伪类 （:link、:visited、:hover、:active、:focus）