CSS学习笔记（1）

CSS版本

• CSS Level1
• CSS Level 2(CSS 2.1规范)
• CSS Level 3

CSS规则

先用选择器选择，再在大括号里去声明样式。

image.png

代码风格

下面是两种常见的代码风格，推荐第二种。

image.png

如何使用CSS

有三种方法。

• 外链：把CSS写成一个单独的文件，然后在页面中使用link标签，引入css样式。（推荐使用，浏览器可以缓存css样式，不用多次下载）

• 嵌入：把css的样式写在style中。（做性能优化的时候可能用，省略一个HTTP请求）

• 内联：把样式写在元素的style属性上。（不推荐，把样式和内容混合在一起）

Example

注释

单行注释：/* */
多行注释：

/**  
*
*
 */

ps:实际上如果双斜杠也是可以达到注释效果的，因为浏览器会认为你定了一个不存在的属性而忽略它

CSS中的选择器

选择器：用来从页面中选择元素，以给它们定义样式。

简单选择器

• 通配选择器：以 * 开头的
• 标签选择器 ：以标签开头的，比如p，就匹配所有p元素。
• ID选择器 ：当标签的元素定义了ID，就可以以 #(井号)+ ID名称来选择
• 类选择器：实际项目中用的最多的，定义了class，然后直接用 .(点)加上class名来选择。ps：可以给一个元素指定多个class，用空格隔开。比如：

Example1
Example2

选择器的组合

• 直接选择器 EF：一般都是标签+属性的方式来组合。直接组合也有一些限制：有些标签不能放在一起的就无法组合。
• 后代组合 E F：F必须在E的里面才可以被选
• 亲自组合 E>F：F必须是E的子集才能被选中。
• 用逗号写成一组选择器定义样式。