颜色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>
当图像不可用时，应用为大写英文字符。
结语
此次记录内容较多，纯手打，难免有写错的地方，遗漏之处日后补充，如有错误或不足，还望指正
