CSS样式表学习手册.docx

1、CSS样式表学习手册CSS样式表学 习 手 册什么是样式表样式表又称为CSS样式表，CSS是Cascading Style Sheet 的缩写。译作层叠样式表单。是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 样式表的作用 CSS样式表是一种网页内容的格式化技术，用于对网页显示内容进行效果装饰，它可以控制HTML中的几乎所有标记或者对其进行输出格式的重新设定，并且CSS可以将所修改的设定储存成一个独立的文件，提高其复用性。 CSS不仅可以控制网页的输出格式，还可以控制其他的输出终端，常见的电视机，显示器，投影仪等均可以使用CSS进行控制（CSS2具有该功能）。样式表

2、的定义规则及其使用规则CSS样式表的定义规则有3种：1. 直接对HTML文件内所使用的标签进行样式修改应用范围：对某个具体的标签进行临时样式的修改，应用于该标签格式：2. 在HTML文件内部的文件头定义处对标签样式进行总体定义应用范围：对某个网页中的某种标签进行样式的修改，应用于本网页内格式：标签名1属性名1:属性值1;属性名2:属性值2;标签名2属性名1:属性值1;属性名2:属性值2;标签名N属性名1:属性值1;属性名2:属性值2;3. 将对标签样式的重定义制作成独立的CSS样式表文件（*.css）应用范围：定义一个独立的样式表文件，设定标签属性，应用于所有使用该文件的HTML文件格式：定义

3、一个文件类型为css类型的文件标签名1属性名1:属性值1;属性名2:属性值2;标签名2属性名1:属性值1;属性名2:属性值2;标签名N属性名1:属性值1;属性名2:属性值2;CSS样式表与HTML结合的三/四种方法： 1. 直接对HTML文件内所使用的标签进行样式修改的无需再做其他操作，样式将直接应用到被修改的标签中2. 在HTML文件内部的文件头内定义的样式讲在使用到该标签时自动应用其定义效果，无需再做其他操作3. 使用独立制作的CSS样式表文件(*.css)，讲该样式定义引入HTML文件的方式有如下两种: 在标签内使用标签导入外部定义的CSS样式表文件 使用CSS 规则import标记来导

4、入样式表单；import *.css;样式表的冲突问题 由于CSS样式表的定义规则不止一种，因此当某个标记CSS样式表的定义出现冲突时，多种相同属性的定义将出现冲突问题；此外当多种定义规则出现时，引用效果也讲出现冲突，下面列举出各种冲突的处理规则定义冲突：1. HTML文件内部定义之间出现冲突bodycolor:red;bodycolor:blue; 使用时定义位置靠后的将取代前面定义的属性，成为最终定义的属性2. CSS外部定义同一个.css文件内定义之间出现冲突（同上）引用冲突：1. HTML文件内部定义与CSS外部定义.css文件之间出现冲突bodycolor:#ff00ff; 引用时H

5、TML文件内部定义的样式将取代CSS外部定义文件内的样式2. CSS外部定义的多个.css文件之间出现冲突style1.cssbodycolor:red;style2.cssbodycolor:blue;引用时： 若都使用标签导入，则后导入的将取代先导入的，成为最终样式 若都使用import语法导入，则后导入的将取代先导入的，成为最终样式import fail.css;import success.css; 若使用import语法和标签分别导入，则语法顺序定义位置在后面的将取代语法顺序定义位置在前面的，成为最终样式import fail.css;或：import success.css;3.

6、多个标记定义同一内容而引发的引用冲突 外层标签与内层标签定义冲突时，内层标签样式将覆盖外层标签样式效果 p color:red; b color:blue; 红色蓝色蓝色绿色 具有样式的标签嵌套不规则冲突时，距离被修饰内容进的样式定义其作用 p color:red; b color:blue; 红色蓝色总：具有相同样式修饰，不同样式值的标签距离被修饰内容近标签的样式格式起作用4. 当CSS对某个标签进行定义时，基于HTML默认标签使用的值都是默认设定，此时优先使用CSS定义规则，否则CSS定义就毫无意义了。选择符选择符即进行CSS样式表设定时的基础符号，用于定义被CSS样式表修饰的标记符号，共

7、有四种类型，如下：1. 类型选择符以标签作为选择符p color:blue; 类型选择符2. 包含选择符以被某个对象E包含的F作为选择符p b color:blue; 包含选择符非包含选择符非包含选择符非包含选择符3. ID选择符以对象的唯一标识符的ID作为选择符#idselect color=red; ID选择符非ID选择符4. 类选择符以对象的class属性作为选择符.class1 color=red; .class2 color=blue; class1类选择符 class1类选择符 class2类选择符 class2类选择符非类选择符5. 选择符分组将同样的定义应用于多个选择符，可以将

