CSS属性Word格式文档下载.docx
《CSS属性Word格式文档下载.docx》由会员分享,可在线阅读,更多相关《CSS属性Word格式文档下载.docx(72页珍藏版)》请在冰点文库上搜索。
![CSS属性Word格式文档下载.docx](https://file1.bingdoc.com/fileroot1/2023-4/30/516b4199-fa2c-439b-a32d-644e54b965ad/516b4199-fa2c-439b-a32d-644e54b965ad1.gif)
这个属性接受任何合法的颜色值。
这条规则把元素的背景设置为灰色:
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:
background-repeat:
repeat-y;
}
背景定位
可以利用background-position属性改变图像在背景中的位置。
下面的例子在body元素中将一个背景图像居中放置:
url('
/i/eg_bg_03.gif'
);
no-repeat;
background-position:
center;
为background-position属性提供值有很多方法。
首先,可以使用一些关键字:
top、bottom、left、right和center。
通常,这些关键字会成对出现,不过也不总是这样。
还可以使用长度值,如100px或5cm,最后也可以使用百分数值。
不同类型的值对于背景图像的放置稍有差异。
关键字
图像放置关键字最容易理解,其作用如其名称所表明的。
例如,topright使图像放置在元素内边距区的右上角。
根据规范,位置关键字可以按任何顺序出现,只要保证不超过两个关键字-一个对应水平方向,另一个对象垂直方向。
如果只出现一个关键字,则认为另一个关键字是center。
所以,如果希望每个段落的中部上方出现一个图像,只需声明如下:
p
bgimg.gif'
top;
下面是等价的位置关键字:
单一关键字
等价的关键字
Center
centercenter
Top
topcenter或centertop
Bottom
bottomcenter或centerbottom
Right
rightcenter或centerright
Left
leftcenter或centerleft
百分数值
百分数值的表现方式更为复杂。
假设你希望用百分数值将图像在其元素中居中,这很容易:
50%50%;
这会导致图像适当放置,其中心与其元素的中心对齐。
换句话说,百分数值同时应用于元素和图像。
也就是说,图像中描述为50%50%的点(中心点)与元素中描述为50%50%的点(中心点)对齐。
如果图像位于0%0%,其左上角将放在元素内边距区的左上角。
如果图像位置是100%100%,会使图像的右下角放在右边距的右下角。
因此,如果你想把一个图像放在水平方向2/3、垂直方向1/3处,可以这样声明:
66%33%;
如果只提供一个百分数值,所提供的这个值将用作水平值,垂直值将假设为50%。
这一点与关键字类似。
background-position的默认值是0%0%,在功能上相当于topleft。
这就解释了背景图像为什么总是从元素内边距区的左上角开始平铺,除非您设置了不同的位置值。
长度值
长度值解释的是元素内边距区左上角的偏移。
偏移点是图像的左上角。
比如,如果设置值为50px100px,图像的左上角将在元素内边距区左上角向右50像素、向下100像素的位置上:
50px100px;
注意,这一点与百分数值不同,因为偏移只是从一个左上角到另一个左上角。
也就是说,图像的左上角与background-position声明中的指定的点对齐。
背景关联
如果文档比较长,那么当文档向下滚动时,背景图像也会随之滚动。
当文档滚动到超过图像的位置时,图像就会消失。
您可以通过background-attachment属性防止这种滚动。
通过这个属性,可以声明图像相对于可视区是固定的(fixed),因此不会受到滚动的影响:
body
{
url(/i/eg_bg_02.gif);
background-attachment:
fixed
background-attachment属性的默认值是scroll,也就是说,在默认的情况下,背景会随文档滚动。
CSS背景实例
设置背景颜色
本例演示如何为元素设置背景颜色。
设置文本的背景颜色
本例颜色如何设置部分文本的背景颜色。
将图像设置为背景
本例演示如何将图像设置为背景。
如何重复背景图像
本例演示如何重复背景图像。
如何在垂直方向重复背景图像
本例演示如何垂直地重复背景图像。
如何在水平方向重复背景图像
本例演示如何水平地重复背景图像。
如何仅显示一次背景图像
本例演示如何仅显示一次背景图像。
如何放置背景图像
本例演示如何在页面上放置背景图像。
如何使用%来定位背景图像
本例演示如何使用百分比来在页面上定位背景图像。
如何使用像素来定位背景图像
本例演示如何使用像素来在页面上定位背景图像。
如何设置固定的背景图像
本例演示如何设置固定的背景图像。
图像不会随着页面的其他部分滚动。
所有背景属性在一个声明之中
本例演示如何使用简写属性来将所有背景属性设置在一个声明之中。
CSS背景属性
属性
background
简写属性,作用是将背景属性设置在一个声明中。
background-attachment
背景图像是否固定或者随着页面的其余部分滚动。
background-color
设置元素的背景颜色。
background-image
把图像设置为背景。
background-position
设置背景图像的起始位置。
background-repeat
设置背景图像是否及如何重复。
窗体底端
CSS参考手册
CSS实例
CSS测验
CSS文本
CSS文本属性可定义文本的外观。
通过文本属性,您可以改变文本的颜色、字符间距,对齐文本,装饰文本,对文本进行缩进,等等。
缩进文本
把Web页面上的段落的第一行缩进,这是一种最常用的文本格式化效果。
CSS提供了text-indent属性,该属性可以方便地实现文本缩进。
通过使用text-indent属性,所有元素的第一行都可以缩进一个给定的长度,甚至该长度可以是负值。
这个属性最常见的用途是将段落的首行缩进,下面的规则会使所有段落的首行缩进5em:
p{text-indent:
5em;
注意:
一般来说,可以为所有块级元素应用text-indent,但无法将该属性应用于行内元素,图像之类的替换元素上也无法应用text-indent属性。
不过,如果一个块级元素(比如段落)的首行中有一个图像,它会随该行的其余文本移动。
提示:
如果想把一个行内元素的第一行“缩进”,可以用左内边距或外边距创造这种效果。
使用负值
text-indent还可以设置为负值。
利用这种技术,可以实现很多有趣的效果,比如“悬挂缩进”,即第一行悬挂在元素中余下部分的左边:
-5em;
不过在为text-indent设置负值时要当心,如果对一个段落设置了负值,那么首行的某些文本可能会超出浏览器窗口的左边界。
为了避免出现这种显示问题,建议针对负缩进再设置一个外边距或一些内边距:
padding-left:
使用百分比值
text-indent可以使用所有长度单位,包括百分比值。
百分数要相对于缩进元素父元素的宽度。
换句话说,如果将缩进值设置为20%,所影响元素的第一行会缩进其父元素宽度的20%。
在下例中,缩进值是父元素的20%,即100个像素:
div{width:
500px;
20%;
<
div>
p>
thisisaparagragh<
/p>
/div>
继承
text-indent属性可以继承,请考虑如下标记:
div#outer{width:
div#inner{text-indent:
10%;
divid="
outer"
>
inner"
sometext.sometext.sometext.
thisisaparagragh.<
以上标记中的段落也会缩进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:
元素的作用一样,但实际上二者大不相同。
不仅影响文本,还会把整个元素居中。
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.
tight"
Thisisaparagraph.Thespacesbetweenwordswillbeincreased.
字母间隔
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个值:
∙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:
对于给定的规则,所有class为stricken的h2元素都只有一个贯穿线装饰,而没有下划线和上划线,因为text-decoration值会替换而不是累积起来。
处理空白符
white-space属性会影响到用户代理对源文档中的空格、换行和tab字符的处理。
通过使用该属性,可以影响浏览器处理字之间和文本行之间的空白符的方式。
从某种程度上讲,默认的XHTML处理已经完成了空白符处理:
它会把所有空白符合并为一个空格。
所以给定以下标记,它在Web浏览器中显示时,各个字之间只会显示一个空格,同时忽略元素中的换行:
Thisparagraphhasmany
spacesinit.<
可以用以下声明显式地设置这种默认行为:
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文本实例:
设置文本颜色
本例演示如何设置文本的颜色。
规定字符间距
本例演示如何增加或减少字符间距。
使用百分比设置行间距
本例演示如何使用百分比值来设置段落中的行间距。
使用像素值设置行间距
本例演示如何使用像素值来设置段落中的行间距。
使用数值来设置行间距
本例演示如何使用一个数值来设置段落中的行间距。
对齐文本
本例演示如何对齐文本。
修饰文本
本例