CSS權(quán)威指南讀書筆記-文本屬性

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

縮進(jìn)文本

將Web頁(yè)面上一個(gè)段落的第一行縮進(jìn)使用text-indent

text-indent<length>|<percentage>|inherit}

其值可以是負(fù)值酌泰,負(fù)值能夠?qū)崿F(xiàn)懸掛縮進(jìn)的效果.
可以使用百分?jǐn)?shù)劫侧,為相對(duì)父元素的縮進(jìn)寬度,比如10% 即縮進(jìn)其父元素寬度的10%
該屬性可以繼承

水平對(duì)齊

text-align 屬性值包含 left | center | right | justify | inherit
justify是兩段對(duì)齊

垂直對(duì)齊
行高line-height

line-height值和字體大小之差就是行間距
line-height屬性可以繼承
可以指定一個(gè)數(shù)横漏,來(lái)作為縮放因子,比如p{line-height:1}

指定一個(gè)數(shù)時(shí),縮放因子將是繼承值而不是計(jì)算值桶良,這個(gè)數(shù)會(huì)應(yīng)用到該元素及所有子元素,所以各個(gè)子元素都根據(jù)自己的font-size來(lái)計(jì)算line-height

垂直對(duì)齊文本

vertical-align:baceline|sub|super|top|text-top|middle|bottom|text-bottom|<percentage>|<length>|inherit

  • baceline基線對(duì)齊
    一個(gè)元素的基線與其父元素對(duì)齊沮翔,瀏覽器默認(rèn)基線對(duì)齊

*如果一個(gè)元素沒(méi)有基線陨帆,比如圖片或者表單輸入元素,或者其他替換元素采蚀,那么該元素底端與其父元素的基線對(duì)齊 *

  • 上標(biāo)和下標(biāo)
    vertical-align:sub 會(huì)生聲明使一個(gè)元素變?yōu)橄聵?biāo)疲牵,其相對(duì)于父元素基線降低,super則相反榆鼠,該屬性不會(huì)改變文字大小纲爸,需要使用finet-size調(diào)整
  • 底端對(duì)齊
    vertical-align:bottom 將元素行內(nèi)框的底端與行框底端對(duì)齊。如果是text-bottom則只針對(duì)文本妆够,對(duì)于替換元素?zé)o效
  • 頂端對(duì)齊
    vertical-align:top text-top 分別為行的頂端對(duì)齊和文本的頂端對(duì)齊
  • 居中對(duì)齊
  • middle 往往應(yīng)用于圖像识啦,把行內(nèi)元素框的中點(diǎn)于父元素基線上方0.5ex處的一個(gè)點(diǎn)對(duì)齊,
  • 百分?jǐn)?shù)
    使用百分?jǐn)?shù)把元素基線相對(duì)父元素升高或降低指定的量责静,是相對(duì)于line-height設(shè)置的
  • 長(zhǎng)度對(duì)齊
    vertical-align:5px 會(huì)使元素上升5px反之下降
    所有垂直對(duì)齊元素的都會(huì)影響行高袁滥,根據(jù)行框的描述,其高度要包含最高行內(nèi)框的頂端和最低行內(nèi)框的底端

字間隔和字母間隔

字間隔 word-spacing:normal|<length>|inherit

*定義:字是任何非空白字符組成的串并由某種空白符包圍灾螃。因此采用像型文字或者非羅馬書寫的字體沒(méi)法指定字間隔题翻。

字母間隔 letter-spacing<length>

如果為letter-spacing指定一個(gè)寬度值,則不受text-align的影響腰鬼,如果為normal則使用text-align間隔可能會(huì)改變嵌赠。

文本轉(zhuǎn)換text-transform:uppercase|lowercase|capitalize|none|inherit

  • uppercase 和lowercase將文本轉(zhuǎn)換成全大寫或全小寫。
  • capitalize 將單詞首字母大寫

文本裝飾text-decoration:none|underline|overline||line-though|blink|inherit

  • underline 文本下劃線
  • overline 文本上劃線
    -line-through 文本中劃貫穿線
    -blink閃爍
    text-decoration不可以繼承

文本陰影 text-shadow:color||<length>||<length>||<length>

text-shadow:green 5px 0.5em
陰影顏色 陰影與文本的偏移距離兩個(gè)length(右 下) 模糊半徑length(可選)

