css速查手册.doc

CSS 速查手册 Dreamweaver 是现今最好的网站编辑工具之一,用它来给网页制作 CSS 样式表会更简单、更方便。本教程教你如何利用 Dreamweaver4 在页面中加入 CSS , 你不用死记硬背代码标记, 也不用去看很厚的 CSS 手册,就可以轻松自如的在网页中运用 CSS 。不过首先你要对 CS S 有一定的了解。因此,本教程的前面 4 章为 CSS 理论知识,主要是对 CSS 的全面介绍,希望读者看后对 CSS 的语法、结构、应用有一个全面的了解;后面 4 章为 DW 实战,主要是教你如何把 Dreamweaver4 的 CSS 灵活运用在网页中。阅读此文前,你需要对 HTML 有一定的了解,并会使用 Dreamweaver4 。一、认识 CSS CSS 就是 Cascading Style Sheets ,中文翻译为“层叠样式表”,简称样式表,它是一种制作网页的新技术。网页设计最初是用 HTML 标记来定义页面文档及格式,例如标题<h1> 、段落<p> 、表格<table> 、链接<a> 等,但这些标记不能满足更多的文档样式需求,为了解决这个问题,在 199 7年 W3C(The World Wide Web Consortium) 颁布 HTML 4 标准的同时也公布了有关样式表的第一个标准 CSS1, 自 CSS1 的版本之后,又在 1998 年5 月发布了 CSS2 版本,样式表得到了更多的充实。 W3C 把 DHTML(Dynamic HTML) 分为三个部分来实现:脚本语言(包括 JavaScript 、 Vbscript 等) 、支持动态效果的浏览器( 包括 Explorer 、 Netscape Navigato r 等)和 CSS 样式表。你可以用 CSS 精确地控制页面里每一个元素的字体样式、背景、排列方式、区域尺寸、四周加入边框等。使用 CSS 能够简化网页的格式代码,加快下载显示的速度,外部链接样式可以同时定义多个页面,大大减少了重复劳动的工作量。注意: CSS 需要 IE4( Explorer ) 和 scape ) 以上的浏览器支持, 有些效果需要更高版本的浏览器支持。二、语法 1. 基本语法 CSS 的定义是由三个部分构成:选择符( selector ) ,属性( properties )和属性的取值( value )。基本格式如下: selector {property: value} (选择符{ 属性:值}) 选择符可以是多种形式,一般是你要定义样式的 HTML 标记,例如 BODY 、P、 TABLE ……,你可以通过此方法定义它的属性和值,属性和值要用冒号隔开: body {color: black} 选择符 body 是指页面主体部分, color 是控制文字颜色的属性, black 是颜色的值,此例的效果是使页面中的文字为黑色。如果属性的值是多个单词组成, 必须在值上加引号, 比如字体的名称经常是几个单词的组合: p {font-family: "sans serif"} (定义段落字体为 sans serif ) 如果需要对一个选择符指定多个属性时,我们使用分号将所有的属性和值分开: p {text-align: center; color: red} (段落居中排列;并且段落中的文字为红色) 为了使你定义的样式表方便阅读,你可以采用分行的书写格式: p{ text-align: center; color: black; font-family: arial } (段落排列居中,段落中文字为黑色,字体是 arial ) 2. 选择符组你可以把相同属性和值的选择符组合起来书写, 用逗号将选择符分开, 这样可以减少样式重复定义: h1, h2, h3, h4, h5, h6{ color: green } (这个组里包括所有的标题元素,每个标题元素的文字都为绿色) p, table{ font-size: 9pt } (段落和表格里的文字尺寸为 9 号字) 效果完全等效于: p{ font-size: 9pt } table { font-size: 9pt } 3. 类选择符用类选择符你能够把相同的元素分类定义不同的样式, 定义类选择符时, 在自定类的名称前面加一个点号。假如你想要两个不同的段落, 一个段落向右对齐, 一个段落居中, 你可以先定义两个类: {text-align: right} {text-align: center} 然后用不在不同的段落里,只要在 HTML 标记里加入你定义的 class 参数: <p class="right"> 这个段落向右对齐的</p>? <p class="center"> 这