网页制作案例教程-清华大学出版社-第8章-CSS样式表

1、 网页制作案例教程 毋建军 郑宝昆 郭锐 编著 清华大学出版社第8章 CSS样式表本章学习目标（知识要点）n了解CSS样式的概念n掌握CSS样式表的创建方法n掌握应用CSS样式表的方法本章学习导航nCSS不属于HTML，它属于HTML的辅助语言，是对HTML语言功能的一种扩展，用CSS可以做出美观工整令浏览者赏心悦目的网页，CSS能给网页添加许多我们想象不到的效果，本章主要介绍创建CSS样式的操作，编辑和应用CSS样式的基本操作。n本章内容在全书知识结构中所处位置如图所示 基础篇HTML篇CSS篇JavaScript篇提高篇网页设计与开发流程（AscentSys医药商务系统）网页制作基础HTM

2、L基础网页基本元素设计网页布局规划设计交互式网页表单的设计与使用利用模板和库创建网页CSS样式表使用CSS布局规划网页JavaScript网页应用Javascript概述网页中常见Flash制作Web服务器创建网站发布、测试和维护 8.1 CSS入门n8.1.1 CSS简介nCSS为Cascading Style Sheets的简写，即层叠样式表。这里的样式就是指的格式，是各种网页元素所呈现的形态，比如网页中字体的大小、颜色、图片的安排等。层叠的意思就是CSS通常被译作层叠样式表单，是用于增强控制网页样式并允许将信息与网页内容分离的一种标记性语言。CSS提供比HTML标签属性更多的特性让用户设

3、置，应用起来也相对灵活。有了CSS样式表后，许多HTML无法实现的功能均可以实现了，并且会变得简洁，容量缩小。n8.1.2 CSS基本语法n选择符属性:值;n（1）选择符n用来指定针对哪一个HTML标签应用样式表的部分，任何HTML元素都可以是一个CSS的选择符。例如，nP color: red n当中的选择符是P，规则就会选择所有标签的样式，该规则表示在段落标签里的内容为红色。n（2）声明n声明是包含在大括号中的内容，首先给出属性名，可以包括颜色、边界和字体等，然后是属性值，来给一个属性能够接受的值，加上分号之后可以指定多个样式。例如：nH1 font-size: 24pt; color:

4、green n上述语句表示标题中的字体大小为24pt，颜色为绿色。n（3）组合规则n用户通过大括号内列出声明，有时候对于同一个选择符列出了几个规则，这时候规则是可以合并起来写的，同时很多不同的选择符却具有重复的样式表声明，为了减少样式表的重复声明，组合的选择符声明是允许的。例如：nH1, H2, H3, H4, H5, H6 n color: red;n font-family: sans-serif n该规则标明H1, H2, H3, H4, H5, H6的颜色都为红色，并且字体为sans-serif。n（4）继承n实际上，所有在选择符中嵌套的选择符都会继承外层选择符指定的属性值，除非另外更

5、改。例如，一个BODY定义了的颜色值也会应用到段落的文本中。n有些情况是内部选择符不继承周围的选择符的值，但理论上这些都是特殊的。例如，上边界属性是不会继承的；直觉上，一个段落不会有同文档BODY一样的上边界值。n（5）注释n注释是用户嵌入CSS代码中的专用位，浏览器会忽略掉注释。样式表里面的注解使用C语言编程中一样的约定方法去指定。CSS的注释以字符/*开始以*/结束，两者之间的内容浏览器都会忽略掉，注解的例子如以下格式：n（6）关于单位n用CSS来指定大小的时候，在数值后面可以加上一些单位来限定，这些单位分成绝对值的单位和相对值的单位。具体描述表8-1-1。单位单位描述描述例例in英寸（i

6、nch）width：10incm厘米（centimeter）Height：1cmmm毫米（millimeter）Font-size：5mmpt磅（point）Font-size：7ptpc皮卡（pica）Font-size：1pcem相对于当前对象内文本的字体尺寸Font-size：1.5em表示为当前字符的表示为当前字符的1.5倍大小倍大小ex相对于字符高度的相对尺寸Font-size：1.5expx像素（pixel）Font-size：10px%针对其他基准的大小的百分比针对其他基准的大小的百分比Width：50%n（7）选择器nCSS中一个很重要的概念是选择器（selector），所有H

