CSS学习笔记（1）

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的子集才能被选中。
• 用逗号写成一组选择器定义样式。