CSS基礎（三）---文字型別
阿新 • • 發佈：2018-12-21
一、CSS文字樣式
1、CSS文字樣式
CSS文字樣式包含以下內容
| 屬性 | 名稱 | 值 |
| font-family | 字型 | 中文字型需要巢狀在引號中，多字型使用英文逗號 |
| font-size | 字號 | number，單位為px |
| font-weight | 字型粗細 | normal-不加粗，bold-加粗，100-900（100-500屬於細字型，600-900屬於粗字型） |
| font-variant | 小型大寫字母 | normal-無變化，small-caps-將小寫字母轉化為大寫字母，但是字型大小按照小寫字母顯示 |
| line-height | 行高 | number，單位為px，也可以設定倍數，單位為em(前提是需要設定font-size)，一般情況下是用em |
| text-transform | 大小寫轉換 | lowercase-轉小寫，capitalize-首字母大寫其餘不變，uppercase-轉大寫 |
| text-decoration | 文字修飾 | none-清除文字樣式，underline-文字新增下劃線，overline-文字新增上劃線，line-through-刪除線 |
1、font-family：font-family設定字型，若字型是中文，需要用引號括起，可以設定多種字型，瀏覽器根據font-family規定的字型順序來匹配字型，直到匹配成功，後續設定的字型就無效了，多個字型設定以逗號隔開。同時font-family具有繼承性，可以利用設定body的css屬性來控制所有body文字
h1{font-family: "微軟雅黑","宋體","黑體";}body{font-family: "微軟雅黑","宋體","黑體";}2、font-size：font-size可以精確設定字型大小，單位為px
h1{font-size: 30px;}3、font-weight：font-weight可以控制字型的粗細，normal-不加粗，bold-加粗，100-900(以數字控制粗細)，100-900,數值越大越粗，100-500都是細體，600-900是粗體
h1{font-weight: normal;}
p{font-weight: bold;}
h2{font-weight: 100;}4、font-variant：小型大寫字母，會將小寫字母轉為大寫但是大小依舊保持為小寫字母大小
.aaa{font-variant: small-caps;}5、line-height：行高，在文字控制時經常使用的，在設定行高時，可以使用px設定精確值，也可以設定倍數，單位為em(前提是需要設定font-size)，一般情況下是用em
.box{font-size: 40px; line-height: 1.5em}6、text-transform：控制英文字型大小寫，lowercase-全轉小寫，capitalize-首字母大寫，uppercase-全轉大寫
.loweren{text-transform: lowercase;}
.capen{text-transform: capitalize;}
.upperen{text-transform: uppercase;}7、text-decoration：文字修飾，none-清除文字樣式，underline-文字下新增下劃線，overline-文字上新增上劃線，line-through-刪除線
a:link{text-decoration: none;}
a:hover{text-decoration: underline;}
.overline{text-decoration: overline;}
.price{font-size: 20px; text-decoration:line-through;}具體例項如下：
<!DOCTYPE html>
<html>
<head>
<title>文字樣式</title>
<!-- 各種文字樣式介紹 -->
<!-- <style type="text/css">
/*font-family設定字型，若字型是中文，需要用引號括起*/
/*font-family可以設定多種字型，瀏覽器根據font-family規定的字型順序來匹配字型，直到匹配成功，後續設定的字型就無效了，多個字型設定以逗號隔開*/
h1{font-family: "微軟雅黑","宋體","黑體";}
</style> -->
<style type="text/css">
/*font-family具有繼承性，可以利用設定body的css屬性來控制所有body文字*/
body{font-family: "微軟雅黑","宋體","黑體";}
/*font-size可以精確設定字型大小，單位為px*/
h1{font-size: 30px;}
/*font-weight可以控制字型的粗細，normal-不加粗，bold-加粗，100-900(以數字控制粗細)*/
h1{font-weight: normal;}
p{font-weight: bold;}
/*100-900,數值越大越粗，100-500都是細體，600-900是粗體*/
h2{font-weight: 100;}
/*font-variant:小型大寫字母，會將小寫字母轉為大寫但是大小依舊保持為小寫字母大小*/
.aaa{font-variant: small-caps;}
/*line-height:行高，在文字控制時經常使用的，在設定行高時，可以使用px設定精確值，也可以設定倍數，單位為em(前提是需要設定font-size)，一般情況下是用em*/
/*1.5em就是40px的1.5倍*/
.box{font-size: 40px; line-height: 1.5em}
/*text-transform控制英文字型大小寫，lowercase-全轉小寫，capitalize-首字母大寫，uppercase-全轉大寫*/
.loweren{text-transform: lowercase;}
.capen{text-transform: capitalize;}
.upperen{text-transform: uppercase;}
/*text-decoration文字修飾，none-清除文字樣式，underline-文字下新增下劃線，overline-文字上新增上劃線，line-through-刪除線*/
/*當滑鼠未移入時a標籤沒有下劃線，滑鼠移入後有下劃線*/
a:link{text-decoration: none;}
a:hover{text-decoration: underline;}
.overline{text-decoration: overline;}
.price{font-size: 20px; text-decoration:line-through;}
.nowprice{font-size: 40px; color: red;}
</style>
</head>
<body>
<h1>百度一下你就知道</h1>
<h2>百度一下你就知道</h2>
<p>百度一下你就知道</p>
<div class="aaa">abcDEF</div>
<div class="box">百度一下你就知道百度一下你就知道百度一下你就知道百度一下你就知道百度一下你就知道百度一下你就知道百度一下你就知道百度一下你就知道百度一下你就知道百度一下你就知道百度一下你就知道百度一下你就知道百度一下你就知道百度一下你就知道百度一下你就知道百度一下你就知道百度一下你就知道百度一下你就知道百度一下你就知道百度一下你就知道百度一下你就知道百度一下你就知道百度一下你就知道百度一下你就知道百度一下你就知道百度一下你就知道</div>
<div class="loweren">adC Def GHi Lisdfs SDFSdfs</div>
<div class="capen">adC Def GHi Lisdfs SDFSdfs</div>
<div class="upperen">adC Def GHi Lisdfs SDFSdfs</div>
<a href="https://www.baidu.com" target="_blank">百度一下你就知道</a>
<div class="overline">上劃線</div>
<div class="price">原價:998元</div>
<div class="nowprice">現價:100元</div>
</body>
</html>
2、其他型別的文字樣式
font- style定義字型的風格
- normal 預設值，可以將傾斜文字改為標準文字
- italic 向右傾斜的文字，將標準的文字變為傾斜字型
- oblique 向右傾斜的文字，將標準的文字變為傾斜字型
注意：italic和oblique都是向右傾斜的文字, 但區別在於Italic是指斜體字，而oblique是傾斜的文字，對於沒有斜體的字型應該使用oblique屬性值來實現傾斜的文字效果。
二、文字區塊
1、文字區塊
文字區塊包含以下內容：
| 屬性 | 名稱 | 值 |
| letter-spacing | 字母間距 | number，字母間距，調整中文或英文之間的間距,精確調整單位為px |
| text-indent | 文字的縮排 | number，單位為px， |
| text-align | 水平對齊 | left-左對齊，center-居中對齊，right-右對齊 |
| vertical-align | 垂直對齊 | baseline-基線對齊，sub-下標，super-上標，top-頂部對齊，middle-中線對齊，bottom-底部對齊 |
| display | 顯示型別 | none-不顯示，block-轉換為塊級元素，inline-轉換為行級元素，inline-block-轉換為行塊級元素 |
1、letter-spacing：字母間距，調整中文或英文之間的間距,精確調整單位為px
/*調整英文*/
.text{letter-spacing: 3px;}
/*調整中文*/
.text1{letter-spacing: 5px;}
/*滑鼠移入時增大間距*/
.text2:hover{letter-spacing: 10px;}2、text-indent：文字縮排，常用與文字首行縮排2字元,設定p標籤文字的字型大小後，執行設定text-indent為2em(2倍)即可
p{text-indent: 2em; font-size: 14px;}3、text-align:水平對齊，包含left左對齊，center居中對齊，right右對齊
h1{text-align: left;}
h2{text-align: center;}
h3{text-align: right;}以下是具體例項：
<!DOCTYPE html>
<html>
<head>
<title>文字區塊1</title>
<style type="text/css">
/*letter-spacing:字母間距，調整中文或英文之間的間距,精確調整單位為px*/
/*調整英文*/
.text{letter-spacing: 3px;}
/*調整中文*/
.text1{letter-spacing: 5px;}
/*滑鼠移入時增大間距*/
.text2:hover{letter-spacing: 10px;}
/*text-indent:文字縮排，常用與文字首行縮排2字元,設定p標籤文字的字型大小後，執行設定text-indent為2em(2倍)即可*/
p{text-indent: 2em; font-size: 14px;}
/*text-align:水平對齊，包含left左對齊，center居中對齊，right右對齊*/
h1{text-align: left;}
h2{text-align: center;}
h3{text-align: right;}
</style>
</head>
<body>
<h1>標題左對齊</h1>
<h2>標題居中對齊</h2>
<h3>標題右對齊</h3>
<hr>
<div class="text">abdsdfs</div>
<div class="text1">極客學院</div>
<div class="text2">百度一下你就知道</div>
<hr>
<div>
<p>WWW是環球資訊網的縮寫，（亦作“Web”、“WWW”、“'W3'”，英文全稱為“World Wide Web”），中文名字為“全球資訊網”，"環球網"等，常簡稱為Web。 分為Web客戶端和Web伺服器程式。</p>
<p>WWW可以讓Web客戶端（常用瀏覽器）訪問瀏覽Web伺服器上的頁面。 是一個由許多互相連結的超文字組成的系統，通過網際網路訪問。在這個系統中，每個有用的事物，稱為一樣“資源”；並且由一個全域性“統一資源識別符號”（URI）標識；這些資源通過超文字傳輸協議（Hypertext Transfer Protocol）傳送給使用者，而後者通過點選連結來獲得資源。</p>
<p>全球資訊網聯盟（英語：World Wide Web Consortium，簡稱W3C），又稱W3C理事會。1994年10月在麻省理工學院（MIT）電腦科學實驗室成立。全球資訊網聯盟的建立者是全球資訊網的發明者蒂姆·伯納斯-李。</p>
<p>全球資訊網並不等同網際網路，全球資訊網只是網際網路所能提供的服務其中之一，是靠著網際網路執行的一項服務。</p>
</div>
</body>
</html>
4、vertical-align:垂直對齊方式，包含baseline-基線對齊，sub-下標，super-上標，top-頂端對齊，middle-居中對齊，bottom-底部對齊
/*基線對齊*/
h1 .text1{font-size: 20px; vertical-align: baseline;}
/*頂部對齊*/
h1 .text2{font-size: 20px; vertical-align: top;}
/*居中對齊*/
h1 .text3{font-size: 20px; vertical-align: middle;}
/*下標:可以用來表示化學字元*/
.text4{font-size: 30px;}
.text4 span{font-size: 20px; vertical-align: sub;}
/*上標:可以用來表示化學字元*/
.text5{font-size: 30px;}
.text5 span{font-size: 10px;vertical-align: super;}
/*底部對齊*/
h2{font-size: 50px;}
h2 .text6{font-size: 20px; vertical-align: bottom;}5、display顯示型別，控制標籤顯示，包含none-不顯示，block-轉換塊級元素，inline-轉換行級元素，inline-block-行級塊元素
5.1、none：不顯示:隱藏元素，在後面做特效的時候可以用到
h1{display: none;}注意：行級元素與塊集元素區別：
1、行級元素範圍是文字部分，塊級元素範圍是整行
2、行級元素不會自動換行，塊級元素會自動換行
3、行級元素不能定義寬高，塊級元素可以定義寬高
5.2、block：轉換為塊級元素,就可以自動換行、定義寬高
.text{display: block; background: red; width: 500px; height: 500px;}5.3、inline：轉換為行級元素,就不能自動換行、定義寬高
h2{display: inline;background: blue;}5.4、inline-block：行級塊元素:同時具有行級元素不自動換行以及塊級元素可以定義寬高的屬性，img、input標籤就是行級塊元素
/*行級元素轉行級塊元素*/
.text1{display: inline-block; width: 50px; height: 50px;}
/*塊級元素轉行級塊元素*/
h3{display: inline-block; width: 100px;height: 80px;}具體例項如下：
<!DOCTYPE html>
<html>
<head>
<title>文字區塊3</title>
<style type="text/css">
/*display顯示型別，控制標籤顯示，包含none-不顯示，block-轉換塊級元素，inline-轉換行級元素，inline-block-行級塊元素*/
/*none-不顯示:隱藏元素，在後面做特效的時候可以用到*/
h1{display: none;}
/*行級元素與塊集元素區別：
1、行級元素範圍是文字部分，塊級元素範圍是整行
2、行級元素不會自動換行，塊級元素會自動換行
3、行級元素不能定義寬高，塊級元素可以定義寬高*/
/*block-轉換為塊級元素,就可以自動換行、定義寬高*/
.text{display: block; background: red; width: 500px; height: 500px;}
/*inline-轉換為行級元素,就不能自動換行、定義寬高*/
h2{display: inline;background: blue;}
/*行級塊元素:同時具有行級元素不自動換行以及塊級元素可以定義寬高的屬性，img、input標籤就是行級塊元素*/
/*行級元素轉行級塊元素*/
.text1{display: inline-block; width: 50px; height: 50px;}
/*塊級元素轉行級塊元素*/
h3{display: inline-block; width: 100px;height: 80px;}
</style>
</head>
<body>
<h1>極客學院</h1>
<a class="text" href="https://www.baidu.com">百度一下你就知道</a>
<a class="text" href="http://www.jd.com">京東商城</a>
<hr>
<h2>騰訊視訊</h2>
<h2>腦白金</h2>
<hr>
<a class="text1" href="http://www.jd.com">行級元素轉行級塊元素</a>
<hr>
<h3>騰訊體育</h3>
<h3>NBA籃球</h3>
</body>
</html>
2、常見顯示型別的區別
（1）塊級元素
- 常見標籤：h1-h6、p、div、ui、ol、li、dl、dt、dd等。
- 特性：能夠獨立顯示在一行，在沒有設定寬度的情況下，預設寬度等於父級寬度，並且可以自定義塊元素的寬高。
- 轉換：任何元素都可以通過display:block轉換為塊級元素，轉換完成之後，將具備塊級元素的所有特性。
（2）行級元素
- 常見標籤：a、span、strong、b、em、i、del、s、font等。
- 特性：行級元素可以顯示在一行，在沒有設定寬度的情況下，預設的寬度等於內部元素的寬度，行級元素不能自定義寬高。
- 轉換：任何元素都可以通過display:inline轉換為行級元素，轉換之後同樣具備以上行級元素的特性。
（3）行級塊元素
- 常見標籤：img、input等。
- 特性：行級元素能夠在一行顯示，並且可以自定義元素的寬高。
- 轉換：任何元素都可以通過display:inline-block轉換為行級塊元素，轉換完成之後具備行級塊元素的所有特性。