7、TML语言中的标记都是通过不同的CSS选择器进行控制的，通过它告诉CSS要它给什么东西设置格式，用户只需要通过选择器对不同的HTML标签进行控制，并赋予各种样式声明，即可实现各种效果。n选择器包括：n标签选择器n类选择器nid选择器n群组选择器n后代选择器n伪类（Pseudoclasses）n8.1.3 CSS样式和样式表类型n（1）外部文件方式n外部文件方式即将CSS写成一个文件的方式，在HTML 文档头通过文件引用来进行风格控制。CSS文件可在Dreamweaver的菜单下的styles选项来创建，相对说来，在Dreamweaver下创建比较简单；如果熟悉CSS 属性，可直接在记事本里写，

8、最后的文件扩展名为CSS。n（2）内部文档头方式 n这种方式与外部文件方式区别在于这种方式是将风格直接定义在文档头之间，而不是形成文件。n（3）直接插入式 n直接插入式很简单，只是在每个HTML标志后书写CSS属性就可以了。n8.1.4 CSS样式和样式表应用方法n（1）行内样式表n行内样式表是最简单的一种使用方式，由标签style属性支持，css规则直接写在标签内，如：nn（2）嵌入样式表（Embeded Styles）n 嵌入式样式表是一个样式集，它是网页代码的一部分，在带有标签的HTML文件内直接嵌入CSS，它与行间样式表有相似的地方，但是又不同，行间样式表的作用域只有一行，而嵌入式样式

9、表可以作用在整个文档中。n对于嵌入式样式表，使用标签，它也只能在内使用，语法格式为：nn 其他CSS规则nn（3）链接样式表（Linked Style）n链接样式表也是外部样式表，它首先定义个扩展名为.css的文件，该文件包含所有需要用到的CSS规则，不包含任何HTML代码，比如blue.css。创建样式表文件后，需要将其与要进行格式设置的HTML文件进行关联，这种添加样式表的方式是通过HTML中标签来实现的， Link标签只在HTML页面的部分出现。链接样式表的方法就是在HTML文件的部分添加如下所示代码：nnlinennn（4）输入样式表（Imported Styles）n输入外部样式表方

10、法同链接的方法类似，不同之处在于链接法不能同其他方法结合使用，但输入法则可以。注意，使用”import”导入外部的样式表文件时，需要在标签内，如：nimport url(company.css);8.2 CSS样式编辑与属性设置n8.2.1 创建CSS新样式n（1）创建样式表文件n1）从CSS样式模板中创建CSS样式表文件n单击菜单栏中“文件”|“新建”命令，打开新建文档对话框，可以选择“空白页”或“示例中的页”n点击“创建”按钮，新建了一个CSS样式表文件。n新建的CSS样式表文件与HTML文档不同的地方是：只有“代码”视图，其他视图按钮已被禁用。CSS样式表是纯文本文件，其内容将不能在浏览

11、器中查看。n编辑样式表后，单击菜单栏中“文件”|“保存”命令，则可以保存一个外部的样式表文件。n2）在CSS样式面板中创建CSS样式表文件n下面以创建一个大字的CSS为例，在CSS面板中创建CSS样式的操作为：n在CSS样式面板中，单击“新建”按钮 ，打开“新建CSS规则”对话框，如图8-2-3所示。图8-2-3 “新建CSS规则”对话框图n类（可应用于任何HTML元素）：CSS样式可应用到网页中任何范围或任何文本区域中。nID（仅应用于一个HTML元素）：CSS样式只能应用到网页中一个HTML元素。n标签（基于选择的内容）：标签样式将重新定义HTMLn符合内容（ID、上下文选择器等）：CSS

12、样式选择器样式将重新定义一些标签的特定格式或包含某特定属性的所有标签的格式。n设置选择器类型为“类”，名字为.dazin选择样式表的保存位置，输入样式表的文件名，单击“保存”按钮，保存样式表文件，同时打开“.dazi的CSS规则定义”的对话框，如图8-2-5所示。图8-2-5 “.dazi的CSS规则定义”的对话框n（2）附加外部CSS样式n网页如果需要链接或套用外部的样式表，就需要将外部的样式附加到当前网页中，操作为：n1）打开CSS样式表面板。n2）执行以下操作之一：n单击CSS面板底部的“附加样式表”按钮n或者右键单击CSS样式面板，在弹出的快捷菜单中选择“附加样式表”命令。n3）打开“

