《网页设计与制作应用教程》课件——CH6 使用CSS美化和布局网页.pptxVIP

第3版HTML5DreamweaverPhotoshopCSS3AnimateAdobeCC网页设计与制作应用教程

网页设计与制作第6章使用CSS美化和布局网页

本章重点认识CSS熟悉CSS选择符和属性使用使用DIV+CSS进行网页布局掌握CSS的应用

六、使用CSS美化和布局网页6.1初识CSS6.3创建CSS外部样式6.2用CSS样式美化页面6.4盒模型布局网页

CSS(CascadingStyleSheets)层叠样式表，是W3C组织制定的网页样式设计标准，是一种用来表现HTML文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。在DIV+CSS技术时代，CSS显得格外重要，它可以将Web前端的HTML代码与页面布局、美化，以及添加一些特殊效果的代码分隔开来。这样可以更加灵活、高效地开发页面，精确指定网页元素位置，更轻松地修改和控制页面外观。6.1初识CSS6.1.1CSS特点1.将页面的内容与表示形式分离。2.控制页面的布局。3.网页体积更小。4.使浏览器成为更友好的界面。

6.1初识CSS6.1.2CSS规则CSS格式设置规则由两部分组成：选择器和声明。选择器是标识已设置格式元素（如P、H1、类名称或ID）的术语，而声明则用于定义样式元素。h1是选择器，介于大括号({})之间的所有内容都是声明。声明由两部分组成：属性和属性值，中间用英文冒号“:”连接。上述示例为h1标签创建了样式：链接到此样式的所有h1标签的文本都将是16像素大小和粗体字体。CSS的主要优点是统一表现形式，只要对一处CSS规则进行更新，则使用该定义样式的所有文档的格式都会自动更新为新样式。

6.1.3CSS样式的类型1.类样式2.标签CSS样式3.IDCSS样式4.复合CSS样式5.伪类CSS样式超链接伪类定义：a:link:定义超链接对象在没有访问前的样式。a:hover:定义当鼠标移至超链接对象上时的样式。a:active:定义当鼠标单击超链接对象时的样式。a:visited:定义超链接对象已经被访问过后的样式。6.1初识CSS

6.1初识CSS6.1.4CSS基本用法将样式信息添加到一个HTML文档中，有4种基本方法：1.添加行内样式。在HTML标签中，把样式作为属性值直接定义在style中。2.在style标签中集中定义CSS，即定义内部样式表。3.通过link标签导入外部CSS文件，即导入外部样式表。4.通过@input命令导入外部CSS文件，即导入外部样式表。

6.1.5创建CSS样式的方法6.1初识CSS直接编写代码创建CSS样式在属性检查器中创建CSS样式使用“CSS设计器”面板创建CSS样式6.1.6CSS属性说明1.类型字体大小样式行高修饰粗细变量大小颜色2.背景设定背景颜色背景图像重复附件水平位置垂直位置3.区块设定单词间距字母间距垂直对齐文本对齐文字缩进空格显示4.边框设定样式宽度颜色5.扩展设定分页光标过滤器

6.2用CSS样式美化页面6.2.1创建类CSS样式6.2.2创建标签CSS样式6.2.3创建IDCSS样式6.2.4创建伪类CSS样式6.2.5创建复合CSS样式

6.3创建CSS外部样式把CSS样式放在独立的文件中，称之为外部样式表。外部样式表文件是一个文本文件，扩展名为“.css”，外部样式表文件需要与“.html”网页文件联合使用，通常以链接或导入的形式关联到网页文件中应用。使用外部样式既可以保持网页外观的一致性，又可以极大简化设置过程，因而成为专业网站设计中普遍使用的一种方法。

6.3创建CSS外部样式例：创建外部样式表，并在页面中应用样式。1)打开素材文档“page607.html”。2)在“CSS设计器”面板的“源”选项区中单击“+”按钮，在弹出的菜单中选择“创建新的CSS文件”3)随即弹出“创建新的CSS文件”对话框，如图。单击“文件”文本框后的“浏览”按钮。4)随即弹出“将样式表文件另存为”对话框，在此选择保存文件位置在站点根目录的“CSS”文件夹中，确定文件名为“style2.css”，如图6-31所示。单击“保存”按钮。回到图6-30所示的对话框，默认添加为“链接”选项，再单击“确定”按钮。

6.3创建CSS外部样式7)在“属性”选项区中设置div的属性。设置代码如下：8)回到源文件的“代码”视图，光标移至body标签后面，执行【插入】/【dov】命令，并将诗词部分内容剪切并