日期:2013-09-16  浏览次数:20980 次

需求具备的基础知识

在继续学习之前,你需求对下面的知识有基本的了解:

  • HTML
  • XHTML

如果你希望首先学习这些项目,请在本站访问相关教程。

CSS 概述
  • CSS指层叠款式表(Cascading Style Sheets),层叠的意思是:多重款式定义被层叠为一。
  • CSS是标准的规划言语,用来控制元素的尺寸、颜色、排版。
  • CSS非常精确,功用强大,易于编写。
  • CSS由W3C发明,用来取代基于表格的规划、框架以及其他非标准的表现方法。
  • 款式(style)定义如何显示HTML元素;款式通常存储于款式表中;外部款式表存储于CSS文件中。
  • 外部款式表(External Style Sheets)可以极大地提升你的任务效率,并且可以极大地节约服务器的带宽。
  • 纯CSS的规划与XHTML的结合,可使表现与结构分离,并使站点更易维护,易用性更好。

CSS演示

通过使用CSS,HTML文档将以不同的输出款式被显示出来。

款式处理了一个普遍的问题

HTML标签本来被设计为用来定义文档内容。通过使用<h1>, <p>, <table>这样的标签,HTML当初被指望用来表达“这是标题”、“这是段落”、“这是表格”之类的信息。而文档的规划被期望由浏览器来完成,而不使用任何的格式化标签。

由于两种次要的浏览器(Netscape和Internet Explorer)不断地将新的HTML标签和属性(比如字体标签和颜色属性)添加到HTML规范之中,因此创建那些文档内容清晰地独立于文档表现层的站点变得越来越困难。

为了处理这个问题,万维网联盟(W3C),这个非营利的标准化联盟,肩负起了HTML标准化的使命,并在HTML 4.0之外创造出STYLES(款式)。

所有的主流浏览器均支持层叠款式表。

款式表极大地提高了任务效率

款式表定义HTML元素如何被显示,诸如HTML 3.2的款式中的字体标签和颜色属性通常被保存在外部的.css文件中。通过仅仅编辑一个简单的CSS文档,外部款式表使你有能力同时改变站点中所有页面规划的外观。

由于允许同时控制多重页面的款式和规划,CSS可以称得上WEB设计领域的一个突破。作为网站开发者,你可以为每个HTML元素定义款式,并将之使用于你希望的任意多的页面。为了进行全局变换,只需简单地改变款式,然后网站中的所有元素均会被自动地升级。

多重款式将层叠为一个

款式表允许款式信息以多种方式被规定。款式可以被规定于单个的HTML元素中,在HTML页的头元素中,或在一个外部的CSS文件中。甚至少重的外部款式表可以在一个单一的HTML文档内部被援用。

层叠次序

当同一个HTML元素被不止一个款式所定义时,哪个款式会被使用呢?

普通而言,所有的款式会依据下面的规则层叠于一个新的虚拟款式表中,其中数字4拥有最高的优先权。

  1. 浏览器缺省设置
  2. 外部款式表
  3. 内部款式表(位于<head>标签内部)
  4. 内联款式(在HTML元素内部)

因此,内联款式(在HTML元素内部)拥有最高的优先权,这意味着它将优先于以下的款式声明:<head>标签中的款式声明,外部款式表中的款式声明,或者浏览器中的款式声明(缺省值)。