屬性

用途

語法（一些寫法）

font-family

設定字型型別

1）該屬性主要用來指定文字字型型別，例如：仿宋、黑體、宋體

2）可以宣告一種字型，也可以宣告多種字型。在瀏覽器進行顯示的時候，會根據字型的順序從前到後，優先選擇

font-family: "宋體","仿宋","黑體"

font-size

設定字型大小

1）該屬性表示字號，用來控制字型的大小，一張好的網頁，肯定字型的大小是有所區別的。

2）如果您沒有規定字型大小，普通文字（比如段落）的預設大小是 16 畫素 (16px=1em)

font-size: larger;
font-size: 34px;

值非常多：推薦自己手寫數值大小

font-style

設定顯示效果

設定字型風格，也就是字型顯示的樣式

font-style: normal;

nomal：採用標準字型樣式進行顯示

italic

oblique：瀏覽器採用斜體方式顯示inherit：規定應該從父元素繼承字型樣式

font-weight

設定粗細

該屬性是設定字型的粗細，它可以讓你的文字呈現出不同的外觀（變粗或變細）

font-weight: bold;

取值範圍在：100-900

bold定義粗體，取值為700

bolder定義更粗的字型，取值在900

lighter定義更細的字型，取值在200

nomal定義正常字型，取值在400

font-variant

設定字母小轉大

該屬性可以將小寫字母，全部轉換成大寫字母進行顯示

font-variant: normal;

Normal：預設值。瀏覽器會顯示一個標準的字型。

small-caps：瀏覽器會顯示小型大寫字母的字型。

Inherit：規定應該從父元素繼承 font-variant屬性的值。

font

字型複合使用

字型複合屬性：

在網頁上，有的時候我們需要對文字資訊進行多種樣式渲染，這個時候，往往我們就需要定義很多的字型屬性，程式設計師用起來感覺非常的麻煩，就想去找一個能夠一次性就完成所有字型屬性設定的方案,那麼這個方案就是font

font: font-style font-variant font-weight font-size font-family;

例如：

font: normal normal bold 25px "楷體","仿宋";

注意：

1)必須全部寫完，並且嚴格按照以上順序才會生效，之間用空格隔開

2)font-style font-variant font-weight這前三個屬性之間可以交換順序，後面兩個必須嚴格按照順序

color

設定字型顏色

設定字型顏色，除了使用系統定義的屬性，還可以使用rgb設定，還可以使用#十六進位制進行設定

color: white;
color: rgb(255,255,255);
color: #FFFFFF;

屬性

用途

語法（一些語法）

text-shadow

陰影文字

咱們在顯示文字的時候，有的時候需要對某些文字新增陰影效果並且需要設定陰影顏色，而增強網頁的整體表現力。這個時候，我們就需要使用CSS定義的text-shadow。
text-shadow該屬性有4個屬性值,前2個為必填,後2個為選填

text-shadow: length length opacity color;

text-shadow: 水平位移 垂直位移 陰影半徑 字型顏色;

例如:

text-shadow: 0.5em 2px 6em red;

屬性之間用空格隔開

第一個屬性表示水平位移，如果為負值，陰影向左移，為正值，陰影向右移；

第二個屬性表示垂直位移，為負值，陰影向下移，為正值，陰影向上移；

第三個屬性表示陰影半徑

第四個屬性表示字型顏色

text-overflow

溢位文字

在網頁顯示資訊的時候，如果指定的顯示區域寬度不夠，但是顯示內容又非常的多，其結果預設將會撐破指定的顯示區域，但這種顯示就破壞了我們網頁的整體感。所以我們需要一種手段，可以將超出顯示區域的內容，進行擷取或者是.......

text-overflow: clip;

屬性值有三個值：

cli：該屬性值,代表多餘的內容,直接裁切掉，預設值

ellipis：該屬性值,代表將多餘的內容,使用省略號代替

string：使用給定的字串來代表被修剪的文字。

注意：必須結合white-space:nowrap;（ 規定段落中的文字不進行換行）和overflow: hidden;（溢位部分隱藏）才會實現效果

word-wrap

自動換行

當在一個指定的區域，需要顯示非常多的內容，如果這些內容一行顯示不完，那麼我們可就使用該屬性來指定換行。該屬性於CSS3.0新增屬性

