CSS學(xué)習(xí)4(文本屬性)

縮進(jìn)和水平對(duì)齊

縮進(jìn)

text-indent:length | percentage | inherit
將Web頁(yè)面上一個(gè)段落的第一行縮進(jìn)簸州,用于塊級(jí)元素。

水平對(duì)齊

text-align:left | center | right | justify | inherit
用于塊級(jí)元素
justify是兩端對(duì)齊文本干毅,它將使文本行的兩端都放在父元素的邊界上,調(diào)整字符間距泼返,使每行一樣長(zhǎng)硝逢。
這個(gè)只會(huì)控制塊級(jí)元素中的行內(nèi)元素,要將塊級(jí)元素或表元素居中绅喉,要通過(guò)在這些元素上適當(dāng)?shù)卦O(shè)置左渠鸽、右外邊距來(lái)實(shí)現(xiàn)。

垂直對(duì)齊

行高

line-height屬性是指文本行基線(xiàn)之間的距離柴罐,而不是字體的大小徽缚,它確定了將各個(gè)元素框的高度增加或減少多少。
line-height控制了行間距丽蝎,這是文本行之間超出字體大小的額外空間猎拨。換句話(huà)說(shuō),line-height值和字體大小之差就是行間距屠阻。
值:(length) | (percentage)| (number)| normal | inherit
其中百分比是相對(duì)于元素的字體大小而言的。
當(dāng)一個(gè)塊級(jí)元素從另一個(gè)元素繼承l(wèi)ine-height時(shí)额各,問(wèn)題會(huì)變得更為復(fù)雜国觉。line-height值從父元素繼承時(shí),要從父元素計(jì)算虾啦,而不是在子元
素上計(jì)算麻诀。這種情況會(huì)發(fā)生在父元素的line-height是em,percentage等值時(shí)傲醉。兩種結(jié)局辦法蝇闭,一種是為每個(gè)元素都寫(xiě)line-height,不使用繼承硬毕。另一種指定數(shù)字值呻引,這個(gè)值將是一個(gè)相對(duì)font-size的縮放因子,這個(gè)值會(huì)直接繼承而不是繼承計(jì)算值吐咳。

#div4{
  font-size: 20px;
  //line-height:1em;
  line-height:1;
  p{
    text-indent: 1.5em;
    text-align: center;
    font-size: 30px;
    //when div4's line-height is 1em, here we seem to inherit 1em. But actually, we inherit a computed value from div4 which is 20px
    //when div4 line-height is 1, we inherit 1,and compute it here using self's font-size.
    line-height:inherit;
  }

}

構(gòu)造文本行

文本行中的每個(gè)元素都會(huì)生成一個(gè)內(nèi)容區(qū)逻悠,這由字體的大小確定元践。這個(gè)內(nèi)容區(qū)則會(huì)生成一個(gè)行內(nèi)框(inline box),如果不存在其他因素童谒,這
個(gè)行內(nèi)框就完全等于該元素的內(nèi)容區(qū)单旁,由line-height產(chǎn)生的行間距就是增加或減少各行內(nèi)框高度的因素之一。

垂直對(duì)齊文本

vertical-align
baseline | sub | super | top | text-top | middle | bottom | text-bottom | (percentage) | (length) | inherit

在CSS中饥伊,vertical-align屬性只應(yīng)用于行內(nèi)元素和替換元素象浑,如圖像和表單輸入元素。vertical-align屬性不能繼承琅豆。
vertical-align不影響塊級(jí)元素中內(nèi)容的對(duì)齊融柬。不過(guò),可以用它來(lái)影響表單元格中元素的垂直對(duì)齊趋距。

字間隔和字母間隔

字間隔

word-spacing:(length)| normal | inherit
這個(gè)只對(duì)英文管用粒氧,詞之間的距離。

字母間隔

letter-spacing:(length) | normal | inherit

文本轉(zhuǎn)換

text-transform:uppercase | lowercase | capitalize | none | inherit

文本裝飾

text-decoration:none | [underline || overline || line-through || blink] | inherit

處理空白符

white-space:normal | nowrap | pre | pre-wrap | pre-line | inherit
使用這個(gè)屬性节腐,可以影響瀏覽器處理字之間和文本行之間的空白符的方式外盯。從某種程度上講,默認(rèn)的XHTML處理已經(jīng)完成了空白符處理:它會(huì)把所有空白符合并為一個(gè)空格翼雀。所以在Web瀏覽器中顯示時(shí)饱苟,各個(gè)字之間只會(huì)顯示一個(gè)空格,而且忽略元素中的換行狼渊。
如果white-space為pre箱熬,則不會(huì)忽略元素中的換行和空格。
與之相對(duì)的值是nowrap狈邑,它會(huì)防止元素中的文本換行城须,除非使用了一個(gè)br元素。

