火力光波的博客

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

日志

关于我

火力光波

文章分类

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

评论这张

转发至微博

阅读(2351)| 评论(10)

历史上的今天

this.p={  m:2,
              b:2,
              loftPermalink:'',
              id:'fks_082071093094086066087082080095092086086071081094095066',
              blogTitle:'CSS 背景、边距与边框',
              blogAbstract:' \r\n<P align=\"center\"  \><FONT color=\"#999999\"  size=\"2\"  face=\"Arial\"  \> </FONT\> <FONT color=\"#ff6600\"  size=\"4\"  face=\"楷体_GB2312\"  \>背景色、背景图</FONT\></P\>\r\n<P align=\"center\"  \><FONT color=\"#ff00ff\"  size=\"4\"  face=\"楷体_GB2312\"  \></FONT\> </P\>\r\n<P\><FONT color=\"#999999\"  size=\"2\"  \><FONT color=\"#ff00ff\"  \><FONT size=\"3\"  \><FONT size=\"2\"  \>内联式背景</FONT\></FONT\>格式：</FONT\> <FONT color=\"#33cccc\"  \><p style=\"BACKGROUND: 背景属性值;WIDTH: 宽度px; HEIGHT: 高度px\">内容</p></FONT\></FONT\></P\>\r\n<P\><FONT color=\"#999999\"  size=\"2\"  \>例1：  <FONT color=\"#999999\"  \><P style=\"WIDTH: 300px; BACKGROUND-COLOR: #99ff00\">文字的背景颜色</P></FONT\></FONT\></P\>\r\n<P\><FONT color=\"#999999\"  size=\"2\"  \>             其中，WIDTH: 300px是背景宽度，#99ff00是背景色。</FONT\></P\>',
              blogTag:'',
              blogUrl:'blog/static/80745891200961403538271',
              isPublished:1,
              istop:false,
              type:2,
              modifyTime:1510472154927,
              publishTime:1247546138271,
              permalink:'blog/static/80745891200961403538271',
              commentCount:10,
              mainCommentCount:10,
              recommendCount:2,
              bsrk:-100,
              publisherId:0,
              recomBlogHome:false,
              currentRecomBlog:false,
              attachmentsFileIds:[],
              vote:{},
              groupInfo:{},
              friendstatus:'none',
              followstatus:'unFollow',
              pubSucc:'',
              visitorProvince:'',
              visitorCity:'',
              visitorNewUser:false,
              postAddInfo:{},
              mset:'000',
              mcon:'',
              srk:-100,
              remindgoodnightblog:false,
              isBlackVisitor:false,
              isShowYodaoAd:false,
              hostIntro:'',
              hmcon:'1',
              selfRecomBlogCount:'0',
              lofter_single:'<iframe width="140" height="560" style="overflow:hidden;" src="http://www.lofter.com/mailEntry.do?blogad=1&blog" frameBorder="0"></iframe>'
            }

{list a as x}
    {if !!x}
    <div class="iblock nbw-fce nbw-f40">
      <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.visitorName}/">
      {if x.visitorName==visitor.userName}
      <img alt="${x.visitorNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.visitorName)}&r=${visitor.imageUpdateTime}"/>
      {else}
      <img alt="${x.visitorNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.visitorName)}"/>
      {/if}
      </a>
      <div class="cwd vname thide">
        {if x.moveFrom=='wap'}
          <a class="noul pnt" target="_blank" href="http://blog.163.com/services/wapblog.html?frompersonalbloghome"><span title="来自网易手机博客" class="iblock wapIcon"> </span></a>
        {elseif x.moveFrom=='iphone'}
          <a class="noul pnt" target="_blank"><span title="来自iPhone客户端" class="iblock iphoneIcon"> </span></a>
        {elseif x.moveFrom=='android'}
          <a class="noul pnt" target="_blank"><span title="来自Android客户端" class="iblock androidIcon"> </span></a>
        {elseif x.moveFrom=='mobile'}
          <a class="noul pnt" target="_blank" href="http://blog.163.com/services/emsblog.html?frompersonalbloghome"><span title="来自网易短信写博" class="iblock wapIcon"> </span></a>
        {/if}
        <a class="fc03 m2a"  target="_blank" hidefocus="true" href="http://blog.163.com/${x.visitorName}/">
          ${fn(x.visitorNickname,8)|escape}
        </a>
      </div>
    </div>
    {/if}
    {/list}

<#--最新日志，群博日志--> <#--推荐日志-->

<p class="fc06">推荐过这篇日志的人：</p>
    <div>
      {list a as x}
      {if !!x}
      <div class="iblock nbw-fce nbw-f40">
        <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.recommenderName}/">
        <img alt="${x.recommenderNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.recommenderName)}"/>
        </a>
        <div class="cwd thide">
          <a class="fc03 m2a" target="_blank" hidefocus="true" href="http://blog.163.com/${x.recommenderName}/">
            ${fn(x.recommenderNickname,6)|escape}
          </a>
        </div>
      </div>
      {/if}
      {/list}
    </div>
    {if !!b&&b.length>0}
    <p  class="fc06">他们还推荐了：</p>
    <ul>
    {list b as y}
      {if !!y}
        <li class="rrb"><span class="iblock">·</span><a class="fc03 m2a" target="_blank" href="http://blog.163.com/${y.recommendBlogPermalink}/?from=blog/static/80745891200961403538271">${y.recommendBlogTitle|escape}</a></li>
      {/if}
    {/list}
    </ul>
    {/if}

<#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇，下一篇--> <#-- 热度 -->

{list a as x}
    {if !!x}
    <div class="hotItem iblock nbw-fce nbw-f40">
      <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/">
      {if x.publisherUsername==visitor.userName}
      <img alt="${x.publisherNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.publisherUsername)}&r=${visitor.imageUpdateTime}"/>
      {else}
      <img alt="${x.publisherNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.publisherUsername)}"/>
      {/if}
      </a>
      <div class="cwd vname thide">
        <a class="fc03 m2a"  target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/">
          ${fn(x.publisherNickname,8)|escape}
        </a>
      </div>
      <a class="f-myLikeIcons hottype {if x.type==1} js-liketype{elseif x.type==2} js-reblogtype{elseif x.type==3} js-sharetype{else}{/if}" target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/"> </a>
    </div>
    {/if}
    {/list}

<#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->

页脚

我的照片书 - 手机博客 - 下载LOFTER APP - 订阅此博客

火力光波的博客

导航

日志

CSS 背景、边距与边框

历史上的今天

最近读者

热度

评论

页脚