整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
標
之前介紹過文字樣式，但文字樣式只是針對一個字而已。現實往往更多處理的是大段的文字，也叫做段落。段落更注重的是排版效果。一個排版好看的文章，更吸引人去看。
之前是使用標簽來設置標線，但更推薦的是使用css來設置標線，因為樣式與結構分離才是最好的選擇。
語法：text-decoration:屬性值
屬性值
各種標線，下劃線和刪除線用得較多，常用在文章的重點語句，或者是電商網站里的原價
標線樣式
小技巧，還可以用這個屬性去除a標簽的默認下劃線。text-decoration:none
這個屬性是針對英文，它可以很方便轉換大小寫，這個對于經常跟英文打交道的，是個神器！
語法：text-transform:屬性值;
屬性值
真正一鍵轉換全大寫。
原文
轉大寫
在書寫習慣上，一般習慣每個段落都會縮進兩個字大小，這個叫首行縮進。我們都知道段落p標簽的首行是不會縮進的，在此之前都是手動打幾個空格，這樣很容易導致空格失效，因為編輯器很容易把空格忽略掉。所有要使用css來控制。
語法：text-indent:像素值;
像素值可以使用px，但一般開發用得更多的是rem，2rem代表2個字的大小。
首行縮進
在CSS中，使用text-align屬性控制文本的水平方向的對齊方式：左對齊、居中對齊、右對齊。常見的文章標題，就是用這個來水平居中。
語法：text-align:屬性值;
屬性值
三種不同的水平對齊方式
水平對齊方式
在CSS中，使用line-height屬性來控制文本的行高。這個有點像行間距，但嚴謹的說，并不是！這里的行高真的是指一行的高度，大多數人會認為是word文檔里的行間距，行間距指的是"兩行文本之間的距離"，是不是不一樣。
語法：line-height:像素值;
不同行高的區別如下
不同行高
這里有個小技巧，行高line-height和高height設置為同一值，就可以實現垂直居中！
垂直居中
編寫word文檔的時候，常常是根據板式來調整字的間距，以免頁面過于擁堵。那調整字與字間距就有兩種情況。
首先是字間距，語法：letter-spacing:像素值;
說明：letter-spacing控制的是字間距，每一個中文文字作為一個"字"，而每一個英文字母也作為一個"字"。
原文
修改后
還有一個就是詞間距，語法：word-spacing:像素值;
說明：以空格為基準進行調節，如果多個單詞被連在一起，則被word-spacing視為一個單詞；如果漢字被空格分隔，則分隔的多個漢字就被視為不同的單詞，word-spacing屬性此時有效。
SS字體屬性定義字體，加粗，大小，文字樣式。
serif和sans-serif字體之間的區別
在計算機屏幕上，sans-serif字體被認為是比serif字體容易閱讀
CSS字型
在CSS中，有兩種類型的字體系列名稱：
通用字體系列 - 擁有相似外觀的字體系統組合（如 "Serif" 或 "Monospace"）
特定字體系列 - 一個特定的字體系列（如 "Times" 或 "Courier"）
| Generic family | 字體系列 | 說明 |
|---|---|---|
| Serif | Times New RomanGeorgia | Serif字體中字符在行的末端擁有額外的裝飾 |
| Sans-serif | ArialVerdana | "Sans"是指無 - 這些字體在末端沒有額外的裝飾 |
| Monospace | Courier NewLucida Console | 所有的等寬字符具有相同的寬度 |
字體系列
font-family 屬性設置文本的字體系列。
font-family 屬性應該設置幾個字體名稱作為一種"后備"機制，如果瀏覽器不支持第一種字體，他將嘗試下一種字體。
注意: 如果字體系列的名稱超過一個字，它必須用引號，如Font Family："宋體"。
多個字體系列是用一個逗號分隔指明：
實例
p{font-family:"Times New Roman", Times, serif;}
對于較常用的字體組合，看看我們的 Web安全字體組合。
字體樣式
主要是用于指定斜體文字的字體樣式屬性。
這個屬性有三個值：
正常 - 正常顯示文本
斜體 - 以斜體字顯示的文字
傾斜的文字 - 文字向一邊傾斜（和斜體非常類似，但不太支持）
實例
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
字體大小
font-size 屬性設置文本的大小。
能否管理文字的大小，在網頁設計中是非常重要的。但是，你不能通過調整字體大小使段落看上去像標題，或者使標題看上去像段落。
請務必使用正確的HTML標簽，就<h1> - <h6>表示標題和<p>表示段落：
字體大小的值可以是絕對或相對的大小。
絕對大小：
設置一個指定大小的文本
不允許用戶在所有瀏覽器中改變文本大小
確定了輸出的物理尺寸時絕對大小很有用
相對大小：
相對于周圍的元素來設置大小
允許用戶在瀏覽器中改變文字大小
如果你不指定一個字體的大小，默認大小和普通文本段落一樣，是16像素（16px=1em）。
設置字體大小像素
設置文字的大小與像素，讓您完全控制文字大小：
實例
h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}
上面的例子可以在 Internet Explorer 9, Firefox, Chrome, Opera, 和 Safari 中通過縮放瀏覽器調整文本大小。
雖然可以通過瀏覽器的縮放工具調整文本大小，但是，這種調整是整個頁面，而不僅僅是文本
用em來設置字體大小
為了避免Internet Explorer 中無法調整文本的問題，許多開發者使用 em 單位代替像素。
em的尺寸單位由W3C建議。
1em和當前字體大小相等。在瀏覽器中默認的文字大小是16px。
因此，1em的默認大小是16px。可以通過下面這個公式將像素轉換為em：px/16=em
實例
h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */
嘗試一下 ?
在上面的例子，em的文字大小是與前面的例子中像素一樣。不過，如果使用 em 單位，則可以在所有瀏覽器中調整文本大小。
不幸的是，仍然是IE瀏覽器的問題。調整文本的大小時，會比正常的尺寸更大或更小。
使用百分比和EM組合
在所有瀏覽器的解決方案中，設置 <body>元素的默認字體大小的是百分比：
實例
body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}
我們的代碼非常有效。在所有瀏覽器中，可以顯示相同的文本大小，并允許所有瀏覽器縮放文本的大小。
更多實例
設置字體加粗
這個例子演示了如何設置字體的加粗。
可以設置字體的轉變
這個例子演示了如何設置字體的轉變。
在一個聲明中的所有字體屬性
本例演示如何使用簡寫屬性將字體屬性設置在一個聲明之內。
所有CSS字體屬性
| Property | 描述 |
|---|---|
| font | 在一個聲明中設置所有的字體屬性 |
| font-family | 指定文本的字體系列 |
| font-size | 指定文本的字體大小 |
| font-style | 指定文本的字體樣式 |
| font-variant | 以小型大寫字體或者正常字體顯示文本。 |
| font-weight | 指定字體的粗細。 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
何使用CSS
CSS 是在 HTML 4 開始使用的,是為了更好的渲染HTML元素而引入的.
CSS 可以通過以下方式添加到HTML中:
· 內聯樣式- 在HTML元素中使用"style" 屬性
· 內部樣式表 -在HTML文檔頭部 <head> 區域使用<style> 元素 來包含CSS
· 外部引用 - 使用外部 CSS 文件
最好的方式是通過外部引用CSS文件.
在本站的HTML教程中我們使用了內聯CSS樣式來介紹實例，這是為了簡化的例子，也使得你能更容易在線編輯代碼并在線運行實例。
內聯樣式
當特殊的樣式需要應用到個別元素時，就可以使用內聯樣式。 使用內聯樣式的方法是在相關的標簽中使用樣式屬性。樣式屬性可以包含任何 CSS 屬性。以下實例顯示出如何改變段落的顏色和左外邊距。
<p style="color:blue;margin-left:20px;">This is a paragraph.</p>
HTML樣式實例 - 背景顏色
背景色屬性（background-color）定義一個元素的背景顏色：
<body style="background-color:yellow;">
<h2 style="background-color:red;">這是一個標題</h2>
<p style="background-color:green;">這是一個段落。</p>
</body>
早期背景色屬性（background-color）是使用 bgcolor 屬性定義。
HTML 樣式實例 - 字體, 字體顏色 ，字體大小
我們可以使用font-family（字體），color（顏色），和font-size（字體大小）屬性來定義字體的樣式:
<h1 style="font-family:verdana;">一個標題</h1>
<p style="font-family:arial;color:red;font-size:20px;">一個段落。</p>
現在通常使用font-family（字體），color（顏色），和font-size（字體大小）屬性來定義文本樣式，而不是使用<font>標簽。
HTML 樣式實例 - 文本對齊方式
使用 text-align（文字對齊）屬性指定文本的水平與垂直對齊方式：
<h1 style="text-align:center;">居中對齊的標題</h1> <p>這是一個段落。</p>
文本對齊屬性 text-align取代了舊標簽 <center> 。
內部樣式表
當單個文件需要特別樣式時，就可以使用內部樣式表。你可以在<head> 部分通過 <style>標簽定義內部樣式表:
00001.
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
外部樣式表
當樣式需要被應用到很多頁面的時候，外部樣式表將是理想的選擇。使用外部樣式表，你就可以通過更改一個文件來改變整個站點的外觀。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
HTML 樣式標簽
標簽
描述
<style>
定義文本樣式
<link>
定義資源引用地址
已棄用的標簽和屬性
在HTML 4, 原來支持定義HTML元素樣式的標簽和屬性已被棄用。這些標簽將不支持新版本的HTML標簽。
不建議使用的標簽有: <font>, <center>, <strike>
不建議使用的屬性: color 和 bgcolor.
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