13、链接外部样式表”对话框，如图8-2-7所示。图8-2-7 “链接外部样式表”对话框图n4）点击“浏览”按扭，选择要添加的样式文件。添加的形式有两种：n“链接”：网页与样式表文件的关系是链接关系，而且不将样式表的信息导入网页中。n“导入”：将外部样式表文件的信息导入到当前网页文档中。n5）单击“确定”按钮。这样外部的CSS样式就会链接或导入到当前文档中。n（3）应用CSS样式n将设计好的CSS样式应用到网页中，具体操作为：n1）首先要打开需要链接CSS样式的文档，选中文字或图片等网页元素，执行以下操作之一：n在属性检查器中的“类”下拉列表中选择编辑好的样式，如选择“dazi”n在CSS样式面板中

14、，右击要应用的样式名称（如.dazi），在弹出的快捷菜单中选择“套用”。n2）取消样式的应用，只需在选择己应用样式的文本，在“属性检查器”中的“样式”下拉列表中选择“无”即可。n8.2.2 编辑CSS样式n对已经定义的CSS样式进行重新编辑，要在CSS样式面板中选择要编辑的样式名称，然后点击面板下方的 按钮，会弹出“CSS规则定义”对话框，在对话框中可以对CSS样式重新编辑。n8.2.3 设置CSS样式属性n（1）CSS 类型属性nFont-family为样式设置字体系列（或多组字体系列）。nFont-size定义文本大小。nFont-style指定“正常”、“斜体”或“偏斜体”作为字体样式。

15、nLine-height设置文本所在行的高度。nText-decoration向文本中添加下划线、上划线或删除线，或使文本闪烁。nFont-weight对字体应用特定或相对的粗体量。nFont-variant设置文本的小型大写字母变体。nText-transform将所选内容中的每个单词的首字母大写或将文本设置为全部大写或小写。ncolor 设置文本颜色。n（2）CSS 样式背景属性n背景颜色设置元素的背景颜色。两种浏览器都支持背景颜色属性。n背景图像设置元素的背景图像。两种浏览器都支持背景图像属性。nBackground Repeat确定是否以及如何重复背景图像。两种浏览器都支持重复属性。n

16、Background Attachment确定背景图像是固定在其原始位置还是随内容一起滚动。nBackground Position (X) 和 Background Position (Y)指定背景图像相对于元素的初始位置。n（3）CSS 样式区块属性n字母间距增加或减小字母或字符的间距。n垂直对齐指定应用此属性的元素的垂直对齐方式。n文本对齐设置文本在元素内的对齐方式。n文字缩进指定第一行文本缩进的程度。n空格确定如何处理元素中的空格。n显示指定是否以及如何显示元素。n（4）CSS 样式方框属性n宽和高设置元素的宽度和高度。 n浮动设置其它元素（如文本、AP Div、表格等）在围绕元素的哪

17、个边浮动。n清除定义不允许 AP 元素的边。n填充指定元素内容与元素边框之间的间距n全部相同为应用此属性的元素的“上”、“右”、“下”和“左”设置相同的填充属性。n边距指定一个元素的边框与另一个元素之间的间距n全部相同为应用此属性的元素的“上”、“右”、“下”和“左”设置相同的边距属性。n（5）CSS 样式边框属性n类型 设置边框的样式外观。样式的显示方式取决于浏览器。取消选择“全部相同”可设置元素各个边的边框样式。n全部相同 为应用此属性的元素的“上”、“右”、“下”和“左”设置相同的边框样式属性。n宽度 设置元素边框的粗细。两种浏览器都支持“宽度”属性。取消选择“全部相同”可设置元素各个边

18、的边框宽度。n全部相同 为应用此属性的元素的“上”、“右”、“下”和“左”设置相同的边框宽度。n颜色 设置边框的颜色。可以分别设置每条边的颜色，但显示方式取决于浏览器。取消选择“全部相同”可设置元素各个边的边框颜色。n全部相同 为应用此属性的元素的“上”、“右”、“下”和“左”设置相同的边框颜色。n设置完这些选项后，在面板左侧选择另一个 CSS 类别以设置其它的样式属性，或单击“确定”。n（6）CSS 样式列表属性n“CSS 规则定义”对话框的“列表”类别为列表标签定义列表设置（如项目符号大小和类型）。nList style type 设置项目符号或编号的外观。两种浏览器都支持“类型”。nLi

