您的位置：首页 > Web前端 > CSS

CSS基础知识

2010-05-06 16:30 197 查看

CSS语法

CSS语法由三部分构成：选择器、属性和值：

selector{property:value;}

选择器(selector)通常是你希望定义的HTML元素或标签，属性(property)是你希望改变的属性，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明（declaration）：

body{color:blue}

上面这行代码的作用是将body元素内的文字颜色定义为蓝色。在上述例子中，body是选择器，而包括在花括号内的的部分是声明。声明依次由两部分构成：属性和值，color为属性，blue为值。

值的不同写法和单位

除了英文单词red，我们还可以使用十六进制的颜色值#ff0000：

p{color:[code]#ff0000
;}[/code]
为了节约字节，我们可以使用CSS的缩写形式：

p{color:[code]#f00
;}[/code]
我们还可以通过两种方法使用RGB值：

p{color:[code]rgb(255,0,0)
;}[/code]
p{color:[code]rgb(100%,0%,0%)
;}[/code]
请注意，当使用RGB百分比时，即使当值为0时也要写百分比符号。但是在其他的情况下就不需要这么做了。比如说，当尺寸为0像素时，0之后不需要使用px单位，因为0就是0，无论单位是什么。

记得写引号

提示：如果值为若干单词，则要给值加引号：
p{font-family:[code]"sansserif"
;}[/code]

多重声明：

提示：如果要定义不止一个声明，则需要用分号将每个声明分开。下面的例子展示出如何定义一个红色文字的居中段落。最后一条规则是不需要加分号的，因为分号在英语中是一个分隔符号，不是结束符号。然而，大多数有经验的设计师会在每条声明的末尾都加上分号，这样的好处是，当你从现有的规则中增减声明时，会尽可能的减少出错的可能性：
p{text-align:center[code];
color:red
;
}[/code]
你应该在每行只描述一个属性，这样可以增强样式定义的可读性：

p{

text-align:center;

color:black;

font-family:arial;

}

空格和大小写

大多数样式表包含不止一条规则，而大多数规则包含不止一个声明。多重声明和空格的使用使得样式表更容易被编辑：

body{

color:#000;

background:#fff;

margin:0;

padding:0;

font-family:Georgia,Palatino,serif;

}

是否包含空格不会影响CSS在浏览器的工作效果，同样，与XHTML不同，CSS对大小写不敏感。不过存在一个例外：如果涉及到与HTML文档一起工作的话，class和id名称对大小写是敏感的。

选择器的分组

你可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中，我们对所有的标题元素进行了分组。所有的标题元素都是绿色的。

h1,h2,h2,h3,h5,h6
{[/code]
color:green;

}

继承及其问题

根据CSS，子元素从父元素继承属性。但是它并不总是按此方式工作。看看下面这条规则：

body{

font-family:Verdana,sans-serif;

}

根据上面这条规则，站点的body元素将使用Verdana字体。

通过CSS继承，子元素将继承最高级元素（在本例中是body）所拥有的属性（这些子元素诸如p,td,ul,ol,ul,li,dl,dt,和dd）。不需要另外的规则，所有body的子元素都应该显示Verdana字体，子元素的子元素也一样。并且在大部分的浏览器中，也确实是这样的。

但是在那个浏览器大战的血腥年代里，这种情况就未必会发生，那时候对标准的支持并不是企业的优先选择。比方说，Netscape4就不支持继承，它不仅忽略继承，而且也忽略应用于body元素的规则。IE/Windows直到IE6还存在相关的问题，在表格内的字体样式会被忽略。我们又该如何是好呢？

友善地对待Netscape4

幸运地是，你可以通过使用我们称为"BeKindtoNetscape4"的冗余法则来处理旧式浏览器无法理解继承的问题。

body{

font-family:Verdana,sans-serif;

}


p,td,ul,ol,li,dl,dt,dd{

font-family:Verdana,sans-serif;

}

4.0浏览器无法理解继承，不过他们可以理解组选择器。这么做虽然会浪费一些用户的带宽，但是如果需要对Netscape4用户进行支持，就不得不这么做。

继承是一个诅咒吗？
如果你不希望"Verdana,sans-serif"字体被所有的子元素继承，又该怎么做呢？比方说，你希望段落的字体是Times。没问题。创建一个针对p的特殊规则，这样它就会摆脱父元素的规则：

