《网页编程技术第3章css.ppt》由会员分享，可在线阅读，更多相关《网页编程技术第3章css.ppt（80页珍藏版）》请在金锄头文库上搜索。
1、通过本章学习，应该掌握以下内容：通过本章学习，应该掌握以下内容：1.什么是什么是CSS2. CSS样式和常用的样式和常用的selector3.在网页中使用在网页中使用CSS的方法的方法4. CSS的各种属性的各种属性第第3章章 在网页中使用在网页中使用CSS样式样式 第第3章章 在网页中使用在网页中使用CSS样式样式l3.1 CSS简介简介l3.2 CSS样式样式l3.3 在网页中使用在网页中使用CSS的方法的方法l3.4 CSS3.4 CSS属性属性3.1 CSS简介简介 CSSCSS（Cascading Cascading Style Style Sheet)Sheet)层层叠叠样样式式表
2、表，它它是是一一种种格格式式化化网网页页的的标标准准方方式式，它它通通过过设设置置CSSCSS属属性性使使网网页页元元素素获获得得各各种种不不同同效效果果。CSSCSS不不是是一一种种程程序序设设计计语语言言，而而只只是是一一种种用用于于网网页页排排版版的的标标识识性性语语言言，是对现有是对现有HTMLHTML语言功能的补充和扩展。语言功能的补充和扩展。 CSSCSS的的主主要要功功能能是是通通过过对对HTMLHTML选选择择器器进进行行设设定定，来来实实现现对对网网页页中中的的字字体体、字字号号、颜颜色色、背背景景、图图像像等等其其他他元元素素的的控控制制，使使网网页页能能够够完完全全按按照
3、照设设计计者者的的要要求求来显示。来显示。 3.1.1 CSS的特点的特点l将格式和结构分离l控制页面布局l制作体积更小下载更快的网页l将许多网页同时更新l浏览器成为更友好的界面3.1.2 在网页中使用在网页中使用CSS的方式的方式q在标记符中直接嵌套样式信息(内嵌) HTML 标记符的 style 属性q在STYLE标记符中定义样式信息(插入) STYLE 标记符 样式定义 q链接外部样式表中的样式信息(引入)LINK 标记符q优先级内嵌插入引入浏览器缺省设置 3.2 CSS样式样式 3.2.1 CSS样式表组成样式表组成 3.2.2 几种常用的几种常用的selector l CSSCSS的
4、的定定义义由由三三部部分分构构成成：选选择择符符selectorselector、属属性性propertyproperty和属性值和属性值valuevalue。其基本格式如下：其基本格式如下： selectorpropertylselectorpropertyl：valuelvaluel；property2property2：value value 2 2； selectorselector（选择符）表示需要应用样式的标签选择符）表示需要应用样式的标签(可以是可以是HTML的标签的标签,也可以是自己定义的标签也可以是自己定义的标签)propertyproperty表表示示由由CSSCSS标标准
5、准定定义义的的样样式式属属性性，valuevalue表表示示样式属性的值。样式属性的值。 3.2.1 CSS样式表组成样式表组成 如:h1 font-family:宋体;font-style:italic;color: red; 3.2.2 几种常用的几种常用的selector l HTMLHTML标标记记符符是是最最典典型型的的selectorselector类类型型，网网页页设设计计者者可可以以为为某某个个或或某某些些具具体体的的HTMLHTML元元素素应应用用样样式式定定义义。如：如： BODYcolorBODYcolor：blackblackl 如如果果属属性性的的值值是是多多个个单单
6、词词组组成成的的，必必须须在在值值前前加加上上双双引引号号。如如果果需需要要对对一一个个selector指指定定多多个个属属性性时时，应使用分号将所有的属性和值分开。如：应使用分号将所有的属性和值分开。如： p font-family: sans serif;font-weight:bold 1HTML标记符标记符selector l 使使用用CSS的的标标记记符符设设置置CSS样样式式的的方方法法,可可以以对对HTML的的同同一一类类型型的的标标记记元元素素设设置置统统一一的的样样式式;使使用用class类类选选择择符符和和ID选选择择符符则则可可以以对对同同一一类类型型的的的的标标记记元元
7、素素设设置置不不同同的的样样式式,以以及及为为不不同同类类型型的的标标记记元元素素设置相同的样式。设置相同的样式。l class类选择符格式如下：类选择符格式如下： selector.classname property：value； l可可以以使使用用任任何何名名称称命命名名类类，但但通通常常使使用用具具体体含含义义的的名称。名称。 2用户定义的类用户定义的类selector .myh1 font-family:宋体; font-size:50pt; color:blue; H2.s1color: red类选择符.myh1font-family:宋体;font-size:50pt;color
8、:blue;通过类定义的格式 myh1没有通过类定义的格式 myh1这个p标签使用了类定义的格式 myh1 运行效果见：类选择符的使用 3用户定义的用户定义的ID selector 当当网网页页设设计计者者想想在在整整个个网网页页或或几几个个页页面面上上多多处处以以相相同同样样式式显显示示标标记记符符时时，除除了了使使用用类类定定义义一一个个通通用用类类样样式式以以外外，还还可可以以使使用用IDID定定义义样样式式。IDID选选择择符符的的应应用用和和类选择符类似，只要把类选择符类似，只要把CLASSCLASS换成换成IDID即可。即可。 要要将将一一个个IDID样样式式包包括括在在样样式式定
9、定义义中中，应应用用一一个个# #号号作为作为IDID名称的前缀，如下所示：名称的前缀，如下所示： # #IDnamepropertyIDnameproperty：valuevalue 定定义义了了IDID样样式式后后，需需要要在在引引用用该该样样式式的的标标记记符符内内使用使用idid属性。属性。 #red color:red; #green color:green; 这个段落是红色。 这个段落是绿色。 注意注意：id 属性只能在每个 HTML 文档中出现一次。那么如何使用IDSelector为多个元素使用相同的格式呢？ l单独的选择器单独的选择器#sidebar border: 1px d
10、otted #000; padding: 10px; 根据这条规则，id 为 sidebar 的元素将拥有一个像素宽为1px的黑色点状边框，同时其周围会有 10 个像素宽的内边距（padding，内部空白）。老版本的 Windows/IE 浏览器可能会忽略这条规则，除非你特别地定义这个选择器所属的元素：div#sidebar border: 1px dotted #000; padding: 10px; l举例举例 ：ID选择符用法1.htmll一个选择器，多种用法一个选择器，多种用法 即使被标注为 sidebar 的元素只能在文档中出现一次，这个 id 选择器作为派生选择器也可以被使用很多次
11、：#sidebar p font-style: italic; text-align: right; margin-top: 0.5em; #sidebar h2 font-size: 1em; font-weight: normal; font-style: italic; margin: 0; line-height: 1.5; text-align: right; l举例举例 ：ID选择符用法2.html 可可以以单单独独对对某某种种存存在在包包含含关关系系的的元元素素定定义义样样式式表表，例例如如元元素素1里里包包含含元元素素2，可可以以只只对对在在元元素素1里里的的元元素素2定义，对
12、单独的元素定义，对单独的元素1或元素或元素2无定义，例如：无定义，例如：TABLE Afont-size：10px 使使用用上上规规则则后后，在在表表格格内内的的链链接接改改变变了了样样式式，文文字字大大小小为为10像像素素，而而表表格格外外的的链链接接的的文文字字仍仍为为默默认认大大小。小。 4包含包含selector /派生选择器派生选择器 (css2)l下面是使用包含选择器进行的样式定义:strong color: red; h2 color: red; h2 strong color: blue; l下面是它施加影响的 HTML： The strongly emphasized wor
13、d in this paragraph isred. This subhead is also red. The strongly emphasized word in this subhead isblue. 怎么样将CSS应用到HTML文档中呢?l有四种方法(1)在HTML文档的标签内嵌入CSS的定义(2)使用标签链接进来(3)使用CSS的import 标签导入进来(4)在HTML文件中直接加入3.3 在网页中使用在网页中使用CSS 3.3.1 在标记符中直接嵌套样式信息在标记符中直接嵌套样式信息 (内嵌）内嵌） 在在标标记记符符中中直直接接嵌嵌套套样样式式信信息息又又称称为为“局局部部引
14、引用用”，即即将将样样式式直直接接嵌嵌套套在在HTML标标记记里里使使用用的的。用用这种方法，可以很简单的对某个元素单独定样式。这种方法，可以很简单的对某个元素单独定样式。 使使用用style属属性性可可以以在在HTML标标记记符符中中直直接接嵌嵌入入样样式定义，如下所示：式定义，如下所示： 内嵌样式表示例离离原上草,一岁一枯荣。野火烧不尽，春风吹又生。远方侵古道，晴翠接荒城。又送王孙去，萋萋满别情 效果演示：内嵌样式表示例 如如果果能能将将同同类类的的样样式式都都统统一一定定义义，然然后后再再具具体体应应用用于于网网页页中中的的元元素素，那那么么就就能能体体现现出出CSS的的优优越越性性了了
15、。实实际际上上，这这正正是是CSS应应用用于于网网页页的的最最常常用用方方式式，即即在在HEAD标标记记符符内内使使用用STYLE标标记记符符，然然后后在在STYLE标标记记符符中中定定义义样样式式。这这种种应应用用方方式式又又称称“内内部部引引用用”。 定义样式的方式为：定义样式的方式为： selector property l：value l；property 2：value 2； 其其中中，selector表表示示样样式式作作用用的的对对象象，property和和value则表示相应则表示相应CSS属性和值的配对。属性和值的配对。 3.3.2 在在STYLE标记符中定义样式信息（内部引用
16、）标记符中定义样式信息（内部引用） first通过类定义的格式 myh1 3.3.3 引用外部样式表中的样式信息（外部引用）引用外部样式表中的样式信息（外部引用） 在在STYLESTYLE标标记记符符中中定定义义样样式式对对于于单单独独网网页页的的格格式式设设置置和和维维护护很很有有效效，但但如如果果在在一一个个大大网网站站中中，为为每每个个页页面面都都定定义义类类似似的的样样式式，显显然然又又是是效效率率不不高高的的，这这时时最最好好的的办办法法就就是是将将重重复复在在多多个个网网页页中中使使用用的的样样式式放放在在外外部部样样式式表表文文件件中中，然然后后通通过过链链接接的的方方式式引引用
17、用其其中中的的样样式式。链链接接式式样样式式的的优优点点很很明明显显，网网页页设设计计者者可可以以在在一一个个链链接接的的CSSCSS文文件件上上作作修修改改，然然后后所所有引用它的网页都会自动更新。有引用它的网页都会自动更新。l 引引用用链链接接外外部部样样式式表表中中的的样样式式信信息息又又称称为为“外外部部引引用用”。外外部部引引用用又又可可以以分分为为链链入入外外部部样样式式表表和和导导入入外外部样式表部样式表两类。两类。l 链链入入外外部部样样式式表表是是把把样样式式表表保保存存为为一一个个样样式式表表文文件件，然然后后在在页页面面中中用用LINKLINK标标记记符符链链接接到到这这
18、个个样样式式表表文文件件，这个这个LINKLINK标记符必须放到页面的标记符必须放到页面的HEADHEAD区内。区内。l 导导入入外外部部样样式式表表是是指指在在内内部部样样式式表表的的STYLE里里导导入一个外部样式表，导入时用入一个外部样式表，导入时用import。 l 导导入入外外部部样样式式表表输输入入方方式式比比链链入入外外部部样样式式表表更更有有优优势，实质上它相当于存在内部样式表中。势，实质上它相当于存在内部样式表中。 1、使用 标签导入外部的CSS文件l首先 要建立 将CSS 定义的内容 存成一个单独的 css 文件.l然后在网页的中用 将css文件导入.步骤1：新建mycss
19、.css#myh1font-family:宋体;font-size:50pt;color:blue;步骤2：编写HTML文件，并用LINK标记导入CSS文件html用LINK标签导入CSS定义通过ID定义类格式 myh12、使用import标签导入#myh1font-family:宋体;font-size:50pt;color:blue;步骤步骤1：mycss.css步骤2：编写HTML文件，并用import导入l格式是： import url(“mycss.css”) l例如：用import标签导入CSS定义 import url(mycss.css)/还可以有其他的CSS样式定义 通过类定
20、义格式 myh1CSS提供的5大类属性l(1) 字体属性l(2) 颜色和背景属性l(3)区块属性l(4)分级属性l(5)鼠标属性l(6)滤镜效果3.4 CSS属性属性l3.4.1 字体属性字体属性l3.4.2 文本属性文本属性l3.4.3 颜色与背景属性颜色与背景属性 l3.4.4 布局属性布局属性l3.4.5 定位和显示属性定位和显示属性l7.4.6 鼠标样式属性鼠标样式属性l7.4.7 列表样式属性列表样式属性l7.4.8 CSS滤镜滤镜 字字体体属属性性用用于于控控制制网网页页中中的的文文本本的的字字符符显显示示方方式式，例例如如控控制制文文字字的的大大小小、粗粗细细以以及及使使用用的的
21、字字体体等等。CSSCSS中中的的字字体体属属性性包包括括字字体体族族科科（font-familyfont-family）、字字 体体 风风 格格 （ font-stylefont-style） 、 字字 体体 变变 形形 （ font-font-variantvariant）、字字体体加加粗粗（font-weightfont-weight）、字字体体大大小小（font-sizefont-size）五五个个属属性性。其其中中字字体体族族科科和和字字体体大大小属性是比较常用的。小属性是比较常用的。 3.4.1 字体属性字体属性 HTML中的字体格式设置回顾中的字体格式设置回顾1、2、斜体(斜体)
22、黑体(黑体)打字机字体程序变量xyzHTML指令例1使用键盘字符时a%#!()&*1字体族科属性（字体族科属性（font-family） 字字体体族族科科属属性性相相当当于于HTML中中FONT标标记记符符的的face属属性性，用用于于设设定定文文字字的的字字体体，当当所所设设定定的的字字体体在在用用户户端没有时会用浏览器默认的字体代替。端没有时会用浏览器默认的字体代替。 该该样样式式允允许许指指定定多多种种字字体体供供选选择择，用用逗逗号号进进行行分分隔隔即即可可。在在客客户户端端会会根根据据字字体体指指定定的的优优先先级级（先先后后顺顺序序）寻找字体予以显示。比如：寻找字体予以显示。比如：
23、 font-family：华文行楷，楷体华文行楷，楷体-GB2312，宋体，宋体实例实例: font-family2字体风格属性（字体风格属性（font-style） 字字体体风风格格属属性性的的值值有有三三种种：普普通通（normal），斜斜体（体（italic）和倾斜（和倾斜（oblique），），默认值为默认值为normal。实例实例: font-style3字体变形属性（字体变形属性（font-variant） 字字体体变变形形属属性性有有普普通通（normal）和和小小型型大大写写字字母母（small-caps）两两个个值值，默默认认值值为为normal。当当使使用用small-ca
24、ps属属性性时时，文文字字一一律律转转换换为为大大写写字字母母，并并且且都都会会以以一一种种大大小小介介于于普普通通小小写写字字母母和和大大写写字字母母之之间间的的字体显示。字体显示。实例实例: font-variant 字字体体加加粗粗属属性性用用于于设设定定字字体体的的粗粗细细，跟跟HTML中中的的B标标记记符符效效果果相相似似。它它的的取取值值可可以以是是以以下下值值中中的的一一个个：normal、bold、bolder、lighter、100、200、300、400、500、600、700、800、900，默默认认值值为为normal，表表示示正正常常粗粗细细；bold表表示示粗粗体体
25、。也也可可以以使使用用数数值值，范范围围为为100至至900，对对应应从从最最细细到到最最粗粗。normal相相当当于于400，bold相相当当于于700。如如果果使使用用bolder或或lighter，则则表示相对于上一级元素中的字体更粗或更细。表示相对于上一级元素中的字体更粗或更细。 实例实例: font-weight 4字体加粗属性（字体加粗属性（font-weight） 字体大小属性用来定义字体的大小。字体大小属性用来定义字体的大小。 可可以以使使用用长长度度单单位位分分为为绝绝对对单单位位磅磅（pt）、毫毫米米（mm）、厘厘米米（cm）、帕帕（pc）、英英寸寸（in）和和相对单位相对
26、单位像素（像素（px）、em、ex、%。实例实例: font-size5字体大小属性（字体大小属性（font-size） 字体属性例子例1:字体属性3.4.2 文本属性文本属性l文本属性包括文字间距、对齐方式、上标、下标、排列方式、首行缩进。 HTML中的文本格式设置回顾中的文本格式设置回顾1、2、这是H4标题字体!l 文文字字间间隔隔属属性性定定义义一一个个附附加加在在单单词词之之间间的的间间隔隔数数量量。该该值必须符合长度格式，允许使用负值。值必须符合长度格式，允许使用负值。l 需需要要特特别别说说明明的的是是，该该属属性性是是针针对对英英文文单单词词的的间间隔隔，而而不不是是中中文文的的
27、文文字字间间隔隔，中中文文的的文文字字间间隔隔应应该该用用下下面面讲讲到到的的letter-spacing。l语法格式如下：语法格式如下： l举例举例: wordspacing 1文字间隔属性文字间隔属性(word-spacing) l字字母母间间隔隔属属性性定定义义一一个个附附加加在在字字符符之之间间的的间间隔隔数数量量（间间距距）。它它的的取取值值可可以以是是normal或或具具体体的的长长度度值值（该该值值必必须须符符合合长长度度格格式式），也也可可以以是是负负值值。默默认认值值为为normal，表示浏览器根据最佳状态调整字符间距。表示浏览器根据最佳状态调整字符间距。l语法格式如下：语法
28、格式如下：lletter-spacing 属属性性与与 word-spacing 的的区区别别在在于于:字字母母间间隔修改的是字符或字母之间的间隔。隔修改的是字符或字母之间的间隔。 l举举例例:letter-spacing简简单单例例子子 letter-spacing复复杂杂例例子子 2字母间隔属性字母间隔属性(1etter-spacing) l纵纵向向排排列列属属性性可可以以用用来来定定义义一一个个内内部部元元素素的的纵纵向向位位置置，相对于它的上级元素或者相对于元素行。相对于它的上级元素或者相对于元素行。l该该值值可可以以是是一一个个相相对对于于元元素素行行高高属属性性的的百百分分比比，它
29、它会会在在上上级级基基线线上上增增高高元元素素基基线线的的指指定定数数量量。允允许许使使用用负负值值，也也可可以以是是一一个个关关键键字字。该该属属性性对对于于图图像像设设置置特特别别有用。有用。l 语法格式如下：语法格式如下： lvertical-align的取值见以下的例子的取值见以下的例子l 举例举例:vertical-align 3纵向排列属性纵向排列属性(vertical-align) l 指指定定了了所所选选元元素素的的对对齐齐方方式式（类类似似于于HTML标标记记符符的的align属属性性），取取值值可可以以是是：left 、right、center、justify，分分别别表表
30、示示左左对对齐齐、右右对对齐齐、居居中中对对齐齐和和两两端端对对齐齐。此此属属性性的的默默认认值值依依浏浏览览器器的的类类型型而而定定。若若浏浏览览器器不不支持支持justify属性。则使用左对齐或者右对齐代替。属性。则使用左对齐或者右对齐代替。 l语法格式如下：语法格式如下： l举例举例: text-align 4文本排列属性文本排列属性(text-align) l文文本本缩缩进进属属性性可可以以应应用用于于块块级级元元素素（P，H1等等），以以定定义义该该块块级级元元素素第第一一行行可可以以接接受受的的缩缩进进数数量量。该该值值必必须须是是一一个个长长度度或或者者百百分分比比。若若为为百百
31、分分比比则则视视上上级级元元素素的的宽宽度度而而定定。该该属属性性常常用用于于段段落落的的缩缩进进。此此属属性性的的默默认值是认值是0，表示无缩进。，表示无缩进。 l语法格式如下：语法格式如下： l举例举例: text-indent 5首行缩进属性首行缩进属性(text-indent) 例如例如:样式定义为样式定义为:div width: 500px; p text-indent: 20%; 作用于代码块作用于代码块: this is a paragragh l 文文字字修修饰饰属属性性可可以以对对特特定定选选项项的的文文本本进进行行修修饰饰，它它的的取取值值为为：none、underline
32、、overline、line-through、blink，默认值为默认值为none，表示不加任何修饰。表示不加任何修饰。lunderline表示添加下划线；表示添加下划线；loverline表示添加上划线；表示添加上划线；lline-through表示添加删除线；表示添加删除线；lblink表示添加闪烁效果。表示添加闪烁效果。 注注: 另外另外IE浏览器并不支持文字修饰属性值浏览器并不支持文字修饰属性值blink（闪烁）。闪烁）。 l语法格式如下：语法格式如下：l例如例如: text-decoration 修饰超级链接修饰超级链接 6文字修饰属性（文字修饰属性（text-decoration）
33、 行行高高属属性性决决定定了了相相邻邻行行之之间间的的间间距距。其其取取值值可可以以是是数数字、长度或百分比，默认值是字、长度或百分比，默认值是normal。当当以以数数字字指指定定值值时时，行行高高就就是是当当前前字字体体高高度度与与该该数数字字相相乘乘的倍数。的倍数。如果指定具体的长度值，则行高为该值。如果指定具体的长度值，则行高为该值。如如果果用用百百分分比比指指定定行行高高，则则行行高高为为当当前前字字体体高高度度与与该该百百分分比相乘。该属性不允许使用负值。比相乘。该属性不允许使用负值。 语法格式如下：语法格式如下： 举例举例: line-height1 line-height2 7
34、行高属性行高属性 (line-height) l 文文本本转转换换属属性性用用于于转转换换文文本本，取取值值为为：capitalizecapitalize、uppercaseuppercase、lowercaselowercase、nonenone，默默认认值值是是nonenone表表示示使使用原始值。用原始值。capitalizecapitalize值值表表示示所所选选元元素素中中文文本本的的每每个个单单词词的的首首字母以大写显示；字母以大写显示；uppercaseuppercase值表示所有的文本都以大写显示；值表示所有的文本都以大写显示；lowercaselowercase值表示所有文本
35、都以小写显示。值表示所有文本都以小写显示。l 语法格式如下：语法格式如下： l举例举例: text-transform 8文本转换属性文本转换属性(text-transform) 9. white-space 属性属性(了解了解) l通过使用该属性，可以影响浏览器处理字之间和文本行之间的空白符的方式。l实例: white-space-normal white-space-nowrap 简单的导航按钮 使用列表实现导航 IE 7 以及更早版本的浏览器不支持该值 l文本属性综合 10文本属性综合举例文本属性综合举例l background属性是一个组合属性，可用于同时设置属性是一个组合属性，可用于
36、同时设置background- color、background- image、background-attachment、background-position、background-repeat等背景属性。等背景属性。l 表示组合属性时，设置的先后顺序是表示组合属性时，设置的先后顺序是background-color, background-image, background-repeat, background-attachment, background-position。 l语法语法:body background: #00FF00 url(bgimage.gif) no-repea
37、t fixed top; l实例实例: background 3.4.3 颜色与背景属性颜色与背景属性 1background属性属性 2background-color属性属性 l这个属性为这个属性为HTML元素设定背景颜色，元素设定背景颜色，相当于相当于HTML中中bgcolor属性。属性。l例如例如:body background-color:#99FF00; l 用用于于设设置置HTML元元素素的的背背景景图图案案，取取值值为为url或或none。默默认认值值为为none，即即没没有有背背景景图图案案。该该属属性性相相当当于于HTML中中BODY标标签签的的background属属性性
38、，只只是是它它可可以定义更多元素的背景图像。以定义更多元素的背景图像。 l 语法格式语法格式: l 实例实例: background-image 3background-image属性属性 4background-attachment属性属性l用于控制背景图像是否随内容一起滚动，用于控制背景图像是否随内容一起滚动，取值为取值为scroll、fixed。默认值为。默认值为scroll，表，表示背景图案随着内容一起滚动；示背景图案随着内容一起滚动；fixed表示表示背景图案静止，而内容可以滚动。背景图案静止，而内容可以滚动。l语法格式语法格式:bodybackground-image:url(fl
39、ower.jpg); background-attachment:fixed l 用用于于指指定定背背景景图图案案相相对对于于关关联联区区域域左左上上角角的的位位置置,该该属属性性通常指定由空格隔开的两个值通常指定由空格隔开的两个值,也可以取预定义的关键值。也可以取预定义的关键值。l 这个属性和这个属性和background-image属性连在一起使用，决定了属性连在一起使用，决定了背景图片的最初位置。背景图片的最初位置。body background-image:url(flower.jpg); background-repeat:no-repeat; background-position
40、:20px 60px 上面的代码表示背景图片的初始位置距离网页最左面上面的代码表示背景图片的初始位置距离网页最左面20px，距离网页最上面，距离网页最上面60px。实例实例: background-position-center background-position-百分比形式百分比形式 5background-position属性属性 6background-repeat属性属性 l 表示当使用背景图案时，背景图案是否重复显示。取值可以是：repeat表示在水平方向和垂直方向都重复，即像铺地板一样将背景图案平铺；repeat-x表示在水平方向上平铺；repeat-y表示在垂直方向上平铺；n
41、o-repeat表示不平铺，即只显示一幅背景图案。l格式：bodybackground-image:url(flower.jpg); background-repeat:repeat-y l实例实例: background-repeat3.4.4 布局属性布局属性l 网网页页上上的的元元素素都都有有边边框框，只只是是大大部部分分缺缺省省没没有有显显示示出出来来。CSS边边框框属属性性设设置置包包括括三三项项：边边框框颜颜色色（color）、边边框框样样式式（style）和和边边框框宽宽度度（width），而而边边框框又又包包括括四四个个方方向向：上上（top）、下下（bottom）、左左（1e
42、ft）和和右右（right）。将将边边框框设设置置和和方方向向组组合合起起来来，则则构构成成了了多多种种属属性性。如如：border-bottom、border-bottom-color、border-bottom-style、border-bottom-width、border-right-color、border-right-style、border-right-width等等等等。 l 可可以以通通过过border属属性性设设置置边边框框的的宽宽度度、样样式式和和颜颜色色，如如”border:2px ridge #ff00ff” ，也也可可以以单单独独为为border的的某某一一条条边进
43、行设置宽度、样式和颜色。边进行设置宽度、样式和颜色。 1边框属性边框属性 lcolor取值：凡是颜色值都可以lstyle取值：solid、dotted、dashed、double、groove、ridge、inset、outsetlwidth取值：thin 、medium 、thick 以及长度单位(10px)l实例:所有边框属性在一个声明之中(border)不同类型的border-style设置每一边的不同边框所有右边框属性在一个声明之中 设置上边框的颜色 设置左边框的宽度(border-left-width)l CSS边边界界属属性性包包括括边边界界margin、下下边边界界margin-
44、bottom、左左边边界界margin-left、右边界右边界margin- right以及上边界以及上边界margin-top。lmargin-top 、margin-right、和和margin-bottom、 margin-left属属性性可可以以分分别别用用来来设设置置上上、右右、下下、左左边边界界的的宽宽度度，它它们们的的取取值值可以是长度、百分比或可以是长度、百分比或auto。l长度可以是任何长度单位，比如像素、英寸、毫米或长度可以是任何长度单位，比如像素、英寸、毫米或 em l百分数是相对于父元素的百分数是相对于父元素的 width 计算的计算的l margin属属性性可可以以同
45、同时时指指定定上上、右右、下下、左左（以以此此顺顺序序）边边界界的的宽度。宽度。 如：如：Pmargin:lem 2em 3em 6em bodymargin:1em 3em l实例：实例：margin margin-left 2边界属性边界属性 l CSS填填充充属属性性包包括括填填充充padding、左左填填充充padding-left、右右填填充充padding-right、上上填填充充padding-top以以及及下下填填充充padding-bottom。l padding-left、padding-right、padding-top和和padding-bottom这这四四个个属属性性
46、用用于于设设置置左左、右右、上上、下下填充区的宽度，取值可以是长度和百分数。填充区的宽度，取值可以是长度和百分数。长度可以是任何长度单位，比如像素、英寸、毫米或长度可以是任何长度单位，比如像素、英寸、毫米或 em百分数值是相对于其父元素的百分数值是相对于其父元素的 width 计算的计算的 l padding属属性性用用于于同同时时指指定定上上、右右、下下、左左四四个个方方向向填填充充的的宽宽度度，如如Ppadding:1em 2em 3em 4em,当当然然也可以单独为某个方向进行设置也可以单独为某个方向进行设置,如如: divpadding-right:1em;padding-bottom
47、:1em3填充属性填充属性 lCSS浮动属性包括浮动属性包括float和和clear：float属属性性可可以以将将元元素素的的内内容容浮浮动动到到页页面面左左边边缘缘或或右右边边缘缘，该属性的取值为：该属性的取值为：none、left、right，默认值为默认值为none。clear 属属性性规规定定元元素素的的哪哪一一侧侧不不允允许许其其他他浮浮动动元元素素。取取值值可可以以是是：none、left、right、both，默默认认值值为为none，表表示示允允许许浮浮动动元元素素在在其其旁旁边边；left表表示示跳跳过过左左边边的的浮浮动动元元素素；right表表示跳过右边的浮动元素，示跳
48、过右边的浮动元素，both表示跳过所有的浮动元素。表示跳过所有的浮动元素。l 实例：实例：创建无表格的首页创建无表格的首页使段落的首字母浮动于左侧使段落的首字母浮动于左侧 将带有边框和边界的图像浮动于段落的右侧将带有边框和边界的图像浮动于段落的右侧 带标题的图像浮动于右侧带标题的图像浮动于右侧 4、浮动属性、浮动属性 lCSS定定位位属属性性包包括括position、top、bottom、left、right和和z-index，宽、高属性包括宽、高属性包括width和和height。position属属性性用用来来设设定定对对象象的的定定位位方方式式，它它的的取取值值为为：static（默认值
49、）、默认值）、relative或或absolute。top和和left属属性性分分别别设设定定元元素素上上边边的的垂垂直直位位置置和和设设定定元元素素左左边边的水平位置。的水平位置。width和和height属属性性可可以以控控制制元元素素的的宽宽度度和和高高度度（此此时时position属性必须指定为属性必须指定为absolute？）。？）。 z-index设定元素的折叠方式，即元素之间的堆叠效果设置。设定元素的折叠方式，即元素之间的堆叠效果设置。3.4.5 定位和显示属性定位和显示属性 1定位属性和宽高属性定位属性和宽高属性 当position取值为relative时，元素仍然为文档流的一
50、部分，只不过其位置应是相对于其原始位置进行偏移当position取值为absolute时，元素将脱离文档流进行绝对定位，有可能定为后会遮盖文档流中的部分内容l实例:定位：相对定位定位：绝对定位 使用固定值设置图像的上边缘 Z-index 低不同优先级的Z-indexdiv-width-heightl 在在CSS中中，有有两两个个属属性性可可以以控控制制元元素素的的显显示示和和隐隐藏藏，即即display属性和属性和visibility属性。属性。l display属属性性确确定定一一个个元元素素是是否否应应显显示示在在页页面面上上，它它的的取取值值有有多多个个，最最常常见见的的有有none、b
51、lock、inline和和inlineblock，但不是所有的浏览器都支持。，但不是所有的浏览器都支持。l visibility属属性性有有时时也也被被分分类类为为定定位位属属性性，用用来来控控制制定定位位的的元元素素是是否否可可见见，取取值值包包括括：visible（可可见见）、hidden（隐隐藏藏）和和inherit（继继承承其其父父元元素素的的visibility属性值，所有的属性值，所有的IE都不支持），默认值为都不支持），默认值为visible。l 实例：实例：display2显示属性显示属性 l CSS的的鼠鼠标标样样式式属属性性用用于于设设置置鼠鼠标标移移到到元元素素上上时时的
52、的鼠鼠标标形形状状。通通常常情情况况下下，鼠鼠标标呈呈指指向向左左上上方方的的箭箭头头，而而当当鼠鼠标标移移到到超超链链接接上上时时呈呈手手的的形形状状。有有了了鼠鼠标标样样式式属属性，用户就可以随意地设定鼠标的形状。性，用户就可以随意地设定鼠标的形状。l CSS的的鼠鼠标标样样式式是是通通过过cursor样样式式表表属属性性定定义义的的，格格式为：式为： cursor：属性值属性值 cursor: cursor: urlurl(路径路径/*.cur)/*.cur)l实例：实例：cursor.html3.4.6 鼠标样式属性鼠标样式属性 l列列表表样样式式属属性性用用于于设设置置页页面面中中的
53、的列列表表格格式式。CSS中中的的列列表表样样式式属属性性包包括括：list-style、list-style-type、list-style-image以以及及list-style-position。l list-style-type属属性性用用于于设设置置项项目目符符号号和和编编号号样样式式，取取值值为为：disc（默默认认值值，实实心心黑黑点点）、circle（空空心心圆圆圈圈）、square（方方块块）、decimal（十十进进制制数数1，2，3等等）、lower-roman（小小罗罗马马数数字字）、upper-roman（大大罗罗马马数数字字）、lower-alpha（小小写写字母）
54、、字母）、upper-alpha（大写字母）和大写字母）和none（无）。无）。 llist-style-image自定义列表图案：自定义列表图案： list-style-image:url(“”);llist-style-position:3.4.7 列表样式属性列表样式属性 l实例实例:在一个声明中定义所有的列表属性在一个声明中定义所有的列表属性l 滤滤镜镜（filter）是是CSS的的一一种种扩扩充充。使使用用这这种种技技术术只只用用几几句句代代码码就就可可以以把把类类似似于于Photoshop中中的的滤滤镜镜效效果果添添加到图片、文本等加到图片、文本等HTML元素上。元素上。l fil
55、ter样式表的属性定义为：样式表的属性定义为： filter：filtername（parameters） 常见的常见的filter 属性见下图属性见下图: :3.4.8 CSS滤镜滤镜 1、Alpha滤镜l该滤镜可以实现各种溶入效果。 可以利用它作出淡入淡出的效果。l语法： filter：alpha（opacity=?，finishopacity=?，style=?，startX=?，startY=?，finishX=?，finishY=?） l说明:opacity :代表图象的起始透明度。值在0100 finishopacity: 指定结束时的透明度。值0100style: 表示透明区域的
56、形状特征，其中“0” 代表统一，“1”代表线形 “2” 代表放射状，“3”代表矩形startx 表示渐变透明效果的开始X坐标。startY, finishx ,finishy l实例：alpha2、blur属性属性 lblur属性的表达式： filter：blur（add=?，direction=?，strength=?）l参数说明：add参数有两个参数值：true和false,意思是指定图片是否被改变成模糊效果。direction参数用来设置模糊的方向。模糊效果是按照顺时针方向进行的。其中0度代表垂直向上，每45度一个单位，默认值是向左的270度。角度方向的对应关系见下表： lstrengt
57、h参数值只能使用整数来指定，它代表有多少像素的宽度将受到模糊影响。默认值是5像素。 l实例： blur 3、chroma属性属性 lchroma属性可以设置一个对象中指定的颜色为透明色，它的表达式如下： filter：chroma（color=?）l实例：chroma 4、DropShadow属性属性 lDropShadow属性是为了添加对象的阴影效果的。它实现的效果看上去就像使原来的对象离开页面，然后在页面上显示出该对象的投影。看一看它的表达式： filter：dropShadow（color=?，offx=?，offy=?， positive=?） l该属性一共有四个参数： color代表
58、投射阴影的颜色。 offx和offy分别X方向和Y方向阴影的偏移量。偏移量必须用整数值来设置。如果设置为正整数，代表X轴的右方向和Y轴的向下方向。设置为负整数则相反。positive参数有两个值：true为任何非透明像素建立可见的投影，false为透明的像素部分建立可见的投影。l实例： Dropshadow 5、FlipH、FlipV属性属性 lFlip是CSS滤镜的翻转属性，FlipH代表水平翻转，FlipV代表垂直翻转。它们的表达式很简单，分别是： Filter：FlipH Filter：FlipV l实例：fliph-and-flipy6、Glow属性属性 l当对一个对象使用“Glow”
59、属性后，这个对象的边缘就会产生类似发光的效果。它的表达式如下： Filter：Glow（Color=?，strength=?） lGlow属性的参数只有两个：Color是指定发光的颜色，Strength指定发光的强度，参数值从1到255。l实例：glow7、Gray属性属性 lGray属性把一张图片变成灰度图。它的表达式很简单： Filter：Gray l实例：gray8、Invert属性属性 lInvert属性可以把对象的可视化属性全部翻转，包括色彩、饱和度和亮度值。它的表达式也很简单：lFilter：Invert l实例：invert9、Mask属性属性 lMask属性为对象建立一个覆盖于
60、表面的膜。它的表达式也很简单：Filter：Mask（Color=颜色） l只有一个Color参数，用来指定使用什么颜色作为掩膜。l注意：有了Mask属性的定义，它遮罩下的字体颜色的设置就已经失去了意义。 还有，mask属性对图片文件的支持还是不够，不能达到应该有的效果。l实例：mask10、Shadow属性属性 lShadow属性可以在指定的方向建立物体的投影。它的表达式是这样的：lFilter：Shadow（Color=?，Direction=?） lShadow有两个参数值：Color参数用来指定投影的颜色；Direction参数用来指定投影的方向,“0”代表垂直投影。l实例：shado
61、w11、Wave属性属性 lWave属性用来把对象按照垂直的波纹样式打乱。它的表达式如下： Filter：Wave（Add=True（False），Freq=频率，LightStrength=增强光效，Phase=偏移量，Strength=强度）lAdd参数有两个参数值：True代表把对象按照波纹样式打乱；False代表不打乱；lFreq参数指生成波纹的频率，也就是指定在对象上共需要产生多少个完整的波纹。l LightStrength参数是为了使生成的波纹增强光的效果。参数值可以从0到100。 lPhase参数用来设置正弦波开始的偏移量。这个值的通用值为0，它的可变范围为从0到100。这个值代表开始时的偏移量占波长的百分比。比如该值为25，代表正弦波从90度（360*25%）的方向开始。 wave. 举例12、Xray属性属性 lXray就是X射线的意思这种属性产生的效果就是使对象看上去有一种X光片的感觉。 它的表达式是：Filter：Xray l实例：xraylCss综合举例E N D
