第6章 层叠样式表.pptVIP

南邮吴江学院*网页制作与设计 网页制作与网站设计 2006~2007第二学期 第6章 层叠样式表 CSS（Cascading Style Sheets） 层叠样式表 它的作用是精确定义页面中各元素以及页面的整体样式，使对HTML语言的补充。 CSS 概述 CSS不仅可以控制一篇文档中的文本格式，而且还可以控制多篇文档的文本格式。因此使用CSS 样式表定义页面文字，将会使工作量大大减小。利用DW可以不用了解CSS复杂的繁琐的语法。就可以创建出具有专业水准的CSS样式表。 CSS分类 CSS分类 – 嵌入式：在独立的文档用CSS样式 – 外部链接式：使用外部独立的CSS文件存放定义。 –内联式：直接在某标记后面添加样式代码 嵌入式 代码：仅在该文档语法格式：在网页头中输入如下语句＜style type=text/css＞＜!--CSS语句--＞＜/style＞ 外部链接式 链接一个外部的CSS样式文件语法格式：在网页头中加入以下语句 ＜link href=mycss.css rel=stylesheet type=text/css＞ 内联式 p style=“color:red”村上春树/p css的类型有三种：　 1）重定义HTML标签：为HTML标识符重新定义格式化 2）自定义样式：可以将自定义的样式应用于任何文本。　 3）使用CSS选择器：专用于控制链接的显示效果，共有4种选择器： a:link（没有接触过的链接）：用于定义了链接的常规状态。这种链接状态是基本的，推荐至少要定义这种链接。 a:hover（鼠标放在链接上的状态）：用于产生视觉效果。推荐“a:hover”链接颜色使用红色，能产生极好的视觉效果。 a:visited（访问过的链接）：用于阅读文章，能清楚的判断已经访问过的链接。颜色要和普通文本的链接和其它状态颜色不同。多用于以内容为主的网站。a:active（在链接上按下鼠标时的状态）：用于表现鼠标按下时的链接状态。　 典型CSS代码 style type=“text/css” !- - .firstCSS{ font-family:”楷体_GB2312”; font-size:16px; color:#ff6600 background-color:#999999; background-position:center; } -- } /style P { 　text-align: left; -----------------left表示段落是居左对齐　font-size: 25pt; ------------------25pt，表示字体大小为25pt font-family: “隶书”, “宋体”; -------隶书,宋体 表示所采用的字体　letter-spacing: 3px; --------------3px就说明字间宽为3px　color:navy; -----------------------navy，则表示颜色为天蓝色　line-height:30pt; -----------------12pt表示行高为12pt text-indent: .5in; ----------------.5in表示段落首行的缩进的多少 border: solid 1pt; ----------------solid 1pt表示边框是宽度为1pt的实心边框　　 }  练习一 1、新建一个CSS样式表，要求在网页文字内容显示为9pt,行距150%,蓝色。再把这个样式表导出到网站文件夹，保存名字为wz1.css。 2、新建一个CSS样式表，要求定义在文件中，文件名为wz2.css（要求网页中文本字体为楷体，颜色为灰色,背景为浅黄色） 3、修改刚才建好的wz1.CSS样式表，要求网页中的文字颜色为红色、背景为淡灰色。　 练习二 重定义HTML标签： 设置body样式为： BODY 字体为宋体大小为18px 颜色为#333333 背景颜色为#CCCCCC 设置完后观察效果。 课后习题 1、什么是CSS样式？ 2、CSS层叠样式表分为几类？ * * * * *