body{

font-family:Verdana,sans-serif;

}


td,ul,ol,ul,li,dl,dt,dd{

font-family:Verdana,sans-serif;

}


p
{[/code]
font-family:Times,"TimesNewRoman",serif;

}

派生选择器
通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。

在CSS1中，通过这种方式来应用规则的选择器被称为上下文选择器(contextualselectors)，这是由于它们依赖于上下文关系来应用或者避免某项规则。在CSS2中，它们称为派生选择器，但是无论你如何称呼它们，它们的作用都是相同的。

派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器，我们可以使HTML代码变得更加整洁。

比方说，你希望列表中的strong元素变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器：

listrong
{[/code]
font-style:italic;

font-weight:normal;

}

请注意标记为<strong>的蓝色代码的上下文关系：

<p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p>


<ol>

<li><strong>
我是斜体字。这是因为strong元素位于li元素内。
</strong></li>

<li>我是正常的字体。</li>

</ol>

在上面的例子中，只有li元素中的strong元素的样式为斜体字，无需为strong元素定义特别的class或id，代码更加简洁。

再看看下面的CSS规则：

strong{

color:red;

}


h2{

color:red;

}


h2strong
{[/code]
color:blue;

}

下面是它施加影响的HTML：

<p>Thestronglyemphasizedwordinthisparagraphis<strong>red</strong>.</p>

<h2>Thissubheadisalsored.</h2>

<h2>
Thestronglyemphasizedwordinthissubheadis
<strong>
blue
</strong>
.
</h2>

id选择器
id选择器可以为标有特定id的HTML元素指定特定的样式。

id选择器以"#"来定义。

下面的两个id选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色：

#red
{color:red;}[/code]
#green
{color:green;}[/code]
下面的HTML代码中，id属性为red的p元素显示为红色，而id属性为green的p元素显示为绿色。

<p[code]id="red"
>这个段落是红色。</p>[/code]
<p[code]id="green"
>这个段落是绿色。</p>[/code]
注意：id属性只能在每个HTML文档中出现一次。
id选择器和派生选择器
在现代布局中，id选择器常常用于建立派生选择器。

#sidebarp
{[/code]
font-style:italic;

text-align:right;

margin-top:0.5em;

}

上面的样式只会应用于出现在id是sidebar的元素内的段落。这个元素很可能是div或者是表格单元，尽管它也可能是一个表格或者其他块级元素。它甚至可以是一个内联元素，比如<em></em>或者<span></span>，不过这样的用法是非法的，因为不可以在内联元素<span>中嵌入<p>。

一个选择器，多种用法
即使被标注为sidebar的元素只能在文档中出现一次，这个id选择器作为派生选择器也可以被使用很多次：

#sidebarp
{[/code]
font-style:italic;

text-align:right;

margin-top:0.5em;

}


#sidebarh2
{[/code]
font-size:1em;

font-weight:normal;

font-style:italic;

margin:0;

line-height:1.5;

text-align:right;

}

在这里，与页面中的其他p元素明显不同的是，sidebar内的p元素得到了特殊的处理，同时，与页面中其他所有h2元素明显不同的是，sidebar中的h2元素也得到了不同的特殊处理。

单独的选择器
id选择器即使不被用来创建派生选择器，它也可以独立发挥作用：

#sidebar
{[/code]
border:1pxdotted#000;

padding:10px;

}

根据这条规则，id为sidebar的元素将拥有一个像素宽的黑色点状边框，同时其周围会有10个像素宽的内边距（padding，内部空白）。老版本的Windows/IE浏览器可能会忽略这条规则，除非你特别地定义这个选择器所属的元素：

div#sidebar
{[/code]
border:1pxdotted#000;

padding:10px;

}

在CSS中，类选择器以一个点号显示：

.center
{text-align:center}[/code]
在上面的例子中，所有拥有center类的HTML元素均为居中。

在下面的HTML代码中，h1和p元素都有center类。这意味着两者都将遵守".center"选择器中的规则。

<h1[code]class="center"
>[/code]
Thisheadingwillbecenter-aligned

</h1>


<p[code]class="center"
>[/code]
Thisparagraphwillalsobecenter-aligned.

</p>

注意：类名的第一个字符不能使用数字！它无法在Mozilla或Firefox中起作用。
和id一样，class也可被用作派生选择器：

.fancytd
{[/code]
color:#f60;

background:#666;

}

