《网页设计与制作项目实训教程 教学课件 ppt 作者 严加琼 曾金发 项目14》由会员分享，可在线阅读，更多相关《网页设计与制作项目实训教程 教学课件 ppt 作者 严加琼 曾金发 项目14（39页珍藏版）》请在金锄头文库上搜索。
1、项目14 使用CSS样式表美化页面,项目描述,知识储备,实践向导,能力拓展,退 出,项目小结,项目描述,CSS层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。引入CSS是为了使HTML能够更好的适应页面的美工设计。本项目制作“诗歌”网页和“庐山风景介绍”网页，并利用CSS美化 HTML页面。,14.2 知识储备,14.2.1 CSS的基本概念 14.2.2 CSS样式面板介绍 14.2.3 创建CSS样式 14.2.4 设置CSS规则 14.2.5 CSS样式的应用,14.2知识储备,14.2.1 CSS的基本概念 1. CSS样式基本语法 选择器（
2、selector）是CSS中的基本概念，所有HTML语言中的标记都是通过不同选择器进行控制的。用户只需要通过选择器对应不同的HTML标签进行控制，并赋予各种样式声明，即可实现各种样式的效果。 CSS样式的基本语法规则由两个主要的部分构成：选择器，一条或多条声明（或称为规则）。 格式：选择器 声明1; 声明2; . 声明N ,14.2知识储备,14.2.1 CSS的基本概念 “选择器”一般是指需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成。属性是希望设置的样式属性。每个属性有一个值。属性和值用冒号分开。 格式：选择器 属性:值 例如：h1 color:red; font-size
3、:14px; 以上代码的作用是将 h1标记内的文字颜色定义为红色，同时将字体大小设置为 14 像素。h1是选择器，color和font-size是属性，red和14px是值，如图14-1所示。,图14-1 CSS选择器,14.2知识储备,14.2.1 CSS的基本概念 2.引入CSS样式的方法 （1）行内样式 行内样式是所有样式方法中最为直接的一种，它直接对HTML的标记使用style属性，然后将CSS代码直接写在其中。【例14-1】 CSS标题1 CSS标记的正文内容l CSS标题2 CSS标记的正文内容2 ,14.2知识储备,14.2.1 CSS的基本概念 （2）内嵌样式 内嵌样式表是将C
4、SS在与标记之间插入一对和标记，并在其间进行样式表代码的编写。 【例14-2】将例14-1改写成内嵌样式，效果完全相同。显示效果如图14-2所示。 从例14-2中看到，所有CSS的代码部分被集中在了同一个区域，方便了后期的维护。但如果是一个网站，拥有众多不同页面，对于不同页面上的标记都希望采用同样的风格时，内嵌样式的方法就显得略微麻烦，每次更新都要每个页面一起更新。因此这种方式仅适用于对特殊的页面设置单独的样式风格，比如网站的首页，也是目前国内外大多数门户网站对首页面使用的CSS引入方式。,14.2知识储备,14.2.1 CSS的基本概念 （3）链接式 链接式CSS样式表是使用频率最高，也是最
5、为实用的方法。它将HTML页面本身与CSS样式风格分离为两个或者多个文件，实现了页面HTML代码与美工CSS代码的分离，使得前期制作和后期维护都较为方便，网站后台的技术人员与美工设计者也因此可以较好的分工。 它的主要特点在于，CSS代码与HTML代码完全分离，并且同一个CSS文件可以被不同的HTML所链接使用。在设计整个网站时，可以将所有页面都链接到同一个CSS文件，使用相同的样式风格，这样如果整个网站需要进行样式上的修改，仅需要修改这一个 CSS文件即可。它使得网站整体风格快速统一成为可能，后期维护的工作量大幅减少。,14.2知识储备,14.2.1 CSS的基本概念 （4）导入样
6、式 导入样式表与前文所讲的链接样式表的功能相似，但在语法和加载方式上有区別。采用import方式导入的样式表，在HTML文件初始化时，就会被导入到HTML文件内，作为该文件的一部分，类似内嵌式的效果。而链接式样式表则是在HTML的标记需要样式定义外观时才以链接的方式加载。在HTML文件中导入样式表使用import语句，它本身属于CSS语句，放在style与 标记之间。,14.2知识储备,14.2.2 CSS样式面板介绍 1打开CSS样式面板 使用“CSS样式”面板可以查看、创建、编辑和删除CSS样式，也可以将外部样式表附加到文档。可以通过顶部菜单栏的“窗口”菜单，单击“CSS样式“命令，打开C
7、SS样式面板。如图14-3所示。,图14-3 CSS样式面板,14.2知识储备,14.2.2 CSS样式面板介绍 2CSS样式面板“当前”状态 在“CSS样式”面板中单击“当前”按钮，使CSS样式面板处于“当前”模式下，在此模式下，CSS样式面板将显示三个窗格面板。如图14-4所示。,图14-4 CSS样式面板“当前”状态 图14-5 所选内容的摘要,14.2知识储备,14.2.2 CSS样式面板介绍 3CSS样式面板“全部”状态 在“CSS样式”面板中单击“全部”按钮，即可切换成“全部”模式，在此模式下，“CSS样式”面板只显示两个窗格面板。如图14-6所示。,图14-6 “全
8、部”状态,14.2知识储备,14.2.2 CSS样式面板介绍 4.CSS样式面板编辑按钮组 在“CSS样式”面板右下角有五个按钮，当鼠标停留每一个按钮上面时，会显示该按钮的名称。如14-7图所示。,图14-7 编辑按钮组,14.2知识储备,14.2.3创建CSS样式 在Dreamweaver软件中可以创建CSS规则来自动完成编写CSS选择器，对HTML标签的外观进行设置。 打开任意HTML文档，将光标移动到要插入CSS规则的位置上，然后选择一种方法打开“新建 CSS 规则”对话框。 方法一：打开“格式”菜单，选择“CSS样式”命令，在弹出的菜单中选择“新建”项，如图14-8所示。 方法二：单击
9、CSS样式面板右下角的“新建 CSS 规则”按钮 。同样也可以打开“新建 CSS 规则”对话框。 方法三：在“属性”面板中单击左边的“CSS”按钮 ，打开属性检查器，在“目标规则”下拉框中选择“新CSS规则”项，单击“编辑规则”按钮 ，也可以打开“新建 CSS 规则”对话框。,14.2知识储备,14.2.4 设置CSS规则 1. 设置文本样式 Font-family：设置字体系列。在下拉菜单中选择字体。 Font-size：定义文字的字体大小。 Font-weight：对字体应用特定或相对的粗体量。 Font-style：指定“正常”、“斜体”或“偏斜体”作为字体样式。 Font-varian
10、t：设置文本的小型大写字母变体。 Line-height：设置文本所在行的高度。 Text-transform：将所选内容中的每个单词的首字母大写或将文本设置为全部大写或小写。 Text-decoration：向文本中添加下划线、上划线或删除线，或使文本闪烁。Color：设置文本的颜色。,14.2知识储备,14.2.4 设置CSS规则 2. 设置背景样式 Background-color：设置元素的背景颜色。 Background-image：设置元素的背景图像。 Background-repeat：设置是否以及如何重复背景图像 Background-attachment：设置背景图像是固定在
11、其原始位置还是随内容一起滚动。 Background-position(X)和Background-position(Y)：设置背景图片相对于元素的初始位置。,14.2知识储备,14.2.4 设置CSS规则 3. 设置区块样式 Word-spacing：设置字词的间距。 Letter-spacing：增加或减小字母或字符的间距。 Vertical-align：指定元素的垂直对齐方式。 Text-align：设置文本在元素内的对齐方式。 Text-indent：指定第一行文本缩进的程度。可以使用负值创建凸出，但显示方式取决于浏览器。 White-space：设置如何处理元素中的空格。 Displ
12、ay：设置是否以及如何显示元素。,14.2知识储备,14.2.4 设置CSS规则 4. 设置方框样式 Width：设置元素的宽度。 Height：设置元素的高度。 Float：设置元素的浮动方式。元素按通常的方式环绕在浮动元素的周围 Clear：清除浮动元素的影响。如果被设置clear属性的元素旁边出现浮动元素，则浮动元素将移到该元素的下方。 Padding：指定元素内容与元素边框之间的间距（如果没有边框，则为边距） 全部相同：取消此项，可以分别设置元素各个边的填充。如果选择此项，可以为元素的“上”、“右”、“下”和“左”设置相同的填充属性。 Margin：设置一个元素的边框与另一个元素之间的
13、间距（如果没有边框，则为填充）。,14.2知识储备,14.2.4 设置CSS规则 5. 设置边框样式 Style：设置边框的样式外观。 Width：设置元素边框的粗细。 Color：设置边框的颜色。 全部相同：取消此项，可以分别设置元素各个边的边框样式、边框粗细、边框颜色属性。选择此项，可以为元素的“上”、“右”、“下”和“左”设置相同的属性。,14.2知识储备,14.2.4 设置CSS规则 6. 设置列表样式 List-style-type：设置项目符号或编号的外观。 List-style-image：为项目符号指定自定义图像。 List-style-position：设置列表项文本是否换行
14、并缩进（在外部）或者文本是否换行到左边距（在内部）。,14.2知识储备,14.2.4 设置CSS规则 7. 设置列表样式 Position：设置浏览器应该如何定位选定的元素。 Width：设置元素的宽度。 Height：设置元素的高度。 Visibility：设置内容的初始显示条件。如果不指定可见性属性，则默认情况下内容将继承父级标签的值。 Z-index：设置内容的堆叠顺序。Z轴值较高的元素显示在Z轴值较低的元素（或根本没有Z轴值的元素）的上方。值可以为正，也可以为负。 Overflow：设置当容器（如：DIV或P）的内容超出容器的显示范围时的处理方式。 Placement：指定内容块的位置
15、和大小。 Clip：定义内容的可见部分。,14.2知识储备,14.2.4 设置CSS规则 8. 设置扩展样式 Page-break-before：打印时在样式所控制的对象之前强行分页。 Page-break-after：打印时在样式所控制的对象之后强行分页。 Cursor：当指针位于样式所控制的对象上时改变指针图像。 Filter：对样式所控制的对象应用特殊效果。,14.2知识储备,14.2.5 CSS样式的应用 1. 建立规则 （1）打开配套光盘中文档14-5a.html，文档中有未经加工的文本页面。 （2）选中列表的最外层元素UL，通过下方的标签选择器，如图14-18所示。在属性面板中给U
16、L标记添加一个ID。 （3）在属性面板中单击 按钮，切换属性面板，然后单击 ，在弹出的“新建CSS规则”对话框中，如图14-20所示，单击“确定”按钮后即可进入规则定义的对话框。,图14-18 选中对象 图14-19 设置ID,图14-20 建立规则,14.2知识储备,14.2.5 CSS样式的应用 2.定义边框的规则 UL外围存在一个框，在“CSS规则定义”对话框的左侧“分类”列表框中，选择“方框”选项，输入参数如图14-21所示。在左侧选中“边框”选项，设置参数如图14-22所示。,图14-21 设置方框参数,图14-22 设置边框参数,14.2知识储备,14.2.5 CSS样式的应用 3.定义复合链接规则 对框内的超链接文字进行外观的设置，单击CSS样式面板中的 按钮新增一个规则，该规则用来设置文字的颜色、行距、修饰、边距以及呈现方式。具体设置如图14-24所示。 “#box li a”规则设置如下： 类型：lineheight:25px，font-size:13px，color:#333 ，text-decorat
