CSS(Cascading Style Sheets),即层叠样式表,主要是用来为网页中的元素进行格式设置以及对网页进行排版和风格设计。CSS样式看似简单,但要真正精通是不容易的。
CSS简介
CSS是"Cascading Style Sheet" 的缩写,可以翻译为"层叠样式表"或"级联样式表",就是平常所说的"样式表"。它是一种简单、灵活、易学的样式设计工具,可以定义网页元素的各种属性变化,如文字背景、字型等。CSS样式的属性是在HTML元素中体现的,并不是单独显示在浏览器中。它可以定义在HTML文档的标记里,也可以通过外部文件链接到页面中。如果附加在外部文件中,一个样式表可以作用到多个页面中,具有更好的易用性和扩展性。
CSS样式表可以使用HTML标记或命名归纳的方法来定义,除了可以控制一些传统的文本属性外,还可以控制一些特别的HTML元素属性,例如鼠标指针、图片效果等。一般来说,可以使用CSS样式表进行如下的工作。
灵活控制网页中文字的字体、颜色、大小、间距等样式,弥补HTML文字的单一性。
可随意设置文本块的行高、缩进,并可以为其加入三维效果的边跨。
能够更方便地为任何网页元素设置不同的背景颜色和背景图片。
精确控制网页元素的位置,进行精确的排版定位。
可为网页中的元素设置各种过滤器,从而产生诸如阴影、辉光、模糊和透明等效果。
可以与脚本语言相结合,使网页的元素产生各种动态效果。
css样式表的设置方法
当浏览器读取样式表时,要依照文本格式来读,这里介绍4种在页面中插入样式表的方法:内联样式表、内部样式表、外部样式表和引用多个样式表。
内联样式表
写在标签内的样式称之为内联样式,在标签内编写的样式能影响的范围最小,仅仅影响到该标签内的文字,另一个标签内的文字将无法显示该标签所定义的样式。设置内联样式的语法代码为:
<标签名 style="样式属性1:属性值1;样式属性2:属性值2;......">
内联样式可以使用在<body>标签内的所有子标签,包括<body>在内。但不能使用在<body>标签之外的标签上,如<head>、<title>、<html>等,<script>标签虽然也可以放在<body>标签内,但也不能使用样式。
内部样式表
在标签内设置样式,可以影响该标签内的文字,但其影响范围太小。如果一个HTML文档里有多个相同样式的标签,使用内联样式就要为每一个标签都设置一次,不能体现出CSS的强大功能。
在HTML文件里使用<style>标签可以设置影响整个文档的样式,这种方式称为内部样式,其语法代码如下:
<style type="text/css">
<!--
选择符1{样式属性:属性值;样式属性:属性值;......}
选择符2{样式属性:属性值;样式属性:属性值;......}
选择符3{样式属性:属性值;样式属性:属性值;......}
-->
</style>
其中,<style>标签用于声明样式,type属性声明样式元素是以CSS的语法来定义的。<!--······-->标签用于隐藏代码,当某些浏览器不支持CSS时,使用该标签可以让浏览器忽略其中代码,避免出现错误。
外部样式表
外部链接CSS是将样式表以单独的文件存放,让网站的所有网页均可引用此样式,以降低维护的人力成本,并可让网站拥有一致的风格。这种设置方式是把样式表单保存为一个文件,然后在页面中用<link>标记链接,而这个<link>标记必须放到页面的<head>区域内。其基本语法是:
<link rel="stylesheet" type="text/css" href="样式表源文件地址">
其中,href属性里的外部样式文件的地址填写方法和超链接的链接地址写法一样。rel="stylesheet",表示告诉浏览器连接的是一个样式表文件,是固定格式。type="text/css",表示传输的文本类型为样式表类型文件,这也是固定格式。
一个外部样式表文件可以应用于多个页面。当改变这个样式表文件时,所有页面的样式都随之而改变。样式表文件可以用任何文本编辑器(例如:记事本)打开并编辑,一般样式表文件扩展名为.css,其内容就是定义的样式,不包含HTML标记。
引用多个样式表
同一个CSS文件可以被多个HTML文件引用,而同一个HTML文件引用多个CSS文件。其引用方式与上面所说的引用方式一样。
使用@import引用外部样式表
与<link>标签类似,使用@import也能引用外部样式,不过@import只能在<style>标签内使用,而且必须放在其他CSS样式之前。@import的语法代码如下:
import url(外部样式地址)
其中url为关键字,不能随便更改;外部样式地址指的是外部样式的URL,可以是绝对URL,也可以是相对的URL。@import除了语法和所有位置与<link> 标签不同,其他的使用方法与效果都是一样的。
使用@import引用外部样式,在该语句的最后一定要有分好,否则引用外部样式将会失败。
css注释
在CSS中的注释与HTML中的注释有所不同,CSS中的注释采用的代码如下:
/*注释内容*/
选择符
CSS最大的作用就是能将一种样式加载在多个标签上,方便开发者管理与更改。CSS通过选择符来实现哪些标签元素使用样式,哪些标签元素不使用样式。也可以通过选择符来指定标签元素去使用哪个样式。
类型选择符
类型选择符(Type Selectors)是以文档中的对象(如Element)名作为选择符名,因此类型选择符可以使一个元素从原有的样式转变成另一种样式。类型选择符的语法代码如下:
E{样式属性:属性值;样式属性:属性值;…}
其中E为文档的元素,如果该文档是XML文档,则E为XML文档中所声明的元素;如果该文档是HTML文档,则E为HTML的元素,如p、h1、hr、img等。当在CSS里声明了某个元素的类型选择符之后,在该文档中所有被声明的元素都将被赋予该样式。例如,声明一个名为hr的类型选择符,则在该文档中所有的<hr>元素都会被赋予该样式。
类选择符
在一个网页中,有可能要为相同的标签赋予不同的样式,例如在一个新闻网页中,常常将比较重要的新闻标题用红色的文字显示,而普通的新闻标题则用黑色的文字显示。解决办法有以下两种:
1.内联样式
第一种解决方法是在CSS里设置普通新闻标题的颜色,再用内联样式指定重要新闻标题的样式,
2.类选择符
第二种解决方法是使用类选择符。类选择符可以与元素配合使用,当类选择符与元素配合使用时,类选择符的语法代码如下:
E.classname{样式属性:属性值;样式属性:属性值;......}
其中E为元素名称,classname是标签用于选择式所有的名称,只有E元素才能选择是否使用classname样式。
3.独立于元素的类选择符
类选择器可以与元素配合使用,也可以独立于元素使用,当类选择符独立于元素使用时,类选择符的语法代码如下:
.classname{样式属性:属性值;样式属性:属性值;......}
类选择符可以与元素配合使用时,只能在相同的Element下使用classname样式。例如在CSS里声明了a.red样式,就只有<a>标签能通过"class=red" 属性来引用该样式,而其他标签是不能引用该样式的。如果有很多个标签元素都使用相同的样式,也可以在CSS声明里不指定Element,直接使用.classname来声明样式,如此一来,所有的元素都可以通过"class=“classname” "来引用该样式。
ID选择符
ID选择符(ID Selectors)的使用方法与类型选择符和类选择符都有点相似,其语法代码如下:
#idname{样式属性:属性值;样式属性:属性值;......}
在一个HTML文档中,可以为元素设置id属性。id属性与name属性最大区别是,id的属性值在整个HTML文档中必须是唯一的。而ID选择符中的idname正好是对应这个id的属性值,因此ID选择符这是针对网页中某一个元素的,这个元素可以随便是什么元素,但其id的属性值必须是ID选择符的名字。
包含选择符
如果一个标签包含了另一个标签,那么这个标签元素就是另一个标签元素的父元素,<head>元素是<title>元素的父元素;反过来,如果一个标签被包含在另一个标签里面,那么该标签元素就是另一个标签元素的子元素,<title>元素是<head>元素的子元素。所有标签的最顶层的标签元素称之为根元素,<html>元素就是根元素。同一个父标签的几个标签元素互为兄弟标签元素,<ul>标签下额三个<li>标签都互为兄弟标签,同样,<body>标签下的<p>、<a>、<table>和<ul>标签也互为兄弟标签。
在CSS的选择符里有的一种选择符叫做包含选择符(Descendant Selectors),在包含选择符里,可以为一个特定的结构创建样式,例如,可以创建一个超链接的样式,但该样式只有在超链接包含在<p>标签内时才有作用。包含选择符的语法代码如下:
E1 E2{样式属性:属性值;样式属性:属性值;......}
选择符分组
在一个HTML文档里,有可能多个标签都使用用一种样式,例如,所有的标题都使用下划线这个样式,那么CSS里就要这么定义。
<style type="text/css">
<!--
h1{text-decoration:underline;}
h2{text-decoration:underline;}
h3{text-decoration:underline;}
h4{text-decoration:underline;}
h5{text-decoration:underline;}
h6{text-decoration:underline;}
-->
</style>
其实在CSS里,支持选择符分组,既可以把相同样式的选择符放在一个组内,如此可以提高效率,也更方便阅读。选择符分组的方式如下:
E1,E2,E3......{样式属性:属性值;样式属性:属性值;......}
以上代码可以简略如下:
<style type="text/css">
<!--
h1,h2,h3,h4,h5,h6{text-decoration:underline;}
-->
</style>
通用选择符
通用选择符(Universal Selector)的语法代码如下:
*{样式属性:属性值;样式属性:属性值;......}
与很多高级程序语言中一样,"*"是代表所有,即所有的标签都将使用该样式。
子选择符
在某个程度来说,子选择符(Chid Selectors)与包含选择符很相像,但必须是从父级标签指定字标签,其语法代码为:
E1>E2{样式属性:属性值;样式属性:属性值;......}
其中E1为E2的父级标签。
相邻选择符
相邻选择符是一个比较有意思的选择符,该选择符作用在兄弟标签,但只能作用在相邻的两个兄弟标签之间,其语法代码为:
E1+E2{样式属性:属性值;样式属性:属性值;......}
其中E2为紧跟着E1之后的兄弟标签,并且样式只能作用在E2上,而不能作用在E1上。
属性选择符
前面所介绍过得选择符,有针对元素而声明的(如类型选择符)、有针对ID值而声明(ID选择符,)CSS里还有一种选择符,是针对元素中的不同属性而声明的,这种选择符就是属性选择符(Attribute Selectors)。属性选择符的语法代码为:
E[属性] {样式属性:属性值;样式属性:属性值;......}
E[属性=属性值]{样式属性:属性值;样式属性:属性值;......}
E[属性~=属性值]{样式属性:属性值;样式属性:属性值;......}
E[属性|=属性值]{样式属性:属性值;样式属性:属性值;......}
如上所示,属性选择符有四种不同的表达方式,不同的表达方式所代表的意思都不一样。
1.第一种表达方法
属性选择符第一种表达方式为:
E[属性]{样式属性:属性值;样式属性:属性值;......}
这种属性选择符的意思是:只要元素中包含该属性,就可以使用该样式,下满是一个属性选择符的样式声明。
p[align]{font-style:italic}
该样式将会作用在所有还有align属性的<p>标签上,无论align的属性值是什么,例如以下3行代码都将使用该样式,即斜体。
<p align="left">文字</p>
<p align="center">文字</p>
<p align="right">文字</p>
虽然以下代码在HTML中的意思与"<p align=“left”>文字</p>"相同,但该行代码不能使用前面声明的CSS样式,因为在该行代码中,没有使用align属性。
2.第二种表达方式
属性选择符的第二种表达方式为:
E[属性=属性值]{样式属性:属性值;样式属性:属性值;......}
这种属性选择符对属性的要求比上一次属性选择符对属性的要求要高一些,除了要求要有该属性,还必须要求属性值是什么。代码如下
p[align="center"]{font-style:italic;}
该样式就只能作用在align属性值为"center"的<p>标签上,即只能作用在以下代码上。
<p align="center">文字</p>
而不能作用在以下代码:
<p> 文字</p>
<p align="left">文字</p>
<p align="right">文字</p>
虽然这些代码使用的都是p元素,但是这些代码要么没有align属性,要么align属性值不为"center"。
第三种表达方式
属性选择符的第三种表达方式,代码如下:
E[属性~=属性值]{样式属性:属性值;样式属性:属性值;......}
这种表达方式可以提供一种近似的属性值选择方式,"~="符号就像是约等于。例如以下代码中的title属性值是一个字符串,并且该字符串中有用空格隔开的几个英文单词。
<a href="#" title="this is a Attribute Selectors">属性选择符</a>
那么这行代码可以被以下几个属性选择符匹配成功。
a[title~="this"]{font-style:italic;}
a[title~="is"]{font-style:italic;}
a[title~="a"]{font-style:italic;}
a[title~="Attribute"]{font-style:italic;}
a[title~="Selectors"]{font-style:italic;}
以上几个属性选择符都用"~="指明了一个属性值,只要<a>标签中的title属性中有一个单词属于选择符中的属性值,就可以使用该样式。
在这种属性选择符里,属性值中不能有空格,既不能出现类似与"a[title~="Attribute Selectors]{font-style:italic;}"的属性选择符。
第四种表达方式
最后一种属性选择符的表达方式,代码如下:
E[属性|=属性值]{样式属性:属性值;样式属性:属性值;......}
这种属性选择符比上一种属性选择符所能匹配的范围要小得多,上一种属性选择符所能匹配得是单词,而这一种属性选择符只可以匹配以连字符(-)分隔得字符串,并且只能是以属性值开头得元素。代码如下:
p[lang|="en"]{font-style:italic}
以上代码lang得属性为值en或者en-开头得<p>标签,例如以下代码都可以使用该样式。
<p lang="en">文字</p>
<p lang="en-as">文字</p>
<p lang="en-us">文字</p>
而以下代码都不可以使用该样式:
<p>文字</p>
<p lang="fr">文字</p>
属性选择符可以和通过选择符联合使用,例如:"*[title]{font-style:italic;}",该代码表示所有包含title属性得元素都能使用该样式。
伪类和伪元素
伪类(pseudo-class)和伪元素(pseudo-element)可以说是在HTML文档里并不是实际存在的类和元素。伪类通常都是指某些元素的某个状态,比如超链接元素就存在四个状态:未访问过的链接、已访问过的链接、鼠标经过时的链接和鼠标单击时的链接。伪元素通常是指某个对象钟的某个元素的状态,例如,一行文字中第一个字符的样式等。
超链接的伪类
伪类最开始被提出来时,可以说完全是因为超链接,在CSS1中只有三个伪类,即:link、:visited和:active,这三个伪类都是作用在超链接接上的,分别代表超链接的三个状态:未访问过的URL、正在点击的超链接。后来,在CSS2中对鼠标经过超链接时的状态增加了一个伪类,即:hover。这四个伪类都只能使用在超链接上,其使用方法为:
a:visited{样式属性:属性值;样式属性:属性值;......}
a:active{样式属性:属性值;样式属性:属性值;......}
a:hover{样式属性:属性值;样式属性:属性值;.......}
a:link{样式属性:属性值;样式属性:属性值;......}
注意以上代码,在link、active、hover和link之前都有一个冒号(：),这个冒号就是伪类和伪元素的标记符,所有的伪类与伪元素都是冒号开头的。冒号前为该伪类或伪元素作用在哪个元素上的元素名。
伪类 作用
:link 设置超链接未被访问前的样式,如果超链接无href属性,则该样式不起作用
:hover 设置鼠标停放在该元素上时的样式。通常也用于超链接,但在CSS2中该伪类还可以用在其他对象上。当作用在超链接上时没如果超链接无href属性,则该样式不起作用
:active 设置鼠标点击的样式,即鼠标按下去还没有释放的那一瞬间时的样式。通常也用于超链接,但在CSS2中该伪类还可以用在其他对象上。当作用在超链接上时,如果超链接无href属性,则该样式不起作用
:visited 设置超链接已被访问过后的样式,如果超链接无href属性,则该样式不起作用
:focus 设置对象获得焦点时的样式
:first-child 设置某标签的第一个字标签的样式
:first 设置页面容器的第一页使用的样式,通常用于打印控制
:left 设置页面容器位于装订线左边的所有页面使用的样式,通常用于打印控制
:right 设置页面容器位于装订线右边的所有页面使用的样式,通常用于打印控制
:lang 设置对象视同特殊语言的内容的样式
伪元素
伪元素与伪类的使用方法类似,伪元素是通过对插入到文档中的虚构的元素进行样式设置。常用的伪元素有:first-letter和:first-line两个。这两个伪元素可以将样式作用在文字的首字与首行,通常用于块级元素中。
在CSS2中一共定义了四个伪元素,伪元素名及其作用如下:
伪元素 作用
:first-letter 设置对象中的第一个字母的样式,仅用于块元素中
:first-line 设置对象中的第一行文字的样式,仅用在啊块元素中
:before 设置在对象前发生的内容,用来与content属性一起使用
:after 设置在对象后发生的内容,用来与content属性一起使用
CSS优先级
由于样式具有多种选择符,而选择符之间又有继承性与层叠性。在设计样式时,就有可能将多个样式都加载在同一个标签元素上,如果这些样式都不相同的话,该标签元素则可以同时拥有这几种样式,但如果样式相同,只是属性值不同,这就会产生样式冲突,例如有一个HTML文档有以下样式代码
p{color:red}
.vip{color:green}
以上两个样式单独看起来没有问题,但如果出现了以下代码,将会怎么样?
<p class="vip">文字</p>
此时在<p>标签内的文字应该是什么颜色?是红色还是绿色?虽然样式可以层叠,但这种层叠只是针对不同的样式属性而言,如果样式属性相同而属性值不同,那么就会产生样式冲突。在本例中,一个文字不可能既是红色又是绿色。
其实在上面的代码中,正确的答案应该是绿色。在CSS中为每种不同类型的样式选择符都有一个特殊性(specificity),特殊性使用相对权重(weight)(也就是优先级)来描述不同的样式选择符。CSS可以根据产生冲突的样式选择符的权重来判断使用那些样式,通常是选择权重大的样式而忽略权重小的样式
关于权重的规定
类选择符(E)的权重为:0001。
类选择符(.classname)的权重为:0010。
ID选择符(#idname)的权重为:0100。
通用选择符(*)的权重为:0000。
子选择符的权重为:0000。
属性选择符([attr])的权重为:0010。
伪类选择符(:pseudo-classes)的权重为:0010。
伪元素(:pseudo-elements)的权重为:0001。
包含选择符:包含的选择符权重值之和。
内联样式的权重为:1000。
继承的样式的权重为:0000。
以上权重由大到小依次是:1000、0100、0010、0001、0000。
CSS中的单位
CSS中的单位可以简单地分为颜色单位、长度单位、角度单位和频率单位五种。
颜色单位
在CSS中常常会用到颜色,而表达颜色的方式主要包括:#RRGGBB、rgb(R,G,B)和颜色名称。
#PRGGBB表示方法是比较常用的一个表示方法,其中RR代表红色值、GG代表绿色值、BB代表蓝色值,取值范围都是00-FF。例如,红色可以用"FF0000"来表示。
rgb(R,G,B)是颜色的另一种表示方法,其中R代表红色值、G代表绿色值、B代表蓝色值,取值范围都是0-255或0%-100%。例如红色可以用rgb(255,0,0)或rgb(100%,0%,0%)来表示。使用百分数的表示方法不是所有浏览器都支持的。
使用颜色名称来表达颜色是比较直观的,例如红色就可以直接用red来表示,但不同的浏览器会有不同的预定义的颜色名称。
以下都是正确的颜色声明。
div{color:#FF0000;}
div{color:rgb{255,120,109};}
div{color:rgb(90%,20%,30%);}
div{color:red;}
长度单位
在CSS中长度单位分为两种,一种是绝对长度单位,一种是相对长度单位。绝对长度单位包括:pt、cm、mm、in和pc等。
in:英寸(inch),常用的度量单位。
pt:磅,这是标准的印刷量度,广泛使用在打印与排版上,72磅相当于1英寸。
cm:厘米(centimeter),全世界统一的度量单位,1英寸等于2.54厘米,1厘米等于0.394英寸。
mm:毫米(millimeter),全世界统一的度量单位,1厘米等于10毫米。
pc:派卡(pica),相当于我国新四号铅字大小。
以上五种绝对长度单位的换算方法为:1in=2.54cm=25.4mm=72.pt=6pc=12.pc
相对长度包括:px、ex和em等。
px:像素(pixel),相对于显示器屏幕的分辨率而言的。
ex:相对于字符"x"的高度,该高度通常为字体尺寸的一半。
em:相对于当前对象内文本的字体尺寸。
时间单位
在CSS中时间单位只有两种:s(秒)和ms(毫秒),其中1s=1000ms。以下是正确的时间单位声明方法。
input{pause-before:2s;}
input{pause-before:2000ms;}
角度单位
CSS中角度单位只包含deg、grad和rad等。
deg:就是平常所说的"度",有个圆等于360deg。
grad:梯度。一梯度为一个直角的百分之一,一个圆等于400grad。
rad:弧度。把一个圆分为2PI单位。
以下是正确的角度单位声明方法。
img{azimuth:90deg}
img{azimuth:30grad}
img{azimuth:6rad}
频率单位
在CSS中的频度单位只有两种:Hz(赫兹)和kHz(千赫兹),都是声波单位,其中1kHz=1000Hz。以下是正确的频率单位声明方法。
strong{pitch:75hz}
strong{pitch:75khz}
扫一扫
677
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
