注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

火力光波的博客

火一般的热情 光一样的速度

 
 
 

日志

 
 

CSS 背景、边距与边框  

2009-07-14 12:35:38|  分类: CSS代码 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

  背景色、背景图

 

内联式背景格式: <p style="BACKGROUND: 背景属性值;WIDTH: 宽度px; HEIGHT: 高度px">内容</p>

例1:  <P style="WIDTH: 300px; BACKGROUND-COLOR: #99ff00">文字的背景颜色</P>

             其中,WIDTH: 300px是背景宽度,#99ff00是背景色。

效果:

文字的背景颜色

 

例2:<p style="background-image:url(http://i.imagehost.org/0040/32329291.gif);
background-color:#99FF00;WIDTH:300px;HEIGHT:150px;background-repeat:no-repeat;
background-position:center;">背景图背景色</p>

            其中,#99FF00 、no-repeat,分别是背景属性的颜色值、不重复值。背景大小为300×150。

效果:

背景图背景色

 

 
背景属性:
背景颜色 background-color:颜色值
背景图片 background-image:url(图片地址)
图片重复 background-repeat:重复值 :        repeat-x 横向重复   repeat-y 竖向重复  no-repeat 不重复
图片滚动 background-attachment:滚动值:  scroll滚动   fixed固定不动
背景位置 background-position:位置值:       离网页最左面、上面的距离,单位:px。
在上例中,我们还可以添加更多的背景属性值。
例3: <P style="BACKGROUND: url( http://hhtu.com/gpicai/phgifaw/phgifa01/gifa0104/gifa010401x.gif )
           #99ff00 repeat-x 0px 20px; WIDTH: 500px; HEIGHT: 160px"></p>

上面的代码表示,网页的背景颜色是翠绿色,背景图片是background.gif图片,背景图片横向重复,

背景图片距离网页最左面0px,距离网页最上面20px,背景大小为500×160。

效果: 

 
背景实例:
设置背景颜色             期而至本例演示如何为元素设置背景颜色。
设置文本的背景颜色   本例颜色如何设置部分文本的背景颜色。
将图像设置为背景      本例演示如何将图像设置为背景。
将图像设置为背景 2   本例演示如何为多个元素同时设置背景图像。
如何重复背景图像       本例演示如何重复背景图像。
如何在垂直方向重复背景图像    本例演示如何垂直地重复背景图像。
如何在水平方向重复背景图像    本例演示如何水平地重复背景图像。
如何仅显示一次背景图像          本例演示如何仅显示一次背景图像。
如何放置背景图像                    本例演示如何在页面上放置背景图像。
如何使用%来定位背景图像       本例演示如何使用百分比来在页面上定位背景图像。
如何使用像素来定位背景图像    本例演示如何使用像素来在页面上定位背景图像。
如何设置固定的背景图像           本例演示如何设置固定的背景图像。图像不会随着页面的其他部分滚动。
所有背景属性在一个声明之中    本例演示如何使用简写属性来将所有背景属性设置在一个声明之中。

 

 

边距与边框

 

基本知识:  框模结构,由内容  内边距(呈现内容背景)   边框  外边距(默认透明 )构成;width 、height指内容的宽、高。
                  在左右或上下边距、边框相等情况下,框模总长=内容+(内边距+边框+外边距)×2。

内联式边距格式: <P style="padding-边位:内边距值;margin-边位:外边距值">内容</p> 

例4:  <P style="PADDING: 0.5cm;MARGIN: 0.5cm 3cm 1cm;  BACKGROUND-COLOR: #99ff00">文字</P>

效果:

      这个段落带有指定的外边距,上外边距0.5cm ,右外边距3cm,下外边距1cm,左外边距3cm。外边距为透明。这个段落带有指定的内边距,内边距四边均为0.5cm。这段文字的背景色是翠绿色,背景色包含内边距。

例5:   <P style="BORDER: #ff00ff 2px double;BACKGROUND:#99ff00; PADDING-BOTTOM:10px;

              MARGIN-left:4cm;MARGIN-right:4cm;PADDING-TOP:10px"align=center> 图片与文字</P>

效果:


左右外边距均为4cm,上下内边距均为10px,边框2px,内容居中。

 
例6:   
<TABLE style="MARGIN: 0cm 5cm" border=1><TBODY><TR>
<TD style="PADDING-RIGHT: 1cm; PADDING-LEFT: 1cm; PADDING-BOTTOM: 1cm; PADDING-TOP: 1cm">这个表格TABLE有左右外边距均为5cm,这个表格TD有上下左右内边距均为1cm。</TD></TR></TBODY></TABLE>
 

效果:

这个表格TABLE有左右外边距均为5cm,这个表格TD有上下左右内边距均为1cm。

 

边距属性:

内边距:padding  简写    padding-top 上    right 右    bottom  下    left 左 (  length    % )
外边距:margin   简写      margin-top 上    right 右    bottom  下    left 左 (auto  length  % )
属性值:auto 设置边距    length  固定边距,默认值是0     %  基于父对象的百分比边距

更多的边距属性:内边距   外边距

边距实例:

所有内边距属性在一个声明中   本例演示使用简写属性将所有的内边距属性设置于一个声明中,可以有一到四个值。
设置下内边距 1    本例演示如何使用厘米值来设置单元格的下内边距。
设置下内边距 2    本例演示如何使用百分比值来设置单元格的下内边距。
设置左内边距 1    本例演示如何使用厘米值来设置单元格的左内边距。
设置左内边距 2    本例演示如何使用百分比值来设置单元格的左内边距。
设置右内边距 1    本例演示如何使用厘米值来设置单元格的右内边距。
设置右内边距 2    本例演示如何使用百分比值来设置单元格的右内边距。
设置上内边距 1    本例演示如何使用厘米值来设置单元格的上内边距。
设置上内边距 2    本例演示如何使用百分比值来设置单元格的上内边距。
设置文本的左外边距     本例演示如何设置文本的左外边距。
设置文本的右外边距     本例演示如何设置文本的右外边距。
设置文本的上外边距     本例演示如何设置文本的上外边距。
设置文本的下外边距     本例演示如何设置文本的下外边距。
所有的外边距属性在一个声明中。   本例演示如何将所有的外边距属性设置于一个声明中。
 

 

内联式边框格式: <p style="border -边位: 边框属性值">内容</p> 

例7:    <P style="BORDER-TOP: #ddaabb 20px double; WIDTH: 400px; BORDER-BOTTOM: #ddaabb 10px dotted;

              HEIGHT: 100px"> 有上下边位、边宽、样式、颜色的边框</P>

效果:


有上下边位、边宽、样式、颜色的边框

 

例8:   <P style="BORDER: dotted;WIDTH: 400">点状边框,在大多数浏览器中呈现为实线。</P>
           <P style="BORDER: dashed;WIDTH: 400">虚线边框,在大多数浏览器中呈现为虚线。</P>
           <P style="BORDER: solid;WIDTH: 400">实线边框,在浏览器中呈现为实线。</P>
           <P style="BORDER: double;WIDTH: 400">双线边框,宽度等于 border-width 的值。</P>
           <P style="BORDER: groove;WIDTH: 400">3D 凹槽边框,其效果取决于 border-color 的值。</P>
           <P style="BORDER: ridge;WIDTH: 400">3D 垄状边框,其效果取决于 border-color 的值。</P>
           <P style="BORDER: inset;WIDTH: 400">3D inset 边框,其效果取决于 border-color 的值。</P>
           <P style="BORDER: outset;WIDTH: 400">3D outset 边框,其效果取决于 border-color 的值。</P>

效果:

dotted      点状边框,在大多数浏览器中呈现为实线。

dashed      虚线边框,在大多数浏览器中呈现为虚线。

solid          实线边框,在浏览器中呈现为实线。

double      双线边框,宽度等于 border-width 的值。

groove    3D 凹槽边框,其效果取决于 border-color 的值。

ridge     3D 垄状边框,其效果取决于 border-color 的值。

inset    3D inset 边框,其效果取决于 border-color 的值。

  outset   3D outset 边框,其效果取决于 border-color 的值。

 

例9: <P style="border:12px #987cb9 groove; BACKGROUND-IMAGE: url( http://i3.6.cn/cvbnm/6f/36/9f/1f3896ac04320f4f6dd38b25061942c8.jpg); WIDTH: 450px;HEIGHT: 265px"></P>

效果:

 

边框属性:

边框边位: border 简写   border-top上边   border-bottom 下边   border-left 左边   border-right 右边。

边框宽度: border-width:  thin 细   medium 较细   thick较粗  length   或 数量px。

边框样式: border-style: none; (无边框)  dotted; (点线)  dashed; (虚线)  solid; (实线)  double; (双线)

                                     groove; (凹槽)   ridge; (脊状)    inset; (边框)     outset; (边框)。

边框颜色: border-color: name 颜色名   rgb10进制  hex 16进制;transparent 透明。

更多的边框属性 

 

边框实例:

所有边框属性在一个声明之中        本例演示用简写属性来将所有四个边框属性设置于同一声明中。
设置四边框样式                            本例演示如何设置四边框样式。
设置每一边的不同边框                  本例演示如何在元素的各边设置不同的边框。
所有边框宽度属性在一个声明之中 本例演示用简写属性来将所有边框宽度属性设置于同一声明中。
设置四个边框的颜色                     本例演示如何设置四个边框的颜色。可以设置一到四个颜色。
所有下边框属性在一个声明中        本例演示用简写属性来将所有下边框属性设置在同一声明中。
设置下边框的颜色                         本例演示如何设置下边框的颜色。
设置下边框的样式                         本例演示如何设置下边框的样式。
设置下边框的宽度                         本例演示如何设置下边框的宽度。
所有左边框属性在一个声明之中      所有左边框属性在一个声明之中。 
设置左边框的颜色                         本例演示如何设置左边框的颜色。
设置左边框的样式                         本例演示如何设置左边框的样式。
设置左边框的宽度                         本例演示如何设置左边框的宽度。
所有右边框属性在一个声明之中     本例演示一个简写属性,用于把所有右边框属性设置在一条声明中。
设置右边框的颜色                         本例演示如何设置右边框的颜色。
设置右边框的样式                         本例演示如何设置右边框的样式。
设置右边框的宽度                         本例演示如何设置右边框的宽度。
所有上边框属性在一个声明之中     本例演示用简写属性来将所有上边框属性设置于同一声明之中。
设置上边框的颜色                         本例演示如何设置上边框的颜色。
设置上边框的样式                         本例演示如何设置上边框的样式。
设置上边框的宽度                         本例演示如何设置上边框的宽度。

 

 2009.7.16

 

CSS 背景、边距与边框 - 火力光波 - 火力光波的博客

  评论这张
 
阅读(2099)| 评论(10)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017