CSS版本
- CSS Level1
- CSS Level 2(CSS 2.1规范)
- CSS Level 3
CSS规则
先用选择器选择，再在大括号里去声明样式。
image.png
代码风格
下面是两种常见的代码风格，推荐第二种。
image.png
如何使用CSS
有三种方法。
- 外链：把CSS写成一个单独的文件，然后在页面中使用link标签，引入css样式。（推荐使用，浏览器可以缓存css样式，不用多次下载）
<link rel="stylesheet" herf="/path/to/style.css">
- 嵌入：把css的样式写在style中。（做性能优化的时候可能用，省略一个HTTP请求）
<style type="text/css">
li {
margin:1;
list-style:none;}
p{
margin:1em 0;
}
</style>
- 内联：把样式写在元素的style属性上。（不推荐，把样式和内容混合在一起）
<p style="margin:1em 0">Example</p>
注释
单行注释：/* */
多行注释：
/**
*
*
*/
ps:实际上如果双斜杠也是可以达到注释效果的，因为浏览器会认为你定了一个不存在的属性而忽略它
CSS中的选择器
选择器：用来从页面中选择元素，以给它们定义样式。
简单选择器
- 通配选择器：以 * 开头的
- 标签选择器 ：以标签开头的，比如p，就匹配所有p元素。
- ID选择器 ：当标签的元素定义了ID，就可以以 #(井号)+ ID名称来选择
- 类选择器：实际项目中用的最多的，定义了class，然后直接用 .(点)加上class名来选择。ps：可以给一个元素指定多个class，用空格隔开。比如：
<p class ="warning">Example1</p>
<p class ="warning special">Example2</p>
<style type="text/css">
.warning{
color:orange;
}
.special{
color:red;
}
复杂选择器
属性选择器
(1) 用 []来实现，当元素具有某种属性，则选择它。
(2)用 ~= 来实现：表示这个属性是一系列以空格分隔开的字符串，其中一项等于 指定字段 就可以。 并不是这个字符串只要包含这个字段就可以。
(3)用href加上 ^=来实现：匹配所有href以指定字段开头的标签。
(4)用href加上 $=来实现：匹配所有href以指定字段结尾的标签。
(5)用 *= 来实现：只要包含了这个字段，不管有没有用空格分隔开。
(6)用逗号来实现， 逗号是一个选择器组表示同时选中
伪类选择器
伪类选择器：基于DOM之外的信息去选中元素。
比如一个链接有没有被访问过，可以定义不同的样式。还有鼠标点击与否，鼠标放上去，是否focus，都可以定义不同的链接。
实现方式：
<a href="http://w3.org">W3C</a>
<style>
a:active{
color:red;
}
</style>
选择器的组合
- 直接选择器 EF：一般都是标签+属性的方式来组合。直接组合也有一些限制：有些标签不能放在一起的就无法组合。
- 后代组合 E F：F必须在E的里面才可以被选
- 亲自组合 E>F：F必须是E的子集才能被选中。
- 用逗号写成一组选择器定义样式。
网友评论