常见样式声明和选择器

容器元素

 该元素代表一块区域，内部用于放置其他元素，用来画分区域
 ## div元素【无语义】
 ## 语义化容器
 - header元素：页头或文章头部
 - footer元素：页脚或文章尾部
 - article元素：表示整篇文章，其中也可嵌套header、footer等元素
 - section元素：表示文章的章节
 - aside元素：表示侧边栏 

常见的样式声明

1. color

元素内部的文字颜色

预设值：定义好的单词
三原色 色值：光学三原色（红绿蓝），用0到255之间的数字来表达

• rgb表示法：如rgb（0,255,0）
• hex（16进制）表示法：#红绿蓝，

2. background-color
   元素背景颜色

3. font-size

单位：
1）px（像素）:绝对单位
2）em:相对单位,相对于父元素的字体大小，最终会换算为像素值。每个元素必须有字体大小，如果没有声明，则直接使用父元素的字体大小，如果没有父元素则使用基准字号，即浏览器默认设置的字号。

4. font-weight

文字粗细程度，可以取值数字，可以取值为预设值（normal或bold）

strong元素：默认加粗，表示重要的、不能忽略的内容

5. font-family

文字类型

必须是用户计算机中存在的字体才有效，因此使用多个字体以匹配不同环境

sans-serif：非衬线字体，通用，让浏览器选择一个默认的非衬线字体

6. font-style

字体样式，通常用它设置斜体（italic）

i元素：默认样式是倾斜字体，实际使用中通常用它表示一个图标（icon）
em元素：默认是斜体，表示强调的内容

7. text-decoration

文本修饰，给文本加线。

a元素：默认underline
del元素：表示错误的内容，默认line-through
s元素：表示过期的元素，默认line-through

8. text-indent

首行文本缩进，单位用px或em

9. line-height

每行文本的高度，该值越大，每行文本的距离越大

设置行高为容器的高度，可以让单行文本垂直居中

行高可以设置为纯数字，表示相对于当前元素的字体大小的倍数

10. width

元素的宽度

11. height

元素的高度

12. letter-space

文字的间隙，px，em（1em表示间隔一个字体的大小）

13. text-align

元素内部文字的水平排列方（left，right，center）

选择器

简单选择器

1. ID选择器
2. 元素选择器
3. 类选择器
4. 通配符选择器
   *{}，选中所有的元素
5. 属性选择器
   根据属性名和属性值选中元素，[属性名]
6. 伪类选择器
   1）link:超链接未访问时的状态
   2）visited：超链接访问过后的状态
   3）hover：鼠标悬停状态
   4）active：激活状态，鼠标按下状态
   四种选择器都使用时要按照上述顺序书写

选中鼠标悬停时的a元素时显示为红色
a:hover{
color:red
}

7. 伪类元素选择器

例如 span::before{
content:""
}
span::after{
content:""
}

选择器的组合

1. 后代元素 —— 空格
2. 子元素 —— >
3. 相邻兄弟元素 —— +
4. 兄弟元素 —— ~
5. 并且—— .

选择器的并列

多个选择器并列，用逗号分隔