CSS樣式表学习手册.doc

CSS样式表 学 习 手 册 什么是样式表 CSS是Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 style=属性名1:属性值1; 属性名2:属性值2;……属性名n:属性值n; 在HTML文件内部的文件头定义处对标签样式进行总体定义 应用范围：对某个网页中的某种标签进行样式的修改，应用于本网页内 格式： head style type=text/css标签名1{ 属性名1:属性值1; 属性名2:属性值2; …… }标签名2{ 属性名1:属性值1; 属性名2:属性值2; …… } …… 标签名N{ 属性名1:属性值1; 属性名2:属性值2; …… }/style /head 将对标签样式的重定义制作成独立的CSS样式表文件（*.css） 应用范围：定义一个独立的样式表文件，设定标签属性，应用于所有使用该文件的HTML文件 格式：定义一个文件类型为css类型的文件 标签名1{ 属性名1:属性值1; 属性名2:属性值2; …… }标签名2{ 属性名1:属性值1; 属性名2:属性值2; …… } …… 标签名N{ 属性名1:属性值1; 属性名2:属性值2; …… } CSS样式表与HTML结合的三/四种方法： 直接对HTML文件内所使用的标签进行样式修改的无需再做其他操作，样式将直接应用到被修改的标签中 在HTML文件内部的文件头HEAD内定义的样式讲在使用到该标签时自动应用其定义效果，无需再做其他操作 使用独立制作的CSS样式表文件(*.css)，讲该样式定义引入HTML文件的方式有如下两种: 在HEAD标签内使用LINK标签导入外部定义的CSS样式表文件 link rel=stylesheet href=mystyle.css type=text/css 使用CSS 规则@import标记来导入样式表单； style @import *.css; /style 样式表的冲突问题 由于CSS样式表的定义规则不止一种，因此当某个标记CSS样式表的定义出现冲突时，多种相同属性的定义将出现冲突问题；此外当多种定义规则出现时，引用效果也讲出现冲突，下面列举出各种冲突的处理规则 ※定义冲突： HTML文件内部定义之间出现冲突 style body{ color:red; } body{ color:blue; } /style 使用时定义位置靠后的将取代前面定义的属性，成为最终定义的属性 CSS外部定义同一个.css文件内定义之间出现冲突 （同上） ※引用冲突： HTML文件内部定义与CSS外部定义.css文件之间出现冲突 link rel=stylesheet href=style.css type=text/css style body{ color:#ff00ff; } /style 引用时HTML文件内部定义的样式将取代CSS外部定义文件内的样式 CSS外部定义的多个.css文件之间出现冲突 style1.css body{ color:red; } style2.css body{ color:blue; } 引用时： 若都使用link标签导入，则后导入的将取代先导入的，成为最终样式 link rel=stylesheet href=fail.css type=text/css link rel=stylesheet href=success.css type=text/css 若都使用@import语法导入，则后导入的将取代先导入的，成为最终样式 style @import fail.css; @import success.css; /style 若使用@import语法和link标签分别导入，则语法顺序定义位置在后面的将取代语法顺序定义位置在前面的，成为最终样式 style @import fail.css; /style link rel=stylesheet href=success.css type=text/css 或： link rel=stylesheet href=fail.css type=text/css style @import success.css; /style 多个标记定义同一内容而引发的引用冲突 外层标签与内层标签定义冲突时，内层标签样式将覆盖外层标签样式效果 style p{ color:red; } b{ color:blue; } /style bp红色/p/b pb蓝色/b/p I style=color:green;b蓝色/bI bI style=color:green;绿色I/b 具有样式的标签嵌套不规则