2019-02-20
### font-variant
> p { `font-varian`:small-caps;}
### font-style
> p { `font-style`:italio;}<br/>
> p { `font-style`:oblique;}<br/>
> p { `font-style`:normal;}<br/>
### font-weight
> p { `font-weight`:bold;}<br/>
> p { `font-weight`:normal;}<br/>
### text-transform
> p { `text-transform`:uppercase;}<br/>
> p { `text-transform`:lowercase;}<br/>
> p { `text-transform`:capitalize;}<br/>
> p { `text-transform`:none;}<br/>
### text-decoration
> p { `text-decoration`:underline;}<br/>
> p { `text-decoration`:overline;}<br/>
> p { `text-decoration`:line-through;}<br/>
> p { `text-decoration`:blink;}<br/>
> p { `text-decoration`:none;}<br/>
### word-spacing
> p { `word-spacing`: 1em;}<br/>
### letter-spacing
> p { `letter-spacing`: 1em;}<br/>
### line-height
> p { `line-height`: 16pt;}<br/>
> p { `line-height`: 2;}<br/>
> p { `font-size`:10pt;`line-height`:140%;}<br/>
<pre><code> Note:行距是字体大小10points的140%，即14.</code></pre>
### text-align
> p { `text-align`:center;}<br/>
> p { `text-align`:left;}<br/>
> p { `text-align`:right;}<br/>
> p { `text-align`:justify;}<br/>
### text-indent
> p { `text-indent`:2em;}<br/>
### margin
> H4 { `margin-top`: 20px;}<br/>
> H4 { `margin-bottom`: 20px;}<br/>
> H4 { `margin-right`: 20px;}<br/>
> H4 { `margin-left`: 20px;}<br/>
### border-width
> H4 { `border-top-width`: 2px }<br/>
> H4 { `border-bottom-width`: 2px }<br/>
> H4 { `border-left-width`: 2px }<br/>
> H4 { `border-right-width`: 2px }<br/>
> H4 { `border-width`: 2px }<br/>
> H4 { `border-color`: 2px }<br/>
### border-style
> H4 { `border-style`: double }<br/>
> H4 { `border-style`: solid }<br/>
> H4 { `border-style`: dotted }<br/>
> H4 { `border-style`: dashed }<br/>
> H4 { `border-style`: groove }<br/>
> H4 { `border-style`: ridge }<br/>
> H4 { `border-style`: inset }<br/>
> H4 { `border-style`: outset }<br/>
### padding
> H4 { `padding-top`: 20px } <br/>
> H4 { `padding-bottom`: 20px } <br/>
> H4 { `padding-left`: 20px } <br/>
> H4 { `padding-right`: 20px } <br/>
### float
> H4 { `float`: left }
### clear
> H4 { `clear`: left }
### background-color
> P.yellow { `background-color`: #FFFF66 }
### background-image
> B { `background-image`: url(background.gif) }
<p class=a><b>Note</b>: <br/>当你设定一个背景图象时，最好能指定一种背景色。这样以来,下载背景图象的同时,固定的背景色先出现在屏幕上。而且它将透过背景图象上的透明色区显示出来。例如在Pinterest中你可以看到在图像下载完成之前是有某种背景色的。</p>
> P { `background-repeat`: no-repeat } <br/>
> P { `background-repeat`: repeat-x } <br/>
> P { `background-repeat`: repeat-y } <br/>
<p class=a><b>Note</b>: <br/>但由于我们应用了不重复图象（no-repeat)规则，所以该图象不会重复平铺在整个段落后面，它只显示一幅单独的图象。如果你只想让图象垂直或者水平方向平铺，你以使用repeat-x将其水平平铺，用repaet-y将其垂直平铺。而repeat参数值则将图象从水平和垂直两个方向平铺。</p>
> BODY { `background-attachment:` fixed } <br/>
<p class=a><b>Note</b>: <br/>在HTML中，背景图象通常会随页面的滚动而一起滚动。但利用CSS的固定背景（background）属性，你可以建立不滚动的背景图象，页面滚动时，背景图象可以保持固定。</p>
### background-position
> P { `background-position`: center bottom } <br/>
<p class=a><b>Note</b>: <br/>当上述CSS规则应用于本段文字时，背景图象将在本段的中下部开始显示并向右平铺.</p>
