1,css基本概念
css(cascading style sheet)即层叠样式表,简称样式表,要理解样式表的概念先要理解样式的概念,样式是对网页中的元素(字体,段落图像,列表等)属性的整体概括,即描述所有网页对象的显示形式(例如文字的大小,字体,背景及图像的颜色,大小等都是样式)。层叠,就是指当HTML文件引用多个css文件时,如果css文件之间所定义的样式发生了冲突,将依据层次的先后来处理其样式对内容的控制。
2,css基本语法
css语法包括三部分:选择符,样式属性和属性值
css基本语法:
selector{property:value; property:value;.... proerty:value}
selector代表选择符,property代表属性,value代表属性值
选择符包括多种样式,所有HTML标记都可以作为选择符,如body,p,table等都是选择符。但在利用css的语法给他们定义属性和值时,其中属性和值要用冒号隔开。
例如:body{color:red}
如果属性值由多个单词组成,并且单词间有空格,那么必须给值加上引号,如字体的名称经常是几个单词组成
例如:p{font-family:"Courier New"}
如果需要对一个选择符指定多个属性时,用分号将属性隔开
例如:p{text-align:center; color:red; font-family:calibri}
为了提高代码的可读性,上面的例子也可以分行写
p
{
text-align:center;
color:red;
font-family:calibri
}
相同属性和值的选择符组合起来称为选择符组。如果需要给选择符组定义属性和值,只要用逗号将选择符组分开即可,这样可以减少重复定义样式
例如:
p,table{font-size:10pt}
其效果完全等效于:
p{font-size:10pt}
table{font-size:10pt}
3,类选择符
用户类选择符可以把相同的元素分类定义成不同的样式,在定义类选择符时,在自定义类名称的面前加一个句点(.)。
类选择符语法:
标记名.类名{样式属性:取值; 样式属性:取值;...}
例如:要设置两个不同文字颜色的段落,一个为红色,一个为蓝色,可以利用如下代码预定义两个类
p.red{color:red}
p.blue{color:blue}
以上的代码中定义了段落选择符p的red和blue两个类,即red和blue成为类选择符,其中类得名称可以是任意英文字母或是字母开头的数字组合。要注意的是,这里的p(HTML)标记是可以省略的。而且在实际应用中,这种省略HTML标记的类选择符是最常用的css方法,因为这种方法定义的类选择符没有适用范围的限制。而不省略HTML标记的类选择符,其适用范围仅限于该标记所包含的内容,例如下面省略了HTML标记的类选择符。
.red{color:red}
.blue{color:blue}
但是要怎么样才能在不同的段落里应用这些样式呢?只要在HTML标记里加入已经定义的class参数即可,如下应用了刚才定义的两个类选择符
<p class=red>或者是<p class=blue>
4,id选择符
在HTML文档中,需要唯一标识一个元素时,就会赋予它一个id标识,以便哎对整个文档进行处理时能够很快地找到这个元素。而id选择符就是用来对这个单一元素定义单独的样式。其定义方法与类选择符大同小异,只需要把句点(.)改为井号(#),而调用时需要把class改为id
id选择符语法:标记名#标识名{样式属性:取值; 样式属性:取值;...}
例如,如果要在页面中定义一个id为salary的元素,并要设置这个元素为红色,那么只要添加如下代码
#salary{color:red}
<p id="salary">
由于id选择符局限性很大,只能单独定义某个元素的样式,一般只在特殊情况下使用
5,包含选择符
包含选择符是对某种元素包含关系(如元素1里包含元素2)定义的样式表。这种方式只对在元素1里的元素2定义,对单独的元素1或元素2无定义。例如:
table b{font-size:11px}这里只是说明表格b内的字号为11像素,对表格外的字号没有影响
6,伪类
伪类不属于选择符,它是让页面呈现丰富表现力的特殊属性,之所以称为“伪”,是因为它指定的对象在文档中并不存在,他们指定的是元素的某种状态
应用最广泛的伪类是链接的4个状态——未链接状态(a:link),已访问链接状态:(a:visited),鼠标指针悬停在链接上的状态(a:hover)以及被激活(在鼠标单击与发生的事件)的链接状态(a:active)。在HTML页面内,使用<a>标记链接元素并没有设置4个状态的代码,但是可以通过设置链接的伪类来使其呈现这些状态。选择符和伪类之间用英文分号隔开
7,选择符优先级
在应用选择符的过程中,可能会遇到同一个元素由不同选择符定义的情况,这时候就要考虑到选择符的优先级。通常我们使用的选择符包括id选择符,类选择符,包含选择符和HTML标记选择符等。因为id选择符是最后被加到元素上的,所以优先级最高,其次是类选择符。!important语法主要用来提升样式规则应用优先级。只要使用了!important语法声明,浏览器就会优先选择它声明的样式显示。所以若想打破已定义的优先级顺序们可以使用!important声明
8,插入css样式表
插入css样式表到HTML文件中有4种方法,分别是:链入外部样式表,内部样式表,嵌入样式表和导入外部样式表。单在应用这4种方法将css文件插入到HTML文件时,由于css文件的定义可以放置在HTML文件的几个不同位置,所以将其分为头部,主体和外部。css文件的定义可以放置在HTML文件的几个不同位置,所以将其分为头部,主体和外部。
css文件定义在HTML文件头部的方法:内部样式表
css文件定义在HTML文件主体的方法:嵌入样式表
css文件定义在HTML文件外部的方法:链入外部样式表,导入外部样式表