CSS樣式案例 1 文字的排版

本篇介紹的是小窗文字內容的排版，通過該篇文章可以讓小夥伴們熟悉以下幾個知識點:

word-space、overflow、text-overflow。

最終的展示效果如下:

參考步驟:

1. 建立html文件，並使用dl,dt,dd元素將內容放進去。

doctype html

>
<
html
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>文字排版
title
>
head
>
<
body
>
<
dl>
<
dt>收藏新聞
dt>
<
dd>錢幣|5盎司彩銀虎幣價值幾何 三連8豹子鈔市值達千元 
dd>
<
dd>海外|英國美術館辦窺視模特洗澡展 探秘荷蘭人體博物館
dd>
<
dd>藏界|地產商談收藏：跟拿地異曲同工拾垃圾的老外
dd>
<
dd>軼聞|最潮兵馬俑亮相西安 藏友發現日軍內參書籍
dd>
dl>
body
>
html
>

2. 新增css樣式，設定dl的長度、寬度以及邊框。

doctype html

>
<
html
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>文字排版
title
>
<
style 
type
="text/css"
>
dldt
ddstyle
>
head
>
<
body
>
<
dl>
<
dt>收藏新聞
dt>
<
dd>錢幣|5盎司彩銀虎幣價值幾何 三連8豹子鈔市值達千元 
dd>
<
dd>海外|英國美術館辦窺視模特洗澡展 探秘荷蘭人體博物館
dd>
<
dd>藏界|地產商談收藏：跟拿地異曲同工 拾垃圾的老外
dd>
<
dd>軼聞|最潮兵馬俑亮相西安 藏友發現日軍內參書籍
dd>
dl>
body
>
html
>

3. 分別設定dt,dd的字型的大小、顏色，以及其他屬性，上下內容省略，只顯示樣式部分。

4. 設定正文內容中字型的格式為不換行，這裡用到的屬性是white-space.

5. 引入兩張背景，分別用於設定標題欄的背景，以及正文內容的前面的小標題圖示。

6. 設定新聞標題(dt)的上右下左邊距、行高以及外邊框。

dt

7. 現在開始處理正文內容(dd)的樣式，調整正文內容的樣式，使被遮住的背景圖示顯示出來。

dd

8. 現在開始處理超出邊框範圍的字型。

dd

9. 完整的html**如下

doctype html

>
<
html
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>文字排版
title
>
<
style 
type
="text/css"
>
dldt
ddstyle
>
head
>
<
body
>
<
dl>
<
dt>收藏新聞
dt>
<
dd>錢幣|5盎司彩銀虎幣價值幾何 三連8豹子鈔市值達千元 
dd>
<
dd>海外|英國美術館辦窺視模特洗澡展 探秘荷蘭人體博物館
dd>
<
dd>藏界|地產商談收藏：跟拿地異曲同工 拾垃圾的老外
dd>
<
dd>軼聞|最潮兵馬俑亮相西安 藏友發現日軍內參書籍
dd>
dl>
body
>
html
>

CSS 13 文字的排版

本例講解如何設定如下的文字樣式，通過這個設定來了解文字的排版，效果圖 一 html內容 主演 劉德華 葉德嫻 秦海璐 秦沛 導演 許鞍華 年代 2012 桃姐 葉德嫻 飾 是侍候了李家數十年的老傭人，把第二代的少爺羅傑 劉德華 飾 撫養 羅傑從事電影製片人，五十多歲了仍然獨身，而桃姐也繼續照顧羅傑，...

css基礎 3 文字樣式

字型作為網頁最常用元素，可以使用font設定字型大小 粗細 型別等等，總結常用樣式設定如下 屬性設定型別 注意font size 字型大小 單位常用px font family 字型族字型風格視開發需求而定 font weight 字型粗細 normal 400正常，bold 700加粗，數字沒有單...

CSS Tips1文字樣式

font variant 設定字型是否以小型大寫字母顯示。p font 字型設定簡寫組合方式。格式如下 是否傾斜 是否加粗 是否轉小型大寫 字型大小 字型名稱 p text decoration 設定文字出現下劃線 underline 讓文字的底部出現一條下劃線 overline 讓文字的頭部出現一...