前端之CSS字體和文本類屬性


 

 

一、字體類屬性:

 

1.字體類型:

 

font-family:字體1,字體2,字體3;

 

常用寫法: font-family:"微軟雅黑",Arial;

 

注:a) 多個字體之間用逗號分隔;

 

    b)中文字體要放在雙引號中,英文字體由多個單詞組成時也要加雙引號;

 

    c) 瀏覽器優先識別字體1,如果找不到字體1,識別字體2,如果都找不到,顯示瀏覽器默認字體。

 

2.字體大小:

 

font-size:數值+單位;

 

注:a)瀏覽器默認字體大小為16px;

 

    b) font-size:medium;等價於 font-size:16px;

 

    c)字體大小一般設置偶數不設置奇數;

 

 

 

3.字體加粗:

 

font-weight:normal(常規字體)|bold(加粗)|bolder(加粗)|100-500(常規字體)|600-900(加粗字體);

 

4.字體傾斜:

 

font-style:normal(常規字體)|italic(傾斜)|oblique(傾斜);

 

5.文本是否大寫:

 

font-variant:normal(常規字體)|small-caps(小型的大寫字母字體);

 

注:此屬性主要應用於英文

 

6.字體顏色:

 

color:顏色值;

 

顏色值的幾種設置方式:

 

a)十六進制寫法  #000 黑色  #fff 白色  #f00 紅色

 

b)rgb寫法       rgb(0,0,0) 黑色  rgb(255,255,255) 白色

 

c)rgba寫法     a代表透明度,取值范圍0-1  rgba(0,0,0,0.6)

 

d)顏色單詞     red(紅色) black(黑色) white(白色) green(綠色) yellow(黃色) gray(灰色) pink(粉色) blue(藍色)

 

7.font簡寫方式:

 

font:italic bolder 12px "微軟雅黑",Arial;

 

注:使用簡寫方式時,font-size和font-family不可與其他屬性互換位置,也不能分開寫

 

font:12px/1.5 "微軟雅黑",Arial;  (字體大小為12px,行高是字體大小的1.5倍)

 

注:將font-size和line-height結合在一起時,用/來表示,/前表示字體大小,/后表示字體行高,當行高不加單位時,表示行高為

 

    字體大小的多少倍

 

注:只有在同時指定font-size和font-family時才能使用/這種寫法

 

二、文本類屬性:

 

1.水平對齊方式:

 

text-align:left(默認值,左對齊)| center(居中對齊)|right(右對齊)|justify(兩端對齊,只對英文起作用);

 

注: text-align只對文本,圖片,內聯元素起作用,給文本,圖片,內聯元素所在父元素加

 

2.垂直對齊方式:

 

vertical-align:top|middle|bottom;

 

  top:居頂部對齊

 

  middle:居中對齊

 

  bottom:居底部對齊

 

注:該屬性只對行內塊元素有效,給本元素添加此屬性;

 

    一般在設置圖片和文字居中對齊的時候會用到,input控件垂直居中對齊時會用到;

 

3.行高:

 

line-height:數值+單位;

 

注:當單行文本的行高等於容器高時,可以實現單行文本在容器中垂直居中;

 

     line-height只寫數值不加單位時,表示倍行高,行高為字體大小的多少倍;

 

eg: line-height:3; 字體大小的三倍

 

注:line-height不允許設置負值

 

4.文本修飾:

 

text-decoration:none(默認值)|underline(下划線)|overline(上划線)|line-through(刪除線);

 

常用: a{text-decoration:none;}

 

5.首行縮進:

 

text-indent:數值+單位;

 

注:向前縮進為負值,會達到一種隱藏的效果,向后縮進為正值

 

    只對第一行有效!

 

6.字符間距(漢字與漢字,字母與字母的間距):

 

letter-spacing:normal(默認間隔)|數值+單位;

 

注:值越大,間距越大,值越小,間距越小,允許設置負值

 

7.詞間距(主要針對英文):

 

word-spacing:normal(默認值)|數值+單位;

 

注:允許設置負值

 

8.文本是否大小寫:

 

text-transform:none(默認值)|capitalize(首字母大寫)|uppercase(全部大寫)|lowercase(全部小寫);

 

9.長單詞換行:

 

word-wrap:normal(默認值)|break-word;

 

注:在長單詞或 URL 地址內部進行換行時設置為break-word

 

10.強制在一行顯示:

 

white-space:normal(默認值)|nowrap(不換行);

 

注:常在省略號設置中用到

 

11.文本流控制:

 

layout-flow:horizontal(從左到右)|vertical-ideographic(從上到下);


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM