css常用文字屬性

標籤：技術   方向   css   cin   ges   clip   文字   shadow   mil   

【CSS常用文字屬性】
1、 字型、字型大小類：
① font-weight： 字型粗細。 bold-加粗、normal-正常、lighter-細體
也可以使用100-900數值，400表示normal，700表示bold

② font-style: 字型樣式。 italic-傾斜、normal-正常

③ font-size: 字型大小。 可以寫px單位，也可以寫%
200%表示瀏覽器預設大小(16px)的兩倍=32px

④ font-family: 字型系列(字型族)。
>>> 可以直接寫字型名，也可以寫字型系列名。
>>> 常用字型系列：serif-襯線體 sans-serif-非襯線體；
>>> font-family可以接收多個值，用逗號分隔。表示優先使用第一個，如果沒有這個字型，依次向後使用。 通常，最後一個值放字型系列名；
eg: font-family: "黑體","微軟雅黑",sans-serif;

⑤ font縮寫形式：
>>> 順序必須是：
font-weight font-style font-size/line-height font-family
>>> 不同屬性之間，用空格分隔；
>>> font-size/line-height必須一組，用/分隔；
>>> font-family多個字型之間，用逗號分隔
>>> eg： font: bold italic 32px/50px "微軟雅黑",serif;

2、 字型顏色
① color： 字型顏色 可以使單詞、十六進位、RGB等

② opacity： 透明度，可選值0-1
[opacity和RGBA的區別]
>>> RGBA本身可以設定顏色，而opacity必須配合其他顏色屬性來用；
>>> rgba僅僅是讓當前元素設定的顏色透明；
而opacity，會讓當前元素裡面的所有文字、背景、子項目都透明；


3、行距、對齊、其他類
① line-height: 行高。 可以寫px單位、可以直接寫數字(表示預設行距的幾倍)、可以寫% (表示預設行距的百分比)
>>> 行高重要作用： 讓單行文字在div中垂直置中？
設定行高等於div的高度，即可讓單行文字垂直置中。

② text-align：設定地區內的行級元素水平對齊left/center/right

③ letter-spacing： 字元間距，字與字之間的距離

④ text-decoration: 文本修飾；
underline-底線、overline-上劃線、line-through-刪除線、none

⑤ overflow： 設定超出地區文字的顯示方式。
>>> overflow: hidden; 超出地區的文字隱藏不顯示；
>>> overflow: scroll; 無論文字多少，都會顯示水平垂直捲軸
>>> overflow: auto; 自動。文字多顯示捲軸，文字少，不顯示捲軸。
>>> 可以使用overflow-x和overflow-y單獨修改兩個方向的捲軸
    overflow-y: scroll; overflow-x: hidden;

⑥ text-overflow：設定行末多餘文字的顯示方式；
>>> clip-多餘文字裁剪掉 ellipsis-多餘文字省略符號顯示
>>> 顯示省略符號，需要配合white-space: nowrap;使用
>>> 【重點】 設定行末顯示省略符號(三行代碼，缺一不可)
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

⑦ white-space: nowrap; 設定中文行末，不斷行顯示

⑧ text-indent: 首行縮排。

⑨ -webkit-text-stroke: 0.5px blue; 文字描邊。
-webkit-表示只有webkit核心瀏覽器生效、常見的有chrome、safari

⑩ text-shadow: 文字陰影，有四個屬性值，空格分隔；
>>> 水平陰影距離，正數表示陰影右移，負數左移；
>>> 垂直陰影距離，正數表示陰影下移，負數上移；
>>> 陰影模糊距離， 0表示陰影一點不模糊；
>>> 陰影的顏色；
>>> eg:text-shadow: 20px -10px 2px blue;

css常用文字屬性