CSS样式表学习手册

1CSS样式表学习手册2什么是样式表样式表又称为CSS样式表，CSS是CascadingStyleSheet的缩写。译作「层叠样式表单」。是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。样式表的作用CSS样式表是一种网页内容的格式化技术，用于对网页显示内容进行效果装饰，它可以控制HTML中的几乎所有标记或者对其进行输出格式的重新设定，并且CSS可以将所修改的设定储存成一个独立的文件，提高其复用性。CSS不仅可以控制网页的输出格式，还可以控制其他的输出终端，常见的电视机，显示器，投影仪等均可以使用CSS进行控制（CSS2具有该功能）。样式表的定义规则及其使用规则CSS样式表的定义规则有3种：1.直接对HTML文件内所使用的标签进行样式修改应用范围：对某个具体的标签进行临时样式的修改，应用于该标签格式：标签名style=属性名1:属性值1;属性名2:属性值2;……属性名n:属性值n;2.在HTML文件内部的文件头定义处对标签样式进行总体定义应用范围：对某个网页中的某种标签进行样式的修改，应用于本网页内格式：headstyletype=text/css标签名1{属性名1:属性值1;属性名2:属性值2;……}标签名2{属性名1:属性值1;属性名2:属性值2;……}……标签名N{属性名1:属性值1;属性名2:属性值2;……}/style/head33.将对标签样式的重定义制作成独立的CSS样式表文件（*.css）应用范围：定义一个独立的样式表文件，设定标签属性，应用于所有使用该文件的HTML文件格式：定义一个文件类型为css类型的文件标签名1{属性名1:属性值1;属性名2:属性值2;……}标签名2{属性名1:属性值1;属性名2:属性值2;……}……标签名N{属性名1:属性值1;属性名2:属性值2;……}CSS样式表与HTML结合的三/四种方法：1.直接对HTML文件内所使用的标签进行样式修改的无需再做其他操作，样式将直接应用到被修改的标签中2.在HTML文件内部的文件头HEAD内定义的样式讲在使用到该标签时自动应用其定义效果，无需再做其他操作3.使用独立制作的CSS样式表文件(*.css)，讲该样式定义引入HTML文件的方式有如下两种:在HEAD标签内使用LINK标签导入外部定义的CSS样式表文件linkrel=stylesheethref=mystyle.csstype=text/css使用CSS规则@import标记来导入样式表单；style@import*.css;/style样式表的冲突问题由于CSS样式表的定义规则不止一种，因此当某个标记CSS样式表的定义出现冲突时，多种相同属性的定义将出现冲突问题；此外当多种定义规则出现时，引用效果也讲出现冲突，下面列举出各种冲突的处理规则※定义冲突：1.HTML文件内部定义之间出现冲突stylebody{4color:red;}body{color:blue;}/style使用时定义位置靠后的将取代前面定义的属性，成为最终定义的属性2.CSS外部定义同一个.css文件内定义之间出现冲突（同上）※引用冲突：1.HTML文件内部定义与CSS外部定义.css文件之间出现冲突linkrel=stylesheethref=style.csstype=text/cssstylebody{color:#ff00ff;}/style引用时HTML文件内部定义的样式将取代CSS外部定义文件内的样式2.CSS外部定义的多个.css文件之间出现冲突style1.cssbody{color:red;}style2.cssbody{color:blue;}引用时：若都使用link标签导入，则后导入的将取代先导入的，成为最终样式linkrel=stylesheethref=fail.csstype=text/csslinkrel=stylesheethref=success.csstype=text/css若都使用@import语法导入，则后导入的将取代先导入的，成为最终样式[e-mail];@importsuccess.css;/style若使用@import语法和link标签分别导入，则语法顺序定义位置在后面的将取代语法顺序定义位置在前面的，成为最终样式[e-mail];/stylelinkrel=stylesheethref=success.csstype=text/css5或：linkrel=stylesheethref=fail.csstype=text/[e-mail];/style3.多个标记定义同一内容而引发的引用冲突外层标签与内层标签定义冲突时，内层标签样式将覆盖外层标签样式效果stylep{color:red;}b{color:blue;}/stylebp红色/p/bpb蓝色/b/pIstyle=color:green;b蓝色/bIbIstyle=color:green;绿色I/b具有样式的标签嵌套不规则冲突时，距离被修饰内容进的样式定义其作用stylep{color:red;}b{color:blue;}/stylebp红色/b/ppb蓝色/p/b总：具有相同样式修饰，不同样式值的标签距离被修饰内容近标签的样式格式起作用4.当CSS对某个标签进行定义时，基于HTML默认标签使用的值都是默认设定，此时优先使用CSS定义规则，否则CSS定义就毫无意义了。选择符选择符即进行CSS样式表设定时的基础符号，用于定义被CSS样式表修饰的标记符号，共有四种类型，如下：1.类型选择符以标签作为选择符6p{color:blue;}p类型选择符/p2.包含选择符以被某个对象E包含的F作为选择符pb{color:blue;}pb包含选择符/b/pib非包含选择符/b/ibrb非包含选择符/bp非包含选择符/p3.ID选择符以对象的唯一标识符的ID作为选择符#idselect{color=red;}bid=idselectID选择符/bbrb非ID选择符/b4.类选择符以对象的class属性作为选择符.class1{color=red;}.class2{color=blue;}bclass=class1class1类选择符/bbrbclass=class1class1类选择符/bbrbclass=class2class2类选择符/bbrbclass=class2class2类选择符/bbrb非类选择符/b5.选择符分组将同样的定义应用于多个选择符，可以将选择符以逗号分隔的方式划分为组p,b,i{color:blue;}b选择符分组效果/bbri选择符分组效果/ibrp选择符分组效果/p样式表属性列表CSS样式表通过设定不同标记的不同属性值达到修改外观效果的目的，因此属性值即显的尤为重要，具体设定参看文件css.chm中的属性一节。伪类CSS样式表中常用的伪类有4种，如下71.:link设置a对象在未被访问前的样式表属性。默认值由浏览器决定。对于无href属性的a对象，此伪类不发生作用。例如：a:link{font-size:14pt;text-decoration:underline;color:blue;}2.:hover设置对象在其鼠标悬停时的样式表属性。在CSS1中此伪类仅可用于a对象。对于无href属性（特性）的a对象，此伪类不发生作用。在CSS2中此伪类可以应用于任何对象。例如：a:hover{font-size:14pt;text-decoration:underline;color:blue;}a:hoverspan{color:red;}3.:active设置对象在被用户激活（在鼠标点击与释放之间发生的事件）时的样式表属性。在CSS1中此伪类仅可用于a对象。对于无href属性（特性）的a对象，此伪类不发生作用。在CSS2中此伪类可以应用于任何对象。并且:active状态可以和:link以及:visited状态同时发生。例如：a:active{font-size:14pt;text-decoration:underline;color:blue;}4.:visited设置a对象在其链接地址已被访问过时的样式表属性。默认值由浏览器决定。定义网页过期时间或用户清空历史记录将影响此伪类的作用。对于无href属性（特性）的a对象，此伪类不发生作用。例如：a:visited{font-size:14pt;text-decoration:underline;color:blue;}伪对象:first-letter语法格式：Selector:first-letter{sRules}设置对象内的第一个字符的样式表属性。此伪对象仅作用于块对象。内联对象要使用该伪对象，必须先设定对象的height或width属性，或者设定position属性为absolute，或者设定display属性为block。在此伪类中配合使用font-size属性和float属性可以制作首字下沉效果。8例如：pa:first-letter{color:green}div:first-letter{color:red;font-size:16px;float:left;}:first-line语法格式：Selector:first-line{sRules}设置对象内的第一行的样式表属性。此伪对象仅作用于块对象。内联对象要使用该伪对象，必须先设定对象的height或width属性，或者设定position属性为absolute，或者设定display属性为block。如果未强制指定对象的width属性，首行的内容长度可能不是固定的。例如：pa:first-line{color:green}div:first-line{color:red;font-size:16px;}规则@import语法格式：@importurl(url)sMedia;参数：url:使用绝对或相对地址指定导入的外部样式表文件。sMedia:指定设备类型。指定导入的外部样式表及目标设备类型。该规则必须在样式表头部最先声明。并且其后的分号是必需的，如果省略了此分号，外部样式表将无法正确导入，并会生成错误信息。导入的外部样式表中的定义将被HTML文本中的同名定义覆盖。例如style@importurl(foo.css)screen,print;@importprint.css/style@page语法格式：@pagelabelpseudo-class{sRules}参数：label:页标pseudo-class:伪类。sRules:样式表定义设置页面容器的版式，方向，边框等。页面容器包括页面内容区域和内容区域外围的边空补白区域。例如9@pagethin:first{size:3in8in}@media语法格式：@mediasMedia{sRules}参数：sMedia:指定设备名称。sRules:样式表定义指定样式表规则用于指定的设备类型例如//设置显示器用字体尺寸@mediascreen{BODY{font-size:12pt;}}//设置打印机用字体尺寸@mediaprint{@importprint.cssBODY{font-size:8pt;}}声明（!important）提升指定样式规则的应用优先权p{color:blue!important}如下：stylep{color:blue!important}p{col