第三章 CSS技术.docVIP

第三章 CSS技术 一.CSS的基础知识 CSS是为了简化Web页面的更新工作而诞生的，它的功能非常强大，它将让网页变得更加美观，维护更加方便。CSS跟HTML一样，也是一种标记语言，甚至很多属性都来源于HTML，它也需要通过浏览器解释执行。任何懂得HTML的人都可以掌握，非常容易。 CSS（Cascading Style Sheet，层叠样式表）技术是一种格式化网页的标准方式，它是HTML功能的扩展，使网页设计者能够以更有效的方式设计出更具表现力的网页效果。 1. 样式表和HTML的关系 样式表(StyleSheets)技术诞生于1996年，全称是层叠样式表(Cascading StyleSheets，简称CSS)。那什么是样式呢？样式其实就是格式，对网页来说，像文字的大小、颜色以及图片位置等，都是网页显示信息的样式。那层叠又是什么意思？意思是当我们在HTML文件中引用数个定义样式文件（CSS文件）时，若数个样式文件间所定义的样式发生冲突，将依据层次处理。 样式表是HTML的表兄弟。样式表的产生是由于最初的HTML标准还不尽人意，用HTML制作网页就像是用画笔绘制一幅图画，只有那些对网页制作痴迷而执着的人才可能精确地实现预定的结果。正是在这种情况下，样式表技术诞生了，样式表的目的是为了“对布局、字体、背景和其他图文效果实现更加精确的控制”。 2. 样式表的基本结构 样式表的基本结构是怎样的？下面通过一个简单的样式表实例，让你获得对样式表整体性的感性认识。 首先建立一个简单的HTML文件。 html head title简单的样式表/title /head bodybgcolor=lightblue center h1样式表/h1 p这是一个简单的样式表/p /center /body /html 现在，给这个HTML文件加一些样式表。只需在body标签之前插入以下代码： styletype=text/css !-- h1{color:red;font-size:35px;font-family:黑体} p{background:yellow;color:blue;font-size:25px;font-family:隶书} -- /style 这样就已经制作出了使用样式表的网页。从浏览器中打开网页（当然首先要保证浏览器支持样式表），网页显示效果如下图所示。 由这个简单的样式表实例，可以看出： 一个样式表由许多样式规则组成的，用以告诉浏览器怎样去显示一个网页文档。 样式表的核心是规则，样式表的规则如下： 选择符{属性1:值1;属性2:值2} 如，h1{color:green} 这个规则就是告诉浏览器所有标签h1和/h1之间的文字以绿色显示。 其中h1就是选择符，它是一个附带样式功能的HTML标签。花括号中所包含的就是属性，它用于定义实际的样式，每个属性包括两部分：属性名（如color）和属性值（如green）。 3.如何在网页中加入css 我们可以使用四种方法将样式表加入到网页中，每种方法都有其不同的优点： (1)．将样式表加入到HTML文件行中 可以直接在HTML代码行中加入样式规则，这种方法适用于指定网页内的某一小段文字的显示风格。不过，利用这种方法定义样式时，效果只可以控制该标签，其语法如下： 标签名称style=样式属性:属性值；样式属性:属性值... (2)．将样式表嵌入到HTML文件的文档头中 html head styletype=text/css !-- 选择符1{样式属性:属性值；样式属性:属性值；...} 选择符2{样式属性:属性值；样式属性:属性值；...} ...... 选择符n{样式属性:属性值；样式属性:属性值；...} -- /style /head body.../body /html 说明： style标签是用来说明所要定义的样式。type属性是指定style标签以CSS的语法定义。 样式表基本格式中的type=text/css用于说明这是一段CSS规则代码。 为了防止不支持CSS的浏览器将style…/style标签间的CSS规则当成普通字符串，而显示在网页上，应将CSS的规则代码插入!--和--标签之间。 选择符1......选择符n：选择符就是样式的名称，在这里选择符可以使用HTML标签的名称，所有HTML标签都可以作为CSS选择符。 样式属性：定义样式的属性名称 (3)．将一个外部样式表链接到HTML文件上 前面，我们介绍了在文档头嵌入样式表规则的方法。这种方式定义出的样式，将只限于在该HTML文件中，效益并不大。如果想要达到集中管理网站网页样式的目标时，就必须将样式定义在独立的CSS文件中，并将该文件链接或输入到要运用样式的HTML文件。 这种方法就是将多个HTML文件都链接到一