CSS样式详解

CSS样式详解

ID:39424354

大小:125.78 KB

页数:55页

时间:2019-07-03

CSS样式详解_第1页
CSS样式详解_第2页
CSS样式详解_第3页
CSS样式详解_第4页
CSS样式详解_第5页
资源描述:

《CSS样式详解》由会员上传分享,免费在线阅读,更多相关内容在工程资料-天天文库

1、CSS样式·CSS背景CSS允许应用纯色作为背景,也允许使用背景图像创建相当复杂的效果。CSS在这方面的能力远远在HTML之上。背景色可以使用background-color属性为元素设置背景色。这个属性接受任何合法的颜色值。这条规则把元素的背景设置为灰色:p{background-color:gray;}如果您希望背景色从元素中的文本向外少有延伸,只需增加一些内边距:p{background-color:gray;padding:20px;}实例:

2、"text/css">body{background-color:yellow}h1{background-color:#00ff00}h2{background-color:transparent}p{background-color:rgb(250,0,255)}p.no2{background-color:gray;padding:20px;}

这是标题1

这是标题2

这是段落

3、这个段落设置了内边距。

可以为所有元素设置背景色,这包括body一直到em和a等行内元素。background-color不能继承,其默认值是transparent。transparent有“透明”之意。也就是说,如果一个元素没有指定背景色,那么背景就是透明的,这样其祖先元素的背景才能可见。背景图像要把图像放入背景,需要使用background-image属性。background-image属性的默认值是none,表示背景上没有放置任何图像。如果需要设置一个背

4、景图像,必须为这个属性设置一个URL值:body{background-image:url(/i/eg_bg_04.gif);}大多数背景都应用到body元素,不过并不仅限于此。下面例子为一个段落应用了一个背景,而不会对文档的其他部分应用背景:p.flower{background-image:url(/i/eg_bg_03.gif);}您甚至可以为行内元素设置背景图像,下面的例子为一个链接设置了背景图像:-55-a.radio{background-image:url(/i/eg_bg_07.

5、gif);}实例:body{background-image:url(/i/eg_bg_04.gif);}p.flower{background-image:url(/i/eg_bg_03.gif);padding:20px;}a.radio{background-image:url(/i/eg_bg_07.gif);padding:20px;}我是一个

6、有花纹背景的段落。我是一个有放射性背景的链接。

注释:为了清晰地显示出段落和链接的背景图像,我们为它们设置了少许内边距。

理论上讲,甚至可以向textareas和select等替换元素的背景应用图像,不过并不是所有用户代理都能很好地处理这种情况。另外还要补充一点,background-image也不能继承。事实上,所有背景属性都不能继承。背景重复如果需要在页面上对背景图像进行平铺,

7、可以使用background-repeat属性。属性值repeat导致图像在水平垂直方向上都平铺,就像以往背景图像的通常做法一样。repeat-x和repeat-y分别导致图像只在水平或垂直方向上重复,no-repeat则不允许图像在任何方向上平铺。默认地,背景图像将从一个元素的左上角开始。请看下面的例子:body{background-image:url(/i/eg_bg_03.gif);background-repeat:r

8、epeat-y}背景定位可以利用background-position属性改变图像在背景中的位置。下面的例子在body元素中将一个背景图像居中放置:body-55-{background-image:url('/i/eg_bg_03.gif');background-repeat:no-repeat;background-position:center;}为background-position属性提供值有很多方法。首先,可以

当前文档最多预览五页,下载文档查看全文

此文档下载收益归作者所有

当前文档最多预览五页,下载文档查看全文
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。