希望可以在CSDN與大家一起成長,如有錯誤請大家多多批評指教!
CSS 英文全稱為Cascading Style Sheet,中文譯為「層疊樣式表」。CSS以 HTML為基礎,提供了豐富的功能,如字型、顏色、背景的控制及整體排版等,而且可以針對不同的瀏覽器設定不同的樣式。在CSS與CSS3基礎知識(一)(點選可複習)中學習了字型樣式屬性,現在一起學習CSS的文字外觀屬性吧!
取值方法有三種:預定義的顏色名:如red,green等
十六進位制,如#ff000等
RGB程式碼,如紅色可以表示為rgb(255,0,0)或rgb(100%,0,0),即紅,綠,藍。
屬性值可以為不同單位的數值,允許使用負值,預設為normal。
用於定義英文單詞之間的間距,對中文字元無效。屬性值可以為不同單位的數值,允許使用負值,預設為normal。
行間距就是行與行之間的距離,即字元的垂直距離
用於控制英文字元的大小寫,其屬性值如下:
none:不轉換
capitalize: 首字母大寫
uppercase:全部字元轉換為大寫
lowercase:全部字元轉換為小寫
用於設定文字的下劃線,上劃線,刪除線等裝飾效果,其可用屬性值如下:
none:沒有裝飾
underline:下劃線
overline:上劃線
line-through:刪除線
*如果希望文字同時有下劃線和刪除線效果,就可以在屬性後同時寫underline,line-through。
p{text-decoration:underline line-through;}
用於設定文字內容的水平對齊,相當於HTML中的align對齊屬性,可用屬性值如下:
left:左對齊(預設)
right:右對齊
center:居中對齊
用於設定首行文字的縮排,其屬性值可為不同單位的數值、em字元寬度的倍數或相對於瀏覽器視窗寬度的百分比%,允許使用負值。建議使用em作為設定單位。
*text-indent屬性僅適用於塊級元素,對行內元素無效(塊級和行內元素會在之後的部落格里進行補充哦)
*在HTML製作網頁的時候,無論你寫多少個空格,最後瀏覽器都只顯示一個,所有我們需要CSS的white-space設定空白符的處理方式,其屬性值如下:
normal:文字中的空格、空行無效,滿行後自動換行
pre:預格式化,按檔案的書寫格式保留空格、空行原樣顯示
nowrap:空格空行無效,強制文字不能換行,除非遇到換行標籤<br/>。*內容超出標籤邊界也不換行,超出瀏覽器頁面則會自動增加捲軸
用於為頁面中的文字新增陰影效果,其基本語法格式如下:
選擇器{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>
****注意:當設定陰影的水平和垂直距離引數均為正值時,陰影的投射方向在右下角。為負值時,在左上角。陰影的模糊半徑引數只能是正值,數值越大陰影向外模糊的範圍也越大。
用於標示物件內文字的溢位,其可用屬性值如下:
ellipsis:用省略標籤「...」標示被修建文字,省略標籤插入的位置是最後一個字元
clip:修建溢位文字,不顯示省略標籤「....」