本例講解如何設定如下的文字樣式，通過這個設定來了解文字的排版，效果圖：
一、html內容：
主演：劉德華 葉德嫻 秦海璐 秦沛
導演：許鞍華
年代：2012
桃姐（葉德嫻 飾）是侍候了李家數十年的老傭人，把第二代的少爺羅傑（劉德華 飾）撫養**。羅傑從事電影製片人，五十多歲了仍然獨身，而桃姐也繼續照顧羅傑，成為習慣……一日，桃姐如常到街市買菜，回寓所煲湯、做好滿桌的飯菜，在等待從內地出差回家的羅傑，桃姐看著窗外的街景打發時間 ，不知不覺間卻竟昏迷在地上……桃姐醒來時發現自己身在醫院，桃姐是中風了！一邊手臂不能活動自如，必須利用物理**盡量恢復活動能力。 羅傑在百忙工作中為桃姐找合適老人院，期間巧遇昔日電影拍攝認識的草蜢哥（黃秋生 飾），桃姐出院來到老人院，環境陌生，院友怪異，桃姐強裝鎮定。羅傑工餘常到老人院探桃姐，主僕閒話家常一如母子，仍保持互相揶揄調侃習慣，桃姐嘴硬心甜，院友羨慕。 羅傑特意帶桃姐參加電影首映禮，桃姐首次刻意打扮準備，取收藏已久的名貴衣服出發赴會；首映禮上桃姐大開眼界，更終有機會見到電影明星，桃姐感嘆自己有生之年已然無憾。
這是乙個純的html文字，它的效果圖如下：
二、給第二個的第乙個字「桃」增加標記，然後定義firstletter類選擇器，使其大小為三個字母大小，並且向左浮動。
.firstletter
效果如下：
觀察到第二個中的內容行高過於緊密，為了視覺看得舒服所以調整一下行高。
三、給第二個定義info類選擇器，使其字型為「宋體」，字的大小為12px，行高為18px
.info
效果如下：
但會發現雖然行的高度有變化，但第乙個字「桃」卻不是原字型的三倍大小了，這是因為是的孩子，由於div class="info"的行高設定為了18px，所以所屬的盒子的行高也就變為了18px。如何保證首字下沉三倍但其他它的行高為18px呢？其實很簡單，把line-hieght設定為1.5即可（注意：這裡1.5後面沒有單位，這是乙個百分比，即為父盒子的1.5倍）。
.info
四、設定標題
h1 即標題的背景色為#678，字型顏色為白色（#ffffff），文字居中對齊，效果如下：
五、設定第乙個div的字型樣式
.actors
文字設定為向左浮動，除左外邊距的距離為0畫素之外，內邊距和外邊距的距離均為10畫素，背景色設定為#678，所以最終效果如下：
六、說明：
的backgroud-color屬性和backgroud屬性一樣，都是設定字型的背景顏色；font-family:"arial","宋體";表示瀏覽器在解析時先按arial字型解析，若不存在arial字型，則按宋體解析，若也不存在宋體，則按瀏覽器的預設字型顯示。
CSS樣式案例 1 文字的排版
本篇介紹的是小窗文字內容的排版，通過該篇文章可以讓小夥伴們熟悉以下幾個知識點 word space overflow text overflow。最終的展示效果如下 參考步驟 1.建立html文件，並使用dl,dt,dd元素將內容放進去。doctype html html head meta cha...
Css基礎學習（四） 文字
文字是網頁內容的核心，文字的美觀 可視性 表現性會加強網頁內容的可讀性。相對於精美的和樣式，枯燥的文字就沒有得到相應的重視程度。人們瀏覽網頁並不是漫無目的的欣賞，而是獲取資訊。我們下面就來說說文字的一些基本樣式。1 font family屬性 font family屬性是針對某個元素的字型名稱和 或...
CSS（4） 文字布局
文字 可以控制字型，文字大小，文字顏色，文字粗細，斜體，下 中 頂劃線。text transform 首字母或全部首字母大寫.font family 控制字形，見另一blog font size 控制字型 例如 p.f12 text decoration 實現underline 下劃線 overli...