word-wrap: normal;

屬性值：

normal只在允許的斷字點換行（瀏覽器保持預設處理）。

break-word在長單詞或 URL 地址內部進行換行。

font-size-adjust

保持字型尺寸

有的時候在同一行文字中，由於文字可能採用不同的字型，或者採用不同的CSS樣式，這就可能會導致整段文字尺寸不一樣，整段文字看起來非常雜亂。此時就需要使用font-size-adjust來統一處理

font-size-adjust: none;

屬性值：

None 預設。如果此字型不可用，則不保持此字型的 x-height。

number小寫字母"x"的高度與"當前字型"高度之間的比率,取值0-1之間

屬性

用途

語法（一些語法）

word-spacing

單詞間隔

1）word-spacing 屬性增加或減少單詞間的空白（即字間隔）。

2）該屬性定義元素中字之間插入多少空白符。針對這個屬性，“字” 定義為由空白符包圍的一個字串。如果指定為長度值，會調整字之間的通常間隔；所以，normal 就等同於設定為 0。允許指定負長度值，這會讓字之間擠得更緊。

3）註釋：允許使用負值。

word-spacing: 15px;

屬性值：

normal預設。定義單詞間的標準空間。

length定義單詞間的固定空間。

inherit規定應該從父元素繼承 word-spacing 屬性的值。

注意：只對英文單詞有效，對中文無效

letter-spacing

字元間距

對所有字元有效

letter-spacing 屬性增加或減少字元間的空白（字元間距）。

該屬性定義了在文字字元框之間插入多少空間。由於字元字形通常比其字元框要窄，指定長度值時，會調整字母之間通常的間隔。因此，normal 就相當於值為 0。

letter-spacing: 20px;

屬性值：

Normal預設。規定字元間沒有額外的空間。

Length定義字元間的固定空間（允許使用負值）。

inherit規定應該從父元素繼承 letter-spacing 屬性的值。

text-decoration

文字修飾

在HTML頁面中，有些文字需要重點標記，比如加一個下劃線，告訴讀者這是個比較重要的資訊，在CSS中,，text-decoration此屬性可以幫助我們給某些文字加文字修飾效果，例如：下劃線、刪除線、閃爍......

text-decoration: underline;

屬性值：

none預設。定義標準的文字。

underline定義文字下的一條線。

overline定義文字上的一條線。

line-through定義穿過文字下的一條線。

blink定義閃爍的文字。

inherit規定應該從父元素繼承text-decoration屬性的值。

注：

bink大部分瀏覽器不支援

vertical-align

垂子對齊

HTML網頁程式設計中，對齊方式總體來說，可分為水平對齊和垂直對齊。水平對齊一般我用text-align屬性來實現，那麼垂直對齊，我們就需要使用vertical-align屬性。

該屬性定義行內元素的基線相對於該元素所在行的基線的垂直對齊。允許指定負長度值和百分比值。這會使元素降低而不是升高。在表單元格中，這個屬性會設定單元格框中的單元格內容的對齊方式。

注意：設定這個屬性在子元素設定才有效，它才有參照物件

vertical-align:屬性值;

屬性值：

baseline預設。元素放置在父元素的基線上。
sub垂直對齊文字的下標。
super垂直對齊文字的上標
top把元素的頂端與行中最高元素的頂端對齊
text-top把元素的頂端與父元素字型的頂端對齊
middle把此元素的中部與父元素的中部對齊。
bottom把元素的頂端與行中最低的元素的頂端對齊。
text-bottom把元素的底端與父元素字型的底端對齊。
length 定義固定值，可以使用負值，跟旁邊的文字或其他元素對比向上移動或向下移動固定長度。
%使用"line-height"屬性的百分比值來排列此元素，允許使用負值。
inherit規定應該從父元素繼承vertical-align屬性的值。

text-align

水平對齊

ext-align 屬性規定元素中的文字的水平對齊方式。

該屬性通過指定行框與哪個點對齊，從而設定塊級元素內文字的水平對齊方式。通過允許使用者代理調整行內容中字母和字之間的間隔，可以支援值 justify；不同使用者代理可能會得到不同的結果。

text-align: center;