在上面这个例子中，类名为fancy的更大的元素内部的表格单元都会以灰色背景显示橙色文字。（名为fancy的更大的元素可能是一个表格或者一个div）

元素也可以基于它们的类而被选择：

td.fancy
{[/code]
color:#f60;

background:#666;

}

在上面的例子中，类名为fancy的表格单元将是带有灰色背景的橙色。

<td[code]class="fancy"
>[/code]
你可以将类fancy分配给任何一个表格元素任意多的次数。那些以fancy标注的单元格都会是带有灰色背景的橙色。那些没有被分配名为fancy的类的单元格不会受这条规则的影响。还有一点值得注意，class为fancy的段落也不会是带有灰色背景的橙色，当然，任何其他被标注为fancy的元素也不会受这条规则的影响。这都是由于我们书写这条规则的方式，这个效果被限制于被标注为fancy的表格单元（即使用td元素来选择fancy类）。

外部样式表
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用<link>标签链接到样式表。<link>标签在（文档的）头部：

<head>

<[code]link
rel="stylesheet"type="text/css"href="
mystyle.css
"/>[/code]
</head>

浏览器会从文件mystyle.css中读到样式声明，并根据它来格式文档。

外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的html标签。样式表应该以.css扩展名进行保存。下面是一个样式表文件的例子：

hr{color:sienna;}

p{margin-left:20px;}

body{background-image:url("images/back40.gif");}

不要在属性值与单位之间留有空格。假如你使用“margin-left:20px”而不是“margin-left:20px”，它仅在IE6中有效，但是在Mozilla/Firefox或Netscape中却无法正常工作。

内部样式表
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用<style>标签在文档头部定义内部样式表:

<head>

<styletype="text/css">

hr{color:sienna;}

p{margin-left:20px;}

body{background-image:url("images/back40.gif");}

</style>

</head>

内联样式
由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。但当样式仅需要在一个元素上应用一次时可选择内联样式。

要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style属性可以包含任何CSS属性。本例展示如何改变段落的颜色和左外边距：

<p[code]style
="color:sienna;margin-left:20px">[/code]
Thisisaparagraph

</p>

多重样式
如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。

例如，外部样式表拥有针对h3选择器的三个属性：

h3{

color:red;

text-align:[code]left
;[/code]
font-size:[code]8pt
;[/code]
}

而内部样式表拥有针对h3选择器的两个属性：

h3{

text-align:[code]right
;[/code]
font-size:[code]20pt
;[/code]
}

假如拥有内部样式表的这个页面同时与外部样式表链接，那么h3得到的样式是：

color:[code]red
;[/code]
text-align:[code]right
;[/code]
font-size:[code]20pt
;[/code]
即颜色属性将被继承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代(即内联/内部样式表优先于外部样式表)。