處理空白符white-space:normal|nowrap|pre|pre_wrap|pre-line|

  • pre:空白字符不會(huì)被忽略
  • nowrap:防止文本換行熄赡,除非使用

    -pre-wrap:保留空白符序列并正常換行
    -pre-line:合并空白符序列姜挺,保留換行符

文本方向

direction:ltr|rtl|inherit
默認(rèn)ltr從左到右

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市彼硫,隨后出現(xiàn)的幾起案子炊豪,更是在濱河造成了極大的恐慌凌箕,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,204評(píng)論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件词渤,死亡現(xiàn)場(chǎng)離奇詭異牵舱,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)缺虐,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,091評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門芜壁,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人高氮,你說(shuō)我怎么就攤上這事慧妄。” “怎么了剪芍?”我有些...
    開封第一講書人閱讀 164,548評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵塞淹,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我紊浩,道長(zhǎng)窖铡,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,657評(píng)論 1 293
  • 正文 為了忘掉前任坊谁,我火速辦了婚禮费彼,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘口芍。我一直安慰自己箍铲,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,689評(píng)論 6 392
  • 文/花漫 我一把揭開白布鬓椭。 她就那樣靜靜地躺著颠猴,像睡著了一般。 火紅的嫁衣襯著肌膚如雪小染。 梳的紋絲不亂的頭發(fā)上翘瓮,一...
    開封第一講書人閱讀 51,554評(píng)論 1 305
  • 那天,我揣著相機(jī)與錄音裤翩,去河邊找鬼资盅。 笑死,一個(gè)胖子當(dāng)著我的面吹牛踊赠,可吹牛的內(nèi)容都是我干的呵扛。 我是一名探鬼主播,決...
    沈念sama閱讀 40,302評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼筐带,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼今穿!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起伦籍,我...
    開封第一講書人閱讀 39,216評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤蓝晒,失蹤者是張志新(化名)和其女友劉穎腮出,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體拔创,經(jīng)...
    沈念sama閱讀 45,661評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡利诺,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,851評(píng)論 3 336
  • 正文 我和宋清朗相戀三年富蓄,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了剩燥。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,977評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡立倍,死狀恐怖灭红,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情口注,我是刑警寧澤变擒,帶...
    沈念sama閱讀 35,697評(píng)論 5 347
  • 正文 年R本政府宣布,位于F島的核電站寝志,受9級(jí)特大地震影響娇斑,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜材部,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,306評(píng)論 3 330
  • 文/蒙蒙 一毫缆、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧乐导,春花似錦苦丁、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,898評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至棵磷,卻和暖如春蛾狗,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背仪媒。 一陣腳步聲響...
    開封第一講書人閱讀 33,019評(píng)論 1 270
  • 我被黑心中介騙來(lái)泰國(guó)打工沉桌, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人规丽。 一個(gè)月前我還...
    沈念sama閱讀 48,138評(píng)論 3 370
  • 正文 我出身青樓蒲牧,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親赌莺。 傳聞我的和親對(duì)象是個(gè)殘疾皇子冰抢,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,927評(píng)論 2 355

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

  • 縮進(jìn)和水平對(duì)齊 縮進(jìn) text-indent:length | percentage | inherit將Web頁(yè)...
    exialym閱讀 213評(píng)論 0 2
  • 1.CSS簡(jiǎn)介 Cascading Style Sheet 層疊樣式表 主要用來(lái)定義頁(yè)面中的表現(xiàn),HTML 描述頁(yè)...
    hyt222閱讀 827評(píng)論 0 0
  • 偽類選擇器 a:visited { color : red } 指示作為已訪問(wèn)地址超鏈接的所有錨 a:link {...
    markpapa閱讀 404評(píng)論 0 1
  • 縮進(jìn)與水平對(duì)齊 縮進(jìn)文本 text-indent 應(yīng)用元素:塊級(jí)元素 繼承型: 繼承 取值: 長(zhǎng)度值或者百分?jǐn)?shù) 水...
    hcxowe閱讀 411評(píng)論 0 0
  • 大小 {font-size: x-large;}(特大) xx-small;(極小) 一般中文用不到艘狭,只要用數(shù)值就...
    小丶楓閱讀 666評(píng)論 0 0