作者：Linyupark 時間： 2006-07-12 文檔類型：翻譯 來自：網(wǎng)絡(luò)維他命
第 1 頁 CSS 實用實例 [1] 第 2 頁 CSS 實用實例 [2] 第 3 頁 CSS 實用實例 [3] 第 4 頁 CSS 實用實例 [4] 第 5 頁 CSS 實用實例 [5] 第 6 頁 CSS 實用實例 [6] 第 7 頁 CSS 實用實例 [7] 第 8 頁 CSS 實用實例 [8] 第 9 頁 CSS 實用實例 [9]
Text 文字
設(shè)置文字顏色
運行代碼框<html> <head> <style type="text/css"> h1 {color: #00ff00} h2 {color: #dda0dd} p {color: rgb(0,0,255)} </style> </head> <body> <h1>This is header 1</h1> <h2>This is header 2</h2> <p>This is a paragraph</p> </body> </html> [Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
指定字符間的距離
運行代碼框<html> <head> <style type="text/css"> h1 {letter-spacing: -3px} h4 {letter-spacing: 0.5cm} </style> </head> <body> <h1>This is header 1</h1> <h4>This is header 4</h4> </body> </html> [Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
對齊文字
運行代碼框<html> <head> <style type="text/css"> h1 {text-align: center} h2 {text-align: left} h3 {text-align: right} </style> </head> <body> <h1>This is header 1</h1> <h2>This is header 2</h2> <h3>This is header 3</h3> </body> </html> [Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
文字的修飾
運行代碼框<html> <head> <style type="text/css"> h1 {text-decoration: overline} h2 {text-decoration: line-through} h3 {text-decoration: underline} a {text-decoration: none} </style> </head> <body> <h1>This is header 1</h1> <h2>This is header 2</h2> <h3>This is header 3</h3> <p><a >This is a link</a></p> </body> </html> [Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
文字的縮進
運行代碼框<html> <head> <style type="text/css"> p {text-indent: 1cm} </style> </head> <body> <p> This is some text in a paragraph This is some text in a paragraph This is some text in a paragraph This is some text in a paragraph This is some text in a paragraph This is some text in a paragraph </p> </body> </html> [Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
控制文字字符（大小寫）
運行代碼框<html> <head> <style type="text/css"> p.uppercase {text-transform: uppercase} p.lowercase {text-transform: lowercase} p.capitalize {text-transform: capitalize} </style> </head> <body> <p class="uppercase">This is some text in a paragraph</p> <p class="lowercase">This is some text in a paragraph</p> <p class="capitalize">This is some text in a paragraph</p> </body> </html> [Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
出處：網(wǎng)絡(luò)維他命 責(zé)任編輯：moby
上一頁 CSS 實用實例 [1] 下一頁 CSS 實用實例 [3]
◎進入論壇網(wǎng)站綜合、網(wǎng)頁制作版塊參加討論
藍色理想版權(quán)申明：除部分特別聲明不要轉(zhuǎn)載，或者授權(quán)我站獨家播發(fā)的文章外，大家可以自由轉(zhuǎn)載我站點的原創(chuàng)文章，但原作者和來自我站的鏈接必須保留（非我站原創(chuàng)的，按照原來自一節(jié)，自行鏈接）。文章版權(quán)歸我站和作者共有。
轉(zhuǎn)載要求：轉(zhuǎn)載之圖片、文件，鏈接請不要盜鏈到本站，且不準(zhǔn)打上各自站點的水印，亦不能抹去我站點水印。
特別注意：本站所提供的攝影照片，插畫，設(shè)計作品，如需使用，請與原作者聯(lián)系，版權(quán)歸原作者所有，文章若有侵犯作者版權(quán)，請與我們聯(lián)系，我們將立即刪除修改。
第 1 頁 
第 2 頁 CSS 實用實例 [2]
