• 本站搜索

  • Css2快速参考（一）

  • 2008-05-13 12:54:40

  • 　　自W3C（The World Wide Web Consortium）制定了代号为Cougar的HTML的4.0版本以来，存在在Web页面中的动 态效果首次被正式的承认了，W3C把动态超文本（Dynamic HTML）的实现分为了三个部分：脚本、支持动态效果的浏览器和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版本，样式单得到了更多的充实。

    二、进一步了解样式单 

    　　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.m/  ysite.com)）和RGB（如rgb(255,255,255)）等多种方式表示。下面我将对其中的重点部分进行更详细的解释：

    1、选择器（Selector）

    　　选择器不只是文档中的元素标记，它还可以是类（Class，这不同于Java或C＋＋中的类）、ID（给予元素特殊的名称，也便于在脚本中使用）或是元素的某种状态（如：a:link）。如： 

    <html> 
    <style> 
    <!-- 
    p {color:red；font-weight : bold } 
    .bigFont {font-size:200%} 
    #blueBack {background-color:blue;color:yellow} 
    --> 
    </style> 
    <body> 
    <p>利用<span class="bigFont">Class</span>和<span id="blueBack">ID</span>显示内容。</p> 
    </body> 
    </html>

    　　其中.someclass代表类，#someID代表ID。类和ID也可以和元素标记合用，比如：

    p.bigFont {……} 

    　　则表示必须在某个为bigFont类的P标记（<p class="bigFont">）才执行样式单，同样的也适合于ID。 

    　　为了简化声明某些重复属性的标记，可以用“,”把不同的选择器隔开，表示它们都表示成相同的属性，如： 

    h1,h2 {color:red} 
    div, p.mytext {……}

    　　有时我们还希望能够在特定的范围内使样式单生效：

    p em {color:red} 

    　　元素标记间又空格隔开，表示在<p>和</p>间的<em>、<em>用红色表示。另外还可以利用“~”表示一个选择器后面紧跟另一个选择器，并且两边以“/”围住： 

    / Selector1 ~ Selector2/ {……} 

    　　表示如果Selector2紧跟着Selector1则使用该样式单。

    2、属性值的单位 

    　　在样式单中，属性的单位多为长度单位，包括px（象素）、pt（磅）、em（一种排版中的单位，1em＝12pt）、mm（毫米）、cm（厘米）、pc （1pc＝12pt）、in（英寸），这些单位可以使用整数（如px）表示，也可以使用实数（如e m）表示，并且元素中对数值还有继承 （inherit）的关系比如： 

    body {font-size:12pt; 
    text-indent:3em; 
    } 
    H1 {font-size:15pt} 

    　　那么在显示中h1的text-indent属性就不是36pt而是45pt。 

    　　有的属性的单位甚至可以是负值，如margin，可以达到一些特殊的效果，如元素之间的重叠。 

    　　另外还有一些其他的单位如角度，它的单位有deg（度）、grad（梯度）和rad（弧度）；频率的单位，Hz和kHz，这些都是我们非常熟悉的。 

    3、注释及空格 

    　　样式单也有注释语句：可以用“/*……*/”作为注释标记，在浏览器中有一个对样式单的分析器，它负责对样式单的检查，分析器将忽略注释标记之间的内容。空 格在样式单中是有效的，如果字符之间有超过一个空格存在，它将省略其余空格，而只保留一个，特别是在声明某些字体的时候，空格一定不能省略。 

    &#61618; 要注意的方面 

    　　首先，样式单是区分大小写的，所以要注意拼写；其次对于CSS2未声明的属性和方法，样式单的分析器会忽略它的存在，如： 

    h1 ,h2 {color:green} 
    h3 ,h4 & h5 {color:red} 
    p {color:blue ;font-variant:small-caps} 

    　　其中“&”是样式单中没有的标号，第二行整个被分析器略过，第三行中的font-variant不是一个合法属性，也被略过（“color:blue”有效）。 

    　　了解了以上规则，你就已经对样式单入门了，下面我将详细介绍样式单的各种属性及属性值。

  • 发表评论 0评论