字體屬性

font-size

• 語法:font-size:<length> | <percentage> | <absolute-size> | <relative-size>
  • 后面兩個值不常用有small,middle ,large等

font-size:12px;
  font-size:16px;
  font-size:2em;(24px)
  font-size:200%;

font-family

• 語法:font-family:[<family-name> | <generic-family>]#
  • <generic-family>=serif | sans-sarif

font-family:arial;
font-family:arial,Verdana,sans-sarif;
font-family:Verdana,"微軟雅黑";

font-weight

• 語法:font-weight:normal|bold|bolder|lighter|100|200|..|900
  • font-weight:normal默認(rèn)

font-weight;bold;

font-style

• 語法:font-style:normal|italic|oblique
  • oblique:傾斜
  • italic: 斜體

font-style:italic;

line-height

• 語法:line-height:normal|<number>|<length>|<percentage>
  • normal不是固定的,由瀏覽器決定

line-height:40px;
  line-height:3em;
  line-height:300%;
  line-height:3;
300%和3顯示是一樣的,有哪些區(qū)別呢?
  修改里面某一段文字大小時;
line-height為number時,繼承為直接繼承,所以如果給下面的元素設(shè)置行高,等于字體大小乘以number值(不計算,直接繼承)

而line-height:百分比;先計算,在繼承,

結(jié)合上面五個屬性:

font

• 語法:font:[[<font-size>||<font-weight>]?<font-size>[/<line-height>]?<font-family>]
  • 語法可以看出:font-style font-weight可選,font-size必填項(xiàng),font-family也是必填項(xiàng),line-height可選,但有的時候前面有/

縮寫:
font:30px/2 "Consolas",monospace;
font:20px arial,serif;
font:italic bold 20px/2 arial,serif

color

• color:red;
• color:#ffffff;
• color:rgb(255,0,0);
• color:rgba(255,0,0,1);
• color: transparent;

對齊方式

text-align

• 語法:text-align:left|right|center|justify
  • justify:兩端對齊

vertical-align

• 語法:vertical-align:baseline|sub|super|top"text-top|middle|bottom|text-bottom|<percentage>|<length>
  • baseline:基線
  • sub:下標(biāo)
  • suoer:上標(biāo)
  • middle:垂直居中

vertical-align

text-indent 首行縮進(jìn)

• text-indent:<length>|<percentage>

text-indent:2em;首行縮進(jìn)兩個字

text-indent

格式處理

white-space設(shè)置換行是否保留,空格是否合并等

• white-space:normal|nowrap|pre|pre-wrap"pre-line
  • nowrap不換行,字強(qiáng)制一行
  • pre 換行保留 空格和Tab保留 不換行 完整保留代碼格式
  • pre-wrap 在pre的基礎(chǔ)上允許換行
  • pre-line 只保留換行,空格合并掉

word-wrap 單詞換行

• word-wrap:normal|break-word
  • break-word 把一個長單詞允許自動換行

word-break

• word-break:normal|leep-all|break-all
  • break-all 任意字母都可以換行

文本修飾

text-shadow 文字陰影

• text-shadow:none|[<length>{2,3}&&<color>?]#
  • color可不寫,顏色為文字顏色
  • #代表可寫多個shadow,逗號分開
  • 2到3個length值

image.png

text-decoration下劃線

• 語法:text-decoration:none | [underline||overline||line-through]
  • 語法可以知道,可以寫多條線
  • underline:下劃線
  • overline;上劃線

高級設(shè)置

css ...的實(shí)現(xiàn)

• text-overflow:clip | ellipsis

text-overflow:ellipsis;
overflow:hidden; 文字超出隱藏,溢出截掉
white-space:nowrap;不換行

鼠標(biāo)形狀的設(shè)置 Cursor

cursor

• url()自定義
• auto:自動處理
• default 普通光標(biāo)
• none 消失
• help 帶問號的
• pointer手型
• zoom-in放大鏡類似的
• move 十字移動鼠標(biāo)

inherit 強(qiáng)制繼承

很多文本類型都可以繼承