CSS

1、CSS概念

层叠样式表，美化网页，使用css可以让结构（HTML）和表现（CSS）分离

选择器 { 属性: 属性值; }

引用方式：行间样式、内部样式、外部样式、导入外部样式
行间样式：直接在标签上书写样式
内部样式：在文件的内部书写样式
```
<style>
    样式内容
</style>
```
外部样式：（1）先创建一个CSS文件；（2）再用link标签引入这个文件
导入外部样式：（1）先创建一个CSS文件；（2）在style标签中用import导入这个样式

四种CSS引用方式的区别：行间样式只作用于当前标签；内部样式作用于当前文件；外部样式可以被多个HTML文件引用在实践项目开发中，最好使用外部样式外部样式分为link引入和import引入两种方式 1）link引入CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载 2）link支持使用JavaScript控制DOM改变样式，而@import不支持

1） ：匹配html中所有元素（注意： 的性能差，因为要匹配所有的元素，在开发中，不建议使用） 2）标签选择器：匹配对应的标签 3）类选择器：用来选择class命名的标签 4) ID选择器：用来选择用ID命名的标签 5) 派生选择器：根据上下文来确定选择的标签 6）伪类选择器：

让多个选择器（元素）具有相同的样式，一般用于设置公共样式

子元素可以继承父元素的样式，反之不可以

!important（10000）>内联样式（1000）>id选择器（100）>类、伪类选择器（10）>标签选择器（1）

font-size：字体
font-family：文本字体
font-style：文体样式属性：normal（默认，正常字体）/italic（斜体）/oblique（倾斜的字体）
font-weight：加粗属性：normal/bold（粗体）/bolder(比bold粗)/lighter（比normal细） {100-900}：定义由粗到细的字符，400等同于normal，700等同于bold
font-height：行高属性：normal、number+px（指定行高长度像素）、number（指定行高为字体的倍数）
color：颜色属性：name（颜色名称指定color）、rgb（指定颜色的rgb）、颜色十六进制
text-decoration：文字修饰属性：normal、underline（下划线）、line-through（贯穿线）、overline（上划线）
text-align：文字对齐方式属性：left（左对齐、默认）、center（居中对齐）、right（右对齐）
text-transform：字母大小写属性：none（默认值，没有转换发送）、capitalize（每个单词的第一个字母转换成大写） uppercase（转换成大写）、lowercase（转换成小写）
text-indent：文本缩进属性：number+px（设置首行缩进number像素）、number+em（首行缩进number字符）

font复合属性： font：font-style font-variant font-weight font-size/font-height font-family; 注意： 1)：属性值的位置顺序 2)：除了font-size和font-family之外，其他任何属性值都可以省略 3)：font-variant:normal/small-caps(让大写字母变得小一些)

background-color：背景颜色属性：transparent(默认值)、color（指定颜色）
background-image：设置对象的背景图像属性：none（默认值，无背景图）、 url()（使用绝对或相对url地址指定背景图像）
background-repeat：设置对象的背景图像铺排方式属性：repeat（默认值，背景图像在纵向和横向平铺）、no-repeat（不平铺）、 repeat-x（仅在横向平铺）、repeat-y（仅在纵向平铺）
background-position：设置对象的背景图像位置属性：{x-number|top|center|bottom}、{y-number|left|center|right}
background-attachment:设置对象的背景图像滚动位置属性：scroll（默认值、随着页面其余部分的滚动而滚动）、fixed（当页面其余部分滚动时，背景图像不会动） background的复合属性： background：color image repeat attachment position

伪类：专门用来表示元素的一种特殊状态在支持CSS的浏览器中，链接的不同状态都可以有不同的方式显示，这些状态包括：活动状态、已被访问状态、未被访问状态和鼠标悬停状态

常用伪类选择器

[属性名]:包含有指定属性名的元素（常用）
[属性名=值]:属性名的值为指定值的元素（常用）
[属性名~ =值]:属性名的值包含指定值的元素
[属性名^=值]:属性名的值以指定值的开头的元素
[属性名 $=值]:属性名的值以指定值的结尾的元素

1)空格：后代选择器 2)>：只选择儿子元素 3)+：兄弟选择器