CSS允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。
CSS在这方面的能力远远在HTML之上。
背景色
可以使用background-color属性为元素设置背景色。这个属性接受任何合法的颜色值。
这条规则把元素的背景设置为灰色：
p{background-color:gray;}
如果您希望背景色从元素中的文本向外少有延伸，只需增加一些内边距：
p{background-color:gray;padding:20px;}
可以为所有元素设置背景色，这包括body一直到em和a等行内元素。
background-color不能继承，其默认值是transparent。transparent有“透明”之意。也就是说，如果一个元素没有指定背景色，那么背景就是透明的，这样其祖先元素的背景才能可见。
背景图像
要把图像放入背景，需要使用background-image属性。background-image属性的默认值是none，表示背景上没有放置任何图像。
如果需要设置一个背景图像，必须为这个属性设置一个URL值：
body{background-image:url(/i/eg_bg_04.gif);}
大多数背景都应用到body元素，不过并不仅限于此。
下面例子为一个段落应用了一个背景，而不会对文档的其他部分应用背景：
p.flower{background-image:url(/i/eg_bg_03.gif);}
您甚至可以为行内元素设置背景图像，下面的例子为一个链接设置了背景图像：
a.radio{background-image:url(/i/eg_bg_07.gif);}
理论上讲，甚至可以向textareas和select等替换元素的背景应用图像，不过并不是所有用户代理都能很好地处理这种情况。
另外还要补充一点，background-image也不能继承。事实上，所有背景属性都不能继承。
背景重复
如果需要在页面上对背景图像进行平铺，可以使用background-repeat属性。
属性值repeat导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x和repeat-y分别导致图像只在水平或垂直方向上重复，no-repeat则不允许图像在任何方向上平铺。
默认地，背景图像将从一个元素的左上角开始。请看下面的例子：
body
{
background-image:url(/i/eg_bg_03.gif);
background-repeat:repeat-y;
}
背景定位
可以利用background-position属性改变图像在背景中的位置。
下面的例子在body元素中将一个背景图像居中放置：
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:center;
}
为background-position属性提供值有很多方法。首先，可以使用一些关键字：top、bottom、left、right和center。通常，这些关键字会成对出现，不过也不总是这样。还可以使用长度值，如100px或5cm，最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。
关键字
图像放置关键字最容易理解，其作用如其名称所表明的。例如，topright使图像放置在元素内边距区的右上角。
根据规范，位置关键字可以按任何顺序出现，只要保证不超过两个关键字-一个对应水平方向，另一个对象垂直方向。
如果只出现一个关键字，则认为另一个关键字是center。
所以，如果希望每个段落的中部上方出现一个图像，只需声明如下：
p
{
background-image:url('bgimg.gif');
background-repeat:no-repeat;
background-position:top;
}
下面是等价的位置关键字：
单一关键字
等价的关键字
center
centercenter
top
topcenter或centertop
bottom
bottomcenter或centerbottom
right
rightcenter或centerright
left
leftcenter或centerleft
百分数值
百分数值的表现方式更为复杂。假设你希望用百分数值将图像在其元素中居中，这很容易：
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:50%50%;
}
这会导致图像适当放置，其中心与其元素的中心对齐。换句话说，百分数值同时应用于元素和图像。也就是说，图像中描述为50%50%的点（中心点）与元素中描述为50%50%的点（中心点）对齐。
如果图像位于0%0%，其左上角将放在元素内边距区的左上角。如果图像位置是100%100%，会使图像的右下角放在右边距的右下角。
因此，如果你想把一个图像放在水平方向2/3、垂直方向1/3处，可以这样声明：
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:66%33%;
}
如果只提供一个百分数值，所提供的这个值将用作水平值，垂直值将假设为50%。这一点与关键字类似。
background-position的默认值是0%0%，在功能上相当于topleft。这就解释了背景图像为什么总是从元素内边距区的左上角开始平铺，除非您设置了不同的位置值。
长度值
长度值解释的是元素内边距区左上角的偏移。偏移点是图像的左上角。
比如，如果设置值为50px100px，图像的左上角将在元素内边距区左上角向右50像素、向下100像素的位置上：
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:50px100px;
}
注意，这一点与百分数值不同，因为偏移只是从一个左上角到另一个左上角。也就是说，图像的左上角与background-position声明中的指定的点对齐。
背景关联
如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。
您可以通过background-attachment属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响：
body
{
background-image:url(/i/eg_bg_02.gif);
background-repeat:no-repeat;
background-attachment:fixed
}
background-attachment属性的默认值是scroll，也就是说，在默认的情况下，背景会随文档滚动。
CSS文本属性可定义文本的外观。
通过文本属性，您可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。
缩进文本
把Web页面上的段落的第一行缩进，这是一种最常用的文本格式化效果。
CSS提供了text-indent属性，该属性可以方便地实现文本缩进。
通过使用text-indent属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。
这个属性最常见的用途是将段落的首行缩进，下面的规则会使所有段落的首行缩进5em：
p{text-indent:5em;}
注意：一般来说，可以为所有块级元素应用text-indent，但无法将该属性应用于行内元素，图像之类的替换元素上也无法应用text-indent属性。不过，如果一个块级元素（比如段落）的首行中有一个图像，它会随该行的其余文本移动。
提示：如果想把一个行内元素的第一行“缩进”，可以用左内边距或外边距创造这种效果。
使用负值
text-indent还可以设置为负值。利用这种技术，可以实现很多有趣的效果，比如“悬挂缩进”，即第一行悬挂在元素中余下部分的左边：
p{text-indent:-5em;}
不过在为text-indent设置负值时要当心，如果对一个段落设置了负值，那么首行的某些文本可能会超出浏览器窗口的左边界。为了避免出现这种显示问题，建议针对负缩进再设置一个外边距或一些内边距：
p{text-indent:-5em;padding-left:5em;}
使用百分比值
text-indent可以使用所有长度单位，包括百分比值。
百分数要相对于缩进元素父元素的宽度。换句话说，如果将缩进值设置为20%，所影响元素的第一行会缩进其父元素宽度的20%。
在下例中，缩进值是父元素的20%，即100个像素：
div{width:500px;}
p{text-indent:20%;}

