一、對(duì)齊文本
1、text-align屬性
text-align 屬性規(guī)定元素中的文本的水平對(duì)齊方式。該屬性通過(guò)指定行框與哪個(gè)點(diǎn)對(duì)齊，從而設(shè)置塊級(jí)元素內(nèi)文本的水平對(duì)齊方式。通過(guò)允許用戶代理調(diào)整行內(nèi)容中字母和字之間的間隔，可以支持值 justify；不同用戶代理可能會(huì)得到不同的結(jié)果。
如果 direction 屬性是 ltr，則默認(rèn)值是 left；如果 direction 是 rtl，則為 right。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 p{ 8 width: 101px; 9 background: red;10 text-align: left;11 }12 </style>13 </head>14 <body> 15 <p>元素定位元素定位元素定位元素定位元素定位元素定位元素定位元素定位</p>16 17 </body>18 </html>
屬性值為center時(shí)：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 p{ 8 width: 101px; 9 background: red;10 text-align: center;11 }12 </style>13 </head>14 <body> 15 <p>元素定位元素定位元素定位元素定位元素定位元素定位元素定位元素定位</p>16 17 </body>18 </html>
屬性值為right時(shí)：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 p{ 8 width: 101px; 9 background: red;10 text-align: right;11 }12 </style>13 </head>14 <body> 15 <p>元素定位元素定位元素定位元素定位元素定位元素定位元素定位元素定位</p>16 17 </body>18 </html>
如果屬性值為justify值時(shí)，可以使用text-justify屬性指定文本添加空白的方式。
text-justify 屬性規(guī)定當(dāng) text-align 被設(shè)置為 text-align 時(shí)的齊行方法。該屬性規(guī)定如何對(duì)齊行文本進(jìn)行對(duì)齊和分隔。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 p{ 8 width: 101px; 9 background: red;10 text-align: justify;11 text-justify:inter-word;12 }13 </style>14 </head>15 <body> 16 <p>元素定位元素定位元素定位元素定位元素定位元素定位元素定位元素定位</p>17 18 </body>19 </html>
2、處理空白
空白在HTML文檔中通常會(huì)被壓縮或者直接忽略。這允許你講HTML的布局和頁(yè)面的外觀分離。瀏覽器在遇到多個(gè)空格時(shí)，會(huì)將他們壓縮成一個(gè)空格，遇到換行符等空白符則直接忽略。
white-space 屬性設(shè)置如何處理元素內(nèi)的空白。
這個(gè)屬性聲明建立布局過(guò)程中如何處理元素中的空白符
值說(shuō)明
normal默認(rèn)值，空白符被壓縮，文本行自動(dòng)換行
nowrap空白符被壓縮，文本行不換行
pre空白符被保留，文本在遇到換行符的時(shí)候換行
pre-line空白符被壓縮，文本在一行排滿或者遇到換行符時(shí)換行
pre-wrap空白符被保留，文本會(huì)在一行排滿或者遇到換行符時(shí)換行
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 p{ 8 width: 150px; 9 background: red;10 white-space: nowrap;11 }12 </style>13 </head>14 <body> 15 <p>元素 定位元素16 定位元素定位元素定位元素定位元素定位元素定位元素定位</p>17 18 </body>19 </html>
3、指定文本方向
direction 屬性規(guī)定文本的方向 / 書寫方向。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 p{ 8 width: 150px; 9 background: red; 10 }11 #first{12 direction: ltr;13 }14 #second{15 direction: rtl;16 }17 </style>18 </head>19 <body> 20 <p id="first">文本方向!</p>21 <p id="second">文本方向!</p>22 </body>23 </html>
4、指定單詞、字母、行之間的間距
a、letter-spacing
letter-spacing 屬性增加或減少字符間的空白（字符間距）。該屬性定義了在文本字符框之間插入多少空間。由于字符字形通常比其字符框要窄，指定長(zhǎng)度值時(shí)，會(huì)調(diào)整字母之間通常的間隔。因此，normal 就相當(dāng)于值為 0。
注釋：允許使用負(fù)值，這會(huì)讓字母之間擠得更緊。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 p{ 8 width: 150px; 9 background: red; 10 }11 #first{12 letter-spacing: 10px;13 }14 #second{15 letter-spacing: -10px;16 }17 </style>18 </head>19 <body> 20 <p id="first">文本方向!</p>21 <p id="second">文本方向!</p>22 </body>23 </html>
b、word-spacing
word-spacing 屬性增加或減少單詞間的空白（即字間隔）。該屬性定義元素中字之間插入多少空白符。針對(duì)這個(gè)屬性，“字” 定義為由空白符包圍的一個(gè)字符串。如果指定為長(zhǎng)度值，會(huì)調(diào)整字之間的通常間隔；所以，normal 就等同于設(shè)置為 0。允許指定負(fù)長(zhǎng)度值，這會(huì)讓字之間擠得更緊。
注釋：允許使用負(fù)值。該屬性對(duì)中文無(wú)效。
設(shè)置中文字的間隔請(qǐng)使用letter-spacing屬性。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 p{ 8 width: 150px; 9 background: red; 10 }11 #first{12 word-spacing: 10px;13 }14 #second{15 word-spacing: -1px;16 }17 </style>18 </head>19 <body> 20 <p id="first">I love China!</p>21 <p id="second">I love China! </p>22 </body>23 </html>
C、line-height
line-height 屬性設(shè)置行間的距離（行高）。
注釋：不允許使用負(fù)值。
說(shuō)明
該屬性會(huì)影響行框的布局。在應(yīng)用到一個(gè)塊級(jí)元素時(shí)，它定義了該元素中基線之間的最小距離而不是最大距離。line-height 與 font-size 的計(jì)算值之差（在 CSS 中成為“行間距”）分為兩半，分別加到一個(gè)文本行內(nèi)容的頂部和底部?？梢园@些內(nèi)容的最小框就是行框。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 p{ 8 width: 150px; 9 background: red; 10 }11 #first{12 line-height: 15px;13 }14 #second{ 15 line-height: 20px;16 }17 </style>18 </head>19 <body> 20 <p id="first">I love China!</p>21 <p id="second">I love China! </p>22 </body>23 </html>
5、控制斷詞
word-wrap 屬性允許長(zhǎng)單詞或 URL 地址換行到下一行。
normal值單詞不斷開，即使無(wú)法完全放入包含塊中。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 p{ 8 width: 150px; 9 background: red; 10 }11 #first{12 word-wrap: normal;13 }14 #second{ 15 word-wrap: break-word;16 }17 </style>18 </head>19 <body> 20 <p id="first">I love China! qqqqqqqqqqqqqqqqqqqqqqqqq</p>21 <p id="second">I love China! qqqqqqqqqqqqqqqqqqqqqqqqq</p>22 </body>23 </html>
6、首行縮進(jìn)
text-indent 屬性規(guī)定文本塊中首行文本的縮進(jìn)。
注釋：允許使用負(fù)值。如果使用負(fù)值，那么首行會(huì)被縮進(jìn)到左邊。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 p{ 8 width: 150px; 9 background: red; 10 }11 #first{12 text-indent: 2em;13 }14 #second{ 15 text-indent: -2em;16 }17 </style>18 </head>19 <body> 20 <p id="first">I love China! qqqqqqqqqqqqqqqqqqqqqqqqq</p>21 <p id="second">I love China! qqqqqqqqqqqqqqqqqqqqqqqqq</p>22 </body>23 </html>
7、文本裝飾與大小寫轉(zhuǎn)換
a、text-decoration
text-decoration 屬性規(guī)定添加到文本的修飾。這個(gè)屬性允許對(duì)文本設(shè)置某種效果，如加下劃線。如果后代元素沒(méi)有自己的裝飾，祖先元素上設(shè)置的裝飾會(huì)“延伸”到后代元素中。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 a{ 8 text-decoration:none; 9 }10 p{11 text-decoration:underline;12 }13 </style>14 </head>15 <body>16 <a >百度</a>17 <p>下劃線</p>18 </body>19 </html>
b、text-transform
text-transform 屬性控制文本的大小寫。這個(gè)屬性會(huì)改變?cè)刂械淖帜复笮?，而不論源文檔中文本的大小寫。如果值為 capitalize，則要對(duì)某些字母大寫，但是并沒(méi)有明確定義如何確定哪些字母要大寫，這取決于用戶代理如何識(shí)別出各個(gè)“詞”。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 p{ 8 text-transform:capitalize; 9 }10 </style>11 </head>12 <body> 13 <p>abcd ads</p>14 </body>15 </html>
8、文本陰影
text-shadow
text-shadow 屬性向文本設(shè)置陰影。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 h1{ 8 text-shadow:5px 5px 5px red; 9 }10 </style>11 </head>12 <body> 13 <h1>網(wǎng)站首頁(yè)</h1>14 </body>15 </html>
9、使用字體
a、font
font 簡(jiǎn)寫屬性在一個(gè)聲明中設(shè)置所有字體屬性?？梢圆辉O(shè)置其中的某個(gè)值，比如 font:100% verdana; 也是允許的。未設(shè)置的屬性會(huì)使用其默認(rèn)值。
可以按順序設(shè)置如下屬性：
font-style
font-variant
font-weight
font-size/line-height
font-family
1 <html> 2 <head> 3 <style type="text/css"> 4 p.ex1 5 { 6 font:italic arial,sans-serif; 7 } 8 9 p.ex210 {11 font:italic bold 12px/30px arial,sans-serif;12 }13 </style>14 </head>15 16 <body>17 <p class="ex1">This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.</p>18 <p class="ex2">This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.</p>19 </body>20 </html>
b、font-style
font-style 屬性定義字體的風(fēng)格。該屬性設(shè)置使用斜體、傾斜或正常字體。斜體字體通常定義為字體系列中的一個(gè)單獨(dú)的字體。理論上講，用戶代理可以根據(jù)正常字體計(jì)算一個(gè)斜體字體。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 h1{ 8 font-style: normal; 9 }10 h2{11 font-style: initial;12 }13 h3{14 font-style: oblique;15 }16 </style>17 </head>18 <body> 19 <h1>網(wǎng)站首頁(yè)</h1>20 <h2>網(wǎng)站首頁(yè)</h2>21 <h3>網(wǎng)站首頁(yè)</h3>22 </body>23 </html>
c、font-size
font-size 屬性可設(shè)置字體的尺寸。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 p{ 8 font-size: 30px; 9 }10 </style>11 </head>12 <body> 13 <p>網(wǎng)站首頁(yè)</p> 14 </body>15 </html>
d、font-family
font-family 規(guī)定元素的字體系列。font-family 可以把多個(gè)字體名稱作為一個(gè)“回退”系統(tǒng)來(lái)保存。如果瀏覽器不支持第一個(gè)字體，則會(huì)嘗試下一個(gè)。也就是說(shuō)，font-family 屬性的值是用于某個(gè)元素的字體族名稱或/及類族名稱的一個(gè)優(yōu)先表。瀏覽器會(huì)使用它可識(shí)別的第一個(gè)值.
1 <html> 2 <head> 3 <style type="text/css"> 4 p.serif{font-family:"Times New Roman",Georgia,Serif} 5 p.sansserif{font-family:Arial,Verdana,Sans-serif} 6 </style> 7 </head> 8 9 <body>10 <h1>CSS font-family</h1>11 <p class="serif">This is a paragraph, shown in the Times New Roman font.</p>12 <p class="sansserif">This is a paragraph, shown in the Arial font.</p>13 14 </body>15 </html>
e、font-variant
font-variant 屬性設(shè)置小型大寫字母的字體顯示文本，這意味著所有的小寫字母均會(huì)被轉(zhuǎn)換為大寫，但是所有使用小型大寫字體的字母與其余文本相比，其字體尺寸更小。
1 <html> 2 <head> 3 <style type="text/css"> 4 p.normal {font-variant: normal} 5 p.small {font-variant: small-caps} 6 </style> 7 </head> 8 9 <body>10 <p class="normal">This is a paragraph</p>11 <p class="small">This is a paragraph</p>12 </body>13 14 </html>
f、font-weight
font-weight 屬性設(shè)置文本的粗細(xì)。該屬性用于設(shè)置顯示元素的文本中所用的字體加粗。數(shù)字值 400 相當(dāng)于 關(guān)鍵字 normal，700 等價(jià)于 bold。
1 <html> 2 <head> 3 <style type="text/css"> 4 p.normal {font-weight: normal} 5 p.thick {font-weight: bold} 6 p.thicker {font-weight: 900} 7 </style> 8 </head> 9 10 <body>11 <p class="normal">This is a paragraph</p>12 13 <p class="thick">This is a paragraph</p>14 15 <p class="thicker">This is a paragraph</p>16 </body>17 18 </html>
10、使用web字體
在 CSS3 之前，web 設(shè)計(jì)師必須使用已在用戶計(jì)算機(jī)上安裝好的字體。通過(guò) CSS3，web 設(shè)計(jì)師可以使用他們喜歡的任意字體。當(dāng)您您找到或購(gòu)買到希望使用的字體時(shí)，可將該字體文件存放到 web 服務(wù)器上，它會(huì)在需要時(shí)被自動(dòng)下載到用戶的計(jì)算機(jī)上。您“自己的”的字體是在 CSS3 @font-face 規(guī)則中定義的。
在新的 @font-face 規(guī)則中，您必須首先定義字體的名稱（比如 myFirstFont），然后指向該字體文件。如需為 HTML 元素使用字體，請(qǐng)通過(guò) font-family 屬性來(lái)引用字體的名稱 (myFirstFont)：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <link rel='stylesheet' type='text/css' /> 7 <style type="text/css"> 8 p{ 9 font-family:'JetLinkMediumOl107126577a1bfb5';10 }11 </style>12 </head>13 <body> 14 <p>使用WEB字體</p> 15 </body>16 </html>
網(wǎng)頁(yè)引用的css文件內(nèi)容
1 @font-face {font-family: 'JetLinkMediumOl107126577a1bfb5';src: url('//cdn.webfont.youziku.com/webfonts/nomal/114613/46121/5a926dd6f629d80784d8edb7.gif?r=67939415062');
src: url('//cdn.webfont.youziku.com/webfonts/nomal/114613/46121/5a926dd6f629d80784d8edb7.gif?r=67939415062?#iefix') format('embedded-opentype'),url('//cdn.webfont.youziku.com/webfonts/nomal/114613/46121/5a926dd6f629d80784d8edb7.png?r=67939415062') format('woff2'),url('//cdn.webfont.youziku.com/webfonts/nomal/114613/46121/5a926dd6f629d80784d8edb7.bmp?r=67939415062') format('woff'),url('//cdn.webfont.youziku.com/webfonts/nomal/114613/46121/5a926dd6f629d80784d8edb7.jpg?r=67939415062') format('truetype');
font-weight: normal;font-style: normal;}.css107126577a1bfb5{font-family: 'JetLinkMediumOl107126577a1bfb5';}
總結(jié)：
@font-face規(guī)則，網(wǎng)頁(yè)設(shè)計(jì)師再也不必使用的"web-safe"的字體之一。
字體的名稱，font - face規(guī)則：
font-family: myFirstFont;
字體文件包含在您的服務(wù)器上的某個(gè)地方，參考CSS：
src: url('Sansation_Light.ttf')
如果字體文件是在不同的位置，請(qǐng)使用完整的URL：
src: url('http://www.w3cschool.css/css3/Sansation_Light.ttf')
現(xiàn)在準(zhǔn)備使用該字體，下面是如何使用它所有的div元素的一個(gè)例子：
div
{
font-family: myFirstFont;
}
