本節我們講文字樣式,像比如設定文字顏色呀,首行縮排、水平對齊等,可以對網頁進行排本設定等。
將要學習的文字屬性有如下幾個:
首先我們來講文字顏色設定,前面我們講過一節關於如何設定顏色,所以想必大家對如何給文字設定顏色不會。
示例:
例如給下面的
標籤中的 標籤中的文字,顏色設定為粉色:
盛年不重來,一日難再晨。及時宜自勉,歲月不待人。
css 樣式**:
span
或者使用十六進製制顏色值:
span
一般我們在寫作文的時候,所有段落的首行都會首行縮排兩個字,而我們如果希望在網頁中的段落也能實現首行縮排呢,這就可以通過 css 中的 text-index 屬性來設定首行文字的縮排。
text-index 屬性直接將縮排距離以數字表示,單位為 em 或 px。一般我們使用 em 更多,通常將值設定為 2em,表示縮排兩個字元。
em 是相對單位,表示的長度相當於文字中字元的倍數,會根據字元的大小,自動適應,空出設定字元的倍數。
text-index 屬性允許使用負值,如果使用負值,那麼首行會被縮排到左邊。
示例:
實現第乙個段落和最後乙個段落的首行縮排:
css學習(9xkd.com)
蒹葭蒼蒼,白露為霜。所謂伊人,在水一方。
溯洄從之,道阻且長。溯游從之,宛在水**。
蒹葭萋萋,白露未晞。所謂伊人,在水之湄。
溯洄從之,道阻且躋。溯游從之,宛在水中坻。
蒹葭採採,白露未已。所謂伊人,在水之涘。
溯洄從之,道阻且右。溯游從之,宛在水中沚。
css 樣式**:
.index
在瀏覽器中的演示:
text-align 屬性用於設定元素中文字的水平對齊方式。
屬性值有下面幾種:
示例:
看一下不同屬性值能實現的效果:
css學習(9xkd.com)
內容居中
內容居左
內容居右
內容不新增樣式
css 樣式**:
.text1.text2.text3
在瀏覽器中的演示:
line-height 用於設定行高,也就是設定行間的距離。
屬性值可以是下面幾種:
一般我們使用數字來表示,單位為 px,如果不新增單位,則表示按倍數表示,這時行高是字型大小的倍數。
示例:
例如下面第乙個
標籤中的內容字型大小為14px,將行高設定為 21px,和將行高設定為 2(字型大小的兩倍) 是一樣的效果:
魯迅的成功,有乙個重要的秘訣,就是珍惜時間。魯迅十二歲在紹興城讀私塾的時候,父親正患著重病,兩個弟弟年紀尚幼,魯迅不僅經常上當鋪,跑藥店,還得幫助母親做家務,為免影響學業,他必須作好精確的時間安排。
此後,魯迅幾乎每天都在擠時間。他說過:「時間,就像海綿裡的水,只要你擠,總是有的。」魯迅讀書的興趣十分廣泛,又喜歡寫作,他對於民間藝術,特別是傳說、繪畫,也深切愛好。
css 樣式**:
.text
在瀏覽器中的演示:
text-decoration 屬性用於設定文字的裝飾,也就是給文字設定某種效果,例如下劃線、刪除線等。
屬性值可以是下面幾種:
示例:
預設文字
設定下劃線
設定上劃線
設定刪除線
文字閃爍
去掉鏈結的下劃線
css 樣式**:
.p1.p2.p3.p4a
在瀏覽器中的演示: CSS 文字行(總結筆記)
1 什麼是行高?行高指文字基線間的垂直距離,行高在數值上等於字型大小 行距。行高是可繼承的line height 是可以繼承的。父元素不同的行高單位影響子元素的繼承 父元素的行高為 24px 時,子元素直接繼承此固定的行高 父元素的行高為 150 或 1.5em 時,會根據父元素的字型大小先計算出行...
css文字屬性 文字轉換(CSS屬性)
css文字屬性 text transform 文字轉換 繼承 this property controls if and how an element s text content is capitalized.此屬性控制是否以及如何大寫元素的文字內容。these style rules makeh...
CSS文字屬性
一 可以被繼承的屬性 font size font family font weight font style line height color text align text indent 二 文字大小 屬性值為數值型,必須給屬性值加單位,屬性值為0時除外。單位可以是pt px em 9pt 1...