css(文字格式設定化,文字格式設定處理)

標籤：weight   文字格式設定   size   word   clip   one   enter   超出   用例   

文字格式設定化,文字格式設定處理

文字格式設定化

   1、控制字型

      1、指定字型

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

      2、字型大小

         font-size: px , pt 作為單位  30pt  16pt

          常用字型大小：12px - 14px

      3、字型加粗

         相當於 <b></b>

          font-weight : normal / bold ;

        

          建議：通過 該屬性取代 b 標籤

      4、字型樣式

         斜體

          font-style:normal / italic;

          相當於<i></i>

5、小型大寫字母

         font-variant : normal / small-caps;

      6、字型屬性 font

         將所有的屬性設定在一個聲明當中

          font:font-style font-varaint font-weight font-size font-family;

          eg:font:italic small-caps bold 12px "microsoft yahei",arial;

          常用寫法:

                   font :font-size  font-family;

                   font:bold 12px "microsoft yahei";

          其他寫法:

                 font : font-size/line-height font-family;

                   font:12px/24px "microsoft yahei";

                       line-height : 行高

2、文字屬性

       1、顏色

          color : 顏色值 ;

                   rgba(255,0,0,0.5);

       2、文本排列

          text-align:left/right/center; 元素中的內容水平對齊，大部分主流瀏覽器，只對行內元素起作用，對塊不起作用

           vertical-align:top / bottom / middle / baseline; 常值內容垂直對齊

               baseline : 基準對齊

       3、文字修飾(線條)

          text-decoration:none / underline

              none : 去除文本上的線條

              underline : 底線

              overline : 上劃線

              linethrough : 刪除線  <s></s>

4、行高

          每行文本所佔據的高度。如果行高的值高於文本的高度，那麼這段文本會在行高範圍內垂直置中顯示。

           使用方式：

               1、將行高與容器高度設定為一致，從而使容器內的文本垂直置中顯示。(只針對一行資料)

               2、如果想給文本增加上下的邊距，也可以使用line-height

       5、首行文本縮排

          讓元素內的首行文本，空出指定的像素值

           text-indent:value;

       6、文本陰影

          text-shadow:h-shadow v-shadow blur color;

          常用例子：text-shadow: 5px 5px 5px #FF0000;

3、文本溢出處理

       1、處理空白

          white-space:normal / nowrap;

           出現場合：配合著overflow:hidden;來對超出範圍的內容進行隱藏。從而保證元素的高度

       2、文本溢出

          overflow:hidden; 元素對溢出後的處理

           屬性:text-overflow:

           取值:

                clip : 裁剪、切割

                ellipsis : 隱藏溢出內容並且顯示 ...

           注意：text-overflow 要 配合著 overflow:hidden;一起使用

       3、長單詞換行

          屬性:word-wrap

           值:normal / break-word(長單詞換行)

      

 

css(文字格式設定化,文字格式設定處理)