CSS與CSS3基礎知識(二)——文字外觀屬性

2020-10-25 07:00:10

        希望可以在CSDN與大家一起成長,如有錯誤請大家多多批評指教!

        CSS 英文全稱為Cascading Style Sheet,中文譯為「層疊樣式表」。CSS以 HTML為基礎,提供了豐富的功能,如字型、顏色、背景的控制及整體排版等,而且可以針對不同的瀏覽器設定不同的樣式。在CSS與CSS3基礎知識(一)(點選可複習)中學習了字型樣式屬性,現在一起學習CSS的文字外觀屬性吧!

1.color:文字顏色

取值方法有三種:預定義的顏色名:如red,green等

                             十六進位制,如#ff000等

                              RGB程式碼,如紅色可以表示為rgb(255,0,0)或rgb(100%,0,0),即紅,綠,藍。

2.letter-sapcing:字間距

屬性值可以為不同單位的數值,允許使用負值,預設為normal。

3.word-spacing:單詞間距

用於定義英文單詞之間的間距,對中文字元無效。屬性值可以為不同單位的數值,允許使用負值,預設為normal。

4.line-height:行間距

行間距就是行與行之間的距離,即字元的垂直距離

5.text-transform:文字轉換

用於控制英文字元的大小寫,其屬性值如下:

none:不轉換

capitalize: 首字母大寫

uppercase:全部字元轉換為大寫

lowercase:全部字元轉換為小寫

6.text-decoration:文字裝飾

用於設定文字的下劃線,上劃線,刪除線等裝飾效果,其可用屬性值如下:

none:沒有裝飾

underline:下劃線

overline:上劃線

line-through:刪除線

*如果希望文字同時有下劃線和刪除線效果,就可以在屬性後同時寫underline,line-through。

p{text-decoration:underline line-through;}

7.text-align:水平對齊方式

用於設定文字內容的水平對齊,相當於HTML中的align對齊屬性,可用屬性值如下:

left:左對齊(預設)

right:右對齊

center:居中對齊

8.text-indent:文字縮排

用於設定首行文字的縮排,其屬性值可為不同單位的數值、em字元寬度的倍數或相對於瀏覽器視窗寬度的百分比%,允許使用負值。建議使用em作為設定單位。

*text-indent屬性僅適用於塊級元素,對行內元素無效(塊級和行內元素會在之後的部落格里進行補充哦)

9.white-space:空白符處理

*在HTML製作網頁的時候,無論你寫多少個空格,最後瀏覽器都只顯示一個,所有我們需要CSS的white-space設定空白符的處理方式,其屬性值如下:

normal:文字中的空格、空行無效,滿行後自動換行

pre:預格式化,按檔案的書寫格式保留空格、空行原樣顯示

nowrap:空格空行無效,強制文字不能換行,除非遇到換行標籤<br/>。*內容超出標籤邊界也不換行,超出瀏覽器頁面則會自動增加捲軸

10.text-shadow:陰影效果

用於為頁面中的文字新增陰影效果,其基本語法格式如下:

選擇器{text-shadow:h-shadow(水平陰影距離) v-shadow(垂直陰影距離) blur(模糊半徑) color(陰影顏色)}

舉個栗子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>陰影效果</title>
    <style type="text/css">
    .one{
        font-size: 60px;
        text-shadow:10px 5px 10px #6600ff;
    }
    </style>
</head>
<body>
<p class="one">這就是陰影效果</p>
</body>
</html>

****注意:當設定陰影的水平和垂直距離引數均為正值時,陰影的投射方向在右下角。為負值時,在左上角。陰影的模糊半徑引數只能是正值,數值越大陰影向外模糊的範圍也越大。

 

11.text-overflow:標示物件內文字的溢位

用於標示物件內文字的溢位,其可用屬性值如下:

ellipsis:用省略標籤「...」標示被修建文字,省略標籤插入的位置是最後一個字元

clip:修建溢位文字,不顯示省略標籤「....」