CSS教程(1):学习CSS背景相关知识

2016-02-19 23:56 5 1 收藏

下面是个CSS教程(1):学习CSS背景相关知识教程,撑握了其技术要点,学起来就简单多了。赶紧跟着图老师小编一起来看看吧!

【 tulaoshi.com - Web开发 】

CSS 允许应用纯色作为背景,也允许使用背景图像创建相当复杂的效果。

CSS 在这方面的能力远远在 HTML 之上。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)背景色

可以使用 background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值。

这条规则把元素的背景设置为灰色:

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)
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 等替换元素的背景应用图像,不过并不是所有用户代理都能很好地处理这种情况。如果在其他网站看到本信息,说明本教程

来源:http://www.tulaoshi.com/n/20160219/1630911.html

延伸阅读
标签: Web开发
CSS 定位 (Positioning) 属性允许你对元素进行定位。 CSS 定位和浮动 CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务。 定位的基本思想很简单,它允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素...
标签: Web开发
通过上一章的学习,读者了解到了CSS强大的表现控制功能,特别是在布局方面有很大的优势。相对于代码条理混乱、样式杂糅在结构中的表格布局,CSS将带来全新的布局方法,让网页设计师更轻松、更自由。本章通过多个示例展示CSS布局网页的方法,并对CSS的盒模型作详细阐述。相信读者在深入理解盒模型后,布局网页、定位CSS网页元素将更加自如。 ...
一、三种样式选择器 属性选择器 p {color:red;} 类选择器 .p {color:red;} ID选择器 #p {color:red;} 二、transparent Background:transparent; 防止定义背景被覆盖 三、Netscape4.X(IE/WINDOWS4.0以前的版本)下错误的透明背景理解 Background:inhrit; 在netscape4.x下透明背景将被理解为黑绿 四、字体默认选择: Body {fon...
标签: Web开发
首先说说框架(Frameworks)这个词,框架就是为我们提供了一个平台一个运行环境,在如此统一的前提下我们做相关开发才能“有章可循”,要充分体会到“游击队”和“正规军”的区别以及“零散”和“系统”的利害关系。我们常见的有 Microsoft .NET Frameworks、J2EE Frameworks等软件开发框架等。对于Web而言,现在也流行起Frameworks框架概念,...
标签: Web开发
自从1996年CSS1的推出,W3C组织就建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落、列表、标题、图片以及层div。 盒模型主要定义四个区域:内容(content)、内边框距(padding)、边框(border)和外边距(margin)。 对于初学者,经常会搞不清楚margin,padding之间的层次、关...

经验教程

253

收藏

80
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部