CSS基础

CSS引入方式##

css全称为“层叠样式表”，它主要用于定义HTML内容在浏览器内显示样式，如文字大小、颜色、字体加粗等。css有四种引入方式：
行内式----把css代码直接写在现有的HTML标签内，如：

红色

内嵌式----把css样式代码写在
标签之间,如：

外联式----把css代码写在一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在内（不是在
标签之间，也可写在link引入的css文件内，有两种写法，如：

link和@import的区别：
1.link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。2.link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。3.link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。4.link支持使用Javascript控制DOM去改变样式；而@import不支持。5.@import可以在CSS中再次引入其他样式表。

CSS选择器##

每一条css样式声明由两部分组成，形式如下：
选择器{ 样式; }
五种选择器:
1.基础选择器；2.组合选择器；3.伪类选择器；4.；5.伪元素选择器
基础选择器
1.通用选择器

CSS通用选择器

2.标签选择器

标签选择器

3.类选择器

类选择器

4.id选择器

id选择器

组合选择器
1.E,F：多元素选择器：可同时设置多个元素的相同样式

多元素选择器

2.E F：后代选择器：可设置E元素包裹下所有F元素的样式

后代选择器

3.E>F：子元素选择器：设置E元素包裹下的直接后代F，孙后代不能被选中

子元素选择器

4.E+F：直接相邻选择器：该选择器匹配E元素之后的相邻同级元素F

直接相邻选择器

5.E~F：普通相邻选择器：匹配E元素之后的同级元素F（无论相邻与否）

普通相邻选择器

伪类选择器

选择器	含义
E:first-child	匹配元素E的第一个子元素
E:last-child	匹配元素e的最后一个子元素
E:nth-child(n)	匹配其父元素的第n个子元素，第一个编号为1
E:first-of-type	匹配父元素下使用同种标签的第一个子元素，等同于nth-of-type(1)
E:hover	匹配鼠标悬停上的的e元素
E:focus	匹配获得焦点的e元素

伪元素选择器

选择器	含义
E::first-line	匹配E元素的第一行
E::first-letter	匹配E元素的第一个字母
E::before	在e元素之前插入生成的内容
E::after	在e元素之后插入生成的内容

a:link, a:hover, a:active, a:visited 的顺序是怎样的？ 为什么？##

a标签有四个伪类选择器，a:link, a:hover, a:active, a:visited，他们的顺序是怎样的呢？
a:link > a:visited > a:hover > a:active原因是：浏览器解析会遵循一个原则：当选择器的优先级相等时，写在后面的会覆盖前面的。a:link, a:hover, a:active, a:visited这四个选择器的优先级都一样，当a标签指向的链接没有访问过时，默认触发link状态，所以会用到a:link指定的样式，当a标签指向的链接被访问过时，它同时处于a:link和a:visited状态，而a:link和a:visited的优先级相同，后面的会覆盖前面的，所以用哪个样式由它们的顺序决定，将a:visited写在a:link后，让访问过的链接使用a:visited指定的样式，同理，当用户的鼠标悬停在a标签指向的链接上时，它同时处于link，visited， hover状态，将a:hover写在 a:link和a:visited之后，让这个链接使用 a:hover指定的样式，当用户鼠标点击a标签指向的链接时(鼠标按住没有松开的状态)，这个时候链接同时处于link, visited，hover，active四种状态，要让链接用到a:active指定的样式，就要将a:active写在最后。

选择器的优先级怎么计算呢？##

CSS优先级从高到低依次是：
在属性后面使用！important
会覆盖页面内任何位置定义的元素样式
作为style属性写在元素标签上的内联样式
id选择器
类选择器
伪类选择器
属性选择器
标签选择器
通配选择器
浏览器自定义