8、选择符以逗号分隔的方式划分为组p,b,i color:blue; 选择符分组效果选择符分组效果选择符分组效果样式表属性列表CSS样式表通过设定不同标记的不同属性值达到修改外观效果的目的，因此属性值即显的尤为重要，具体设定参看文件css.chm中的属性一节。伪类CSS样式表中常用的伪类有4种，如下1. :link设置对象在未被访问前的样式表属性。默认值由浏览器决定。对于无href属性的对象，此伪类不发生作用。例如：a:link font-size: 14pt; text-decoration: underline; color: blue; 2. :hover设置对象在其鼠标悬停时的样式表属性。

9、 在CSS1中此伪类仅可用于对象。对于无href属性（特性）的对象，此伪类不发生作用。在CSS2中此伪类可以应用于任何对象。 例如：a:hover font-size: 14pt; text-decoration: underline; color: blue; a:hover span color:red; 3. :active设置对象在被用户激活（在鼠标点击与释放之间发生的事件）时的样式表属性。 在CSS1中此伪类仅可用于对象。对于无href属性（特性）的对象，此伪类不发生作用。在CSS2中此伪类可以应用于任何对象。并且:active状态可以和:link以及:visited状态同时发生。

10、例如：a:active font-size: 14pt; text-decoration: underline; color: blue; 4. :visited设置对象在其链接地址已被访问过时的样式表属性。 默认值由浏览器决定。定义网页过期时间或用户清空历史记录将影响此伪类的作用。对于无href属性（特性）的a对象，此伪类不发生作用。例如：a:visited font-size: 14pt; text-decoration: underline; color: blue; 伪对象:first-letter语法格式：Selector : first-letter sRules 设置对象内的第一

11、个字符的样式表属性。此伪对象仅作用于块对象。内联对象要使用该伪对象，必须先设定对象的height或width属性，或者设定position属性为absolute，或者设定display属性为block。 在此伪类中配合使用font-size属性和float属性可以制作首字下沉效果。 例如：p a:first-letter color: green div:first-letter color:red;font-size:16px;float:left; :first-line 语法格式：Selector : first-line sRules 设置对象内的第一行的样式表属性。此伪对象仅作用于块

12、对象。内联对象要使用该伪对象，必须先设定对象的height或width属性，或者设定position属性为absolute，或者设定display属性为block。如果未强制指定对象的width属性， 首行的内容长度可能不是固定的。例如：p a:first-line color: green div:first-line color:red;font-size:16px; 规则import语法格式： import url (url)sMedia ; 参数：url : 使用绝对或相对地址指定导入的外部样式表文件。sMedia : 指定设备类型。指定导入的外部样式表及目标设备类型。该规则必须在样式

13、表头部最先声明。并且其后的分号是必需的，如果省略了此分号，外部样式表将无法正确导入，并会生成错误信息。导入的外部样式表中的定义将被HTML文本中的同名定义覆盖。 例如import url(foo.css) screen, print;import print.csspage语法格式： page labelpseudo-class sRules 参数：label : 页标 pseudo-class : 伪类。sRules : 样式表定义设置页面容器的版式，方向，边框等。页面容器包括页面内容区域和内容区域外围的边空补白区域。例如page thin:first size: 3in 8in media

14、语法格式：media sMedia sRules 参数： sMedia : 指定设备名称。sRules : 样式表定义指定样式表规则用于指定的设备类型例如/ 设置显示器用字体尺寸 media screen BODY font-size:12pt; / 设置打印机用字体尺寸 media print import print.css BODY font-size:8pt; 声明（!important）提升指定样式规则的应用优先权p color:blue!important 如下： p color:blue!important p color:red; 提升优先权后为蓝色，否则为红色长度单位长度单位简介相对长度单位em相对于当前对象内文本的字体尺寸ex相对于字符“x”的高度。通常为字体高度的一半px像素（Pixel）绝对长度单位pt点（Point）pc派卡（Pica）。相当于我国新四号铅字的尺寸in英寸（Inch）cm厘米（Centimeter）mm毫米（Millimeter）单位换算：1in = 2.54cm = 25.4 mm = 72pt = 6pc设备类型设备类型名简介all所有设备类型print打印机screen计算机显示器