« 向文本框输出数据的函数5do8的几个正则 »

入门文档 CSS基础教程 (Cascading Style Sheets系列文章)

Cascading Style Sheets

Cascading Style Sheets(CSS)具有引人注目地改变环球网外观的潜力。使用Cascading Style Sheets,你可以获取对你网页上每个元素类型的精确控制。Style Sheets允许你将HTML看作为传统的页描述语言来改变HTML的基本特性。

使用Style Sheets,你可以控制传统网页上的元素,诸如精确的空白、段落缩进和字体。Style Sheets不仅允许你指定单个网页的外观,还可以被用来为网站提供一致的界面。

更好的是,你可以安全地使用Style Sheets而不用担心它们在早期的浏览器上的效果。Style Sheets具有完美退化的重要特性,不支持它们的浏览器会忽略它们。

Cascading Style Sheets的标准已经由World Wide Web Consortium制定了。虽然如此,Style Sheets在HTML中还是很新的一部分。第一个支持它的主流浏览器是Internet Explorer 3.0,它们现在也被Netscape Navigator 4.0支持了。

你应当知道两种浏览器现在都支持CCS标准。要想有效地使用Style Sheets,你必须花费大量的时间来不停地实验。在很多情况下,CSS在两种浏览器上的执行结果是非常离奇的。


在网页中加入Style


Style Sheet是一个规则列表来决定网页上每个元素的外观。例如,假设你想强调网页上所有的黑体文字,你想让所有的黑体字都以红色显示出来。使用Style Sheet,你可以为浏览器提供一个规则,即所有的黑体字都应该用红色显示出来,就象下面的例子:

<HTML>

<HEAD>

<TITLE> Simple Style </TITLE>

<STYLE>

B {color: red}

</STYLE>

</HEAD>

<BODY>

<B> I am bold and red </B>

</BODY>

</HTML>

当这个HTML文件被一个支持Style Sheets的浏览器解释时,处于<B>标识符之间的文字将以红色显示出来。注意这个新的HTML标识符<STYLE>,它包含了网页规则的列表。在此例中,只有一条简单的规则:

B {color: red}

这个规则具有两个部分,规则的第一个部分B被称作selector,selector被用来选择网页中规则所起作用的元素。在此例中,B选择了所有在这个HTML文件中出现的<B>标识符,这个规则决定了每个<B>标识符的行为。

这个规则的第二部分被称为declaration,它包含了一个属性和值。在此例中,属性是color,而值是red。根据这条规则,每一个<B>标识符的color属性都将被设为红色。

所有的规则都具有这种格式,一个或更多的selector被使用来选择网页中的元素。selector后紧接着是一个空格,再接下来,那个元素的属性被赋予一个值,即一个属性――值对。属性和值由一个冒号分隔,并由一对花括号包含({})。

注意此例中没有别的HTML标识符被添加进文件的主体部分,Style Sheet完全是在<HEAD>标识符中定义的,虽然如此,Style Sheet决定了在文件主体部分出现的所有<B>标识符的行为。

就如前面所提到的那样,你可以使用Style Sheets而不用担心它们在早期浏览器上的效果,早期的浏览器仅仅忽略<STYLE>标识符。然而,早期的浏览器可能会显示出位于<STYLE>标识符之间的规则列表,要防止这种事的发生,你应当总是把HTML注释符放在规则列表的周围,如下所示:

<HTML>

<HEAD>

<TITLE> Simple Style </TITLE>

<STYLE>

<!--

B {color: red}

-- >

</STYLE>

</HEAD>

<BODY>

<B> I am bold and red </B>

</BODY>

</HTML>

可以解释Style Sheets的浏览器会很聪明地进入到注释标识符内部来获取规则,而在早期的浏览器上,则会忽略注释标识符之间的东西,不会把有关规则的文字显示在屏幕上。

原创文章如转载,请注明:转载自悠悠博客 [ http://www.ajaxstu.com/ ]

相关文章:

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。