文本CSS

文本CSS

用CSS控制文本的樣式

文字大小

font-size

font-size:<length>|<percentage>|<absolute-size>|<relative-size>

font-size:12px;
font-size:2em;
font-size:200%;

文字字體

font-family

font-family:[<family-name>|<generic-family>]#
<generic-family> = serif|sans-serif|cursive|fantasy|monospace

font-family:arial;
font-family:arial,Verdana,sans-serif;
font-family:Verdana,"microsoft yahei";
font-family:"宋體",serif;

文字粗細

font-weight

font-weight:normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900

font-weight:normal;
font-weight:bold;

文字斜體

font-style

font-style:normal|italic|oblique

font-style:normal;
font-style:italic;

行距

line-height

line-height:normal|<number>|<length>|<percentage>

line-height:40px;
line-height:3em;
line-height:300%;/*先計算，後繼承*/
line-height:3;/*直接繼承*/

多樣式組合

font

font:[[<font-style>||<font-weight>]?<font-size>[/<line-height>]?<font-family>]

font:30px/2 "Consolas",monospace;
font:italic bold 20px/1.5 arial,serif;
font:20px arial,serif;
font:100px;/*錯誤：size和family是必須有的*/

顏色

color

color:red;
color:#ff0000;
color:rgb(255,0,0);
color:rgba(255,0,0,0.5);/*最後0.5是透明度*/

水平對齊方式

text-align

text-align:left|right|center|justify

text-align:left;
text-align:right;
text-align:center;
text-align:justify;

垂直對齊方式

vertical-align

vertical-align:baseline|sub|super|top|text-top|middle|bottom|text-bottom|<percentage>|<length>

vertical-align:middle;
vertical-align:sub;
vertical-align:super;

首行縮進

text-indent

text-indent:<length>|<percentage>

text-indent:2em;/*漢字經常使用*/
text-indent:10px;
text-indent:20%;

格式處理

white-space

white-space:normal|nowrap|pre-wrap|pre-line

white-space:pre-wrap;/*經常使用*/

單詞換行

word-wrap:normal|break-word
word-break:normal|keep-all|break-all

文本陰影

text-shadow

text-shadow:none|[<length>{2,3}&&<color>?]#

text-shadow:1px 2px #f00;
text-shadow:1px 2px 3px #f00;
text-shadow:1px 2px 3px;

文本劃線

text-decoration

text-decoration:none|[underline||overline||line-through]

text-decoration:underline;
text-decoration:underline overline;

文字溢出

text-overflow

text-overflow:clip|ellipsis

text-overflow:ellipsis;/*要配合後面兩個表達式一塊兒使用*/
overflow:hidden;
white-space:nowrap;

定義鼠標形狀

cursor

cursor:[<url>,]*[auto|default|none|help|pointer|zoom-in|zoom-out|move]

cursor:pointer;
cursor:url(xx.cur),pointer;

強制繼承

inherit

font-size:inherit;
font-family:inherit;
font-weight:inherit;
font-style:inherit;
line-height:inherit;
color:inherit;
text-decoration:inherit;
text-align:inherit;
text-indent:inherit;
white-space:inherit;
word-wrap:inherit;
word-break:inherit;
text-shadow:inherit;