CSS样式设计表.pptVIP

《网页设计与网站建设》 第二章 网页设计--CSS 样式表 层叠样式表 (CSS) 是一组格式设置规则，用于控制 Web 页内容的外观。通过使用 CSS 样式设置页面的格式，可将页面的内容与表示形式分离开。 页面内容（即 HTML 代码）存放在 HTML 文件中，而用于定义代码表示形式的 CSS 规则存放在另一个文件（外部样式表）或 HTML 文档的另一部分（通常为文件头部分）中。将内容与表示形式分离可使得从一个位置集中维护站点的外观变得更加容易 因为进行更改时无需对每个页面上的每个属性都进行更新。将内容与表示形式分离还会可以得到更加简练的 HTML 代码 CSS（Cascading Style Sheet）是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 【本节学习目的】 本节重点介绍CSS样式表功能、定义CSS规则的方法，应用内嵌式样式表和链接外部样式表的方法等，通过本节的学习，应了解CSS样式表的用途，掌握创建和应用CSS样式表的方法，学会用CSS样式表进行网页的美化和网页布局。 CSS样式表的功能一般可以归纳为以下几点： （1）可以更灵活地控制网页中文字的字体、颜色、大小、间距、风格和位置。 （2）可以灵活地设置一段文字的行高、缩进，并可以为其加入三维效果的边框。 （3）可以方便地为网页中的任何元素设置不同的背景颜色和背景图像。 （4）可以精确地控制网页中各元素的位置。 （5）可以为网页中各元素设置过滤器，从而产生如阴影、模糊、透明等效果。 （6）可以与脚本语言结合，从而产生各种动态效果。 （7）由于是直接的HTML格式的代码，因此网页打开的速度非常快。 （8）使用CSS样式表的另一个优点是可以利用同一个样式表对整个站点的具有相同性质的网页元素进行格式修饰，当需要更改样式设置时，只要在这个样式表中修改，而不用对每个页面逐个进行修改，简化了格式化网页的工作。 CSS语言是一种标记语言,它不需要编译，可以直接由浏览器解释执行(属于浏览器解释型语言)。 CSS文件也可以说是一个文本文件，它包含了一些CSS标记，CSS文件必须使用css为文件名后缀。 比较使用和未使用CSS的页面（xizang.html、 index.html） 在使用CSS前，我们先要对CSS的基本语法有所了解。 CSS 格式设置规则由两部分组成：选择器和声明（大多数情况下为包含多个声明的代码块）。选择器是标识已设置格式元素的术语（如 p、h1、类名称或 ID），而声明块则用于定义样式属性。 下面我们来看一段CSS代码： p { font-family: 宋体; font-size: 12px; line-height: 12pt; color: #000000}td { font-family: 宋体; font-size: 12px; color: #000000}a:link { color: #0000FF; text-decoration: none}a:visited { color: #666666; text-decoration: none}a:active {color:green;text-decoration: none;}a:hover { color: #FF0000;background-color:#ff9900;text-decoration: underline } 各个声明由两部分组成：属性（如 font-family）和值（如 Helvetica） 1 CSS 样式的应用 1.1 CSS样式表概述 1、CSS样式表的使用常用的方法有以下两种： CSS样式定义在HEAD内（定义内部样式块对象 ） CSS一般位于HTML文件的头部，即head与/head标记内，并且以style开始，以/style结束。 　　html 　　head 　　title文档标题/title 　　style type=text/css 　　 　　body {font: 10pt Arial} 　　h1 {font: 15pt/17pt Arial; font-weight: bold; color: maroon} 　　h2 {font: 13pt/15pt Arial; font-weight: bold; color: blue} 　　 　　/style 　　/head 　　body 。。。。。。。 /body /html 链入外部样式表文件 ：将样式表写在一个独立的后缀名为CSS文件中如master