1、1,第十章 CSS技术及其应用,2,10.1 什么是CSS 10.2设置CSS样式 10.3 如何在网页中使用CSS技术 10.4 CSS样式定义,3,10.1 什么是CSS,CSS（Cascading Style Sheet，层叠样式表）技术是一种格式化网页的标准方式，它扩展了HTML的功能，使网页设计者能够以更有效的方式设置网页格式。 单纯HTML的局限性【例10.1】 CSS技术的优越性【例10.2】 简化格式设置工作 增强网页的可维护性 加强网页的表现力（CSS样式属性提供了更多的格式设置功能。如，去掉网页中超链接的下划线；为文字添加阴影效果等）,转下一节,4,【例10.1】单纯HTM
2、L方式, HTML方式一级标题 正文部分 一级标题 正文部分,单纯HTML的局限性： 格式定义的重复 格式维护的困难（修改工作量大）,5,【例10.2】使用CSS方式,使用CSS方式h1text-align:center;font-family:楷体_GB2312一级标题 正文部分 一级标题 正文部分,定义CSS样式，将该样式应用于网页中 所有h1标记符，从而解决了HTML固有 的两大缺陷。,CSS样式定义： 选择符属性:属性值;属性:属性值,return,6,CSS的属性单位,CSS中，属性值的各种单位与HTML中有所不同 1.长度单位 cm(厘米)； mm(毫米)； in(英寸)；px(像
3、素) em(当前字体中m字母的宽度) ex(当前字体中x字母的高度) pc(皮卡)，1pc=12点 pt(点)，1pt=1/72英寸 2.百分比单位 如：pline-height:150%表示该段文字的高度为标准行高的1.5倍 可用于以下属性： 3.颜色单位 颜色名； #RGB； #RRGGBB；rgb(rrr,ggg,bbb)；rgb(rrr%,ggg%,bbb%),0255十进制数,7,百分比单位适用的属性,font-size、font background-position、backgroungd vertical-align、text-indent、line-height margin
4、、margin-top、margin-bottom、 margin-left、margin-right padding、 padding-top、 padding-bottom、 padding-left、 padding-right width,8,在Dreamweaver中所能定义的CSS样式有三种：,自定义CSS样式HTML标签样式CSS选择器样式,9,自定义CSS样式,自定义CSS样式可以对任何文本块或文本区域进行编辑且需要用户手动进行应用。,10,HTML标签样式,该样式是对现有的HTML标记进行重新定义，当创建或改变该样式时，所有应用了该样式的文本格式都会自动更新。,11,CSS选
5、择器样式,该样式是对某些特定的标记组合进行重新定义，如所有包含了特定ID属性的标记，设置完成此样式后Dreamweaver会自动应用该样式。,12,10.2设置CSS样式,创建了新的样式后，即可在“CSS样式定义”对话框中进行设置，CSS样式有8种： 类型设置 背景设置 区块设置 方框设置 边框设置 列表设置 定位设置 扩展设置,13,类型设置,14,背景设置,“背景”设置包括设置背景颜色、选择背景图像、设置背景图像是否重复及重复的方式、背景图像是否滚动、背景图像相对于应用样式元素的位置。,15,区块设置,“区块”指网页中文本、图像和层等替代元素，主要用于控制块中元素的间距和对齐方式等。,16
6、,方框设置,“方框”设置可以定义控制元素在页面上的放置方式和属性等。,17,边框设置,“边框”设置包括定义元素周围边框的样式、宽度及颜色等。,18,列表设置,“列表”设置主要用于控制列表内各项元素的属性，如项目符号类型、项目符号图像和项目符号位置。,19,定位设置,“定位”设置主要用于控制网页元素，特别是层的位置。,20,扩展设置,“扩展”设置主要用于为打印的页面设置分页和为网页元素设置视觉效果。,21,管理CSS样式,修改CSS样式 删除CSS样式 复制CSS样式 重命名层叠样式 应用CSS样式表 自定义CSS样式的应用 链接外部CSS样式,22,修改CSS样式,创建层叠样式后，可以修改样式
7、中的某些参数。,23,删除CSS样式,在“CSS样式”面板中，选择要删除的样式名称。 单击面板底部的“删除”按钮即可将样式删除。,24,复制CSS样式,复制一个已经创建完成的CSS样式，再对其参数进行修改，即可创建一个全新的CSS样式，这样可以提高工作效率。,25,重命名层叠样式,26,10.3 如何在网页中使用CSS技术,使用HTML标记符的style属性嵌套样式信息例 在部分使用标记符定义样式信息 selector属性1:value1;属性2:value2, 例 在部分使用标记符链接外部的层叠样式表文件(.css文件) 例rel：html与被链接文件的关系 type：链接文件的MIME类型
8、 href：要链接的样式表文件（*.css）,27,【例10-3】CSS样式的使用使用style属性, 使用style属性嵌套样式信息 一 代人 黑夜给了我黑色的眼睛 我却用它寻找光明 ,return,28,【例10-3】CSS样式的使用 部分使用标记符,使用style标记符嵌套样式信息 一代人 黑夜给了我黑色的眼睛我却用它寻找光明 ,/不支持的浏览器跳过此段代码,return,29,-网页源文件-链接文本样式表示例一代人黑夜给了我黑色的眼睛我却用它寻找光明-与网页源文件同一目录下的mycss.css文件- H1font-family:楷体_GB2312;text-align:center P
9、font-size:24px;text-align:center,【例10-3】CSS样式的使用 部分使用标记符,外部样式表仅仅由样式规则或声明组成。不能含有任何像或这样的HTML的标记。,return,30,样式表的优先级,如果有多个样式同时修饰一个对象，样式如果冲突，则采用高优先级样式；如果不冲突，则取叠加的样式效果。 遵循“就近优先”的原则，即，距离所修饰对象越近的样式，其优先级越高。 【例10-4】,31,【例10-4】样式表的优先级问题,Pcolor:red 黑夜给了我黑色的眼睛我却用它寻找光明-与网页源文件同一目录下的mycss.css文件- Pcolor:green,32,10.
10、4 CSS样式定义,selector属性1:value1;属性2:value2, selector表示需要应用样式的内容； 属性具体指定控制样式的某个方面，如color、 text-decoration、background、font等，CSS提供了50多个属性，通过这些属性可以控制文档格式的方方面面。 值是对应于属性的，用以说明控制样式的程度 常用的5种selector HTML选择符、关联选择符、类选择符、ID选择符、伪类,33,HTML选择符,最典型的selector类型，可应用于任何HTML标记符 语法结构： HTMLtag属性1:值1;属性2:值2; 如，将h1的颜色定义为绿色，对应
11、的CSS语句： h1color:green 可以在一个样式规则里，定义多个选择符。 tag1,tag2,tag3属性1:值1;属性2:值2;如，h1,td,divfont-size:10pt; color:red,34,关联选择符：具有上下文关系的HTML标记符,如果需要为位于某个标记符内的标记符设置特定的样式规则，则应将selector指定为具有上下文关系的HTML标记符。 如，若只想使位于H1标记符内的B标记符具有特定的属性，则应使用以下格式：H1 Bcolor:blue /*H1和B之间以空格分隔*/ 又如，P EM background: yellow ,35,用户定义的类选择符,使用
12、class为单一HTML标记符创建多个样式 相关class样式：仅应用于一个HTML标记。语法：selector.ClassName属性:值, 如，当不需要将全部的h1标记指定为绿色，仅需将特定的h1标记的颜色指定为绿色，就可以使用相关class选择符： h1.color_greencolor:green 然后在网页中需要使用该类处用class属性引用这些类： 此处标题为绿色 相关选择符可以有不同的类，因而允许同一元素有不同样式。例如，一个网页制作者也许希望视其语言环境而定，用不同的颜色显示标题 h1.color_red color: red; font-size:14pt 引用： 此处标题为
13、红色,36,用户定义的类选择符（续）,通用class样式：可以被任一HTML标记所应用。 语法：.className属性:值, 如，.blueOnecolor:blue样式表中，名为blueOne的类可以被用于任何元素。 示例： .blueOnecolor:blueBlue H1Blue Paragraph,通用class样式比相关 class样式使用更灵活,37,用户定义的ID选择符,与通用class样式功能一样，可在整个页面或几个页面上多处以相同样式显示标记符。 指定一个ID选择符时，名字前面要有指示符“#”。语法：#IDname属性:值, 例如， #yeOnecolor:yellow;
14、text-indent: 3em /*在HTML中用ID属性引用ID选择符*/ 文本黄色，缩进3em 带有ID属性的HTML元素可以使用CSS-P和JavaScript来控制其动态行为,38,伪类选择符,对于标记符，可以使用伪类的方式设置不同类型超链接的显示方式。 不同类型超链接：即，访问过的、未访问过的、激活的以及鼠标悬停于其上的4种状态的超链接。 超链接样式设置： a:link或:link（未访问过的超链接伪类selector） a:visited或:visited (已访问过的) a:active或:active（当前被选中状态，即可激活的） a:hover或:hover（当鼠标移至超链
15、接之上时） 【例10-5】,39,【例10-5】超链接伪类的使用,a:linkcolor:black;text-decoration:none /去除链接文字下划线 a:visited,a:activecolor:green;text-decoration:none :hovercolor:red;text-decoration:underline,若要使所有的超链接都具有特定效果，只需为指定样式即可， 如：a text-decoration: none 另外：伪类选择符也可以与类选择符联合使用，如：a:hover.greencolor:green 表示只有class属性为green的超链接，
16、鼠标悬停时才显示为绿色 文字。,40,CSS样式规则中的常用属性,Pfont: 12pt/16pt italic bold 宋体,隶书 ,41,42,43,44,45,LI. square list-style-type: square UL. plain list-style-type: none OL list-style-type: lower-roman /* i ii iii iv v etc. */,UL LI. x list-style-image: url(x.png) ,46,CSSP（CCS和位置设定）,CSS-P：Cascading Style Sheets Positi
17、oning 是 CSS 的一个扩展, 它可用来控制任何东西在网页上或是说在窗口中的位置 主要用在 标记上，用于控制div区域的文字、图片在HTML中的位置，即layer(“层”)。此时，一般需要给一个ID号(即名字)，以便JavaScript可以动态控制div层的位置、状态等。 如果单独使用 DIV 而不加任何 CSS-P, 那么它在网页中的效果和使 用 是一样的 。,47,CSS-P常用属性,position 决定 DIV tag 是如何放置的。 取值：relative | absolute（常用值） left 相对于窗口左边的位置 (px) top 相对于窗口上边的位置 (px) widt
18、h DIV tag 的宽度。 所有在 DIV 里的文字或HTML都在里面 height DIV tag 的高度。 这个性质很少用除非你想 Clip 层次。 z-index DIV tag 的立体位置。 值越大 DIV 的位置越高。,48,clip 给出 layer 的 clipping (可看的见的) 部分. Clip 可使得 DIV 显示为一个可以定义的很准确的方块。可以用以下的四个值来 给出这个方块的在 DIV 位置和大小。 clip:rect(top,right,bottom,left); visibility 隐蔽或展现DIV 。 取值：visible | hidden | inherit background-color DIV 背景的颜色。 layer-background-color Netscape 的 DIV 背景颜色. background-image DIV 的背景图象 layer-background-image Netscape 的 DIV 的背景图象。,49,【例10-6】CSS-P用法示例,图片、文字追随鼠标,50,Hello,
