顏色color
在CSS中，元素的前景色可以使用color屬性來設置，在HTML表現中，前景色一般是元素文本的顏色，另外color還會應用到元素的所有邊框，除非被其它邊框顏色屬性所覆蓋。
其基本語法如下：
color : color_name | HEX | RGB | RGBA | HSL | HSLA | transparent ;
說明：
- color_name是顏色英文名稱，例如green表示綠色、red表示紅色、gold表示金色。
- HEX指顏色的十六進制表示法，所有瀏覽器都支持HEX表示法。該方法通過對紅、綠和藍三種光（RGB）的十六進制表示法進行定義，使用三個雙位數來編寫，以#號開頭，基本形式爲#RRGGBB，其中的RR（紅光）、GG（綠光）、BB（藍光）十六進制規定了顏色的成分，所有值必須介於00到FF之間，也就是說對每種光源設置的最低值可以是0（十六進制00），最高值是255（十六進制FF）。例如綠色表示爲#00FF00、紅色表示爲#FF0000、金色表示爲#FFD700。值得注意的是，在此表示方式中，如果每兩位顏色值相同，可以簡寫爲#RGB形式，如#F00也表示紅色。
- RGB是指用RGB函數表示顏色，所有瀏覽器都支持該方法，RGB顏色值規定形式爲RGB(red,green,blue)。 red、green和blue分別表示紅、綠、藍光源的強度，可以爲0-255之間的整數，或者是0%-100%之間的百分比值。例如RGB(255,0,0)和RGB(100%,0%,0%)都表示紅色。
- RGBA顏色值是CSS3新增表示方式，形式爲RGBA(red,green,blue,alpha)。此色彩模式與RGB相同，是RGB顏色的擴展，新增了A表示不透明度，A的取值範圍爲0.0（完全透明）至1.0（完全不透明）之間。例如RGBA(255,0,0,0.5)表示半透明的紅色。
- HSL顏色值是CSS3新增表示方式，形式爲HSL(hue,saturation,lightness)。
其中hue(色調)指色盤上的度數，取值範圍爲：0–360（0或360是紅色，120是綠色，240是藍色）。
saturation(飽和度)，取值範圍爲：0%-100%（0%是灰色，100%是全綵）。
lightness(亮度)，取值範圍爲：0%-100%（0%是黑色，100%是白色）。
例如HSL(120,100%,100%)表示綠色。 - HSLA色彩記法是CSS3新增表示方式，形式爲HSL(H,S,L,A)。
此色彩模式與HSL相同，只是在HSL模式上新增了不透明度Alpha。
例如HSL(120,100%,100%,0.5) 表示半透明的綠色。 - transparent表示透明。
示例代碼如下：
<p class="hex1">顏色爲HEX形式，橄欖綠#808000</p>
<p class="hex2">顏色爲HEX形式，紫紅色#F0F</p>
<p class="rgb1">顏色爲RGB形式，RGB(0,145,153)</p>
<p class="rgba1">顏色爲RGBA形式，RGBA(0,145,153,0.5)</p>
<p class="rgb2">顏色爲RGB形式，RGB(80%,50%,50%)</p>
<p class="rgba2">顏色爲RGBA形式，RGBA(80%,50%,50%,0.5)</p>
<p class="hsl">顏色爲HSL形式，HSL(159,100%,69%)</p>
<p class="hsla">顏色爲HSLA形式，顏色爲HSLA(159,100%,69%,0.8)</p>
<p class="trans">顏色爲transparent完全透明</p>
<p>顏色繼承body的顏色，橙色orange</p>
CSS部分代碼如下：
<style type="text/css">
body{
color:orange; /* color_name */
font-weight:bold; /*字體加粗*/
font-size:18px; /*字體大小*/
}
.hex1{ color:#808000; } /* HEX #RRGGBB形式*/
.hex2{ color:#F0F;} /* HEX,#RGB形式 */
.rgb1{color:RGB(0,145,153);} /* RGB */
.rgba1{color:RGBA(0,145,153,0.5);} /* RGBA */
.rgb2{color:RGB(80%,50%,50%);} /* RGB */
.rgba2{color:RGBA(80%,50%,50%,0.5);} /* RGBA */
.hsl{color:HSL(159,100%,69%);} /* HSL */
.hsla{color:HSLA(159,100%,69%,0.8);} /* HSLA */
.trans{color:transparent;} /* transparent */
</style>
其運行效果如下圖所示：
注：color:transparent;爲透明，但元素仍然存在，鼠標選中時可以看到。圖中的“transparent完全透明”即爲選中時效果
CSS字體屬性
常用的CSS的字體屬性如下圖所示：
字型font-family
font-family屬性用於指定文本的字型，例如黑體、隸書、Arial、Cambria等這些都屬於文本的字型。
其基本語法如下：
font-family :字型1,字型2, …… ;
示例代碼如下：
<h2>設置字型</h2>
<p class="font1">設置文本爲微軟雅黑</p>
<p class="font2">文本按照隸書、華文行楷、宋體的順序設置</p>
<p class="font3">The order of font is Calibri,Times New Roman,Arial</p>
CSS部分代碼如下：
<style type="text/css">
.font1{font-family:微軟雅黑;}
.font2{font-family:隸書,華文行楷,宋體;}
.font3{font-family:Calibri,"Times New Roman",Arial;}
</style>
其運行效果如下圖所示：
字型尺寸font-size
在HTML5之前，HTML中設置字體尺寸使用font標記，它有大小7個級別的字號，具有很大的侷限性，在HTML5中，摒棄了font標記，而將字體大小交由CSS來設置。在CSS中，使用font-size屬性來設置字體大小。
其基本語法如下：
font-size:長度 | 絕對尺寸 | 相對尺寸 | 百分比 ;
說明：
- 長度：即爲用長度值指定文字大小，不允許負值。長度單位有px（像素）、pt（點）、pc（皮卡）、in（英寸）、cm（釐米）、mm（毫米）、em（字體高）和ex（字符X的高度），其中px、em和ex是CSS相對長度單位，in、cm、mm、pt（1pt=1/72in）和pc（1pc=12pt）是css絕對長度單位。
- 絕對尺寸：絕對尺寸每一個值都對應一個固定尺寸，可以取值爲xx-small（最小）、x-small（較小）、small（小）、medium（正常）、large（大）、x-large（較大）和xx-large（最大）。
- 相對尺寸：相對尺寸相對於父對象中字體尺寸進行相對調節，可選參數值爲smaller和larger。
- 百分比：用百分比指定文字大小，相對於父對象中字體的尺寸。
示例代碼如下：
<div id="fs">
<h2>字體尺寸（h2標題），父對象大小爲20px</h2>
<p class="fs1">x-large大小的文字</p>
<p class="fs2">medium大小的文字</p>
<p>未使用樣式，默認大小的文字</p>
<p class="fs3">14px大小的文字</p>
<p class="fs4">12pt大小的文字</p>
<p class="fs5">larger大小的文字</p>
<p class="fs6">150%大小的文字</p>
</div>
CSS部分代碼如下：
<style type="text/css">
#fs{font-size:20px;}
.fs1{font-size:x-large;}
.fs2{font-size:medium;}
.fs3{font-size:14px;}
.fs4{font-size:12pt;}
.fs5{font-size:larger;}
.fs6{font-size:150%;}
</style>
其運行效果如下圖所示：
字體粗細font-weight
font-weight的屬性值有3種指定方法：第1種是關鍵字法，關鍵字包括“normal”和“bold”兩個；第2種是相對粗細值法，相對粗細也是由關鍵字定義，但是它的粗細是相對於上級元素的繼承值而言的，包括“bolder”和“lighter”兩個；第3種爲數字法，包括從“100”到“900”的9個數字序列（注意，只能是100、200之類的整百數）。這些數字序列代表從最細（100）到最粗（900）的字體粗細程度。每一個數字定義的粗細都要比上一個等級稍微粗一些。
其基本語法如下：
font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
說明：
- normal：正常的字體。相當於數字值400。
- bold：粗體。相當於數字值700。
- bolder：定義比繼承值更重的值。
- lighter：定義比繼承值更輕的值。
- 100-900：用數字表示字體粗細。
示例代碼如下：
<p>
<span class="fw1">100</span>
<span class="fw2">200</span>
<span class="fw3">300</span>
<span class="fw4">400</span>
<span class="fw5">500</span>
<span class="fw6">600</span>
<span class="fw7">700</span>
<span class="fw8">800</span>
<span class="fw9">900</span>
</p>
<p>
<span class="fw10">normal</span>
<span class="fw11">bold</span>
<span class="fw12">bolder</span>
<span class="fw13">lighter</span>
</p>
<p class="fw10">
這段文字是normal文字，但有時我們會對其中某些文字進行強調，可將其設置爲<span class="fw11">粗體bold</span>，這時它明顯比其它文字粗一些。
</p>
<p class="fw11">
這段文字是bold文字，整段文字都是粗體，但有時我們需要其中某些文字恢復正常粗細，可將其設置爲<span class="fw13">正常normal</span>，這時其它文字明顯比它粗一些。
</p>
CSS部分代碼如下：
<style type="text/css">
.fw1{font-weight:100;}
.fw2{font-weight:200;}
.fw3{font-weight:300;}
.fw4{font-weight:400;}
.fw5{font-weight:500;}
.fw6{font-weight:600;}
.fw7{font-weight:700;}
.fw8{font-weight:800;}
.fw9{font-weight:900;}
.fw10{font-weight:normal;}
.fw11{font-weight:bold;}
.fw12{font-weight:bolder;}
.fw13{font-weight:lighter;}
</style>
其運行效果如下圖所示：
字體風格font-style
其基本語法如下：
font-style: normal | italic | oblique ;
說明：
- normal：正常字體。
- italic：指定文本字體樣式爲斜體。對於沒有設計斜體的特殊字體，如果要使用斜體外觀將應用oblique。
- oblique：指定文本字體樣式爲傾斜的字體。人爲的使文字傾斜，而不是去選取字體中的斜體字。
示例代碼如下：
<ul>
<li class="fs1">正常字體normal</li>
<li class="fs2">斜體italic</li>
<li class="fs3">傾斜的字體oblique</li>
</ul>
CSS部分代碼如下：
<style type="text/css">
.fs1{font-style:normal;}
.fs2{font-style:italic;}
.fs3{font-style:oblique;}
</style>
其運行效果如下圖所示：
個人感覺這個屬性和i跟em標籤的效果神似。
小型大寫字母font-variant
通俗的來講，就是字母的字體大小不變，但大小寫發生改變，可以參考運行的效果截圖。
其基本語法如下：
font-variant: normal | small-caps ;
示例代碼如下：
<p class= "fv1">Gone with the Wind</p>
<p class= "fv2">Gone with the Wind</p>
CSS部分代碼如下：
<style type="text/css">
.fv1{font-variant:normal;}
.fv2{font-variant:small-caps;}
</style>
其運行效果如下圖所示：
字體複合屬性font
font屬性中的屬性值排列順序是font-style、font-variant、font-weight、font-size和 font-family。屬性排列中，font-style、font-variant和font-weight可以進行順序的調換，而font-size和font-family則必須按照固定順序出現，如果這兩個順序錯誤或者缺少，那麼整條樣式可能會被忽略。
另外，在字體大小屬性值部分可以添加行高屬性，以/分隔。例如：“font:italic normal bold 13px/20px 宋體;”表示字體爲斜體加粗的宋體、大小爲13像素、行高爲20像素。
其基本語法如下：
font：font-style font-variant font-weight font-size font-family ;
由於上述各個屬性均有示例，此處不再單獨舉例。
文本格式化
常用的CSS文本格式化屬性如下圖所示：
行高line-height
其基本語法如下：
line-height: normal | 長度 | 百分比 | 數值 ;
說明：
- normal：默認行高。
- 長度值：用長度值指定行高，不允許負值。如“line-height:18px”設定行高爲18px。
- 百分比：用百分比指定行高，其百分比取值是基於字體的高度尺寸。如“line-height:150%”設定行高爲字體尺寸的150%，即1.5倍行距。
- 數值：用乘積因子指定行高，不允許負值。如“line-height:2” 設定行高爲字體大小的2倍，相當於2倍行距。
示例效果如下（段落使用P標籤，各段CSS屬性均在段前給出，由於代碼文字較多，此處不再展示）：
水平對齊方式text-align
其基本語法如下：
text-align: left | right | center | justify | start | end | match-parent | justify-all;
說明：
- left：內容左對齊。
- center：內容居中對齊。
- right：內容右對齊。
- justify：內容兩端對齊，適用於文字中有空格的情況，例如英文文本。
示例代碼如下：
<p class="ta1">左對齊</p>
<p class="ta2">居中對齊</p>
<p class="ta3">右對齊</p>
<p class="ta1">左對齊之段落：I have a dream that one day this nation will rise up and live out the true meaning of its creed: "We hold these truths to be self-evident, that all men are created equal."</p>
<p class="ta4">兩端對齊段落：I have a dream that one day this nation will rise up and live out the true meaning of its creed: "We hold these truths to be self-evident, that all men are created equal."</p>
CSS部分代碼如下：
<style type="text/css">
p{ font-size:14px; }
.ta1{ text-align:left;}
.ta2{ text-align:center;}
.ta3{ text-align:right;}
.ta4{ text-align:justify;}
</style>
其運行效果如下圖所示：
文本縮進text-indent
其基本語法如下：
text-indent: [長度值 | 百分比] && hanging? && each-line?;
說明：
- 長度值：用長度值指定文本的縮進，可以爲負值。如“text-indent:2em”表示縮進兩個字體高。
- 百分比：用百分比指定文本的縮進，可以爲負值。如“text-indent:20%”。
- each-line：CSS3新增屬性值，定義縮進作用在塊容器的第一行或者內部的每個強制換行的首行，軟換行不受影響。
- hanging：CSS3新增屬性，反向所有被縮進作用的行。
注意：each-line和hanging關鍵字跟隨在縮進數值之後，以空格分隔，如“div{text-indent:2em each-line;}”表示div容器內部的第一行及每一個強制換行都有2em的縮進。
常用的首行縮進兩個字符的代碼如下，其他不做累述：
text-indent:2em;
大小寫text-transform
其基本語法如下：
text-transform : none | capitalize | uppercase | lowercase | full-width;
說明：
- none：無轉換，正常顯示。
- capitalize：將每個單詞的第一個字母轉換成大寫。
- uppercase：將單詞的每個字母轉換成大寫。
- lowercase：將單詞的每個字母轉換成小寫。
- full-width：CSS3新增值，將所有字符轉換成fullwidth（全字型或全角）形式。如果字符沒有相應的fullwidth形式，將保留原樣。
示例代碼如下：
<p>原文：Confidence of success is almost success. </p>
<p>首字母大寫：<span class="tt1">Confidence of success is almost success. </span> </p>
<p>大寫：<span class="tt2">Confidence of success is almost success. </span> </p>
<p>小寫：<span class="tt3">Confidence of success is almost success. </span> </p>
<p>全角：<span class="tt4">Confidence of success is almost success. </span> </p>
CSS部分代碼如下：
<style type="text/css">
.tt1{ text-transform:capitalize; }
.tt2{ text-transform:uppercase; }
.tt3{ text-transform:lowercase; }
.tt4{ text-transform:full-width; }
</style>
其運行效果如下圖所示：
有些示例效果中，全角顯示爲下圖樣式：
字符間距letter-spacing
其基本語法如下：
letter-spacing: normal | 長度 | 百分比;
說明：
- normal：默認間隔。
- 長度：用長度值指定間隔，可以爲負值。
- 百分比：CSS3新增值，用百分比指定間隔，可以爲負值，但目前主流瀏覽器均不支持百分比屬性值。
示例代碼如下：
<p>原文：Confidence of success is almost success. </p>
<p class="ls1">normal字符間距：Confidence of success is almost success. </p>
<p class="ls2">0.25em字符間距：Confidence of success is almost success. </p>
<p class="ls3">-1px字符間距：Confidence of success is almost success. </p>
CSS部分代碼如下：
<style type="text/css">
.ls1{letter-spacing: normal;}
.ls2{letter-spacing:0.25em;}
.ls3{letter-spacing:-1px;}
</style>
其運行效果如下圖所示：
單詞間距word-spacing
其基本語法如下：
word-spacing: normal | 長度 | 百分比;
說明：
- normal：默認間隔。
- 長度：用長度值指定間隔，可以爲負值。
- 百分比：CSS3新增值，用百分比指定間隔，可以爲負值，但目前主流瀏覽器均不支持百分比屬性值。
示例代碼如下：
<p>原文，Oceans apart day after day. I hear your voice on the line.</p>
<p class="ws1">normal單詞間距，Oceans apart day after day. I hear your voice on the line.</p>
<p class="ws2">20px單詞間距，Oceans apart day after day. I hear your voice on the line.</p>
<p class="ws3">-1px單詞間距，Oceans apart day after day. I hear your voice on the line.</p>
CSS部分代碼如下：
<style type="text/css">
.ws1{word-spacing: normal;}
.ws2{word-spacing:20px;}
.ws3{word-spacing:-1px;}
</style>
其運行效果如下圖所示：
垂直對齊方式vertical-align
其基本語法如下：
vertical-align : baseline | sub | super | top | text-top | middle | bottom | text-bottom | 百分比 | 長度;
說明：
- baseline：默認值，與基線對齊。
- sub：垂直對齊文本的下標。
- super：垂直對齊文本的上標。
- top：頂端與行中最高元素的頂端對齊。
- text-top：頂端與行中最高文本的頂端對齊。
- middle：垂直對齊元素的中部。
- bottom：底端與行中最低元素的底端對齊。
- text-bottom：底端與行中最低文本的底端對齊。
- 百分比：用百分比指定由基線算起的偏移量，基線爲0%。
- 長度：用長度值指定由基線算起的偏移量，基線爲0。
示例代碼如下：
<p>參考文字<span class="va1">baseline基線對齊</span></p>
<p>參考文字<span class="va2">sub下標對齊</span></p>
<p>參考文字<span class="va3">super上標對齊</span></p>
<p>參考圖文<img src="img/li.jpg" width="50px" title="參考圖片" /><span class="va4">top頂部對齊</span></p>
<p>參考圖文<img src="img/li.jpg" width="50px" title="參考圖片" /><span class="va5">text-top頂端對齊</span></p>
<p>參考文字<span class="va6">middle居中對齊</span></p>
<p>參考文字<span class="va7">bottom底部對齊</span></p>
<p>參考文字<span class="va8">text-bottom底部對齊</span></p>
<p>參考文字<span class="va9">10px數值對齊</span></p>
<p>參考文字<span class="va10">20%數值對齊</span></p>
CSS部分代碼如下：
<style type="text/css">
p{ font-size:18px;font-weight:bold; }
span{ font-size:13px;}
.va1{ vertical-align:baseline; }
.va2{ vertical-align:sub; }
.va3{ vertical-align:super; }
.va4{ vertical-align:top; }
.va5{ vertical-align:text-top; }
.va6{ vertical-align:middle; }
.va7{ vertical-align:bottom; }
.va8{ vertical-align:text-bottom; }
.va9{ vertical-align:10px; }
.va10{ vertical-align:20%; }
</style>
其運行效果如下圖所示：
文本修飾text-decoration
text-decoration屬性控制對象中的文本的裝飾，包括修飾種類、樣式和顏色。在CSS2.1中，text-decoration設置文本的修飾種類，而在CSS3中，text-decoration是text-decoration-line、text-decoration-style和text-decoration-color的複合屬性。
所有瀏覽器均支持CSS2.1中的text-decoration屬性，在CSS3中，該屬性定義被移植到其新的分解屬性text-decoration-line上。大多數瀏覽器對CSS3就text-decoration的屬性擴展以及分項屬性text-decoration-line、text-decoration-style和text-decoration-color不支持，目前Firefox和Safari的高版本支持此屬性的新解，但在個別細節上可能支持性仍然不夠。
其基本語法如下：
text-decoration:<text-decoration-line> || < text-decoration-style> || <text-decoration-color>;
text-decoration-line：none | [ underline || overline || line-through || blink ];
text-decoration-style：solid | double | dotted | dashed | wavy;
text-decoration-color：顏色;
說明：
- text-decoration-line（修飾種類）
指定文本裝飾線的位置和種類。相當於CSS2.1的 text-decoration 屬性，可取值：none、underline、 overline、line-through 和blink，除了“none”之外的屬性值可以組合。- none：關閉原本應用到一個元素上的所有裝飾。通常，無裝飾的文本是默認外觀，但也不總是這樣，例如，超鏈接默認有下劃線，可以使用“text-decoration-line:none;”去掉超鏈接的下劃線。
- underline：下劃線。
- overline：上劃線。
- line-through ：貫穿線（刪除線）。
- blink：文本閃爍，大部分瀏覽器都不支持blink值，因爲規範允許用戶代理忽略該效果。
- text-decoration-style（修飾樣式）
指定文本裝飾的樣式，也就是文本修飾線條的形狀，值可以是solid、double、dotted、dashed和wave。其中solid表示實線，double表示雙線，dotted表示點線，dashed表示虛線，wave表示波浪線。 - text-decoration-color（修飾顏色）
指定文本裝飾線條的顏色，可以使用任何合法顏色值。
示例代碼如下：
<p><a href="http://www.baidu.com" class="td1">此處是鏈接，使用樣式去掉下劃線</a></p>
<p class="td2">text-decoration添加下劃線</p>
<p class="td3">text-decoration添加紅色刪除線</p>
<p class="td4">text-decoration添加藍色雙線上劃線</p>
<p class="td5">text-decoration同時添加上劃線和下劃線，形式爲紫色點線</p>
<p class="td6">text-decoration-line同時添加上劃線和下劃線</p>
<p class="td7">使用3個分項屬性添加顏色爲#F09的虛線下劃線</p>
CSS部分代碼如下：
<style type="text/css">
.td1{ text-decoration:none; }
.td2{ text-decoration:underline; }
.td3{ text-decoration:line-through red; }
.td4{ text-decoration:overline blue double; }
.td5{ text-decoration:overline underline purple dotted; }
.td6{ text-decoration-line:overline underline; }
.td7{
text-decoration-line:underline;
text-decoration-style:dashed;
text-decoration-color:#F09;
}
</style>
其運行效果如下圖所示：
文本陰影text-shadow
其基本語法如下：
text-shadow : none | 陰影 [ , 陰影 ]* ;
陰影 = 長度1 , 長度2 , [ 長度3 ], [顏色];
說明：
- none：無陰影。
- 陰影：可以設置多組陰影效果，每組參數之間用逗號分隔。
- 長度1：設置陰影的水平偏移值，可以爲負值，正值表示陰影在右，負值在左。
- 長度2：設置陰影的垂直偏移值，可以爲負值，正值表示陰影在下，負值在上。
- 長度3：可選，如果提供了此值則用來設置文本的陰影模糊值，不允許負值。
- 顏色：設置陰影的顏色。
示例代碼如下：
<p class="ts1">一重陰影:6px 6px 3px #333</p>
<p class="ts2">一重陰影:-6px -4px 3px #FA6</p>
<p class="ts3">三重陰影:5px 3px 2px #119cd5,10px 6px 2px #fed904,15px 9px 3px #7d4697</p>
CSS部分代碼如下：
<style type="text/css">
p{
font-size:24px;
font-family:黑體,微軟雅黑;
font-weight:bold;
}
.ts1{
color:black;
text-shadow:6px 6px 3px #333;
}
.ts2{
color:#F93;
text-shadow:-6px -4px 3px #FA6;
}
.ts3{
color:black;
text-shadow:5px 3px 2px #119cd5,10px 6px 2px #fed904,15px 9px 3px #7d4697;
}
</style>
其運行效果如下圖所示：
書寫模式writing-mode
writing-mode控制對象的內容塊固有的書寫方向。原本是IE的私有屬性之一，後期被w3c採納成CSS3的標準屬性，但各個流瀏覽器的支持性存在差異。
其基本語法如下：
writing-mode: horizontal-tb | vertical-rl | vertical-lr | lr-tb | tb-rl ;
說明：
- horizontal-tb：水平文本，左-右。CSS3標準屬性，IE瀏覽器不支持，其它瀏覽器高版本一般支持。
- vertical-rl：垂直文本，右-左。CSS3標準屬性，IE瀏覽器不支持，其它瀏覽器高版本一般支持。
- vertical-lr：垂直文本，左-右。CSS3標準屬性，IE瀏覽器不支持，其它瀏覽器高版本一般支持。
- lr-tb：水平文本，左-右。IE私有屬性，但其它瀏覽器高版本一般也支持。
- tb-rl：垂直文本，右-左。IE私有屬性，但其它瀏覽器高版本一般也支持。
示例代碼如下：
<div class="wm1">
明月幾時有？把酒問青天。不知天上宮闕，今夕是何年。我欲乘風歸去，又恐瓊樓玉宇，高處不勝寒。起舞弄清影，何似在人間？
</div>
<div class="wm2">
明月幾時有？把酒問青天。不知天上宮闕，今夕是何年。我欲乘風歸去，又恐瓊樓玉宇，高處不勝寒。起舞弄清影，何似在人間？
</div>
<div class="wm3">
明月幾時有？把酒問青天。不知天上宮闕，今夕是何年。我欲乘風歸去，又恐瓊樓玉宇，高處不勝寒。起舞弄清影，何似在人間？
</div>
CSS部分代碼如下：
<style type="text/css">
div{
width:140px;
height:140px;
margin:10px;
border:1px solid black;
float:left;
font-size:13px;
line-height:1.3;
}
.wm1{
writing-mode:horizontal-tb; /* 適用於大多瀏覽器，IE不支持 */
writing-mode:lr-tb; /*適用於IE，其它瀏覽器高版本亦可能支持 */
}
.wm2{
writing-mode:vertical-rl; /* 適用於大多瀏覽器，IE不支持 */
writing-mode:tb-rl; /*適用於IE，其它瀏覽器高版本亦可能支持 */
}
.wm3{
writing-mode:vertical-lr; /* 適用於大多瀏覽器，IE不支持 */
}
</style>
其運行效果如下圖所示：
斷行處理word-wrap和overflow-wrap
當文字在一個比較窄的容器中時，字符串超出容器範圍時不會斷行，而是頂破容器顯示到容器外面，此時可以設置 word-wrap 或overflow-wrap，它們可以讓字符串在到達容器的寬度限制時換行。
word-wrap這個屬性最初是由微軟發明的，是IE的私有屬性，後期被W3C採納成標準屬性，雖然主流瀏覽器都支持這個屬性，但W3C決定要用overflow-wrap替換word-wrap。overflow-wrap跟word-wrap具有相同的屬性值，建議使用overflow-wrap屬性時，最好同時使用word-wrap作爲備選，作向前兼容。
其基本語法如下：
word-wrap: normal | break-word;
overflow-wrap: normal | break-word;
說明：
- normal：允許內容頂開或溢出指定的容器邊界。
- break-word：內容將在邊界內換行。如果需要，單詞內部允許斷行。
示例代碼如下：
<div class="wrap1">
正常情況下單詞內部不換行，這有時會造成困擾，如長單詞或者網址。新浪：http://www.sina.com.cn/
</div>
<div class="wrap2">
我們常常需要讓盒子中顯示一個長單詞如url時換行，而不是撐破盒子。新浪：http://www.sina.com.cn/。
</div>
CSS部分代碼如下：
<style type="text/css">
div{
width:120px;
height:120px;
margin:20px;
float:left;
border:1px solid black;
font:13px/1.3 黑體,Calibri;
}
.wrap1{
word-wrap:normal;
overflow-wrap:normal;
}
.wrap2{
word-wrap:break-word;
overflow-wrap:break-word;
}
</style>
其運行效果如下圖所示：
文本相關僞對象
這裏介紹兩個和文本相關的僞對象first-letter和first-line。first-letter僞對象規定元素中首字符的規則，first-line僞對象規定元素中首行的樣式。
即可通過下述CSS樣式設置首字下沉：
<style type="text/css">
.類名::first-letter{
font-size:30px;
float:left;
color:#035ee5;
font-weight:bold;
}
</style>
通過下述CSS樣式設置首行變色：
<style type="text/css">
.類名::first-line{
color:#035ee5;
font-weight:bold;
}
</style>
同時應用時，其效果大致如下：
CSS列表屬性
列表的符號和位置都可以使用CSS進行詳細的設置。
列表項目符號list-style-type
其基本語法如下：
list-style-type: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | armenian | cjk-ideographic | georgian | lower-greek | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-latin | upper-latin ;
說明：
- disc：實心圓。
- circle：空心圓。
- square：實心方塊。
- decimal：阿拉伯數字。
- lower-roman：小寫羅馬數字。
- upper-roman：大寫羅馬數字。
- lower-alpha：小寫英文字母。
- upper-alpha：大寫英文字母。
- none：不使用項目符號。
- armenian：傳統的亞美尼亞數字。
- cjk-ideographic：淺白的表意數字。
- georgian：傳統的喬治數字。
- lower-greek：基本的希臘小寫字母。
- hebrew：傳統的希伯萊數字。
- hiragana：日文平假名字符。
- hiragana-iroha：日文平假名序號。
- katakana：日文片假名字符。
- katakana-iroha：日文片假名序號。
- lower-latin：小寫拉丁字母。
示例代碼如下：
<h1>circle：</h1>
<ul class="circle">
<li>項目符號爲空心圓</li>
<li>這是列表項</li>
</ul>
<h1>square：</h1>
<ul class="square">
<li>項目符號爲實心方塊</li>
<li class="upper-alpha">這一項的項目符號爲大寫字母</li>
</ul>
<h1>decimal：</h1>
<ol class="decimal">
<li>項目符號爲數字</li>
<li>這是列表項</li>
</ol>
<h1>upper-roman：</h1>
<ul class="upper-roman">
<li>項目符號爲大寫羅馬字母</li>
<li>這是列表項</li>
</ul>
<h1>lower-alpha：</h1>
<ol class="lower-alpha">
<li>項目符號爲小寫英文字母</li>
<li>這是列表項</li>
</ol>
<h1>none：</h1>
<ul class="none">
<li>無項目符號</li>
<li>這是列表項</li>
</ul>
<h1>armenian：</h1>
<ul class="armenian">
<li>項目符號爲傳統的亞美尼亞數字</li>
<li>這是列表項</li>
</ul>
<h1>lower-greek：</h1>
<ul class="lower-greek">
<li>項目符號爲基本的希臘小寫字母</li>
<li>這是列表項</li>
</ul>
CSS部分代碼如下：
<style type="text/css">
h1{ font:14px/12px Arial; }
ol,ul{ font-size:13px; }
.circle{ list-style-type:circle;}
.square{ list-style-type:square;}
.decimal{ list-style-type:decimal;}
.upper-roman{ list-style-type:upper-roman;}
.lower-alpha{ list-style-type:lower-alpha;}
.upper-alpha{ list-style-type:upper-alpha;}
.none{ list-style-type:none;}
.armenian{ list-style-type:armenian; }
.lower-greek{ list-style-type:lower-greek;}
</style>
其運行效果如下圖所示：
圖片符號list-style-image
其基本語法如下：
list-style-image:none | url(圖像文件的URL);
說明：
- none：不指定圖像。
- url：指定列表項標記圖像。
示例代碼如下：
<ul class="limg">
<li>春花秋月何時了？往事知多少。</li>
<li>小樓昨夜又東風，故國不堪回首月明中。</li>
<li>雕欄玉砌應猶在，只是朱顏改。</li>
<li>問君能有幾多愁？恰似一江春水向東流。</li>
</ul>
CSS部分代碼如下：
<style type="text/css">
.limg{
list-style-image:url(img/tell.png);
font-size:16px;
}
</style>
其運行效果如下圖所示：
列表符號位置list-style-position
其基本語法如下：
list-style-position: outside | inside;
說明：
- outside：默認值，列表項目符號放置在文本以外，且環繞文本不根據符號對齊。
- inside：列表項目符號放置在文本以內，且環繞文本和項目符號對齊。
示例代碼如下：
<div>
<h1>outside</h1>
<ol class="lspo">
<li>春花秋月何時了？往事知多少。</li>
<li>小樓昨夜又東風，故國不堪回首月明中。</li>
<li>雕欄玉砌應猶在，只是朱顏改。</li>
<li>問君能有幾多愁？恰似一江春水向東流。</li>
</ol>
</div>
<div>
<h1>inside</h1>
<ol class="lspi">
<li>春花秋月何時了？往事知多少。</li>
<li>小樓昨夜又東風，故國不堪回首月明中。</li>
<li>雕欄玉砌應猶在，只是朱顏改。</li>
<li>問君能有幾多愁？恰似一江春水向東流。</li>
</ol>
</div>
CSS部分代碼如下：
<style type="text/css">
div{
width:200px;
float:left;
margin:10px;
border:1px solid #666;
}
/* 列表符號在文本外*/
.lspo{
list-style-position:outside;
list-style-type:upper-alpha;
}
/* 列表符號在文本內*/
.lspi{
list-style-position:inside;
list-style-type:upper-alpha;
}
</style>
其運行效果如下圖所示：
列表複合屬性list-style
其基本語法如下：
list-style: [list-style-image ] | [ list-style-position] | [ list-style-type];
說明：
複合屬性，可以同時設置1項或多項。若list-style-image屬性爲none或指定圖像不可用時，list-style-type屬性將發生作用。例句如下：
<style type="text/css">
.類名{
list-style:inside url(images/flower.png) upper-alpha;
}
</style>
當圖像不可用時，應用爲大寫英文字符。
結語
此次記錄內容較多，純手打，難免有寫錯的地方，遺漏之處日後補充，如有錯誤或不足，還望指正