|
在应用时可以根据需要随意运用以上三种方式,但在实际中内联式样式单和嵌入式样式单使用得更多一些。
三、样式单的语法特征
样式单有自己独特的书写方法,掌握了它的语法特征,再了解它的各种属性,那么你会发现在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)的关系比如:
|