值 pre-line normal nowrap pre pre-wrap
空白符 合并 合并 合并 保留 保留
換行符 保留 忽略 忽略 保留 保留
自動(dòng)換行 允許 允許 不允許 不允許 允許

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末米苹,一起剝皮案震驚了整個(gè)濱河市糕伐,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌蘸嘶,老刑警劉巖良瞧,帶你破解...
    沈念sama閱讀 216,496評(píng)論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異训唱,居然都是意外死亡褥蚯,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,407評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門(mén)况增,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)赞庶,“玉大人,你說(shuō)我怎么就攤上這事〕局矗” “怎么了舍哄?”我有些...
    開(kāi)封第一講書(shū)人閱讀 162,632評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)誊锭。 經(jīng)常有香客問(wèn)我表悬,道長(zhǎng),這世上最難降的妖魔是什么丧靡? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,180評(píng)論 1 292
  • 正文 為了忘掉前任蟆沫,我火速辦了婚禮,結(jié)果婚禮上温治,老公的妹妹穿的比我還像新娘饭庞。我一直安慰自己,他們只是感情好熬荆,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,198評(píng)論 6 388
  • 文/花漫 我一把揭開(kāi)白布舟山。 她就那樣靜靜地躺著,像睡著了一般卤恳。 火紅的嫁衣襯著肌膚如雪累盗。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 51,165評(píng)論 1 299
  • 那天突琳,我揣著相機(jī)與錄音若债,去河邊找鬼。 笑死拆融,一個(gè)胖子當(dāng)著我的面吹牛蠢琳,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播镜豹,決...
    沈念sama閱讀 40,052評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼傲须,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了逛艰?” 一聲冷哼從身側(cè)響起躏碳,我...
    開(kāi)封第一講書(shū)人閱讀 38,910評(píng)論 0 274
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎散怖,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體肄渗,經(jīng)...
    沈念sama閱讀 45,324評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡镇眷,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,542評(píng)論 2 332
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了翎嫡。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片欠动。...
    茶點(diǎn)故事閱讀 39,711評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出具伍,到底是詐尸還是另有隱情翅雏,我是刑警寧澤,帶...
    沈念sama閱讀 35,424評(píng)論 5 343
  • 正文 年R本政府宣布人芽,位于F島的核電站望几,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏萤厅。R本人自食惡果不足惜橄抹,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,017評(píng)論 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望惕味。 院中可真熱鬧楼誓,春花似錦、人聲如沸名挥。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,668評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)禀倔。三九已至榄融,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間蹋艺,已是汗流浹背剃袍。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,823評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留捎谨,地道東北人民效。 一個(gè)月前我還...
    沈念sama閱讀 47,722評(píng)論 2 368
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像涛救,于是被迫代替她去往敵國(guó)和親畏邢。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,611評(píng)論 2 353

推薦閱讀更多精彩內(nèi)容

  • 選擇qi:是表達(dá)式 標(biāo)簽選擇器 類(lèi)選擇器 屬性選擇器 繼承屬性: color检吆,font舒萎,text-align,li...
    wzhiq896閱讀 1,749評(píng)論 0 2
  • 選擇qi:是表達(dá)式 標(biāo)簽選擇器 類(lèi)選擇器 屬性選擇器 繼承屬性: color蹭沛,font臂寝,text-align,li...
    love2013閱讀 2,314評(píng)論 0 11
  • 1.CSS簡(jiǎn)介 Cascading Style Sheet 層疊樣式表 主要用來(lái)定義頁(yè)面中的表現(xiàn)摊灭,HTML 描述頁(yè)...
    hyt222閱讀 827評(píng)論 0 0
  • 學(xué)習(xí)CSS的最佳網(wǎng)站沒(méi)有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_閱讀 1,050評(píng)論 0 1
  • 一咆贬,HTML有N多標(biāo)簽,根據(jù)顯示的類(lèi)型帚呼,主要可以分為3大類(lèi) 1掏缎,塊級(jí)標(biāo)簽 獨(dú)占一行的標(biāo)簽 能隨時(shí)設(shè)置寬度和高度(比...
    張不二01閱讀 734評(píng)論 0 4