CSS3優(yōu)化了CSS 2.1的字體和文本屬性，同時新增了各種文字特效，使網(wǎng)頁文字更具表現(xiàn)力和感染力，豐富了網(wǎng)頁設(shè)計效果，如自定義字體類型、更多的色彩模式、文本陰影、生態(tài)生成內(nèi)容、各種特殊值、函數(shù)等。
1、字體樣式
字體樣式包括類型、大小、顏色、粗細、下畫線、斜體、大小寫等，下面分別進行介紹。
1.1、定義字體類型
使用CSS3的font-family屬性可以定義字體類型，用法如下：
font-family : name
其中，name表示字體名稱，可以設(shè)置字體列表，多個字體按優(yōu)先順序排列，以逗號隔開。
如果字體名稱包含空格，則應(yīng)使用引號括起。第二種聲明方式使用所列出的字體序列名稱，如果使用fantasy序列，將提供默認字體序列。
【示例】新建網(wǎng)頁，保存為test1.html，在<body>標簽內(nèi)輸入兩行段落文本。
<!doctype html>
<html>
<head>
<style type="text/css">
p {
/* 段落樣式 */
font-family: "隸書";
/* 隸書字體 */
}
</style>
</head>
<body>
</body>
<p>月落烏啼霜滿天，江楓漁火對愁眠。 </p>
<p> 姑蘇城外寒山寺，夜半鐘聲到客船。</p>
<script>
</script>
</html>
1.2、定義字體大小
使用CSS3的font-size屬性可以定義字體大小，用法如下：
font-size : xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller
| length
其中，xx-small（最?。?、x-small（較?。?、small（?。edium（正常）、large（大）、x-large（較大）、xx-large（最大）表示絕對字體尺寸，這些特殊值將根據(jù)對象字體進行調(diào)整。
larger（增大）和smaller（減少）這對特殊值能夠根據(jù)父對象中字體尺寸進行相對增大或者縮小處理，使用成比例的em單位進行計算。
length可以是百分數(shù)，或者浮點數(shù)字和單位標識符組成的長度值，但不可為負值。其百分比取值是基于父對象中字體的尺寸進行計算，與em單位的計算相同。
【示例】新建網(wǎng)頁，在<head>標簽內(nèi)添加<style type="text/css">標簽，定義一個內(nèi)部樣式表。然后輸入下面樣式，分別設(shè)置網(wǎng)頁字體的默認大小、正文字體大小，以及欄目中的字體大小。
body {font-size:12px;} /* 以像素為單位設(shè)置字體大小 */
p {font-size:0.75em;} /* 以父輩字體大小為參考設(shè)置字體大小 */
div {font:9pt Arial, Helvetica, sans-serif;} /* 以點為單位設(shè)置字體大小*/
1.3、定義字體顏色
使用CSS3的color屬性可以定義字體顏色，用法如下：
color : color
其中，參數(shù)color表示顏色值，取值包括顏色名、十六進制值、RGB等顏色函數(shù)等。
【示例】分別定義頁面、段落文本、<div>標簽、<span>標簽包含字體的顏色，代碼如下：
body { color:gray;} /* 使用顏色名 */
p { color:#666666;} /* 使用十六進制 */
div { color:rgb(120,120,120);} /* 使用RGB */
span { color:rgb(50%,50%,50%);} /* 使用RGB */
1.4、定義字體粗細
使用CSS3的font-weight屬性可以定義字體粗細，用法如下：
font-weight : normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
其中，normal為默認值，表示正常的字體，相當(dāng)于取值為400；bold表示粗體，相當(dāng)于取值為700，或者使用標簽定義的字體效果。
bolder（較粗）和lighter（較細）是相對于normal字體粗細而言。
另外，也可以設(shè)置值為100、200、300、400、500、600、700、800、900，它們分別表示字體的粗細，是對字體粗細的一種量化方式，值越大就表示字體越粗，相反就表示字體越細。
【示例】新建test.html文檔，定義一個內(nèi)部樣式表，然后輸入下面樣式，分別定義段落文本、一級標題、
p { font-weight: normal } /* 等于400 */
h1 { font-weight: 700 } /* 等于bold */
div{ font-weight: bolder } /* 可能為500 */
.bold {font-weight:bold;} /* 粗體樣式類 */
注意：設(shè)置字體粗細也可以稱為定義字體的重量。對于中文網(wǎng)頁設(shè)計來說，一般僅用到bold（加粗）、normal（普通）兩個屬性值。
1.5、定義藝術(shù)字體
使用CSS3的font-style屬性可以定義字體的傾斜效果，用法如下：
font-style : normal | italic | oblique
其中，normal為默認值，表示正常的字體，italic表示斜體，oblique表示傾斜的字體。italic和oblique兩個取值只能在英文等西方文字中有效。
【示例】新建test.html文檔，輸入下面樣式，定義一個斜體樣式類。在<body>標簽中輸入兩段文本，并把斜體樣式類應(yīng)用到其中一段文本中。
<!doctype html>
<html>
<head>
<style type="text/css">
.italic {/* 斜體樣式類 */
font-style:italic;
}
</style>
</head>
<body>
<p>知我者，謂我心憂，不知我者，謂我何求。 </p>
<p class="italic">君子坦蕩蕩，小人長戚戚。</p>
</body>
<script type="scope">
</script>
</html>
效果如下：
1.6、定義修飾線
使用CSS3的text-decoration屬性可以定義字體的修飾線效果，用法如下：
text-decoration : none || underline || blink || overline || line-through
其中，normal為默認值，表示無裝飾線，blink表示閃爍效果，underline表示下畫線效果，line-through表示貫穿線效果，overline表示上畫線效果。
<!doctype html>
<html>
<head>
<style type="text/css">
.underline {text-decoration:underline;} /*下畫線樣式類 */
.overline {text-decoration:overline;} /*上畫線樣式類 */
.line-through {text-decoration:line-through;} /* 刪除線樣式類 */
.line { text-decoration:line-through overline underline; }
</style>
</head>
<body>
<p class="underline">昨夜西風(fēng)凋碧樹，獨上高樓，望盡天涯路</p>
<p class="overline">衣帶漸寬終不悔，為伊消得人憔悴</p>
<p class="line-through">眾里尋他千百度，驀然回首，那人卻在燈火闌珊處</p>
<p class="line">古今之成大事業(yè)、大學(xué)問者，必經(jīng)過三種之境界。</p>
</body>
<script type="scope">
</script>
</html>
提示：CSS3增強text-decoration功能，新增如下5個子屬性：
- text-decoration-line：設(shè)置裝飾線的位置，取值包括none（無）、underline、overline、line-through、blink。
- text-decoration-color：設(shè)置裝飾線的顏色。
- text-decoration-style：設(shè)置裝飾線的形狀，取值包括solid、double、dotted、dashed、wavy（波浪線）。
- text-decoration-skip：設(shè)置文本裝飾線條必須略過內(nèi)容中的哪些部分。
- text-underline-position：設(shè)置對象中的下畫線的位置。
1.7、定義字體的變體
使用CSS3的font-variant屬性可以定義字體的變體效果，用法如下：
font-variant : normal | small-caps
其中，normal為默認值，表示正常的字體，small-caps表示小型大寫字母字體。
【示例】新建test.html文檔，在內(nèi)部樣式表中定義一個類樣式：
注意：font-variant僅支持拉丁字體，中文字體沒有大小寫效果區(qū)分。
1.8、定義大小寫字體
使用CSS3的text-transform屬性可以定義字體的大小寫效果，用法如下：
text-transform : none | capitalize | uppercase | lowercase
其中，none為默認值，表示無轉(zhuǎn)換發(fā)生；capitalize表示將每個單詞的第一個字母轉(zhuǎn)換成大寫，其余無轉(zhuǎn)換發(fā)生；uppercase表示把所有字母轉(zhuǎn)換成大寫；lowercase表示把所有字母轉(zhuǎn)換成小寫。
【示例】新建test.html文檔，在內(nèi)部樣式表中定義3個類樣式。然后，在<body>標簽中輸入3行段落文本，并分別應(yīng)用上面定義的類樣式。
<!doctype html>
<html>
<head>
<style type="text/css">
.capitalize {text-transform:capitalize;} /*首字母大小樣式類 */
.uppercase {text-transform:uppercase;} /*大寫樣式類 */
.lowercase {text-transform:lowercase;} /* 小寫樣式類 */
</style>
</head>
<body>
<p class="capitalize">text-transform:capitalize;</p>
<p class="uppercase">text-transform:uppercase;</p>
<p class="lowercase">text-transform:lowercase;</p>
</body>
<script type="scope">
</script>
</html>
2、文本樣式
文本樣式主要設(shè)計正文的排版效果，屬性名以text為前綴進行命名，下面分別進行介紹。
2.1、定義水平對齊
使用CSS3的text-align屬性可以定義文本的水平對齊方式，用法如下：
text-align : left | right | center | justify
其中，left為默認值，表示左對齊；right為右對齊；center為居中對齊；justify為兩端對齊。
【示例】新建test.html文檔，在內(nèi)部樣式表中定義3個對齊類樣式。然后，在<body>標簽中輸入3段文本，并分別應(yīng)用這3個類樣式。
<!doctype html>
<html>
<head>
<style type="text/css">
.left { text-align: left; }
.center { text-align: center; }
.right { text-align: right; }
</style>
</head>
<body>
<p align="left">昨夜西風(fēng)凋碧樹，獨上高樓，望盡天涯路</p>
<p class="center">衣帶漸寬終不悔，為伊消得人憔悴</p>
<p class="right">眾里尋他千百度，驀然回首，那人卻在燈火闌珊處</p>
</body>
<script type="scope">
</script>
</html>
2.2、定義垂直對齊
使用CSS3的vertical-align屬性可以定義文本垂直對齊的方式，用法如下：
vertical-align : auto | baseline | sub | super | top | text-top | middle | bottom | text-bottom | length
取值簡單說明如下：
- auto：將根據(jù)layout-flow屬性的值對齊對象內(nèi)容。
- baseline：表示默認值，將支持valign特性的對象內(nèi)容與基線對齊。
- sub：表示垂直對齊文本的下標。
- super：表示垂直對齊文本的上標。
- top：表示將支持valign特性的對象的內(nèi)容對象頂端對齊。
- text-top：表示將支持valign特性的對象的文本與對象頂端對齊。
- middle：表示將支持valign特性的對象的內(nèi)容與對象中部對齊。
- bottom：表示將支持valign特性的對象的內(nèi)容與對象底端對齊。
- text-bottom：表示將支持valign特性的對象的文本與對象底端對齊。
- length：表示由浮點數(shù)字和單位標識符組成的長度值或者百分數(shù)，可為負數(shù)，定義由基線算起的偏移量，基線對于數(shù)值來說為0，對于百分數(shù)來說就是0%。
【示例】新建test1.html文檔，在<head>標簽內(nèi)添加<style type="text/css">標簽，定義一個內(nèi)部樣式表，然后輸入下面樣式，定義上標類樣式。然后在<body>標簽中輸入一行段落文本，并應(yīng)用該上標類樣式。
<!doctype html>
<html>
<head>
<style type="text/css">
.super {vertical-align:super;}
</style>
</head>
<body>
<p>vertical-align表示垂直<span class=" super ">對齊</span>屬性</p>
</body>
<script type="scope">
</script>
</html>
2.3、定義文本間距
使用CSS3 letter-spacing屬性可以定義字距，使用word-spacing屬性可以定義詞距。這兩個屬性的取值都是長度值，由浮點數(shù)字和單位標識符組成，默認值為normal，表示默認間隔。
定義詞距時，以空格為基準進行調(diào)節(jié)，如果多個單詞被連在一起，則被word-spacing:視為一個單詞；如果漢字被空格分隔，則分隔的多個漢字就被視為不同的單詞，word-spacing:屬性有效。
【示例】新建網(wǎng)頁，設(shè)計內(nèi)部樣式表，定義兩個類樣式。然后在標簽中輸入兩行段落文本，并應(yīng)用上面兩個類樣式。
<!doctype html>
<html>
<head>
<style type="text/css">
.lspacing {letter-spacing:1em;} /* 字距樣式類 */
.wspacing {word-spacing:1em;} /* 詞距樣式類 */
</style>
</head>
<body>
<p class="lspacing">letter spacing word spacing（字間距）</p>
<p class="wspacing">letter spacing word spacing（詞間距）</p>
</body>
<script type="scope">
</script>
</html>
注意：字距和詞距一般很少使用，使用時應(yīng)慎重考慮用戶的閱讀體驗和感受。對于中文用戶來說，letter-spacing屬性有效，而word-spacing:屬性無效。
2.4、定義行高
使用CSS3的line-height屬性可以定義行高，用法如下：
line-height : normal | length
其中，normal表示默認值，一般為1.2em，length表示百分比數(shù)字，或者由浮點數(shù)字和單位標識符組成的長度值，允許為負值。
【示例】新建網(wǎng)頁文檔，在標簽內(nèi)添加
<!doctype html>
<html>
<head>
<style type="text/css">
.p1 {/* 行高樣式類1 */
line-height:1em; /* 行高為一個字大小 */
}
.p2 {/* 行高樣式類2 */
line-height:2em; /* 行高為兩個字大小 */
}
</style>
</head>
<body>
<p class="p1">“人生三境界”語出王國維《人間詞話》。第一境界是“立”、第二境界是“守”、第三境界是“得”。第一境界是立志、是下決心，只有具備了這個條件才會有第二、第三境界。</p>
<p class="p2">“望盡天涯”正從一夜無眠生出，脈理細密?！拔黠L(fēng)凋碧樹”，不僅是登樓極目所見，而且包含有昨夜通宵不寐臥聽西風(fēng)落葉的回憶。景既蕭索，人又孤獨，幾乎言盡的情況下，作者又出人意料地展現(xiàn)出一片無限廣遠寥廓的境界：“獨上高樓，望盡天涯路?！边@里固然有憑高望遠的蒼茫之感，也有不見所思的空虛悵惘，但這所向空闊、毫無窒礙的境界卻又給主人公一種精神上的滿足，這是從“望盡”一詞中可以體味出來的。這三句雖然包含望而不見的傷離意緒，但感情悲壯，毫無纖柔頹靡。</p>
</body>
<script type="scope">
</script>
</html>
2.5、定義首行縮進
使用CSS3的text-indent屬性可以定義文本首行縮進，用法如下：
text-indent : length
其中，length表示百分比數(shù)字，或者由浮點數(shù)字和單位標識符組成的長度值，允許為負值。建議在設(shè)置縮進單位時，以em為設(shè)置單位，它表示一個字距，這樣可以比較精確地確定首行縮進的效果。
【示例】新建文檔，設(shè)計內(nèi)部樣式表，輸入下面樣式，定義段落文本首行縮進2個字符。然后在<body>標簽中輸入標題和段落文本:
<!doctype html>
<html>
<head>
<style type="text/css">
p { text-indent:2em;} /* 首行縮進2個字符 */
</style>
</head>
<body>
<p class="p1">“人生三境界”語出王國維《人間詞話》。第一境界是“立”、第二境界是“守”、第三境界是“得”。第一境界是立志、是下決心，只有具備了這個條件才會有第二、第三境界。</p>
<p class="p2">“望盡天涯”正從一夜無眠生出，脈理細密?！拔黠L(fēng)凋碧樹”，不僅是登樓極目所見，而且包含有昨夜通宵不寐臥聽西風(fēng)落葉的回憶。景既蕭索，人又孤獨，幾乎言盡的情況下，作者又出人意料地展現(xiàn)出一片無限廣遠寥廓的境界：“獨上高樓，望盡天涯路。”這里固然有憑高望遠的蒼茫之感，也有不見所思的空虛悵惘，但這所向空闊、毫無窒礙的境界卻又給主人公一種精神上的滿足，這是從“望盡”一詞中可以體味出來的。這三句雖然包含望而不見的傷離意緒，但感情悲壯，毫無纖柔頹靡。</p>
</body>
<script type="scope">
</script>
</html>
2.6、書寫模式
使用CSS3新增的writing-mode屬性，可以增強文本布局中的書寫模式，基本語法如下所示：
writing-mode：horizontal-tb | vertical-rl | vertical-lr | lr-tb | tb-rl
取值簡單說明如下：
- horizontal-tb：水平方向自上而下的書寫方式，類似IE私有值lr-tb。
- vertical-rl：垂直方向自右而左的書寫方式，類似IE私有值tb-rl。
- vertical-lr：垂直方向自左而右的書寫方式。
- lr-tb：左-右，上-下。對象內(nèi)容在水平方向上從左向右流入，后一行在前一行的下面顯示。
- tb-rl：上-下，右-左。對象內(nèi)容在垂直方向上從上向下流入，自右向左。后一豎行在前一豎行的左面。全角字符是豎直向上的，半角字符如拉丁字母或片假名順時針旋轉(zhuǎn)90度。
【示例】設(shè)計唐詩從右側(cè)流入，自上而下顯示，效果如下圖所示。
<!doctype html>
<html>
<head>
<style type="text/css">
#box {
float: right;
writing-mode: tb-rl;
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
}
</style>
</head>
<body>
</body>
<div id="box">
<h2>春曉</h2>
<p>春眠不覺曉，處處聞啼鳥。夜來風(fēng)雨聲，花落知多少。</p>
</div>
<script type="scope">
</script>
</html>
2.7、文本溢出
使用text-overflow屬性可以設(shè)置超長文本省略顯示，基本語法如下所示：
text-overflow：clip | ellipsis
適用于塊狀元素，取值簡單說明如下：
- clip：當(dāng)內(nèi)聯(lián)內(nèi)容溢出塊容器時，將溢出部分裁切掉，為默認值。
- ellipsis：當(dāng)內(nèi)聯(lián)內(nèi)容溢出塊容器時，將溢出部分替換為…。
【示例】設(shè)計新聞列表有序顯示，對于超出指定寬度的新聞項，則使用text-overflow屬性省略并附加省略號，避免新聞?chuàng)Q行或者撐開板塊。
dd {/*設(shè)計新聞列表項樣式*/
font-size:0.78em;
height:1.5em;width:280px; /*固定每個列表項的大小*/
padding:2px 2px 2px 18px; /*為添加新聞項目符號騰出空間*/
background: url(images/icon.gif) no-repeat 6px 25%; /*以背景方式添加項目符號*/
margin:2px 0;
white-space: nowrap; /*為應(yīng)用text-overflow做準備，禁止換行*/
overflow: hidden; /*為應(yīng)用text-overflow做準備，禁止文本溢出顯示*/
-o-text-overflow: ellipsis; /* 兼容Opera */
text-overflow: ellipsis; /* 兼容IE, Safari (WebKit) */
-moz-binding: url('images/ellipsis.xml#ellipsis'); /* 兼容Firefox */
}
2.8、文本換行
使用word-break屬性可以定義文本自動換行，基本語法如下所示。
word-break：normal | keep-all | break-all
取值簡單說明如下：
- normal：為默認值，依照亞洲語言和非亞洲語言的文本規(guī)則，允許在字內(nèi)換行。
- keep-all：對于中文、韓文、日文不允許字斷開，適合包含少量亞洲文本的非亞洲文本。
- break-all：與normal相同，允許非亞洲語言文本行的任意字內(nèi)斷開。該值適合包含一些非亞洲文本的亞洲文本，如使連續(xù)的英文字母間斷行。
【示例】設(shè)計表格樣式，由于標題行文字較多，標題行被撐開，影響用戶的瀏覽體驗。這里使用word-break: keep-all;禁止換行，主要樣式如下：
th {
background-image: url(images/th_bg1.gif); /*使用背景圖模擬漸變背景*/
background-repeat: repeat-x; /*定義背景圖平鋪方式*/
height: 30px;
vertical-align:middle; /*垂直居中顯示*/
border: 1px solid #cad9ea; /*添加淡色細線邊框*/
padding: 0 1em 0;
overflow: hidden; /*超出范圍隱藏顯示，避免撐開單元格*/
word-break: keep-all; /*禁止詞斷開顯示*/
white-space: nowrap; /*強迫在一行內(nèi)顯示*/
}
3、特殊設(shè)置
3.1、initial值
initial表示初始化值，所有的屬性都可以接收該值。如果重置屬性值，那么就可以使用該值，這樣就可以取消用戶定義的CSS樣式。注意，IE暫不支持該屬性值。
【示例】在頁面中插入了4段文本，然后在內(nèi)部樣式表中定義這4段文本為藍色、加粗顯示，字體大小為24px。
<style type="text/css">
p {
color: blue;
font-size:24px;
font-weight:bold;
}
</style>
<p>春眠不覺曉，</p>
<p>處處聞啼鳥。</p>
<p>夜來風(fēng)雨聲，</p>
<p>花落知多少。</p>
如果想禁止使用第一句和第三句用戶定義的樣式，只需在內(nèi)部樣式表中添加一個獨立樣式，然后把文本樣式的值都設(shè)為initial值，具體代碼如下所示：
p:nth-child(odd){
color: initial;
font-size:initial;
font-weight:initial;
}
在瀏覽器中可以看到，第一句和第三句文本恢復(fù)為默認的黑色、常規(guī)字體，大小為16px。
3.2、inherit值
inherit表示繼承值，所有屬性都可以接收該值。
【示例】設(shè)置一個包含框，高度為200px，包含2個盒子，定義盒子高度分別為100%和inherit。在正常情況下顯示200px，但是在特定情況下，如定義盒子絕對定位顯示，則設(shè)置height: inherit;能夠按預(yù)定效果顯示，而height: 100%;就可能撐開包含框。
<style type="text/css">
……
.height1 { height: 100%;}
.height2 {height: inherit;}
</style>
<div class="box">
<div class="height1">height: 100%;</div>
</div>
<div class="box">
<div class="height2">height: inherit;</div>
</div>
提示：inherit一般用于字體、顏色、背景等；auto表示自適應(yīng)，一般用于高度、寬度、外邊距和內(nèi)邊距等關(guān)于長度的屬性。
3.3、unset值
unset表示清除用戶聲明的屬性值，所有的屬性都可以接收該值。如果屬性有繼承的值，則該屬性的值等同于inherit，即繼承的值不被擦除；如果屬性沒有繼承的值，則該屬性的值等同于initial，即擦除用戶聲明的值，恢復(fù)初始值。注意，IE和Safari暫時不支持該屬性值。
【示例】設(shè)計4段文本，第一段和第二段位于
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.box {color: red; font-size: 12px;}
p {color: blue; font-size: 30px;}
p.unset {
color: unset;
font-size: unset;
}
</style>
</head>
<body>
<div class="box">
<p>春眠不覺曉，</p>
<p class="unset">處處聞啼鳥。</p>
</div>
<p>夜來風(fēng)雨聲，</p>
<p class="unset">花落知多少。</p>
</body>
<script>
</script>
</html>
3.4、all屬性
all屬性表示除了unicode-bidi和direction兩個CSS屬性以外的所有CSS屬性。
注意：IE暫時不支持該屬性。
【示例】針對上節(jié)示例，我們可以簡化p.unset類樣式：
p.unset {
all: unset;
}
如果在樣式中，聲明的屬性非常多，使用all會極為方便，可以避免逐個設(shè)置每個屬性。
3.5、opacity屬性
opacity屬性定義元素對象的不透明度，其語法格式如下所示：
opacity: <alphavalue> | inherit;
其取值簡單說明如下：
-
<alphavalue>是由浮點數(shù)字和單位標識符組成的長度值，不可為負值，默認值為1。opacity取值為1時，元素是完全不透明的；取值為0時，元素是完全透明的，不可見的；介于0～1的任何值都表示該元素的不透明程度。如果超過了這個范圍，其計算結(jié)果將截取到與之最相近的值。 - inherit表示繼承父輩元素的不透明性。
【示例】設(shè)計
<style type="text/css">
body {margin: 0; padding: 0;}
div { position: absolute; }
.bg {
width: 100%;
height: 100%;
background: #000;
opacity: 0.7;
filter: alpha(opacity=70);
}
</style>
<div class="web"><img src="images/bg.png" /></div>
<div class="bg"></div>
<div class="login"><img src="images/login.png" /></div>
注意：使用色彩模式函數(shù)的alpha通道可以針對元素的背景色或文字顏色單獨定義不透明度，而opacity屬性只能為整個對象定義不透明度。
3.6、transparent值
transparent屬性值用來指定全透明色彩，等效于rgba(0,0,0,0)值。
【示例】使用CSS的border設(shè)計三角形效果，通過transparent顏色值讓部分邊框透明顯示，代碼如下所示：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#demo {
width: 0; height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
</style>
</head>
<body>
<div id="demo"></div>
</body>
<script>
</script>
</html>
3.7、currentColor值
border-color、box-shadow和text-decoration-color屬性的默認值是color屬性的值。使用currentColor關(guān)鍵字可以表示color屬性的值，并用于所有接收顏色的屬性上。
【示例】設(shè)計圖標背景顏色值為currentColor，這樣在網(wǎng)頁中隨著鏈接文本的字體顏色的不斷變化，圖標的顏色也跟隨鏈接文本的顏色變化而變化，確保整體導(dǎo)航條色彩的一致性，達到圖文合一的境界：
<style type="text/css">
……
.link { margin-right: 15px; }
.link:hover { color: red; } /* 雖然改變的是文字顏色，但是圖標顏色也一起變化了 */
</style>
<a href="##" class="link"><i class="icon icon1"></i>首頁</a>
<a href="##" class="link"><i class="icon icon2"></i>刷新</a>
<a href="##" class="link"><i class="icon icon3"></i>收藏</a>
<a href="##" class="link"><i class="icon icon4"></i>展開</a>
提示：如果將color屬性設(shè)置為currentColor，則相當(dāng)于設(shè)置為color: inherit。
3.8、rem值
CSS3新增rem單位，用來設(shè)置字體的相對大小，與em類似。em總是相對于父元素的字體大小進行計算，而rem是相對于根元素的字體大小進行計算。
rem的優(yōu)點：在設(shè)計彈性頁面時，以rem為單位，所有元素的尺寸都參考一個根元素，整個頁面更容易控制，避免父元素的不統(tǒng)一，帶來頁面設(shè)計的混亂，特別適合移動頁面設(shè)計。
【示例】瀏覽器默認字體大小是16px，如果預(yù)設(shè)rem與px的關(guān)系為：1rem = 10px，那么就可以設(shè)置html的字體大小為font-size:62.5%(10/16=0.625=62.5%)，在設(shè)計稿中把px固定尺寸轉(zhuǎn)換為彈性尺寸，只需要除以10就可以得到相應(yīng)的rem尺寸，整個頁面所有元素的尺寸設(shè)計就非常方便。
html { font-size:62.5%; }
.menu{ width:100%; height:8.8rem; line-height:8.8rem; font-size:3.2rem; }
在Web App開發(fā)中推薦使用rem作為單位，它能夠等比例適配所有屏幕。
3.9、font-size-adjust屬性
在項目開發(fā)中，經(jīng)常會遇到不同類型的字體，在相同的大小下顯示的效果并不統(tǒng)一。
【示例1】為每個單詞Text統(tǒng)一大小為20px，但是字體類型不同，在瀏覽器中預(yù)覽，可以看到字體的視覺效果并不統(tǒng)一：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div {font-size: 20px;}
.font1 {font-family: Comic Sans Ms;}
.font2 {font-family: Tahoma;}
.font3 {font-family: Arial;}
.font4 {font-family: Times New Roman;}
</style>
</head>
<body>
<div class="font1">Text 1</div>
<div class="font2">Text 2</div>
<div class="font3">Text 3</div>
<div class="font4">Text 4</div>
</body>
<script>
</script>
</html>
因此，CSS3新增font-size-adjust屬性，該屬性可以設(shè)置aspect值。
提示：aspect值就是字體的小寫字母x的高度與font-size高度之間的比率。當(dāng)字體的aspect值很高時，如果為當(dāng)前字體設(shè)置很小的尺寸會更易閱讀。
【示例2】針對示例1，分別調(diào)整每種字體的aspect值：
.font1 { font-size-adjust: 0.50; font-family: Comic Sans Ms; }
.font2 { font-size-adjust: 0.54; font-family: Tahoma; }
.font3 { font-size-adjust: 0.54; font-family: Arial; }
.font4 { font-size-adjust: 0.49; font-family: Times New Roman; }
4、色彩模式
CSS 2.1支持Color Name（顏色名稱）、HEX（十六進制顏色值）、RGB。CSS 3新增三種顏色模式：RGBA、HSL和HSLA。
4.1、rgba()函數(shù)
RGBA是RGB色彩模式的擴展，它在紅、綠、藍三原色通道基礎(chǔ)上增加了Alpha通道。其語法格式如下所示：
rgba(r,g,b,<opacity>)
參數(shù)說明如下：
- r、g、b：分別表示紅色、綠色、藍色3種原色所占的比重，取值為正整數(shù)或者百分數(shù)。正整數(shù)的取值范圍為0～255，百分數(shù)的取值范圍為0.0%～100.0%。超出范圍的數(shù)值將被截至其最接近的取值極限。注意，并非所有瀏覽器都支持使用百分數(shù)值。
-
<opacity>：表示不透明度，取值為0～1。
【示例】使用CSS3的box-shadow屬性和rgba()函數(shù)為表單控件設(shè)置半透明度的陰影來模擬柔和的潤邊效果。其主要樣式代碼如下：
input, textarea { /*統(tǒng)一文本框樣式*/
padding: 4px; /*增加內(nèi)補白，增大表單對象尺寸，看起來更大方*/
border: solid 1px #E5E5E5; /*增加淡淡的邊框線*/
outline: 0; /*清除輪廓線*/
font: normal 13px/100% Verdana, Tahoma, sans-serif;
width: 200px; /*固定寬度*/
background: #FFFFFF; /*白色背景*/
/*設(shè)置邊框陰影效果*/
box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
}
提示：rgba(0,0,0,0.1)表示不透明度為0.1的黑色，這里不宜直接設(shè)置為淺灰色，因為對于非白色背景來說，灰色發(fā)虛，而半透明效果可以避免這種情況。
4.2、hsl()函數(shù)
HSL是一種標準的色彩模式，包括人類視力所能感知的所有顏色，在屏幕上可以重現(xiàn)16 777 216種顏色，是目前運用最廣泛的顏色系統(tǒng)。它通過色調(diào)(H)、飽和度(S)和亮度(L)3個顏色通道的疊加來獲取各種顏色。其語法格式如下所示：
hsl(<length>,<percentage>,<percentage>)
參數(shù)說明如下：
-
<length>表示色調(diào)(Hue)，可以為任意數(shù)值，用以確定不同的顏色。其中，0（或360）表示紅色，60表示黃色，120表示綠色，180表示青色，240表示藍色，300表示洋紅。 -
<percentage>（第一個）表示飽和度(Saturation)，可以為0%～100%。其中，0%表示灰度，即沒有使用該顏色；100%表示飽和度最高，即顏色最艷。 -
<percentage>（第二個）表示亮度(Lightness)，取值為0%～100%。其中，0%最暗，顯示為黑色；50%表示均值；100%最亮，顯示為白色。
4.3、hsla()函數(shù)
HSLA是HSL色彩模式的擴展，在色相、飽和度、亮度三要素基礎(chǔ)上增加不透明度參數(shù)。使用HSLA色彩模式，可以定義不同透明效果。其語法格式如下所示：
hsla(<length>,<percentage>,<percentage>,<opacity>)
其中，前3個參數(shù)與hsl()函數(shù)的參數(shù)含義和用法相同，第4個參數(shù)<opacity>表示不透明度，取值為0～1。
4.5、文本陰影
使用text-shadow屬性可以給文本添加陰影效果，具體語法格式如下：
text-shadow：none | <length>{2,3} && <color>?
取值簡單說明如下：
- none：無陰影，為默認值。
-
<length>①：第1個長度值用來設(shè)置對象的陰影水平偏移值，可以為負值。 -
<length>②：第2個長度值用來設(shè)置對象的陰影垂直偏移值，可以為負值。 -
<length>③：如果提供了第3個長度值，則用來設(shè)置對象的陰影模糊值，不允許為負值。 -
<color>：設(shè)置對象的陰影顏色。
【示例1】為段落文本定義一個簡單的陰影效果：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p {
text-align: center;
font: bold 60px helvetica, arial, sans-serif;
color: #999;
text-shadow: 0.1em 0.1em #333;
}
</style>
</head>
<body>
<p>HTML5+CSS3</p>
</body>
<script>
</script>
</html>
【示例2】text-shadow屬性可以使用在:first-letter和:first-line偽元素上。本例使用陰影疊加設(shè)計立體文本特效，通過左上和右下各添加一個1px錯位的補色陰影，營造一種淡淡的立體效果，代碼如下：
<style type="text/css">
p {text-shadow: 1px 1px white, -1px -1px #333;}
4.6、動態(tài)生成內(nèi)容
使用content屬性可以在CSS樣式中臨時添加非結(jié)構(gòu)性的標簽，或者說明性內(nèi)容等。具體語法格式如下。
content: normal | string | attr() | url() | counter() | none;
取值說明如下：
- normal：默認值。表現(xiàn)與none值相同。
- string：插入文本內(nèi)容。
- attr()：插入元素的屬性值。
- url()：插入一個外部資源，如圖像、音頻、視頻或瀏覽器支持的其他任何資源。
- counter()：計數(shù)器，用于插入排序標識。
- none：無任何內(nèi)容。
【示例1】使用content屬性，配合CSS計數(shù)器設(shè)計多層嵌套有序列表序號樣式：
<style type="text/css">
ol { list-style:none;} /*清除默認的序號*/
li:before {color:#f00; font-family:Times New Roman;} /*設(shè)計層級目錄序號的字體樣式*/
li{counter-increment:a 1;} /*設(shè)計遞增函數(shù)a，遞增起始值為1 */
li:before{content:counter(a)". ";} /*把遞增值添加到列表項前面*/
li li{counter-increment:b 1;} /*設(shè)計遞增函數(shù)b，遞增起始值為1 */
li li:before{content:counter(a)"."counter(b)". ";} /*把遞增值添加到二級列表項前面*/
li li li{counter-increment:c 1;} /*設(shè)計遞增函數(shù)c，遞增起始值為1 */
li li li:before{content:counter(a)"."counter(b)"."counter(c)". ";} /*把遞增值添加到三級列表項前面*/
</style>
【示例2】使用content為引文動態(tài)添加引號：
<style type="text/css">
/* 為不同語言指定引號的表現(xiàn) */
:lang(en) > q {quotes:'"' '"';}
:lang(no) > q {quotes:"?" "?";}
:lang(ch) > q {quotes:"“" "”";}
/* 在q標簽的前后插入引號 */
q:before {content:open-quote;}
q:after {content:close-quote;}
</style>
9.7、自定義字體
使用@font-face規(guī)則可以自定義字體類型，具體語法格式如下：
@font-face { <font-description> }
<font-description>是一個名值對的屬性列表，屬性及其取值說明如下：
- font-family：設(shè)置字體名稱。
- font-style：設(shè)置字體樣式。
- font-variant：設(shè)置字體是否大小寫。
- font-weight：設(shè)置字體粗細。
- font-stretch：設(shè)置字體是否橫向拉伸變形。
- font-size：設(shè)置字體大小。
- src：設(shè)置字體文件的路徑。注意，該屬性只用在@font-face規(guī)則里。
【示例】簡單演示如何利用@font-face規(guī)則在頁面中使用網(wǎng)絡(luò)字體，示例代碼如下：文章來源：http://www.zghlxwxcb.cn/news/detail-741524.html
<style type="text/css">
@font-face { /* 引入外部字體文件 */
font-family: "lexograph"; /* 選擇默認的字體類型 */
src: url(http://randsco.com//fonts/lexograph.eot); /* 兼容IE */
/* 兼容非IE */
src: local("Lexographer"), url(http://randsco.com/fonts/lexograph.ttf) format("truetype");
}
h1 { /* 設(shè)置引入字體文件中的lexograph字體類型 */
font-family: lexograph, verdana, sans-serif;
font-size:4em;}
</style>
<h1>http://www.baidu.com/</h1>
文章來源地址http://www.zghlxwxcb.cn/news/detail-741524.html
到了這里，關(guān)于CSS3中的字體和文本樣式的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![[HTML]Web前端開發(fā)技術(shù)2（HTML5、CSS3、JavaScript ）格式化文本標記，定義列表，＜blockquote＞，definition description，ruby——喵喵畫網(wǎng)頁](https://imgs.yssmx.com/Uploads/2024/02/753184-1.png)
![[HTML]Web前端開發(fā)技術(shù)7（HTML5、CSS3、JavaScript ）CSS的定位機制——喵喵畫網(wǎng)頁](https://imgs.yssmx.com/Uploads/2024/02/755631-1.png)
![[HTML]Web前端開發(fā)技術(shù)9（HTML5、CSS3、JavaScript ）——喵喵畫網(wǎng)頁](https://imgs.yssmx.com/Uploads/2024/02/777294-1.png)