屬性值：

left把文字排列到左邊。預設值：由瀏覽器決定。

right把文字排列到右邊。

center把文字排列到中間。

justify實現兩端對齊文字效果。

inherit規定應該從父元素繼承 text-align屬性的值。

start文字向行的開始邊緣對齊
end文字向行的結束邊緣對齊

text-transform

文字轉換

1）如果在HTML頁面中，需要完成大小字母之間的轉換，那麼就需要使用到該屬性。

2）這個屬性會改變元素中的字母大小寫，而不論源文件中文字的大小寫。如果值為 capitalize，則要對某些字母大寫，但是並沒有明確定義如何確定哪些字母要大寫，這取決於使用者代理如何識別出各個“詞”。

text-transform: 屬性值;

屬性值：

none預設。定義帶有小寫字母和大寫字母的標準的文字。

capitalize文字中的每個單詞以大寫字母開頭。

uppercase定義僅有大寫字母。

lowercase定義無大寫字母，僅有小寫字母。

inherit規定應該從父元素繼承 text-transform 屬性的值。

text-indent

文字縮排

一般的比較正式的文字段落中，都存在“空兩格"的說法，其目的主要是說明一個新的段落的開始，在網頁程式設計中，同樣存在這樣首行縮排的問題。此時需要使用的標籤是text-indente。

註釋：允許使用負值。如果使用負值，那麼首行會被縮排到左邊。

text-indent:2em;

1個em相當於一箇中文的寬度，只要是長度單位都可以。這些值是隨便設定的。

屬性值：

Length定義固定的縮排。預設值：0。

%定義基於父元素寬度的百分比的縮排。

inherit規定應該從父元素繼承 text-indent 屬性的值。

line-height

文字行高

line-height 屬性設定行間的距離（行高）。

該屬性會影響行框的佈局。在應用到一個塊級元素時，它定義了該元素中基線之間的最小距離而不是最大距離。

line-height 與 font-size 的計算值之差（在 CSS 中稱為“行間距”）分為兩半，分別加到一個文字行內容的頂部和底部。可以包含這些內容的最小框就是行框。

原始數字值指定了一個縮放因子，後代元素會繼承這個縮放因子而不是計算值。

line-height: 25px;

normal預設。設定合理的行間距。

number設定數字，此數字會與當前的字型尺寸相乘來設定行間距。

length設定固定的行間距。

%基於當前字型尺寸的百分比行間距。

inherit規定應該從父元素繼承 line-height屬性的值。

注意：

預設的大小為20px，小於20px就縮小間距，大於20px就增大間距，不允許出現負值。

white-space

空白處理

HTML頁面中，可能存在著非常多的空白區域，比如：空格、製表符、換行符或者其他空白符，它們都有可能會造成在頁面中，存在大量的空白區域，那麼這些空白區域任何處置?一般來說,瀏覽器都會自動忽略。但是有時候我們也需要其他處理方案，比如：保留空白區域。

white-space: normal;

屬性值：

normal預設。空白會被瀏覽器忽略。

Pre空白會被瀏覽器保留。其行為方式類似 HTML 中的 <pre> 標籤。

nowrap文字不會換行，文字會在在同一行上繼續，直到遇到 <br> 標籤為止。

pre-wrap保留空白符序列，但是正常地進行換行。

pre-line合併空白符序列，但是保留換行符。

inherit規定應該從父元素繼承 white-space 屬性的值。

direction和unicode-bidi

文字反排

網頁中絕大多數的文字都是採用“從左到右"的正常顯示方式，但是也不排除有些部分存在從右到左的閱讀顯示方法。如果遇到這種情況,就需要使用CSS中定義的direction和unicode-bidi。組合使用。

unicode-bidi: bidi-override;
direction: rtr;

unicode-bidi屬性值：

nomal原來是什麼順序就使用什麼順序

bidi-override表示使用反排技術，它將會嚴格按照direction指定的方向來完成文字排序

embed作用於inline元素，direction屬性的值指定嵌入層，在物件內部進行隱式重排序

dicration屬性值：

Inherit使用父元素的設定

ltr預設值，left to right，從左到右

rtl從右到左

注：只有

unicode-bidi: bidi-override;

這樣dicration的設定才會生效