19、st style image 使您可以为项目符号指定自定义图像。单击“浏览”(Windows) 或“选择”(Macintosh) 通过浏览选择图像，或键入图像的路径。 nList style position 设置列表项文本是否换行并缩进（外部）或者文本是否换行到左边距（内部）。 n（7）CSS 样式定位属性n“定位”样式属性确定与选定的 CSS 样式相关的内容在页面上的定位方式。n可见性 确定内容的初始显示条件。如果不指定可见性属性nZ 轴 确定内容的堆叠顺序。n溢出确定当容器（如 DIV 或 P）的内容超出容器的显示范围时的处理方式。n位置指定内容块的位置和大小。n剪辑定义内容的可见部分。

20、如果指定了剪辑区域n（8）CSS 样式扩展属性n“扩展”样式属性包括滤镜、分页和指针选项。 8.3项目案例学习目标学习目标 案例描述案例描述 学习和使用CSS样式及其属性的设置。使用CSS样式表，在Dreamweaver CS5中制作医药商务管理页面案例要点案例要点 CSS样式的基本写法以及相关属性的设定。案例实施案例实施 （1）选择“开始”“所有程序”“Adobe Dreamweaver CS5”，启动Adobe Dreamweaver CS5，新建一站点，将images素材文件夹复制到本站点文件夹中。（2）选择“文件”“新建”菜单项，打开“新建文档”对话框，选择“空白页”“HTML”“无”

21、，单击“创建”按钮，新建一个网页。（3）在打开的空白文档中，选择“文件”“保存”菜单项，将文件保存在根目录下，文件名为8.3.html。（4）在页面8.3.html的文档编辑区的【标题】文本框里，将标题命名为“医药商务网站”。案例实施案例实施 （5）选择“插入”|“常用”|“表格”，插入4行1列的表格，如图8-3-2所示。案例实施案例实施 （6）插入表格后，在属性面板改变表格“宽度”属性值为760像素，对齐方式为居中对齐。（7）选中第一行，然后点击“插入”|“图像”，弹出如图8-3-3所示的选择图像源文件对话框，选择images文件夹下的top.gif。案例实施案例实施 （8）选中表格第2行，

22、并改变其高度为110像素，然后选择“修改”下拉菜单“表格”|“拆分单元格”选项，如图8-3-5所示。案例实施案例实施 （9）弹出如图8-3-6所示的对话框，将其拆分为5列，拆分后将其第一列的宽度设置为30%。案例实施案例实施 （10）在每个单元格内输入相应的文字，调整每个单元格的宽度以适应文字的宽度，如图8-3-7所示。案例实施案例实施 （11）单击CSS面板的新增CSS规则按钮 ，会弹出“新建CSS规则”对话框，如图8-3-8所示。案例实施案例实施 （12）选中如图8-3-7所示的菜单，在属性面板的“类”下拉框中选择“style”，如图8-3-10所示。案例实施案例实施 （13）将光标放在表

23、格第3行，单击“插入”|“常用”面板的插入表格按钮 ，会弹出如图8-3-12对话框，插入1行2列的表格。案例实施案例实施 （14）单击CSS面板的新增CSS规则按钮 ，会弹出“新建CSS规则”对话框，如图8-3-8所示，新建4个规则，分别为：.ju、p、a:link、.xian，这4个规则在“新建CSS规则”对话框中“选择器类型”分别选择“类（可应用于任何HTML元素）”、“标签（基于选择的内容）”、“符合内容（ID、上下文选择器等）”、“类（可应用于任何HTML元素）”，在相应的“CSS规则定义对话框”中相应的属性选择如下：.ju padding-top: 10px;padding-left

24、: 10px;p font-size: 12px;font-style: normal;line-height: 1.75em;font-weight: normal;color: #666666;text-align: left;text-indent: 2em;a:link font-size: 12px;color: #336699;text-decoration: underline;.xian color: #aaa89c;案例实施案例实施 （15）在第3行左侧单元格中输入相应内容，并进行相应的CSS设定，效果如图8-3-13所示。案例实施案例实施 （16）在表格第3行右侧单元格中插入一个1行1列的表格，相应的属性设