预览加载中，请您耐心等待几秒...

CSS参考手册第3章CSS基础与书写规范.pdf

预览
1/10
2/10
3/10
4/10
5/10
6/10
7/10
8/10
9/10
10/10

亲，该文档总共15页，到这已经超出免费预览范围，如果喜欢就直接下载吧～

下载提示 文本预览

如果您无法下载资料，请参考说明：

1、部分资料下载需要金币，请确保您的账户上有足够的金币

2、已购买过的文档，再次下载不重复扣费

3、资料包下载后请先用软件解压，在使用对应软件打开

第章 CSS基础与书写规范 CSS的基础知识 CSS编码规范 怎样更好地应用CSS 关于CSS的学习 在本章中，将讲解有关CSS的基础知识。因为CSS的相关内容很多，本章主要是在 宏观上讲解CSS的知识体系，让读者对CSS有个整体的认识。其中，主要内容有CSS 的定义、语法、属性、选择符、伪类、声明和单位等。同时，本章还介绍了使用CSS 的技巧和学习CSS的方法。 通过本章的学习，读者需要重点掌握CSS的基础知识和语法。其中CSS的使用技巧 和规范，将会随着CSS知识的学习被逐渐掌握。 ·26·CSS标准网页布局开发指南 3.1CSS的基础知识 本节讲述的CSS基础知识，是指CSS中的属性、选择符、伪类等相关知识的概念、内容、写法等。 具体到某个属性（或伪类）的取值、特性和使用方法等，将在以后的章节中介绍。 3.1.1什么是CSS CSS是CascadingStyleSheet的缩写，中文译作层叠样式表（简称为样式表），是W3C组织制定 的，用于控制网页样式的一种标记性语言。它包括CSS1和CSS2两部分。其中，CSS2是1998年5月 发布的，包含了CSS1的内容，也是现在通用的标准。下面是一个网页中使用CSS的实例，其代码如下： <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/> <title>CSS实例页面</title> <linkhref="style/main.css"type="text/css"rel="stylesheet"/> <style> <!--CSS样式表开始--> body{ margin:0; padding:0;} .content{ margin:100pxauto; margin:0px0px; height:200px; width:450px; background:#ccccccurl(images/background_big.gif)centerno-repeat; line-height:200px; text-align:center; font-size:36px;} <!--CSS样式表结束--> </style> </head> <body> <divclass="main"><!—元素引用样式的代码--> <divclass="content"> 使用CSS样式的一个实例</div></div> </body> </html> 代码中，<style>和</style>标签所包含的部分就是CSS样式。网页应用CSS样式后的效果，如 图3-1所示。 第3章CSS基础与书写规范·27· 图3-1使用CSS的页面实例 取消页面中定义的CSS，显示效果如图3-2所示。 图3-2剥离CSS后的页面 从图3-2中可以看到，剥离了CSS后，页面只剩下了内容部分，所有修饰部分（包括背景、字体 样式和高度等）都消失了。 从实例可以看出，CSS的作用就是通过结构做桥梁，控制页面内容的表现。通过使用CSS可以使 网站外观更加美观，结构更加简洁。 3.1.2CSS的语法 通常情况下CSS的语法包括3个方面：选择符、属性和值，其写法如下： 选择符{属性:属性值;} 说明：关于选择符参看3.1.3节的内容。 属性必须要包含在{}号之中。 属性和属性值之间用“:”分隔。 当有多个属性时，用“;”进行区分。 在书写属性时属性之间使用空格、换行等，并不影响属性的显示。 如果一个属性有几个值，则每个属性值之间用空格分隔开。 下面是一个CSS语法的实例代码： body{color:red;} 关于选择符、属性、值等概念，将在以后的小节中详细介绍。 3.1.3选择符 选择符中常用的是通配选择符、类型选择符、包含选择符、ID选择符、类选择符和选择符分组， 下面进行详细介绍。 1．通配选择符 通配选择符的写法是“*”，其含义就是所有元素。使用通配选择符的一个示例如下： ·28·CSS标准网页布局开发指南 *{font-size:12px;} 说明：font-size属性是字体的大小，px是像素。该样式实现的效果是，页面中所有文本的字体大小为 12