[b]div使用背景图案[/b]
[b]文本替换[/b]
span和h2大小一样,用一张图片来替换文本,图片下载失败时自动显示文字
[b]左外边距[/b]
把一个元素移出块元素,使其靠近左外边距
[b]外边距图片首字母下沉[/b]
[b]
CSS语法[/b]
[b]层叠排序[/b] CSS的优先级
<h1>div使用背景图案<h1>
<div></div>
div { background:url(heading2.jpg) no-repeat; width:250px; height:76px; }
[b]文本替换[/b]
span和h2大小一样,用一张图片来替换文本,图片下载失败时自动显示文字
<h1>文本替换</h1>
<h2 id="h2">标题2<span></span></h2>
#h2 { position:relative; width:250px; height:76px; overflow:hidden; }
#h2 span { position:absolute; width:250px; height:76px; left:0; top:0; background:url("heading2.jpg") no-repeat }
[b]左外边距[/b]
把一个元素移出块元素,使其靠近左外边距
<h1>左外边距</h1>
<div class="left-marginal">
<h2 class="marginal-heading">标题</h2>
你把“标题”元素提取出来并挪到左外边距中。
</div>
.left-marginal { position:relative; margin-left:200px; }
.marginal-heading { position:absolute; left:-200px; top:0; margin:0; }
[b]外边距图片首字母下沉[/b]
<h1>外边距图片首字母下沉</h1>
<p class="indent">
<span class="graphic-dropcap">M</span><span></span>
arginal graphic dropcap。字母M被一个下沉的图片覆盖了。
</p>
.indent { position:relative; margin-left:120px }
.graphic-dropcap { position:absolute; width:120px; height:90px; left:-120px; top:0 }
.graphic-dropcap span { position:absolute; width:120px: height:90px: margin:0; left:0; top:0; background:url("m.jpg") no-reapet; }
[b]
CSS语法[/b]
selectors { ruleset }
selectors { property: value; }
[b]层叠排序[/b] CSS的优先级
html, body { border-style:none!important; }
* { border:0px solid black; } /* Universal Selector 通配选择符*/
div { border:2px solid black; } /* Element Selector 元素选择符*/
*.c10 { border:4px solid black; } /* Secondary Selector 从属选择符*/
#i100 { border:6px solid black; } /* ID Selector ID选择符*/
* { border:8px solid black!important; } /* !Universal Selector */
div { border:10px solid black!important; } /* !Element Selector */
*.c10 { border:12px solid black!important; } /* !Secondary Selector */
#i100 { border:14px solid black!important; } /* !ID Selector */