CSS层叠样式表学习笔记

Alan

12 年前

CSS(Cascading Style Sheets)即层叠样式表，它除了可以轻松设置网页元素的显示位置和格式外，甚至还能产生滤镜，图像淡化，网页淡入淡出的渐变效果。

通常任何标签都可以添加id, class, name, style这四个属性，其中style就是一种将样式写在标签内的css。比如下面是为段落标签中的文本设置红色字体，黄色背景色，2em大小文字，2px蓝色实体边框并设置文本居中的内置css:

<p style="color:red;background-color:yellow;font-size:2em;border:2px solid blue;text-align:center">test text</p>

1	<p style="color:red;background-color:yellow;font-size:2em;border:2px solid blue;text-align:center">test text</p>

可以看出css的基础语法格式是“属性(如color):值(如red)”的形式，在属性和值之间以冒号分隔，在属性与属性之间用分号分隔。

常见的颜色值有十六进制的#rgb(如#ccc)和#rrggbb(如#cccccc)的形式,十六种基本颜色(如red, green等，参见HTML和CSS概述及HTML基本语法一节),rgb(x,x,x)(如rgb(255,255,255))。常见的大小单位有em, px, pt, %, pc, cm, mm, in等。

css注释使用/*Insert your comment here*/的形式。css有四种设置方式：

内联样式表：在HTML元素标签中使用style属性内联（见上面的例子）,每个HTML标签都可以添加样式，虽然灵活，但缺点是需要对每个标签添加样式。
嵌入样式表：通过HTML的<style>标签将CSS嵌入到HTML中使用，可以控制当前页面的所有样式。同样这种方式也会要求对每个页面添加一次样式，但相对内联样式表而言要少一些工作量。基本语法类似：

<style>
    p {
        color:red;
        background-color:yellow;
}
</style>

<style>

p {

color:red;

background-color:yellow;

}

</style>

外部样式表：将样式单独定义在一个后缀名为.css的文件中，并在HTML中通过link元素连接到HTML中使用。这样多个页面都可以使用，这是目前较多采用的方式。<link>的基本语法类似：

<link rel="stylesheet" type="text/css" href="css/syle.css" />

1	<link rel="stylesheet" type="text/css" href="css/syle.css" />

输入样式表：是指将一个样式文件输入到另外一个样式文件中，或将一个样式文件输入到<style>元素中,导入的基本语法类似(@import url(css文件路径);)：

 @import url(***/***.css);

1	@import url(*/*.css);

上述四者的优先级别为：内联样式表优先级别高于其它的，其它的三种和加载的顺序有关。

说到css,就不得不提到一些概念：

样式选择器(Selector):当定义一条样式规则时，必须指定受这条样式规则作用的网页元素，在一条规则中定义的网页元素就是selector（选择器），也就是选择该样式规则作用于的网页元素。

Selector {   /*  Selector 是样式选择器,如p, a:hover */  
property:value;    /* 如color:red; */    
property:value;   /* 如font-size:4em;*/
...
}

Selector { /* Selector 是样式选择器,如p, a:hover */

property:value; /* 如color:red; */

property:value; /* 如font-size:4em;*/

...

}

CSS的选择器通常对应的有

HTML样式选择器：即html中的标签和元素，如a,p,h1,div等：
类样式选择器：同一个选择器可以有不同的类，因而允许同一个元素有不同的样式,定义的方式是元素名.类名,如p.class1 （类名是自定义的,如果不加元素名则代表所有HTML元素）,就用此类样式时，直接在标签内添加class=””即可，而若要添加多个类的样式时，直接在类名中间使用空格分开即可，如<h1 class=”class1 class2″>。
ID样式选择器:在HTML页面中， ID属性指定了某个单一元素，ID属性就用来对单一元素定义单独样式。但要注意在一个HTML页面中，ID属性值要唯一。定义的方式是#idname,调用该样式的标签中应该包含id=””,如<p id=”id1″>。
关联样式选择器:关联选择器是一个用空格隔开的两个或更多的单一选择器组成的字符串(如 div #id1 .class1 p{ })。因为层叠顺序的规则，它们的优先级别比单一的选择符高,必须按关联关系使用，且顺序不能写反。只要能保持关联关系就可以，而不管是在标签内的多少层。
组合样式选择器:为了减少样式表的重复声明，可以使用组合样式,只需将英文逗号（,）分隔开每个选择符就可以了，比如div,#id1,.class1,h1。
伪元素样式选择器：伪元素样式选择器是指对同一个HTML元素在不同的状态下的一种定义方式。目前只有a和p两个HTML元素可以使用伪元素。使用的语法为标签:伪元素或标签.类名:伪元素，例如：

a:link 没有任何动作前的状态

a:hover 光标移动到到超链接上的状态

a:active: 选中超链接的状态

a:visited 访问过超链接的状态

p:first-letter 一个段落中首个字母的状态

p:first-line 一个段落中首行的状态

此外还有样式继承的规则则为所有嵌套在某个HTML标签内的HTML标签都会继承外层标签设置的样式规则。样式规则的优先级顺序为关联选择器>ID选择器>类选择器>HTML选择器。