1、南邮吴江学院*网页制作与设计,网页制作与网站设计,20062007第二学期,南邮吴江学院*网页制作与设计,第6章 层叠样式表,CSS（Cascading Style Sheets）层叠样式表它的作用是精确定义页面中各元素以及页面的整体样式，使对HTML语言的补充。,南邮吴江学院*网页制作与设计,CSS 概述,CSS不仅可以控制一篇文档中的文本格式，而且还可以控制多篇文档的文本格式。因此使用CSS 样式表定义页面文字，将会使工作量大大减小。利用DW可以不用了解CSS复杂的繁琐的语法。就可以创建出具有专业水准的CSS样式表。,南邮吴江学院*网页制作与设计,CSS分类,CSS分类 嵌入式：在独立的文
2、档用CSS样式 外部链接式：使用外部独立的CSS文件存放定义。内联式：直接在某标记后面添加样式代码,南邮吴江学院*网页制作与设计,嵌入式,代码： 仅在该文档语法格式：在网页头中输入如下语句 style type=“text/css“ !- CSS语句 - /style,南邮吴江学院*网页制作与设计,外部链接式,链接一个外部的CSS样式文件语法格式：在网页头中加入以下语句 link href=“mycss.css“ rel=“stylesheet“ type=“text/css“,南邮吴江学院*网页制作与设计,内联式,村上春树,南邮吴江学院*网页制作与设计,css的类型有三种：,1）重定义HTM
3、L标签：为HTML标识符重新定义格式化 2）自定义样式：可以将自定义的样式应用于任何文本。 3）使用CSS选择器：专用于控制链接的显示效果，共有4种选择器：,南邮吴江学院*网页制作与设计,a:link（没有接触过的链接）：用于定义了链接的常规状态。这种链接状态是基本的，推荐至少要定义这种链接。 a:hover（鼠标放在链接上的状态）：用于产生视觉效果。推荐“a:hover”链接颜色使用红色，能产生极好的视觉效果。 a:visited（访问过的链接）：用于阅读文章，能清楚的判断已经访问过的链接。颜色要和普通文本的链接和其它状态颜色不同。多用于以内容为主的网站。 a:active（在链接上按下鼠标
4、时的状态）：用于表现鼠标按下时的链接状态。,南邮吴江学院*网页制作与设计,典型CSS代码,南邮吴江学院*网页制作与设计,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表示段落首行的缩
5、进的多少 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层叠样式表分为几类？,