<div>
<p>thisisaparagragh</p>
</div>
继承
text-indent属性可以继承，请考虑如下标记：
div#outer{width:500px;}
div#inner{text-indent:10%;}
p{width:200px;}

<divid="outer">
<divid="inner">sometext.sometext.sometext.
<p>thisisaparagragh.</p>
</div>
</div>
以上标记中的段落也会缩进50像素，这是因为这个段落继承了id为inner的div元素的缩进值。
水平对齐
text-align是一个基本的属性，它会影响一个元素中的文本行互相之间的对齐方式。它的前3个值相当直接，不过第4个和第5个则略有些复杂。
值left、right和center会导致元素中的文本分别左对齐、右对齐和居中。
西方语言都是从左向右读，所有text-align的默认值是left。文本在左边界对齐，右边界呈锯齿状（称为“从左到右”文本）。对于希伯来语和阿拉伯语之类的的语言，text-align则默认为right，因为这些语言从右向左读。不出所料，center会使每个文本行在元素中居中。
提示：将块级元素或表元素居中，要通过在这些元素上适当地设置左、右外边距来实现。
text-align:center与<CENTER>
您可能会认为text-align:center与<CENTER>元素的作用一样，但实际上二者大不相同。
<CENTER>不仅影响文本，还会把整个元素居中。text-align不会控制元素的对齐，而只影响内部内容。元素本身不会从一段移到另一端，只是其中的文本受影响。
justify
最后一个水平对齐属性是justify。
在两端对齐文本中，文本行的左右两端都放在父元素的内边界上。然后，调整单词和字母间的间隔，使各行的长度恰好相等。您也许已经注意到了，两端对齐文本在打印领域很常见。
需要注意的是，要由用户代理（而不是CSS）来确定两端对齐文本如何拉伸，以填满父元素左右边界之间的空间。如需了解详情。
字间隔
word-spacing属性可以改变字（单词）之间的标准间隔。其默认值normal与设置值为0是一样的。
word-spacing属性接受一个正长度值或负长度值。如果提供一个正长度值，那么字之间的间隔就会增加。为word-spacing设置一个负值，会把它拉近：
p.spread{word-spacing:30px;}
p.tight{word-spacing:-0.5em;}

<pclass="spread">
Thisisaparagraph.Thespacesbetweenwordswillbedecreased.
</p>

<pclass="tight">
Thisisaparagraph.Thespacesbetweenwordswillbeincreased.
</p>
字母间隔
letter-spacing属性与word-spacing的区别在于，字母间隔修改的是字符或字母之间的间隔。
与word-spacing属性一样，letter-spacing属性的可取值包括所有长度。默认关键字是normal（这与letter-spacing:0相同）。输入的长度值会使字母之间的间隔增加或减少指定的量：
h1{letter-spacing:-0.5em}
h4{letter-spacing:20px}

<h1>Thisisheader1</h1>
<h4>Thisisheader4</h4>
字符转换
text-transform属性处理文本的大小写。这个属性有4个值：

none

uppercase

lowercase

capitalize

默认值none对文本不做任何改动，将使用源文档中的原有大小写。顾名思义，uppercase和lowercase将文本转换为全大写和全小写字符。最后，capitalize只对每个单词的首字母大写。
作为一个属性，text-transform可能无关紧要，不过如果您突然决定把所有h1元素变为大写，这个属性就很有用。不必单独地修改所有h1元素的内容，只需使用text-transform为你完成这个修改：
h1{text-transform:uppercase}
使用text-transform有两方面的好处。首先，只需写一个简单的规则来完成这个修改，而无需修改h1元素本身。其次，如果您以后决定将所有大小写再切换为原来的大小写，可以更容易地完成修改。
文本装饰
接下来，我们讨论text-decoration属性，这是一个很有意思的属性，它提供了很多非常有趣的行为。
text-decoration有5个值：

none

underline

overline

line-through

blink

