[返回首页]
 ◎ 您当前的位置:首页 >> 站长学堂 >> 网页设计 >> Html/Css >> 正文
CSS手册简编
作者: 来源: 发布时间:2007-8-9 23:28:46 


在应用时可以根据需要随意运用以上三种方式,但在实际中内联式样式单和嵌入式样式单使用得更多一些。

三、样式单的语法特征

  样式单有自己独特的书写方法,掌握了它的语法特征,再了解它的各种属性,那么你会发现在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.xmlasp.net))和RGB(如rgb(255,255,255))等多种方式表示。下面我将对其中的重点部分进行更详细的解释。

[NextPage]


选择器的使用方法

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)表示,也可以使用实数(如em)表示,并且元素中对数值还有继承(inherit)的关系比如:

本新闻共10页,当前在第02页  01  02  03  04  05  06  07  08  09  10  

[返回上一页] [打 印]
上一篇文章:HTML中meta作用 | 下一篇文章:没有了
热点文章 推荐文章 相关信息
·用HTML给Flash加链接
·CSS实用教程(一)
·HTML中meta作用
·第二章 CSS的应用方式
·HTML语言剖析(3)
·CSS实现的文字竖排效果
·CSS+DIV设计实例:超酷的竖排导航栏
·CSS初级入门:页面样式的整体声明
·第六章 区块性质的CSS
·CSS实用教程(二)
·CSS 循序渐进(一)画个瓢
·HTML-加速、再加速上