背景色、背景图
内联式背景格式: <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.gif图片,背景图片横向重复,
背景图片距离网页最左面0px,距离网页最上面20px,背景大小为500×160。
边距与边框
基本知识: 框模结构,由内容 内边距(呈现内容背景) 边框 外边距(默认透明 )构成;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,内容居中。
效果:
这个表格TABLE有左右外边距均为5cm,这个表格TD有上下左右内边距均为1cm。 |
边距属性:
内边距:padding 简写 padding-top 上 right 右 bottom 下 left 左 ( length % )
外边距:margin 简写 margin-top 上 right 右 bottom 下 left 左 (auto length % )
属性值:auto 设置边距 length 固定边距,默认值是0 % 基于父对象的百分比边距
边距实例:
内联式边框格式: <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
评论