我的书签
添加书签
移除书签13.2 CSS基本语法
CSS虽然不属于编程语言，但它与一般编程语言一样，也有自己的约定语法。在网页设计中，必须遵循这些约定才能够控制HTML标签的外部显示。下面就来讨论CSS的基本语法结构和常用样式属性的使用。
13.2.1 CSS语法结构
通常情况下，CSS的描述部分由三部分组成：选择符(（slector)、属性(（poperty)和属性的取值(（vlue)。其一般格式如下：
选择符{属性：属性的取值}
其中，选择符可以是多种形式，一般是希望定义的HTML元素或标签，属性则是所希望改变的HTML元素或标签的属性，每个属性都有一个值，属性和值之间用冒号分开，最后由花括号包围，这样就组成了一个完整的样式声明。如下面的代码所示：
body{color:White}
在上面的样式声明中，选择符body是指页面主体部分，color是控制文字颜色的属性，White是颜色的值，它的效果是使页面中的文字为白色。这里color属性的值除了可以使用系统内置的颜色值White之外，还可以使用十六进制的颜色值#ffffff或者CSS的缩写形式#fff，如下面的代码所示：
body{color：#ffffff}
body{color：#fff}
当然也可以使用RGB形式的颜色值，但为了保证CSS的可读性，一般不建议采纳这种写法。
如果要定义的样式里面不止一个属性声明，则需要用分号将每个属性声明分开，而最后一个属性声明可以不加分号。然而，在实际CSS编写中，大多数有经验的设计师都会在每条属性声明的末尾都加上一个分号，这样做的好处是当从现有的规则中增减属性声明时，会尽可能地减少出错的可能性。就像这样：
td
{
font-family：华文宋体；
font-size：20px；
height：60px；
background-color：#cccccc；
}
最后，还需要注意的是，如果属性的值由若干单词组成，则需要给该值加上一个引号以声明这是一个单独的值。如下面的代码所示：
td
{
font-family："sans serif"；
}
1.选择符的分组
在CSS的编写中，为了减少对样式的重复定义，可以使用对选择符进行分组的方法来设置样式。这样被分组的选择符就可以分享相同的属性声明，多个选择符之间用逗号分开。如下面的代码所示：
h1，h2
{
color:White；
}
这样，选择符h1、h2便共享了一个样式属性声明，它完全等效于下面的CSS：
h1
{
color:White；
}
h2
{
color:White；
}
2.类选择符
用类选择符能够把相同的元素分类定义不同的样式，定义类选择符时，在自定义类的名称前面加一个圆点符号。例如，下面的样式定义了两个不同的段落，一个段落向右对齐，一个段落向左对齐。如下面的代码所示：
/段落右对齐/
p.right
{
text-align:right；
}
/段落左对齐/
p.left
{
text-align:left；
}
定义好样式之后，就可以在不同的段落里面使用class参数来引用该样式了。如下面的代码所示：
＜p class="center"＞
你好，ASP.NET4.0！（右对齐）
＜h1 class="center"＞
你好，ASP.NET4.0！（左对齐）
除此之外，类选择符还有一种用法，即在选择符中省略HTML标记名，这样就可以把几个不同的元素定义成相同的样式。如下面的样式定义一个文字居中对齐的样式：
.center
{
text-align:center；
}
定义好这个样式之后，可以把该样式应用到任何元素上。如下面的代码所示：
＜p class="center"＞
你好，ASP.NET4.0！（居中对齐）＜/p＞
＜h1 class="center"＞
你好，ASP.NET4.0！（居中对齐）＜/h1＞}
其实，这种省略HTML标记的类选择符是我们以后最常用的CSS方法，使用这种方法，可以很方便地在任意元素上套用预先定义好的类样式，从而加快设计速度。
3.ID选择符
与类选择符不同，ID选择符只能够在单独定义某个元素的样式时使用，即它用来对这个单一元素定义单独的样式。定义ID选择符时要在名称前加上一个“#”号，如下面的代码所示：
/段落右对齐/
p#right
{
text-align:right；
}
ID选择符的应用和类选择符类似，只要把HTML元素或者标签的class属性换成id属性即可。如下面的代码所示：
＜p id="right"＞
你好，ASP.NET4.0！＜/p＞
和类选择符相同，同样可以省略选择符中HTML标记名。如下面的代码所示：
center
{
text-align:center；
}
最后，使用ID选择符的时候一定要注意：它只能够在每个HTML文档中出现一次，如果多次使用同一ID选择符将会出现如图13-3所示的结果。
图 13-3 多次使用ID选择符
4.包含选择符
包含选择符又称为派生选择符，它允许你根据文档的上下文关系（即包含关系）来确定某个标签的样式。如果元素1里包含元素2，这种方式只对在元素1里的元素2定义，对单独的元素1或元素2无定义。来看下面的例子：
li strong
{
font-style:italic；
font-weight:normal；
}
在上面的li strong样式中，通过包含选择符将列表li中的strong元素变为斜体字，而不是通常的粗体字。这样就可以在列表li中通过使用strong元素来使列表中的文字变为斜体字。值得注意的是，strong元素在列表li中样式才起作用，如果单独地使用列表li或者strong元素，样式将不起任何作用。页面使用方法如下面的代码所示：
＜p＞＜strong＞我是粗体字，不是斜体字，因为我不在列表当中，
所以这个规则对我不起作用＜/strong＞＜/p＞
＜ol＞
＜li＞＜strong＞我是斜体字。
这是因为strong元素位于li元素内。＜/strong＞＜/li＞
＜li＞我是正常的字体。＜/li＞
＜/ol＞
在上面的代码中，只有li元素中的strong元素的样式为斜体字，而无须为strong元素定义特别的class或id。因此，这样的CSS定义方式可以使代码变得非常简洁易读。其运行结果如图13-4所示。
为了能够更加深入地了解包含选择符，请继续来看下面的样式表：
font
{
font-size：20px；
}
h2
{
font-size：30px；
}
h2 font
{
font-size：45px；
font-style:italic；
}
上面的样式表分别定义了三个样式，包含选择符h2 font与其他两个样式（h2与font)之间没有任何关系，都是独立的样式。再看下面的页面测试代码：
＜p＞
正常字体＜font＞运用样式font＜/font＞.＜/p＞
＜h2＞
运用样式h2＜/h2＞
＜h2＞
运用样式h2＜font＞运用样式h2 font＜/font＞.＜/h2＞
运行上述代码，运行结果如图13-5所示。其中，当执行页面语句“＜font＞运用样式font＜/font＞”时，调用样式font；当执行页面语句“＜h2＞运用样式h2＜/h2＞”时，调用样式h2；当执行页面语句“＜h2＞运用样式h2＜font＞运用样式h2 font＜/font＞.＜/h2＞”时，前半部分“＜h2＞运用样式h2”和后半部分“.＜/h2＞”调用样式h2，中间部分“＜font＞运用样式h2 font＜/font＞”调用样式h2 font。
图 13-4 样式li strong的运行结果
图 13-5 样式h2 font的运行结果
5.样式表的层叠性
样式表的层叠性也就是样式表的继承性，样式表的继承规则是外部的元素样式会保留下来继承给这个元素所包含的其他元素。事实上，所有在元素中嵌套的元素都会继承外层元素指定的属性值，有时会把很多层嵌套的样式叠加在一起，除非另外更改。如下面的样式：
body
{
font-size：30px；
}
根据上面这条规则，通过CSS继承页面的子元素将继承最高级元素（在本例中是body)所拥有的属性，即页面所有字体大小默认为30px。
但在有些特殊情况下，我们并不需要元素继承其外部的样式属性，这时，就需要针对具体的元素声明其样式。如下面的样式：
body
{
font-size：30px；
color:Blue；
}
p
{
font-size：12px；
}
如果在页面里加入如下元素：
＜p＞我爱ASP.NET＜/p＞
这时，“＜p＞我爱ASP.NET”在字体大小方面将引用样式p，即显示12px尺寸的字；在字体颜色方面将引用body样式，即显示为蓝色。其实，当样式表继承遇到冲突时，总是以最后定义的样式为准。＜/p＞
除此之外，不同的选择符定义相同的元素时，要考虑到不同的选择符之间的优先级。对于ID选择符、类选择符和HTML标记选择符，因为ID选择符是最后加上元素的，所以优先级最高，其次是类选择符。如果想超越这三者之间的关系，可以用！important提升样式表的优先权。例如：
c1
{
color：#FF0000！important；
}
.c2
{
color：#0000FF；
}
c3
{
color：#FFFF00；
}
同时对页面中的一个段落加上这三种样式，它最后会依照被！important声明的HTML标记选择符为红色文字。如果去掉！important，则依照优先权最高的ID选择符为黄色文字。
注意由于浏览器的原因，这种继承关系有时也被显示得千奇百怪。比方说Netscape 4就不支持继承，它不仅忽略继承，而且也忽略应用于body元素的规则。因此，建议在设计CSS样式时，尽量把样式写全面，而少用继承性这个特性，以此来解决多浏览器显示带来的问题。
13.2.2 背景
网页的背景相信大家并不陌生，它也是非常重要的CSS属性。在CSS中，不仅可以使用颜色作为背景，还可以使用图像创建相当复杂的网页背景效果。常用的CSS背景属性如表13-1所示。
1.背景颜色
如表13-1所示，可以使用background-color属性来为元素设置背景色，这个属性接受任何合法的颜色值。通常情况下，background-color属性的默认值是transparent，即背景“透明”。也就是说，如果一个元素没有指定背景色，那么背景就是透明的。
如下面的代码所示，可以在body里面通过设置background-color属性来将整个网页的背景色设置为蓝色。
body
{
background-color:Blue；
}
当然，也可以为网页里面的标签设置背景色，如下面的代码为页面的所有DIV标签设置一个绿色背景：
div
{
background-color:Green；
}
2.背景图像
除了可以使用颜色作为背景之外，还可以通过background-image属性来使用图像作为页面元素的背景。通常情况下，background-image属性的默认值是none，表示背景上没有放置任何图像。
如下面的代码所示，可以在body里面通过设置background-image属性来将图片bg.gif设置为整个网页的背景图像。
body
{
background-image:url（/Images/bg.gif)；
}
同理，也可以将背景图像应用到一个网页标签里面，如设置DIV的背景图像：
div
{
background-image:url（/Images/bg.gif)；
}
甚至可以为行内元素设置背景图像，下面的例子为一个链接设置了背景图像：
a.radio
{
background-image:url（/Images/bg.gif)
}
3.背景重复
通过使用background-image属性来设置背景图像。在默认情况下，背景图像将会不断重复（即背景图像在水平和垂直方向上重复），直到填满整个页面。如果希望在页面上对背景图像的这种重复进行控制，可以使用background-repeat属性。
如表13-2所示，background-repeat属性有五种值供选择使用，如下面的例子将禁止页面的背景图像重复：
body
{
background-image:url（/Images/bg.gif)；
background-repeat:no-repeat；
}
4.背景定位
除了设置背景图像的重复属性之外，还可以通过设置background-position属性来控制背景图像出现的位置。background-position属性的值如表13-3所示。
下面的代码可以控制背景图像居中显示：
body
{
background-image:url（/Images/bg.gif)；
background-repeat:no-repeat；
background-position:center center；
}
当然，也可以使用单一关键字的值来设置background-position属性，如表13-4所示。
通过表13-4可知，上面的代码可以写成如下样式（即background-position:center center等价于background-position:center)：
body
{
background-image:url（/Images/bg.gif)；
background-repeat:no-repeat；
background-position:center；
}
最后需要说明的是，background-position属性的默认值是0%0%，在功能上相当于top left。也就是说，如果图像位于0%0%，其图像的左上角将放在元素内边距区的左上角；如果图像位置是100%100%，会使图像的右下角放在右边距的右下角。因此，假设想把一个图像放在水平方向2/3、垂直方向1/3处，可以这样声明：
body
{
background-image:url（/Images/bg.gif)；
background-repeat:no-repeat；
background-position：66%33%；
}
5.背景关联
如果网页文档比较长，那么当网页文档向下滚动时，背景图像也会随之滚动。当网页文档滚动到超过图像的位置时，图像就会消失。这时，可以通过设置background-attachment属性来防止这种滚动。
其中，background-attachment属性有两个值：
1）scroll：默认值，表示背景图像会随着页面其余部分的滚动而移动。
2）fixed：当页面的其余部分滚动时，背景图像不会移动。
如下面的代码，它声明图像相对于可视区是固定的(（fxed)，因此不会受到滚动的影响。
body
{
background-image:url（/Images/bg.gif)；
background-attachment:fixed；
}
13.2.3 字体
在CSS设计中，设置字体属性是最常见的样式表设计之一。CSS字体属性允许你自定义字体的各种样式，如定义字体、字体加粗、字体的大小、字体风格和字体变形等。常用的CSS字体属性如表13-5所示。
1.定义字体
如表13-5所示，font-family属性可以规定元素的字体系列。通常情况下，有两种类型的字体系列名称：
1）指定的系列名称，具体字体的名称，如“Times”、“Courier”、“Arial”。它的CSS定义例子如下面的代码所示：
div
{
font-family:Courier；
}
2）通常字体系列名称，如“Serif”、“Sans-Serif”、“Cursive”、“Fantasy”与“Monospace”。它的定义方法与上面一样，如下面的代码所示：
div
{
font-family:Monospace；
}
需要注意的是，如果字体的名称为汉字或者由多个单词组成，这时需要用双引号将字体的名字引起来，以表明它是一个字体名称。当然，也可以使用单引号。示例如下面的代码所示：
div
{
font-family："华文行楷"；
}
除了使用单一的字体名称之外，font-family属性还可以把多个字体名称作为一个“回退”系统来保存。通常情况下，多个字体名称使用逗号分隔，如果浏览器不支持第一个字体，则会尝试下一个。依次类推，直到浏览器找到它可识别的第一个值为止。示例如下面的代码所示：
div
{
font-family："Times New Roman"，Georgia, Serif；
}
在上面的代码中，如果浏览器不识别“Times New Roman”字体，那么它将继续寻找下面的字体“Georgia”，直到找到第一个能够识别的字体为止。
2.字体大小
如果需要设置字体的大小，可以通过使用字体的font-size属性来进行设置。示例如下面的代码所示：
div
{
font-family："华文隶书"；
font-size：12px；
}
在上面的代码中，字体大小单位除了使用像素(（p)外，还可以使用pt或者系统自带的样式等来进行相关设置。
3.字体样式
字体样式属性font-style用来设置字体的显示风格，它有三个值供选择：
1）normal：默认值，浏览器显示一个标准的字体样式。
2）italic：浏览器会显示一个斜体的字体样式。
3）oblique：浏览器会显示一个倾斜的字体样式。
示例如下面的代码所示：
div
{
font-family："华文隶书"；
font-style:italic；
}
4.字体粗细
字体的font-weight属性用来设置文本的粗细，该属性常用的值如表13-6所示。
其使用方法很简单，示例如下面的代码所示：
div
{
font-family："华文隶书"；
font-weight:bold；
}
13.2.4 文本
CSS文本属性允许你自定义文本的外观。通过文本属性，可以很方便地改变文本的颜色、改变字符间距、对齐文本、装饰文本与对文本进行缩进等。常用的CSS文本属性如表13-7所示。
1.缩进文本
缩进Web页面上的文本段落的第一行，是一种最常用的文本格式化效果。CSS提供了text-indent属性，该属性可以方便地实现文本缩进。通过使用text-indent属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值或者百分比。
如下面示例会使所有段落的首行缩进5 em：
p
{
text-indent：5em；
}
一般来讲，可以为所有块级元素应用text-indent属性，但无法将该属性应用于行内元素。当然，图像之类的替换元素上也无法应用text-indent属性。不过，如果一个块级元素（如段落）的首行中有一个图像，它会随该行的其余文本移动。如果想把一个行内元素的第一行“缩进”，可以用左内边距或外边距创造这种效果。
上面说过，text-indent除了可以设置一般的长度值以外，还可以设置它为负值。利用这种技术，可以实现很多有趣的效果，如“悬挂缩进”，即第一行悬挂在元素中余下部分的左边。如下面的代码所示：
p
{
text-indent：5em；
}
不过在为text-indent属性设置负值时要当心，如果对一个段落设置了负值，那么首行的某些文本可能会超出浏览器窗口的左边界，因而不能够显示出来。为了避免出现这种显示问题，建议针对负缩进再设置一个外边距或一些内边距。如下面的代码所示：
p
{
text-indent：-5em；
padding-left：5em；
}
当然，也可以为它设置百分比来控制首行的缩进位置。如下面的代码所示：
p
{
text-indent：20%；
}
这里的百分数是相对于缩进元素父元素的宽度。换句话说，如果将缩进值设置为20%，所影响元素的第一行会缩进其父元素宽度的20%。
2.水平对齐
在CSS中，可以通过设置text-align属性来确定元素中的文本的水平对齐方式。该属性通过指定行框与哪个点对齐，从而设置块级元素内文本的水平对齐方式。注意，它与＜center＞元素是两个完全不同的概念，＜center＞元素不仅影响文本，还会把整个元素居中。text-align不会控制元素的对齐，而只影响元素内部文本内容。该属性的取值如表13-8所示。
如下面的示例将使＜p＞元素里的文本居中显示：
p
{
text-align:center；
}
最后，使用值justify时需要注意，它可以使文本的两端都对齐。在两端对齐文本中，文本行的左右两端都放在父元素的内边界上。然后，调整单词和字母间的间隔，使各行的长度恰好相等。但这种间隔的调整不是由CSS来确定的，而是由用户代理来确定两端对齐文本如何拉伸，以填满父元素左右边界之间的空间。例如，有些浏览器可能只在单词之间增加额外的空间，而另外一些浏览器可能会平均分布字母间的额外空间(（CS规范特别指出，如果letter-spacing属性指定为一个长度值，“用户代理不能进一步增加或减少字符间的空间”）。还有一些用户代理可能会减少某些行的空间，使文本挤得更紧密。所有这些做法都会影响元素的外观，甚至改变其高度，这取决于用户代理的对齐选择影响了多少文本行。
3.字间隔与字母间隔
在CSS中，如果想控制文本中字与字之间的显示间隔，那么可以通过设置word-spacing属性的值来满足要求。word-spacing属性可以接受一个正长度值或负长度值。如果提供一个正长度值，那么字之间的间隔就会增加。为word-spacing设置一个负值，会把它拉近。默认情况下，word-spacing属性值为normal，它与设置值为0是一样的。设置示例如下面的代码所示：
p.spread
{
word-spacing：20px；
}
p.tight
{
word-spacing：-0.5em；
}
在页面设计中，除了可以在CSS中通过word-spacing属性来设置字间隔，还可以通过letter-spacing属性来设置字母间隔。letter-spacing属性的值设置方式与word-spacing属性一样，如下面的代码所示：
h1
{
letter-spacing：20px；
}
4.文本装饰
文本装饰属性text-decoration允许对文本设置某种效果，如加下划线等。如果后代元素没有自己的文本装饰属性，祖先元素上设置的文本装饰属性会“延伸”到后代元素中。它提供的值如表13-9所示。
如下面的示例将定义一条线从＜p＞元素里的文本中间穿过：
p
{
text-decoration:line-through；
}
none值会关闭原本应用到一个元素上的所有装饰。通常，无装饰的文本是默认外观，但也不总是这样。例如，超链接默认有下划线。如果希望去掉超链接的下划线，可以使用以下CSS来做到这一点：
a
{
text-decoration:none；
}
当然，还可以在text-decoration属性中定义多个值，即如果希望所有超链接既有下划线，又有上划线，则可以定义如下：
a:link a:visited
{
text-decoration:underline overline；
}
需要注意的是，如果两个不同的文本装饰属性都与同一元素匹配，则优先样式的值会完全取代另一个值。如下面的定义：
h2.stricken
{
text-decoration:line-through；
}
h2
{
text-decoration:underline overline；
}
对于上面的两个样式，所有class为stricken的h2元素都只有一个贯穿线装饰，而没有下划线和上划线，因为text-decoration值会替换而不是累积起来。
5.处理空白符
对于元素中空白符的处理，CSS提供了white-space属性来解决这一问题。white-space属性会影响到用户代理对源文档中的空格、换行和tab字符的处理。通过使用该属性，可以影响浏览器处理字之间和文本行之间的空白符的方式。该属性的值如表13-10所示。
设置示例如下面的代码所示：
p
{
white-space:normal；
}
上面的样式定义告诉浏览器按照平常的做法去处理：丢掉多余的空白符。如果给定这个值，换行字符（回车）会转换为空格，一行中多个空格的序列也会转换为一个空格。
