CSS进阶

h1{
   
	color:red;
	background-color:lightblue;
	text-align:center;
}

CSS规则=选择器+声明块。

选择器

选择器：用于选择元素。

1. 元素选择器： 选择所有同名元。
2. id选择器： 选择的是对应id值的元素 一个元素中只能被一个id选中。
3. 类选择器： 选择的是对应类名的所有元素 一个元素可以同时被多个元素选中。
4. 通配符选择器： 选中所有的元素。
5. 属性选择器： 根据属性名和属性值选择元素。
6. 伪类选择器： 选中某些元素的某种状态

hover 表示鼠标悬停的状态

active 表示鼠标按下的状态

link 超链接未访问时的状态

visited 超链接已经被访问过的状态

7. 伪元素选择器： before/after 在一个元素的最前面或最后面生成一个伪元素 用于展示一些icon 附加信息等

选择器的组合

并列选择器：不加任何修饰的把两个元素写在一起表示并且。

后代元素选择器：两个元素中间加上空格 则后面的元素是前面元素的后代元素或子元素。

直接子元素选择器：在两个元素中间加上 >则表示后面的元素是前面元素的直接子元素。

语法糖：选择器并列，多个选择器中间加上，样式作用并列的所有元素

兄弟元素：选中元素的后面所有的兄弟元素

内联和外部样式表都应该写在页面的最上方，这样效率较高。

声明块

出现在大括号中。

声明块中包含很多声明（z属性），每一个声明（属性）表达了某一方面的样式。

CSS代码书写的位置

1. 内部样式表

书写在style元素中

2. 内联样式表

直接在元素中写style元素 样式卸载元素中的style中

3. 外联样式表【推荐】

在html中的head中写上link元素 href中写上css文件的路径
1). 外部样式可以解决多页面样式重复的问题。
2).有利于浏览器缓存，从而提高浏览器的响应时间。
3).有利于代码分离(HTML和CSS),更容易阅读和维护。

常见的样式声明

1. color: 元素内部的文字颜色。
2. background-color: 元素的背景颜色。
3. font-size: 元素中的文字大小。
4. font-family: 元素的类型。
5. font-weight: 文字粗细程度。
6. font-style: 字体样式，通常用它设置斜体。

i元素，默认样式，是倾斜字体；实际使用中，通常用它表示一个图标（icon）。

7. text-decoration: 文本修饰，给文本加线。
8. **text-indent:**首文本缩进（单位：em）
9. line-height: 每行文本的高度，该值越大，每行文本的距离越大。
10. width: 元素的宽度。
11. height: 元素的高度。
12. letter-spacing： 每个文字之间的间隙。
13. text-align: 文字的水平排列方式。