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>

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 1、垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,...
    kiddings阅读 8,428评论 0 11
  • 这篇文字里我会介绍50 个便于使用的 CSS2/CSS3 代码片段给所有的WEB专业人员. 选择IDE开发环境来存...
    JamHsiao_aaa4阅读 5,271评论 0 3
  • 1.块级元素和行内元素 块级(block-level)元素;行内(内联、inline-level)元素。 块元素的...
    饥人谷_小侯阅读 6,365评论 1 4
  • 我的公共CSS文件@import "normalize.css";/begin主页面//begin主页面/body...
    蓝色海洋_1982阅读 4,996评论 0 0
  • 你光光的来 光光地走 连肉体也会在火葬场的焚烧炉中 化为灰烬 留点精神给这个世界吧 关于爱 关于恨 关于叛逆 又或...
    身边的江湖阅读 1,607评论 0 3

友情链接更多精彩内容