不出所料，underline会对元素加下划线，就像HTML中的U元素一样。overline的作用恰好相反，会在文本的顶端画一个上划线。值line-through则在文本中间画一个贯穿线，等价于HTML中的S和strike元素。blink会让文本闪烁，类似于Netscape支持的颇招非议的blink标记。
none值会关闭原本应用到一个元素上的所有装饰。通常，无装饰的文本是默认外观，但也不总是这样。例如，链接默认地会有下划线。如果您希望去掉超链接的下划线，可以使用以下CSS来做到这一点：
a{text-decoration:none;}
注意：如果显式地用这样一个规则去掉链接的下划线，那么锚与正常文本之间在视觉上的唯一差别就是颜色（至少默认是这样的，不过也不能完全保证其颜色肯定有区别）。
还可以在一个规则中结合多种装饰。如果希望所有超链接既有下划线，又有上划线，则规则如下：
a:linka:visited{text-decoration:underlineoverline;}
不过要注意的是，如果两个不同的装饰都与同一元素匹配，胜出规则的值会完全取代另一个值。请考虑以下的规则：
h2.stricken{text-decoration:line-through;}
h2{text-decoration:underlineoverline;}
对于给定的规则，所有class为stricken的h2元素都只有一个贯穿线装饰，而没有下划线和上划线，因为text-decoration值会替换而不是累积起来。
处理空白符
white-space属性会影响到用户代理对源文档中的空格、换行和tab字符的处理。
通过使用该属性，可以影响浏览器处理字之间和文本行之间的空白符的方式。从某种程度上讲，默认的XHTML处理已经完成了空白符处理：它会把所有空白符合并为一个空格。所以给定以下标记，它在Web浏览器中显示时，各个字之间只会显示一个空格，同时忽略元素中的换行：
<p>Thisparagraphhasmany
spacesinit.</p>
可以用以下声明显式地设置这种默认行为：
p{white-space:normal;}
上面的规则告诉浏览器按照平常的做法去处理：丢掉多余的空白符。如果给定这个值，换行字符（回车）会转换为空格，一行中多个空格的序列也会转换为一个空格。
值pre
不过，如果将white-space设置为pre，受这个属性影响的元素中，空白符的处理就有所不同，其行为就像XHTML的pre元素一样；空白符不会被忽略。
如果white-space属性的值为pre，浏览器将会注意额外的空格，甚至回车。在这个方面，而且仅在这个方面，任何元素都可以相当于一个pre元素。
注意：经测试，IE7以及更早版本的浏览器不支持该值，因此请使用非IE的浏览器来查看上面的实例。
值nowrap
与之相对的值是nowrap，它会防止元素中的文本换行，除非使用了一个br元素。在CSS中使用nowrap非常类似于HTML4中用<tdnowrap>将一个表单元格设置为不能换行，不过white-space值可以应用到任何元素。
值pre-wrap和pre-line
CSS2.1引入了值pre-wrap和pre-line，这在以前版本的CSS中是没有的。这些值的作用是允许创作人员更好地控制空白符处理。
如果元素的white-space设置为pre-wrap，那么该元素中的文本会保留空白符序列，但是文本行会正常地换行。如果设置为这个值，源文本中的行分隔符以及生成的行分隔符也会保留。pre-line与pre-wrap相反，会像正常文本中一样合并空白符序列，但保留换行符。
注意：我们在IE7和FireFox2.0浏览器中测试了上面的两个实例，但是结果是，值pre-wrap和pre-line都没有得到很好的支持。
总结
下面的表格总结了white-space属性的行为：
值
空白符
换行符
自动换行
pre-line
合并
保留
允许
normal
合并
忽略
允许
nowrap
合并
忽略
不允许
pre
保留
保留
不允许
pre-wrap
保留
保留
允许
文本方向
如果您阅读的是英文书籍，就会从左到右、从上到下地阅读，这就是英文的流方向。不过，并不是所有语言都如此。我们知道古汉语就是从右到左来阅读的，当然还包括希伯来语和阿拉伯语等等。CSS2引入了一个属性来描述其方向性。
direction属性影响块级元素中文本的书写方向、表中列布局的方向、内容水平填充其元素框的方向、以及两端对齐元素中最后一行的为止。
注释：对于行内元素，只有当unicode-bidi属性设置为embed或bidi-override时才会应用direction属性。
direction属性有两个值：ltr和rtl。大多数情况下，默认值是ltr，显示从左到右的文本。如果显示从右到左的文本，应使用值rtl。
CSS文本属性
属性
描述
color
设置文本颜色
direction
设置文本方向。
line-height
设置行高。
letter-spacing
设置字符间距。
text-align
对齐元素中的文本。
text-decoration
向文本添加修饰。
text-indent
缩进元素中文本的首行。
text-shadow
设置文本阴影。CSS2包含该属性，但是CSS2.1没有保留该属性。
text-transform
控制元素中的字母。
unicode-bidi
设置文本方向。
white-space
设置元素中空白的处理方式。
word-spacing
设置字间距。
CSS字体(font)属性定义文本中的字体。

