CSS样式.docx
《CSS样式.docx》由会员分享,可在线阅读,更多相关《CSS样式.docx(32页珍藏版)》请在冰点文库上搜索。
CSS样式
CSS样式
CSS背景1
CSS文本7
CSS字体14
CSS列表21
CSS表格22
CSS轮廓26
CSS背景
∙PreviousPage
∙NextPage
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背景实例
设置背景颜色
本例演示如何为元素设置背景颜色。
设置文本的背景颜色
本例颜色如何设置部分文本的背景颜色。
将图像设置为背景
本例演示如何将图像设置为背景。
将图像设置为背景2
本例演示如何为多个元素同时设置背景图像。
如何重复背景图像
本例演示如何重复背景图像。
如何在垂直方向重复背景图像
本例演示如何垂直地重复背景图像。
如何在水平方向重复背景图像
本例演示如何水平地重复背景图像。
如何仅显示一次背景图像
本例演示如何仅显示一次背景图像。
如何放置背景图像
本例演示如何在页面上放置背景图像。
如何使用%来定位背景图像
本例演示如何使用百分比来在页面上定位背景图像。
如何使用像素来定位背景图像
本例演示如何使用像素来在页面上定位背景图像。
如何设置固定的背景图像
本例演示如何设置固定的背景图像。
图像不会随着页面的其他部分滚动。
所有背景属性在一个声明之中
本例演示如何使用简写属性来将所有背景属性设置在一个声明之中。
CSS背景属性
属性
描述
background
简写属性,作用是将背景属性设置在一个声明中。
background-attachment
背景图像是否固定或者随着页面的其余部分滚动。
background-color
设置元素的背景颜色。
background-image
把图像设置为背景。
background-position
设置背景图像的起始位置。
background-repeat
设置背景图像是否及如何重复。
CSS文本
∙PreviousPage
∙NextPage
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%;}
继承
text-indent属性可以继承,请考虑如下标记:
div#outer{width:
500px;}
div#inner{text-indent:
10%;}
p{width:
200px;}
sometext.sometext.sometext.
thisisaparagragh.