首 页建站教程源码中心网站建设与网上创业处世绝学炫彩Qzong游客留言在线日历QQ诱惑
您当前的位置:海鸿源码网建站教程div+Css → 建站内容 退出登录 用户管理
本类热门文章
海鸿源码网推荐
入门文档 CSS基础教程 (Cascading Style Sheets系列文章)
作者:佚名  来源:本站整理  发布时间:2007-10-21 23:04:22

减小字体 增大字体

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的浏览器会很聪明地进入到注释标识符内部来获取规则,而在早期的浏览器上,则会忽略注释标识符之间的东西,不会把有关规则的文字显示在屏幕上。

[] [返回上一页] [打 印]
建站评论 (评论内容只代表网友观点,与本站立场无关!)

用户名: 查看更多评论

分 值:100分 85分 70分 55分 40分 25分 10分 0分

内 容:

         (注“”为必填内容。) 验证码: 验证码,看不清楚?请点击刷新验证码

关于本站 - 网站帮助 - 广告合作 - 下载声明 - 友情连接 - 网站地图 -