css全称为“层叠样式表”，它主要用于定义HTML内容在浏览器内显示样式，如文字大小、颜色、字体加粗等。
css有四种引入方式：
-
行内式----把css代码直接写在现有的HTML标签内，如：
<p style="color:red">红色</p> -
内嵌式----把css样式代码写在
<style type="text/css"></style>标签之间,如：
<style type="text/css">
p {
color:red;
}
</style>
-
外联式----把css代码写在一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在<head>内（不是在<style>标签内）使用<link>标签将css样式文件链接到HTML文件内，如：
<link rel="stylesheet" type="text/css" href="index.css"/> -
@import----也属于外联式，一般不使用，须写在
<style type="text/css"></style>标签之间，也可写在link引入的css文件内，有两种写法，如：
<style>
1. @import url("index.css");
2. @import "index.css";
</style>
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样式声明由两部分组成，形式如下：
选择器{
样式;
}
常用的选择器如下：
- 基础选择器
| 选择器 | 含义 | 示例 |
|---|---|---|
| * | 通用元素选择器，匹配任何元素 | * { margin:0; padding:0; } |
| Element | 标签选择器，匹配所有使用E标签的元素 | p { font-size:2px; } |
| .wrap | 类选择器，匹配所有class属性中包含wrap的元素 | .wrap { color:red;} |
| #main | id选择器，匹配所有id属性等于footer的元素 | #main{ color:red;} |
- 组合选择器
| 选择器 | 含义 | 示例 |
|---|---|---|
| E,F | 多元素选择器，用,分隔，同时匹配元素E或元素F | h1,p { color:#f00;} |
| E F | 后代选择器，用空格分隔，匹配E元素所有的后代（不只是子元素、子元素向下递归）元素F | #nav li { display:inline; } |
| E>F | 子元素选择器，用>分隔，匹配E元素的所有直接子元素 | div > p{ color:#f00; } |
| E+F | 直接相邻选择器，匹配E元素之后的相邻的同级元素F | p + p { color:#f00; } |
- 属性选择器
| 选择器 | 含义 | 示例 |
|---|---|---|
| E[att] | 匹配所有具有att属性的E元素，不考虑它的值。 | p[title] { color:#f00; } |
| E[att=val] | 匹配所有att属性等于“val”的E元素 | div[class=”error”] { color:#f00; } |
| E[att~=val] | 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素 | td[class~=”name”] { color:#f00; } |
- 伪类选择器
| 选择器 | 含义 |
|---|---|
| E:first-child | 匹配元素E的第一个子元素 |
| E:last-child | 匹配父元素的最后一个子元素 |
| E:link | 匹配所有未被点击的链接 |
| E:visited | 匹配所有已被点击的链接 |
| E:active | 匹配鼠标已经其上按下、还没有释放的E元素 |
| E:hover | 匹配鼠标悬停其上的E元素 |
| E:focus | 匹配获得当前焦点的E元素 |
| E:disabled | 匹配表单中禁用的元素 |
| E:nth-child(n) | 匹配其父元素的第n个子元素，第一个编号为1 |
- 伪元素选择器
| 选择器 | 含义 |
|---|---|
| E::first-line | 匹配E元素内容的第一行 |
| E::first-letter | 匹配E元素内容的第一个字母 |
| E::before | 在E元素之前插入生成的内容 |
| E::after | 在E元素之后插入生成的内容 |
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选择器
- 类选择器
- 伪类选择器
- 属性选择器
- 标签选择器
- 通配选择器
- 浏览器自定义
网友评论