CSS学习笔记

div使用背景图案

<h1>div使用背景图案<h1>
<div></div>

div { background:url(heading2.jpg) no-repeat; width:250px; height:76px; }

文本替换
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 }

左外边距
把一个元素移出块元素，使其靠近左外边距

<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; }

外边距图片首字母下沉

<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; }

CSS语法

selectors { ruleset }
selectors { property: value; }

层叠排序 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 */