‹‹ 上一主题 | 下一主题 ››
发新话题
打印

[网络知识] 《CSS从入门到精通》CSS属性：第一课

2008

版主

Rank: 7Rank: 7Rank: 7
1# 大 中 小 发表于 2007-11-30 23:06  只看该作者

《CSS从入门到精通》CSS属性：第一课

　　自W3C（The World Wide Web Consortium）制定了代号为Cougar的HTML的4.0版本以来，存在在Web页面中的动态效果首次被正式的承认了，W3C把动态超文本（Dynamic HTML）的实现分为了三个部分：脚本、支持动态效果的浏览器和CSS。前两者也许你经常用到，但CSS是什么或许你并不清楚，如果有过制作Web页面的经历，你可能听说过样式单或风格单，如果对此你亦无耳闻，不要紧，只要你想制作出具有更多新特性的Web页，本文将同样适合于你。（请使用IE4或IE5对CSS手册中的属性实例进行验证）

一、什么是CSS？

CSS是Cascading Style Sheet的缩写，有些书上把它译为"层叠样式单"或"级联样式单"（下文简称"样式单"），在1997年W3C颁布HTML4标准的同时也公布了有关样式单的第一个标准CSS1。样式单是对以前的HTML（3.2以前的HTML版本）语法的一次重大革新，以前的HTML版本中，各种功能的实现是通过标记元素实现的，这也造成了各个浏览器厂商为了标新立意创建各种只有自家支持的标记，各种标记互相嵌套，就可以达到不同的效果，比如要在一段文字中把一部分文字变成红色，HTML3.2中应该是这样的：
<p><font color=red>这里显示红色字</font></p>
而在样式单中，把某些标记（如上例中的"font"标记）属性化，利用样式单，上例可以变成：
<p style="color:red">这里显示红色字</p>
这就是样式单的全部功能吗？远远不是！前面说过样式单是DHTML的一部分，建立样式单的真正意义在于把对象真正引入了HTML，使得可以使用脚本程序（如Javascript、VBScript）调用对象属性，并且可以改变对象属性，达到动态的目的，这在以前的HTML中是无法实现的，如果你使用过如VB等面向对象的编程工具，你会更快的发现，用样式单做DHTML是多么容易。样式单的另一项贡献是简化了HTML中各种繁琐的标记，使得各个标记的属性更具有一般性和通用性，并且样式单扩展了原先的标记功能，能够实现更多的效果，样式单甚至超越了Web页面的本身显示功能，而把样式扩展到多种媒体上，显示了难以抗拒的魅力。
样式单自从CSS1的版本之后，又在1998年5月发布了CSS2版本，样式单得到了更多的充实。Internet Explorer4和Netscape Navigator4都宣传支持样式单，但从各方面来看IE4的效果都要超过NE4，这是因为IE4和NE4的Javascript文档模型（DOM）不同而造成的，从表面看，二者的模型区别不大，但实质上却是大相径庭，IE4的模型能够更加容易的把动态效果引入Web页面，虽然现在IE4的模型只有微软自己支持，但它却已被清楚的写入了W3C的DHTML标准；而NE4的样式单并不能通过脚本调用对象的属性，说的不好听一点，它的样式单只是徒有其表罢了。（Netscape公司自己开发了一种样式单称作JSSS，它利用Javascript来定义样式，但是并没有得到W3C的承认。）

二、进一步了解样式单

Cascading Style Sheet中的Cascading是"层叠"的意思，也就是说在同一个Web文档中可以有多个样式单存在，这些样式单根据所在的位置，拥有不同的优先级，优先级越高，就会被最后在显示时采用。从样式单插入的形式来看可以分为三种：
  • 内联式样式单：它利于现有的HTML标记，把特殊的样式加入到那些由标记控制的信息中，比如刚才的例子。
  • 嵌入式样式单：它和Javascript一样可以嵌入到HTML文件的头部中去（<html>和<body>标记之间），使用<Style>和</Style>容器装载，例如："<style> p {color : red ; font-weight : bold} </style>"，这样会对页面中所有<p>标记都起作用。
  • 外部式样式单：是一种保存在外部的样式单文件，外部文件以.CSS为扩展名，例如"<link rel=stylesheet href="main-sheet.css" type="text/css">"。
在应用时可以根据需要随意运用以上三种方式，但在实际中内联式样式单和嵌入式样式单使用得更多一些。
三、样式单的语法特征

样式单有自己独特的书写方法，掌握了它的语法特征，再了解它的各种属性，那么你会发现在Web页面中运用样式单会是多么轻松。例如有一个最简单的HTML文档：
<html>
<body>
  <p>Text goes here…<p>
</body>
</html>
我们可以用嵌入式样式单规定样式。
<html>
<style>
<!--
  p {color:red; font-weight : bold}
- ->
</style>
<body>
  <p>这里显示红色字</p>
</bdoy>
</html>
可以看到，在这个文档里，多了"Style"标记，之间用<!-- ……… - ->注释，以防止不能识别样式单的低版本浏览器把样式单当作内容显示出来，然后是关键的一句：
p {color:red；font-weight : bold }
这整行称为一个声明（Statement），在样式单中，声明分为两种，一种是象这样的，叫做"rule set"，另一种则称为"at-rule"。
At-rule以"@"作为关键字，放在元素的最前面，at-rule通常用来对媒体（Media）的声明，并且如果对同一个at-rule进行声明，那么只有位置靠前的会起到作用，如：
@import "subs.css"
H1 {color:blue}
@import "list.css"
后一个At-Rule无效。

而rule set就象我们前面看到的样子了，它由几个部分组成，其中包括选择器、属性和属性值。一般的书写是这样的：
Selector1 {property1:value1; property2:value2;……}
Selector2 {……}
其中刚才例子中的"P"代表段落标记元素，为选择器，"{}"为一个块（Block），表示对标记属性的声明（Declaration），有多个属性的时候使用";"隔开，属性在样式单中的一般表示方法是前面是一类属性的名称，后面是具体属性的名称，中间用"-"隔开，而在脚本中使用属性的时候，则把"-"去掉，并把第二部分的开头字母大写。属性值的表示可以使用10进制，16进制数值（如#FFFFFF），百分数（如100%），字符串，URL（如url(http://www.***.com)）和RGB（如rgb(255,255,255)）等多种方式表示。下面我将对其中的重点部分进行更详细的解释。

搜索更多相关主题的帖子: CSS教程 CSS入门 精通CSS CSS属性

http://Rrr2008.spaces.live.com

TOP

uujpejelo

新手上路

Rank: 1
2# 大 中 小 发表于 2008-5-21 13:21  只看该作者

佩服你

佩服你，能发这么好的帖子，厉害

-------------------------
We provide all WoW Gold services. You can buy  WoW Gold Cheap WoW Gold here!
Welcome to our website for you World of Warcraft Gold,WoW Gold,Cheap World of Warcraft Gold,buy cheap WoW Gold,real WoW Gold,jewelry store..
理想

TOP

‹‹ 上一主题 | 下一主题 ››
发新话题