14 ,CSS 文字與文本
1.CSS 中長度與顏色
2.CSS 中的文字屬性
3.CSS 中的文本屬性
14.1 CSS 中長度與顏色
長度單位 說明
in 英寸
cm 公分
mm 公裏
cm 以目前字體高度為單位
ex 以小寫字母高度為單位（大部分不支持）
pt 1pt/72英寸
pc 1pc/12pt
px 像素（推薦使用）
顏色單位： 說明
十六進制 如：color:#ff0000
顏色名稱 如：color:red
三原色單位 如：rgb(255,0,0)
一般最常用的是十六進制，三原色單位的原理【紅（r）,綠（g）,藍(b)】混合而成。。
每個值域在0－255之間
14.2 CSS 中的文字屬性
屬性名稱 屬性值 說明
font-style normal 正常顯示
italic 斜體
font-variant normal 正常顯示
small-caps 將英文大小寫字母寫調為同寬
font-weight normal 正常顯示
bold 粗體
font-size 像素 字體大小
百分比 字體大小
font-family 字體名稱 設置字體名稱
font屬性簡化的使用方法：
font:是否斜體 是否同寬 是否粗體 大小 字體名稱
例如:font:italic bold 200 隸書；
14.3 CSS中的文本屬性
屬性名稱 屬性值 說明
color 十六進制 顏色
英文名稱 顏色
三原色單位 顏色
letter-spacing normal 正常顯示
長度 文本間隔
word-spacing normal 正常顯示
數字 單詞間距
white-space normal 文本自動處理換行
pre 換行和空白受保護
nowrap 強制在同一行顯示
text-align left 文字靠左
right 文字靠右
center 文字靠中
text-decoration none 正常顯示
underline 加上下劃線
overline 加頂線
line-through 加刪除線
text-indent 長度 首行縮進
百分比
line-height 像素 行高
數字/百分比 行高
text-transform none 正常顯示可以包含大，小字符
capitalize 字符串第一個字符大寫
uppercase 設置大寫字符
lowercase 設置小寫字符
vertical-align sub 設置文字為下標。
super 設置文字為上標。
top 元件往上端靠齊。
middle 設置文字是在中線位置。
bottom 元件往下端靠齊。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">
ul li{
font-style:italic;
}
p{
font-weight:bold;
color: #D82326;
}
span{
font-size:26px;
font-family:Consolas, Andale Mono, Lucida Console, Lucida Sans Typewriter, Monaco, Courier New, monospace
}
ol{
font:italic bold 200 隸書；
}
h1{
letter-spacing: 20px;
}
h2{
word-spacing:30px;
}
h3{
white-space:pre;
}
h4{
text-align: center;
}
h5{
text-decoration:line-through;
}
img{
vertical-align:-50px;
}
</style>
</head>
<body>
<pre>
1 CSS 中長度與顏色
長度單位 說明
in 英寸
cm 公分
mm 公裏
cm 以目前字體高度為單位
ex 以小寫字母高度為單位（大部分不支持）
pt 1pt/72英寸
pc 1pc/12pt
px 像素（推薦使用）
顏色單位： 說明
十六進制 如：color:#ff0000
顏色名稱 如：color:red
三原色單位 如：rgb(255,0,0)
一般最常用的是十六進制，三原色單位的原理【紅（r）,綠（g）,藍(b)】混合而成。。
每個值域在0－255之間
</pre>
<ul>
<li>italic 斜體</li>
<li>italic 斜體</li>
</ul>
<p>bold 粗體,color,顏色</p>
<span>font-size 像素 百分比 字體大小,font-family,字體名稱 設置字體名稱</span>
<ol>
<li>font屬性簡化的使用方法:是否斜體 是否同寬 是否粗體 大小 字體名稱</li>
<li>font屬性簡化的使用方法:是否斜體 是否同寬 是否粗體 大小 字體名稱</li>
</ol>
<h1>letter-spacing字間距,文本間隔</h1>
<h2>單詞間距,漢字無效，zhe shi yige laoshi </h2>
<h3>pre 換行和空白受保護 nowrap 強制在同一行顯示,
pre 換行和空白受保護 nowrap 強制在同一行顯示
pre 換行和空白受保護 nowrap 強制在同一行顯示
</h3>
<h4>文本居中</h4>
<h5> none 正常顯示
underline 加上下劃線
overline 加頂線
line-through 加刪除線</h5>
<p>text-indent 長度 首行縮進
百分比 同上</p>
<p>line-height 像素 行高數字/百分比 行高</p>
<Pre>text-transform none 正常顯示可以包含大，小字符
capitalize 字符串第一個字符大寫
uppercase 設置大寫字符
lowercase 設置小寫字符
vertical-align sub 設置文字為下標。
super 設置文字為上標。
top 元件往上端靠齊。
middle 設置文字是在中線位置。
bottom 元件往下端靠齊。</Pre>
<P><img src="images/pic7.jpg"/>設置文字是在中線位置</P>
</body>
</html>
14 ,CSS 文字與文本