第
章
CSS 基础知识
课前知识点预习
层叠样式表的定义 层叠样式表的类型 字体属性 文本属性 颜色和背景属性 边框属性 鼠标光标属性 定位属性 区块属性 列表属性
HTML 语言能够设定元素的样式,但是这些设定是非常有限的.而且由于 HTML 语言本身的一些客观因 素,导致了其结构与显示不分离的特点,这也是阻碍其发展的一个原因.因此 W3C 很快发布了 CSS(层叠 样式表)解决这一问题,使不同的浏览器能够正常地显示同一页面.作为一个优秀的程序员,了解 CSS 的 知识也是非常重要的.本章将重点介绍 CSS 的基础知识.
28
第3章
CSS 基础知识
3.1 什么是层叠样式表
文档结构与显示的混合一直是 HTML 语言的一大缺陷, 为了能够让网页在各种平台上都能 够正常显示,人们需要一种新的规范,将显示描述彻底地独立于文档的结构,XML 语言在这一 点是严格遵守的,而 HTML 显然与之不同. 为了适应这一快速增长的需求,W3C 开始为 HTML 制定样式单机制,这就是层叠样式表 (Cascading Style Sheets, CSS) 1996 年 12 月 17 日, . W3C 标准化组织终于推出了 CSS1(Cascading Style Sheets Level 1)规范,立刻得到了微软与网景公司的支持. 层叠样式表(CSS)对于设计者来说是一种简单,灵活,易学的工具,能使任何浏览器都 能正确地显示网页内容.1998 年 5 月 12 日,W3C 组织推出了 CSS2,使得这项技术在世界范 围内得到了更广泛的支持. CSS2 成了 W3C 的新标准. CSS 是一组样式, 样式可以定义在 HTML 文档的标志(TAG)里,也可以把外部附加文档作为外加文档.这样,一个样式表就可以用于 多个页面,甚至整个站点,因此也具有更好的易用性和扩展性. 层叠样式表(CSS)可以使用 HTML 标签或命名的方式定义,除了可以控制一些传统的文 本属性外(例如字体,字号,颜色等) ,还可以控制一些比较特别的 HTML 属性,像对象位置, 图片效果,鼠标指针等.层叠样式表可以一次控制多个文档中的文本,并且可以随时改动层叠 样式表的内容,以自动更新文档中文本的样式. 从总体来说,层叠样式表能够完成下列工作: 弥补 HTML 对网页格式化功能的不足,比如段落间距,行距等. 调整字体和字号. 页面格式的动态更新. 排版定位等.
3.2 层叠样式表的类型与基本写法
下面介绍层叠样式表的基本类型以及将层叠样式表添加到 HTML 页面中的方法.
3.2.1
层叠样式表的类型
层叠样式表 CSS 包含以下 3 种类型: 1.自定义层叠样式表 用户可以在文档的任何区域或文本中应用自定义的层叠样式表,如果将自定义的层叠样式 表应用于一整段文字,那么会在相应的标签中出现"Class"属性,该属性值即为自定义层叠样 式表名称.如果将自定义的层叠样式表应用于部分文字上,那么会出现和标签, 并且其中包含"Class"属性. 其代码如下:
.bg {background-image: url(bg.gif);}
3.2
层叠样式表的类型与基本写法
29
2.重定义标签的层叠样式表 可以针对某一个标签来定义层叠样式表,也就是说定义的层叠样式表将只应用于选择的标 签.例如为,标签定义了层叠样式表,那么所有包含在,标签 的内容将遵循定义的层叠样式表. 其代码如下:
td {color: #000099; font-size: 9pt }
3.层叠样式表选择符 层叠样式表选择符为特殊的组合标签定义层叠样式表,使用"ID"作为属性,以保证文档 具有唯一可用的值.层叠样式表选择符是一种特殊类型的样式,常用的有 4 种,分别为:a:link, a:active,a:visited,a:hover. 其中: a:link:设定正常状态下链接文字的样式. a:active:设定鼠标单击时链接的外观. a:visited:设定访问过的链接外观. a:hover:设定鼠标停留在链接文字之上时文字的外观. 示例代码如下:
a:link {color: #FF3366;font-family: "宋体";text-decoration: none;} a:hover {color: #FF6600;font-family: "宋体";text-decoration: underline;} a:visited {font-family: "宋体";color: #339900;text-decoration: none;}

下一页