CSS-美化網頁元素-字體和文本屬性
使用CSS樣式美化網頁文本具有如下意義。
1. 有效的傳遞頁面信息
2. 使用CSS美化過的頁面文本，使頁面漂亮、美觀，吸引用戶
3. 可以很好的突出頁面的主題內容，使用戶第一眼可以看到頁面主要內容
4. 具有良好的用戶體驗
一、字體屬性
1. 字體設置
CSS使用font-family屬性定義文本的字體系列，字體可以使用英文字體,也可以使用多個字體，各種字體之間必須使用英文狀態下的逗號隔開；
注意事項：
一般情況下，如果有空格隔開的多個單詞組成的字體，加引號；
盡量使用系統默認自帶的字體，保證在任何用戶的瀏覽器中都能正確顯示；
最常見的幾個字體：body{font-family： 'MicrosoftYaHei',tahoma,arial,'Hiragino Sans GB';}
使用多個字體的好處是：系統按順序檢測瀏覽器是否有這個字體，如果不存在，就會轉向下一個字體，如果存在，就優先使用；
實際開發中，字體設置常用於<body>標簽，按照團隊約定來設置字體。
<style>
h2 {
font-family: '微軟雅黑';
}
.songti {
font-family: '宋體';
}
#kaiti {
font-family: '楷體'
}
* {
font-family: '黑體';
}
</style>
</head>
<body>
<!-- CSS使用font-family屬性定義文本的字體系列 -->
<h2>泰戈爾經典語錄</h2>
<p class="songti">世界上最遙遠的距離，不是生與死，而是我就站在你面前，你卻不知道我愛你。——泰戈爾《魚和飛鳥的故事》</p>
<p id="kaiti">縱然傷心，也不要愁眉不展，因為你不知是誰會愛上你的笑容。</p>
<p>寂靜在喧囂里低頭不語，沉默在黑夜里與目光結交，於是，我們看錯了世界，卻說世界欺騙了我們。</p>
<p>生如夏花之燦爛，死如秋葉之靜美。</p>
<p>不要着急，最好的總會在最不經意的時候出現。</p>
</body>
2. 字體大小和粗細
CSS使用font-size屬性定義字體大小
如：p {
font-size: 20px;
}
注意：
px（像素）大小是網頁最常用的單位；
谷歌瀏覽器默認文字大小是16px；
不同瀏覽器可能默認的文字大小不一致，我們盡量給一個明確值大小，不要默認大小， 可以給body指定字體大小；
標題標簽比較特殊，，需要單獨指定文字大小；
CSS使用font-width設置文字粗細
參數：normal 正常的字體 相當於number為400，聲明此值將取消之前的任何設置
bold：粗體相當於number為700，也相當於b對象的作用
bolder：特粗體 lighter 細體
<style> body { font-size: 16px; } /* 標題標簽比較特殊，，需要單獨指定文字大小 */ h2 { font-size: 16px; } .bold { font-weight: bold ; /* fong-werght: 700; */ /* 這個700的后面不跟單位，等價於bold，都是加粗的效果 實際開發中，我們提倡使用數字，來表示粗體或細體*/ } /* 也可以用不讓字體變粗，如標題： */ h2 { font-weight: 400; /* font-weight: normal; */ } </style> </head> <body> <h2>泰戈爾經典語錄</h2> <p class="songti">世界上最遙遠的距離，不是生與死，而是我就站在你面前，你卻不知道我愛你。——泰戈爾《魚和飛鳥的故事》</p> <p id="kaiti">縱然傷心，也不要愁眉不展，因為你不知是誰會愛上你的笑容。</p> <p class="bold">寂靜在喧囂里低頭不語，沉默在黑夜里與目光結交，於是，我們看錯了世界，卻說世界欺騙了我們。</p> <p>生如夏花之燦爛，死如秋葉之靜美。</p> <p>不要着急，最好的總會在最不經意的時候出現。</p> </body>
3.字體文字樣式
CSS使用font-style屬性設置文本樣式
參數：normal:默認值，瀏覽器會顯示標准的字體樣式
italic：瀏覽器會顯示斜體的字體樣式
<style> h2 { font-style: italic; } em { font-style: normal; } </style> </head> <body> <h2>泰戈爾經典語錄</h2> <em>泰戈爾</em>
4. 字體屬性-復合屬性
所謂
復合屬性：就是前幾種屬性的簡寫的方式
一般情況下，想要設置div文字變傾斜 加粗 字號設置為16像素，並且是微軟雅黑 ，寫法如下
div {
font-size: 16px;
font-family: "Microsoft Yahei";
font-weight: 700;
font-style: italic;
}
但這樣寫比較麻煩，代碼行過多，所以我們可以使用復合屬性
格式：
font: font-style font-weight font-size/line-height font-family;
注意： 不能更改順序，且各個屬性之間以空格隔開；
不需要設置的屬性可以省略（取默認值），但必須保留font-size和font-family屬性，否則font屬性不起作用。
<style> font: italic 700 16px 'Micorsoft Yahei'; </style> </head> <body> <div>三生三世十里桃花，一心一意百行代碼</div> </body>
可以產生同樣的效果。
二、文本屬性
1.文本顏色
CSS文本屬性可以定義文本的外觀，比如文本的顏色、對齊文本、裝飾文本、文本縮進、行間距等
color屬性用於定義文本顏色：
方式：1.預定義的顏色值：red green blue 等；
2.十六進制： #FF0000，#FF6600,#29D794等；
3.RGB代碼：rgb（255,0）或rgb（100%，0%，0%） r-red g-green b-blue；
<style> h2 { color: deeppink; } p { color: #41c526; } #a { color: rgb(228, 37, 37); } </style> </head> <body> <h2>泰戈爾經典語錄</h2> <p id="a">世界上最遙遠的距離，不是生與死，而是我就站在你面前，你卻不知道我愛你。——泰戈爾《魚和飛鳥的故事》</p> <p>縱然傷心，也不要愁眉不展，因為你不知是誰會愛上你的笑容。</p> </body>
2.對齊文本
text-align屬性用於設置元素內文本內容的水平對齊方式
左對齊 left（默認） 居中對齊 center 右對齊right
<style> h2 { /* 本質是讓h2盒子里的文字水平居中對齊 */ text-align: center; } </style> </head> <body> <h2>泰戈爾經典語錄</h2> </body>
3.文本縮進
text-indent 屬性用來制定文本的第一行的縮進，通常是將段落的首行縮進；
通過設置該屬性，所有元素的第一行都可以縮進一個給定的長度，甚至該長度可以為負值；
特別地：em是一個相對單位，就是當前元素（font-size）1個文字的大小，如果當前元素沒有設置大小，則會按照父元素的一個文字大小
<style> p { text-indent: 20px; } .two { /* 此時寫了2em，則是縮進當前元素兩個文字大小的距離 */ text-indent: 2em; } </style> </head> <body> <h2>泰戈爾經典語錄</h2> <p>縱然傷心，也不要愁眉不展，因為你不知是誰會愛上你的笑容。世界上最遙遠的距離，不是生與死，而是我就站在你面前，你卻不知道我愛你。——泰戈爾《魚和飛鳥的故事》。縱然傷心，也不要愁眉不展，因為你不知是誰會愛上你的笑容。寂靜在喧囂里低頭不語，沉默在黑夜里與目光結交，於是，我們看錯了世界，卻說世界欺騙了我們。生如夏花之燦爛，死如秋葉之靜美。</p> <p>不要着急，最好的總會在最不經意的時候出現。</p> <p class="two">縱然傷心，也不要愁眉不展，因為你不知是誰會愛上你的笑容。世界上最遙遠的距離，不是生與死，而是我就站在你面前，你卻不知道我愛你。——泰戈爾《魚和飛鳥的故事》。縱然傷心，也不要愁眉不展，因為你不知是誰會愛上你的笑容。寂靜在喧囂里低頭不語，沉默在黑夜里與目光結交，於是，我們看錯了世界，卻說世界欺騙了我們。生如夏花之燦爛，死如秋葉之靜美。</p> </body>
4.裝飾文本
text-decoration屬性規定添加到文本的修飾，可以給文本添加下划線、刪除線、上划線
參數：
none（默認）沒有裝飾線 最常用
underline 下划線 鏈接a自帶下划線 常用
overline 上划線 幾乎不用
line-through 刪除線 不常用
<style> .underline { text-decoration: underline; } .overline { text-decoration: overline; } .line-throug { text-decoration: line-through; } /* 可以取消鏈接a默認的下划線 */ a { text-decoration: none; } </style> </head> <body> <h2>泰戈爾經典語錄</h2> <p class="underline">世界上最遙遠的距離，不是生與死，而是我就站在你面前，你卻不知道我愛你。——泰戈爾《魚和飛鳥的故事》</p> <p class="overline">縱然傷心，也不要愁眉不展，因為你不知是誰會愛上你的笑容。</p> <p class="line-through">寂靜在喧囂里低頭不語，沉默在黑夜里與目光結交，於是，我們看錯了世界，卻說世界欺騙了我們。</p> <a href="#">泰戈爾經典語錄</a>
5.行間距
line-height屬性用來設置行間距，可以控制文字行與行之間的距離
行間距=上間距+文本高度+下間距
測量行高工具推薦：FastStone Capture
測量方法：一行文字的最下端到下一行文字的最下端的距離等同於行間距
<style> div { line-height: 26px; } </style> </head> <body> <div>泰戈爾經典語錄</div> <p>縱然傷心，也不要愁眉不展，因為你不知是誰會愛上你的笑容。世界上最遙遠的距離，不是生與死，而是我就站在你面前，你卻不知道我愛你。——泰戈爾《魚和飛鳥的故事》。。</p> </body>