站内搜索
广告
样式表(CSS:Cascading Style Sheets)学习[上]
作者:    来源:    点击:    日期:2007-5-27 0:27:41   

  一.样式表基础

  1. 样式表中每一个条目由选择符(selector)和对应的规则组成,选择符通常是HTML元素名称,也可以是类(class)、标识符(id)、伪类(pseudo class,它们标示了超链接的不同状态)等。

  2. 将样式表(规则)添加到HTML文档中有3种方式:

  ① 外部样式表。

  ② 应用于整个文档的样式,位于<head>区,包括嵌入样式表和输入样式表。

  ③ 行内样式,通过绝大多数元素的style属性实现。

  3. 样式表内的注释用/* …*/。通过将样式规则包围在HTML注释<!--    -->之间可以让那些不支持样式表技术的老浏览器也能正常工作而不是直接把样式规则显示在屏幕上。一般而言,浏览器会忽略不认识的元素和属性,但包围在元素之间的内容会显示出来。

  4. 每一条规则必须以分号;结束。

  5. 如果多个元素共享相同的样式规则,可以使用逗号将它们分组定义。这里分组的概念与分类(class)或标识符(id)的概念不同,前者设置的规则对整个文档中所有的该元素都起作用,而后者只对该元素的一个子集(class或id相同的)起作用。当成组规则和其他规则都涉及到同一个元素时,它们将被组合起来,以生成某个元素的完整的样式。

  举例:成组规则的应用。

h1,h2,h3  {background : yellow; color : black;}

h1    {font-size : 200%;}

h2    {font-size : 150%;}

h3    {font-size : 125%;}

  二.外部样式表

  外部样式表通过在<head>区内使用<link>元素来引用,<link>元素有三大属性:

  ① rel:指明了链接关系,这里是stylesheet。

  ② href:指明了外部样式表的URL。

  ③ type:指明了样式表的类型,这里是text/css。(其他还有jss)

  举例:外部样式表的引用方式。

<head>

<title>Style Sheet Linking Example</title>

<link rel = "stylesheet" href = "\css\css1.css" type = "text/css">

</head>

  三.应用于整个文档的样式表

  3.1 嵌入样式表

    嵌入样式表的使用方式是直接写在head区的style元素内,从而形成应用与整个文档的样式表。这种情况下只需要用到style元素的type属性。

  举例:嵌入样式表的使用。

<head>

<style type = “text/css”>

<!--

body {

       font: 10pt;

       font-family: Serif;

       color: black;

       background-color: white;

       }

-->

</style>

</head>

  3.2 输入样式表

  输入样式表也是引用一个外部样式表,但不是通过link元素而是在style区内通过@import语法来引用:@import url(css的url地址);可以在<style>元素内引用一些输入样式表,同时又指定一些只应用于本文档的样式。但是(Netscape)浏览器对输入样式表的支持还不普遍,所以建议使用<link>来引用外部样式表。

  举例:输入样式表和嵌入样式表的联合使用。

<head>

<style type = “type/css”>

<!--

@import url(corerules.css);

@import url(linkrules.css);

/* a rule specific to this document */

h1{

  font : 24pt;

  font-family : Sans-Serif;

  color : black;

首页 上一页 [1] [2] [3]  下一页 尾页 
样式表(CSS:Cascading Style Sheets)学习[上] 评论