CSS样式表学习手册.docx

资源描述

CSS样式表学习手册.docx

《CSS样式表学习手册.docx》由会员分享，可在线阅读，更多相关《CSS样式表学习手册.docx（14页珍藏版）》请在冰点文库上搜索。

CSS样式表学习手册.docx

CSS样式表学习手册

CSS样式表

学习手册

什么是样式表

样式表又称为CSS样式表，CSS是CascadingStyleSheet的缩写。

译作「层叠样式表单」。

是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

样式表的作用

CSS样式表是一种网页内容的格式化技术，用于对网页显示内容进行效果装饰，它可以控制HTML中的几乎所有标记或者对其进行输出格式的重新设定，并且CSS可以将所修改的设定储存成一个独立的文件，提高其复用性。

CSS不仅可以控制网页的输出格式，还可以控制其他的输出终端，常见的电视机，显示器，投影仪等均可以使用CSS进行控制（CSS2具有该功能）。

样式表的定义规则及其使用规则

CSS样式表的定义规则有3种：

1.直接对HTML文件内所使用的标签进行样式修改

应用范围：

对某个具体的标签进行临时样式的修改，应用于该标签

格式：

<标签名style="属性名1:

属性值1;属性名2:

属性值2;……属性名n:

属性值n;">

2.在HTML文件内部的文件头定义处对标签样式进行总体定义

应用范围：

对某个网页中的某种标签进行样式的修改，应用于本网页内

格式：

标签名1{

属性名1:

属性值1;

属性名2:

属性值2;

……

}

标签名2{

属性名1:

属性值1;

属性名2:

属性值2;

……

}

……

标签名N{

属性名1:

属性值1;

属性名2:

属性值2;

……

}

3.将对标签样式的重定义制作成独立的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文件内部的文件头内定义的样式讲在使用到该标签时自动应用其定义效果，无需再做其他操作

3.使用独立制作的CSS样式表文件（*.css），讲该样式定义引入HTML文件的方式有如下两种:

●在标签内使用标签导入外部定义的CSS样式表文件

●使用CSS规则"@import"标记来导入样式表单；

样式表的冲突问题

由于CSS样式表的定义规则不止一种，因此当某个标记CSS样式表的定义出现冲突时，多种相同属性的定义将出现冲突问题；此外当多种定义规则出现时，引用效果也讲出现冲突，下面列举出各种冲突的处理规则

※定义冲突：

1.HTML文件内部定义之间出现冲突

使用时定义位置靠后的将取代前面定义的属性，成为最终定义的属性

2.CSS外部定义同一个.css文件内定义之间出现冲突

（同上）

※引用冲突：

1.HTML文件内部定义与CSS外部定义.css文件之间出现冲突

引用时HTML文件内部定义的样式将取代CSS外部定义文件内的样式

2.CSS外部定义的多个.css文件之间出现冲突

style1.css

body{

color:

red;

}

style2.css

body{

color:

blue;

}

引用时：

●若都使用标签导入，则后导入的将取代先导入的，成为最终样式

●若都使用@import语法导入，则后导入的将取代先导入的，成为最终样式

●若使用@import语法和标签分别导入，则语法顺序定义位置在后面的将取代语法顺序定义位置在前面的，成为最终样式

或：

3.多个标记定义同一内容而引发的引用冲突

●外层标签与内层标签定义冲突时，内层标签样式将覆盖外层标签样式效果

红色

蓝色

green;">蓝色

green;">绿色

●具有样式的标签嵌套不规则冲突时，距离被修饰内容进的样式定义其作用

红色

蓝色

总：

具有相同样式修饰，不同样式值的标签距离被修饰内容近标签的样式格式起作用

4.当CSS对某个标签进行定义时，基于HTML默认标签使用的值都是默认设定，此时优先使用CSS定义规则，否则CSS定义就毫无意义了。

选择符

选择符即进行CSS样式表设定时的基础符号，用于定义被CSS样式表修饰的标记符号，共有四种类型，如下：

1.类型选择符

以标签作为选择符

p{color:

blue;}

类型选择符

2.包含选择符

以被某个对象E包含的F作为选择符

pb{color:

blue;}

包含选择符

非包含选择符

非包含选择符

3.ID选择符

以对象的唯一标识符的ID作为选择符

#idselect{color=red;}

ID选择符
非ID选择符

4.类选择符

以对象的class属性作为选择符

.class1{color=red;}

.class2{color=blue;}

class1类选择符

class2类选择符

非类选择符

5.选择符分组

将同样的定义应用于多个选择符，可以将选择符以逗号分隔的方式划分为组

p,b,i{color:

blue;}

选择符分组效果

选择符分组效果

样式表属性列表

CSS样式表通过设定不同标记的不同属性值达到修改外观效果的目的，因此属性值即显的尤为重要，具体设定参看文件css.chm中的属性一节。

伪类

CSS样式表中常用的伪类有4种，如下

1.:

link

设置对象在未被访问前的样式表属性。

默认值由浏览器决定。

对于无href属性的对象，此伪类不发生作用。

例如：

link{font-size:

14pt;text-decoration:

underline;color:

blue;}

2.:

hover

设置对象在其鼠标悬停时的样式表属性。

在CSS1中此伪类仅可用于对象。

对于无href属性（特性）的对象，此伪类不发生作用。

在CSS2中此伪类可以应用于任何对象。

例如：

hover{font-size:

14pt;text-decoration:

underline;color:

blue;}

hoverspan{color:

red;}

3.:

active

设置对象在被用户激活（在鼠标点击与释放之间发生的事件）时的样式表属性。

在CSS1中此伪类仅可用于对象。

对于无href属性（特性）的对象，此伪类不发生作用。

在CSS2中此伪类可以应用于任何对象。

并且:

14pt;text-decoration:

underline;color:

blue;}

4.:

visited

设置对象在其链接地址已被访问过时的样式表属性。

默认值由浏览器决定。

定义网页过期时间或用户清空历史记录将影响此伪类的作用。

对于无href属性（特性）的a对象，此伪类不发生作用。

例如：

visited{font-size:

14pt;text-decoration:

blue;}

first-letter{sRules}

设置对象内的第一个字符的样式表属性。

此伪对象仅作用于块对象。

内联对象要使用该伪对象，必须先设定对象的height或width属性，或者设定position属性为absolute，或者设定display属性为block。

在此伪类中配合使用font-size属性和float属性可以制作首字下沉效果。

例如：

pa:

first-letter{color:

green}

div:

first-letter{color:

left;}

内联对象要使用该伪对象，必须先设定对象的height或width属性，或者设定position属性为absolute，或者设定display属性为block。

如果未强制指定对象的width属性，首行的内容长度可能不是固定的。

例如：

pa:

first-line{color:

green}

div:

16px;}

@import

@import url（url） sMedia;

参数：

url:

　使用绝对或相对地址指定导入的外部样式表文件。

sMedia:

　指定设备类型。

指定导入的外部样式表及目标设备类型。

该规则必须在样式表头部最先声明。

并且其后的分号是必需的，如果省略了此分号，外部样式表将无法正确导入，并会生成错误信息。

导入的外部样式表中的定义将被HTML文本中的同名定义覆盖。

例如

@page

语法格式：

@page label pseudo-class {sRules}

label:

sRules:

页面容器包括页面内容区域和内容区域外围的边空补白区域。

例如

@pagethin:

first{size:

3in8in}

@media

语法格式：

@media sMedia {sRules}

sMedia:

sRules:

12pt;}

8pt;}

blue!

1in=2.54cm=25.4mm=72pt=6pc

all

print

screen

展开阅读全文