1、第3章 CSS样式表,一、CSS概述,CSS：Cascading Style Sheets，“层叠样式表”，简称样式表，它是一种制作网页的新技术。 1997年W3C(The World Wide Web Consortium)颁布HTML4标准的同时也公布了有关样式表的第一个标准CSS1, 自CSS1的版本之后，又在1998年5月发布了CSS2版本。 W3C把DHTML(Dynamic HTML)分为三个部分来实现：脚本语言(包括JavaScript、Vbscript等)、支持动态效果的浏览器(包括Internet Explorer、Netscape Navigator等)和CSS样式表。,用
2、CSS精确的控制页面里每一个元素的字体样式、背景、排列方式、区域尺寸、四周加入边框等。 使用CSS能够简化网页的格式代码，加快下载显示的速度，外部链接样式可以同时定义多个页面，大大减少了重复劳动的工作量。,二、语法,1.CSS的定义是由三个部分构成： 选择符（selector） 属性（properties） 属性的取值（value） 基本格式如下：selector property: value选择符 属性：值 例如： body color: black,如果属性的值是多个单词组成，必须在值上加引号，比如字体的名称经常是几个单词的组合：p font-family: “sans serif“如果
3、需要对一个选择符指定多个属性时，我们使用分号将所有的属性和值分开：p text-align: center; color: red（段落居中排列；并且段落中的文字为红色）,采用分行的书写格式,例1：1.htm ptext-align: center;color: black;font-family: arial,2.引用方法,在之间,3.选择符组,把相同属性和值的选择符组合起来书写，用逗号将选择符分开，减少重复定义 如：h1, h2, h3, h4, h5, h6 color: green p, table font-size: 9pt 例：h1.htm,4.类选择符,把相同的元素分类定义不同
4、的样式，定义类选择符时，在自定义类的名称前面加一个点号。 两个不同的段落，一个段落向左对齐，一个段落居中：p.left text-align: leftp.center text-align: center 引用： 这是第一段 这是第二段 例2：2.htm,在选择符中省略HTML标记名，这样可以把几个不同的元素定义成相同的样式： .center text-align: center（定义.center的类选择符为文字居中排列） 这样的类可以被应用到任何元素上。例3：3.htm,5.ID选择符,ID参数指定了某个单一元素，用来对单一元素定义单独的样式。 定义ID选择符要在ID名称前加上一个“#”
5、号。 ID属性将匹配所有id=“intro“的元素：#introfont-size:110%;font-weight:bold;color:#0000ff;background-color:transparent,ID属性只匹配id=“intro“的段落元素：p#introfont-size:110%;font-weight:bold;color:#0000ff;background-color:transparent 引用方式：这个段落应用ID选择符,6.包含选择符,单独对某种元素包含关系定义的样式表，元素1里包含元素2，这种方式只对在元素1里的元素2定义，对单独的元素1或元素2无定义。ta
6、ble afont-size: 12px 表格内的链接改变了样式，文字大小为12象素，而表格外的链接的文字仍为默认大小。 例4：4.htm,7.样式表的层叠性,层叠性就是继承性，样式表的继承规则是外部的元素样式会保留下来继承给这个元素所包含的其他元素。div color: red; font-size:9pt这个段落的文字为红色9号字例5：5.htm,当样式表继承遇到冲突时，总是以最后定义的样式为准。 div color: red; font-size:9ptp color: blue这个段落的文字为蓝色9号字例6：6.htm,8.注释,CSS注释以“/*“ 开头，以“*/“ 结尾，如下：/*
7、 定义段落样式表 */ptext-align: center; /* 文本居中排列 */color: black; /* 文字为黑色 */font-family: arial /* 字体为arial */,三、伪类动态链接,一种特殊的类选择符，对链接在不同状态下定义不同的样式效果。selector:pseudo-class property: value（选择符:伪类 属性: 值） 伪类和类不同，是CSS已经定义好的，不能象类选择符一样随意用别的名字。 类选择符及其他选择符可以和伪类混用：selector.class:pseudo-class property: value（选择符.类:伪类
8、属性: 值）,1.锚的伪类,最常用的是4种a（锚）元素的伪类，它表示动态链接在4种不同的状态： Link：未访问的链接 Visited：已访问的链接 Hover ：鼠标停留在链接上 Active ：激活链接 例7：7.htm a:link color: #FF0000; text-decoration: none a:visited color: #00FF00; text-decoration: none a:hover color: #FF00FF; text-decoration: underline a:active color: #0000FF; text-decoration: u
9、nderline,2.伪类和类选择符,将伪类和类组合起来，在同一个页面中做几组不同的链接效果 例8：8.htm a.red:link color: #FF0000 a.red:visited color: #0000FF a.blue:link color: #00FF00 a.blue:visited color: #FF00FF这是第一组链接,定义一组链接,div.classid1 A FONT-SIZE: 10pt; COLOR: #4F94CD; TEXT-DECORATION: none div.classid2 A:hover FONT-SIZE: 10pt; COLOR: #ff
10、0000; TEXT-DECORATION: underline 超连接 ,四、如何在网页中插入CSS,链入外部样式表 内部样式表 导入外部样式表 内嵌样式,1.链入外部样式表,把样式表保存为一个样式表文件，然后在页面中标记链接到这个样式表文件，这个标记必须放到页面的区内，如下：例9：9.htm,rel：样式表以何种方式与HTML文档结合，通常设为stylesheeet，表示指定一个外部样式表,2.内部样式表,内部样式表是把样式表放到页面区里，样式表是用标记插入的。,3.导入外部样式表,指在内部样式表的里导入一个外部样式表，导入时用import ,link与import区别： import：在
11、浏览器下载HTML文件时就将样式表文件的全部内容复制到import位置处，替换该关键字 link：不进行替换，当HTML文件需要引用CSS样式文件中的某个样式时，浏览器才链接到样式表文件，读取需要的内容,4.内嵌样式,内嵌样式是混合在HTML标记里使用的，可以很简单的对某个元素单独定义样式。 内嵌样式的使用是直接将在HTML标记里加入style参数。 而style参数的内容就是CSS的属性和值，如下例：这是一个段落,五.CSS属性,1.字体属性 2.颜色和背景属性 3.文本属性 4.“容器”属性 5.鼠标属性6.滤镜属性,1.字体属性,例10：10.htm,2.颜色和背景属性,例11：11.h
12、tm,3.文本属性,例12：12.htm letter-spacing设置了字间距为1em，其中1em为一个长度单位；text-align设置了对齐方式为两端对齐；indent设置了缩进格为4em；line-height设置了行高为17pt em：相对单位，相对于实际字体的磅值来定义长度：如果现在的字体大小为12pt，那么1.5em=18pt。,4.“容器”属性,CSS的容器属性包括边距、填充距、边框和宽度、高度、浮动等属性。,例13：13.htm,（1）边距属性,Margin 设置四周边距,（2）边框属性,(3)填充距属性,填充距指的是边框与填充内容之间的距离。,例13：13.htm,Pad
13、ding 设置四周填充距,5.鼠标属性,例14.htm,如： .style1 cursor:hand ,6.滤镜属性,Alpha：透明的层次效果 Blur：快速移动的模糊效果 Fliph：水平翻转效果 Flipv：垂直翻转效果 Gray：灰度效果 Wave：波纹效果,（1）Alpha：透明的层次效果,基本语法： Filter:alpha(opacity=#,style=#) Opacity：透明度，0100，0完全透明，100不透明 Style：透明区域的形状，0统一形状，1线状，2放射状，3长方形 如： img filter:alpha(opacity=50,style=2) 例15：15.
14、htm,（2） Blur：快速移动的模糊效果,基本语法： Filter:blur(direction=#,strength=#) Direction：模糊方向，0向上，90向右，180向下，270向左 strength：模糊强度，默认5 例16：16.htm,（3）Fliph：水平翻转效果,基本语法：filter:fliph 水平翻转 例17：17.htm,（4）Flipv：水平翻转效果,基本语法：filter:flipv 垂直翻转 例18：18.htm,（5）Gray：灰度效果,基本语法：filter:gray 例19：19.htm,（6）Wave：波纹效果,基本语法：filter:wave(add=#,freq=#,lightstrength=#, phase=#,strength=#) Add：是否要把对象按照波纹样式打乱 Freq：波纹的频率 lightstrength：对波纹增强光影的效果，范围0100 Phase：设置正弦波的偏移量 Strength：振幅大小 例如： img filter:wave(add=add,freq=5,lightstrength=50,phase=90,strength=10) 例20：20.htm,