设置字体属性是样式表的最常见用途之一。CSS字体属性允许您设置字体系列(font-family)和字体加粗(font-weight)，您还可以设置字体的大小、字体风格（如斜体）和字体变形（如小型大写字母）。

指定字体
可以使用font-family属性在文档中采用某种字体系列。

使用通用字体系列
如果你希望文档使用一种sans-serif字体，但是你并不关心是哪一种字体，以下就是一个合适的声明：

body{font-family:sans-serif;}

这样用户代理就会从sans-serif字体系列中选择一个字体（如Helvetica），并将其应用到body元素。因为有继承，这种字体选择还将应用到body元素中包含的所有元素，除非有一种更特定的选择器将其覆盖。

指定字体系列
除了指定通用的字体系列，您还可以通过font-family属性设置更具体的字体。

下面的例子为所有h1元素设置了Verdana字体：

h1{font-family:Georgia;}

这样的规则同时会产生另外一个问题，如果用户代理上没有安装Georgia字体，就只能使用用户代理的默认字体来显示h1元素。

我们可以通过结合特定字体名和通用字体系列来解决这个问题：

h1{font-family:Georgia,serif;}

如果读者没有安装Georgia，但安装了Times字体（serif字体系列中的一种字体），用户代理就可能对h1元素使用Times。尽管Times与Georgia并不完全匹配，但至少足够接近。

因此，我们建议在所有font-family规则中都提供一个通用字体系列。这样就提供了一条后路，在用户代理无法提供与规则匹配的特定字体时，就可以选择一个候选字体。

如果您对字体非常熟悉，也可以为给定的元素指定一系列类似的字体。要做到这一点，需要把这些字体按照优先顺序排列，然后用逗号进行连接：

p{font-family:Times,TimesNR,'NewCenturySchoolbook',

Georgia,'NewYork',serif;}

根据这个列表，用户代理会按所列的顺序查找这些字体。如果列出的所有字体都不可用，就会简单地选择一种可用的serif字体。

使用引号
您也许已经注意到了，上面的例子中使用了单引号。只有当一个字体名中有一个或多个空格（比如NewYork），或者如果字体名包括#或$之类的符号，才需要在font-family声明中加引号。

单引号或双引号都可以接受。但是，如果把一个font-family属性放在HTML的style属性中，则需要使用该属性本身未使用的那种引号。

CSS字体属性
属性
描述
font
简写属性。作用是把所有针对字体的属性设置在一个声明中。
font-family
设置字体系列。
font-size
设置字体的尺寸。
font-size-adjust
当首选字体不可用时，对替换字体进行智能缩放。（CSS2.1已删除该属性。）
font-stretch
对字体进行水平拉伸。（CSS2.1已删除该属性。）
font-style
设置字体风格。
font-variant
以小型大写字体或者正常字体显示文本。
font-weight
设置字体的粗细。
CSS定位属性
CSS定位属性允许你对元素进行定位。
属性
描述
position
把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
top
定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
right
定义了定位元素右外边距边界与其包含块右边界之间的偏移。
bottom
定义了定位元素下外边距边界与其包含块下边界之间的偏移。
left
定义了定位元素左外边距边界与其包含块左边界之间的偏移。
overflow
设置当元素的内容溢出其区域时发生的事情。
clip
设置元素的形状。元素被剪入这个形状之中，然后显示出来。
vertical-align
设置元素的垂直对齐方式。
z-index
设置元素的堆叠顺序。
CSS相对定位
相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。

如果将top设置为20px，那么框将在原位置顶部下面20像素的地方。如果left设置为30像素，那么会在元素左边创建30像素的空间，也就是将元素向右移动。

#box_relative{

position:relative;

left:30px;

top:20px;

}

CSS绝对定位
绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

普通流中其它元素的布局就像绝对定位的元素不存在一样：

#box_relative{

position:absolute;

left:30px;

top:20px;

}

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航