CSS 文本格式

縮進文本 text-indent

注釋:允許使用負值鹊奖。如果使用負值长窄,那么首行會被縮進到左邊按厘。會產(chǎn)生一種“懸掛縮進”的效果。

描述
length 定義固定的縮進碳默。默認值:0贾陷。
% 定義基于父元素寬度的百分比的縮進。
inherit 規(guī)定應該從父元素繼承 text-indent 屬性的值嘱根。

可繼承

單詞間隔 word-spacing

定義

word-spacing 屬性增加或減少單詞間的空白(即字間隔)髓废。
該屬性定義元素中字之間插入多少空白符。針對這個屬性该抒,“字” 定義為由空白符包圍的一個字符串瓦哎。如果指定為長度值,會調(diào)整字之間的通常間隔柔逼;normal 就等同于設置為 0蒋譬。負長度值,會讓字之間擠得更緊愉适。

提示和注釋

注釋:CSS 把“字(word)”定義為任何非空白符字符組成的串犯助,并由某種空白字符包圍。這個定義沒有實際的語義维咸,它只是假設一個文檔包含由一個或多個空白字符包圍的字剂买。支持 CSS 的用戶代理不一定能確定一個給定語言中哪些是合法的字,而哪些不是癌蓖。盡管這個定義沒有多大價值瞬哼,不過它意味著采用象形文字的語言或非羅馬書寫體往往無法指定字間隔。
提示:利用這個屬性租副,可能會創(chuàng)建字間隔太寬的文檔坐慰,所以,使用 word-spacing 時要小心用僧。

字母間隔 letter-spacing

與 word-spacing 的區(qū)別在于结胀,字母間隔修改的是字符或字母之間的間隔赞咙。

字符轉(zhuǎn)換 text-transform

處理文本的大小寫

取值
  • none
  • uppercase 全大寫
  • lowercase 全小寫
  • capitalize 每個單詞的首字母大寫

文本裝飾 text-decoration

  • none
  • underline 下劃線
  • overline 上劃線
  • line-through 刪除線
  • blink

處理空白符 white-space

描述
normal 默認≡愀郏空白會被瀏覽器忽略攀操。
pre 空白會被瀏覽器保留。其行為方式類似 HTML 中的 <pre> 標簽秸抚。
nowrap 文本不會換行速和,文本會在在同一行上繼續(xù),直到遇到
標簽為止剥汤。
pre-wrap 保留空白符序列健芭,但是正常地進行換行。
pre-line 合并空白符序列秀姐,但是保留換行符。
inherit 規(guī)定應該從父元素繼承 white-space 屬性的值若贮。

可以影響瀏覽器處理字之間和文本行之間的空白符的方式

描述
normal 默認省有。空白會被瀏覽器忽略谴麦。
pre 空白會被瀏覽器保留蠢沿。其行為方式類似 HTML 中的 <pre> 標簽。
nowrap 文本不會換行匾效,文本會在在同一行上繼續(xù)舷蟀,直到遇到
標簽為止。
pre-wrap 保留空白符序列面哼,但是正常地進行換行野宜。
pre-line 合并空白符序列,但是保留換行符魔策。
inherit 規(guī)定應該從父元素繼承 white-space 屬性的值匈子。
空白符 換行符 自動換行
pre-line 合并 保留 允許
normal 合并 忽略 允許
nowrap 合并 忽略 不允許
pre 保留 保留 不允許
pre-wrap 保留 保留 允許

下面的表格總結(jié)了 white-space 屬性的行為:

空白符 換行符 自動換行
pre-line 合并 保留 允許
normal 合并 忽略 允許
nowrap 合并 忽略 不允許
pre 保留 保留 不允許
pre-wrap 保留 保留 允許

文本顏色 color

形式
  • 十六進制值 - 如: #FF0000
  • 一個RGB值 - 如: RGB(255,0,0)
  • 顏色名稱 - 如: red

W3C標準的CSS:如果定義了顏色屬性,還必須定義背景色屬性闯袒。

文本對齊方式 text-align

文本排列屬性是用來設置文本的水平對齊方式虎敦。

取值
  • left 默認值:由瀏覽器決定
  • right
  • center
  • justify
  • inherit 規(guī)定應該從父元素繼承 text-align 屬性的值。
    默認值:如果 direction 屬性是 ltr政敢,則默認值是 left其徙;如果 direction 是 rtl,則為 right喷户。

文本方向 direction

影響塊級元素中文本的書寫方向唾那、表中列布局的方向、內(nèi)容水平填充其元素框的方向褪尝、以及兩端對齊元素中最后一行的位置通贞。

取值
  • ltr 默認朗若。文本方向從左到右。
  • rtl 文本方向從右到左昌罩。
  • inherit 從父元素繼承 direction 屬性的值哭懈。

行高 line-height

說明

該屬性會影響行框的布局。在應用到一個塊級元素時茎用,它定義了該元素中基線之間的最小距離而不是最大距離遣总。
line-height 與 font-size 的計算值之差(行間距)分為兩半,分別加到一個文本行內(nèi)容的頂部和底部轨功⌒癯猓可以包含這些內(nèi)容的最小框就是行框。

取值
描述
normal 默認古涧。設置合理的行間距垂券。
number 該系數(shù)會與當前的font-size相乘來設置行間距。
length 固定的行間距羡滑。
% 基于當前字體尺寸的百分比行間距菇爪。
inherit 規(guī)定應該從父元素繼承 line-height 屬性的值。

CSS3文本屬性

文本陰影 text-shadow

可規(guī)定水平陰影柒昏、垂直陰影凳宙、模糊距離,以及陰影的顏色

語法

text-shadow: h-shadow v-shadow blur color;

自動換行word-wrap

語法

word-break: normal|break-all|keep-all;

描述
normal 使用瀏覽器默認的換行規(guī)則职祷。
break-all 允許在單詞內(nèi)換行氏涩。
keep-all 只能在半角空格或連字符處換行。

單詞太長的話就可能無法超出某個區(qū)域:
word-wrap 屬性允許您允許文本強制文本進行換行 - 即使這意味著會對單詞進行拆分:


image.png
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末有梆,一起剝皮案震驚了整個濱河市是尖,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌泥耀,老刑警劉巖析砸,帶你破解...
    沈念sama閱讀 212,383評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異爆袍,居然都是意外死亡首繁,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,522評論 3 385
  • 文/潘曉璐 我一進店門陨囊,熙熙樓的掌柜王于貴愁眉苦臉地迎上來弦疮,“玉大人,你說我怎么就攤上這事蜘醋⌒踩” “怎么了?”我有些...
    開封第一講書人閱讀 157,852評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長啸罢。 經(jīng)常有香客問我编检,道長,這世上最難降的妖魔是什么扰才? 我笑而不...
    開封第一講書人閱讀 56,621評論 1 284
  • 正文 為了忘掉前任允懂,我火速辦了婚禮,結(jié)果婚禮上衩匣,老公的妹妹穿的比我還像新娘蕾总。我一直安慰自己,他們只是感情好琅捏,可當我...
    茶點故事閱讀 65,741評論 6 386
  • 文/花漫 我一把揭開白布生百。 她就那樣靜靜地躺著,像睡著了一般柄延。 火紅的嫁衣襯著肌膚如雪蚀浆。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,929評論 1 290
  • 那天搜吧,我揣著相機與錄音市俊,去河邊找鬼。 笑死赎败,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的蠢甲。 我是一名探鬼主播僵刮,決...
    沈念sama閱讀 39,076評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼鹦牛!你這毒婦竟也來了搞糕?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,803評論 0 268
  • 序言:老撾萬榮一對情侶失蹤曼追,失蹤者是張志新(化名)和其女友劉穎窍仰,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體礼殊,經(jīng)...
    沈念sama閱讀 44,265評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡驹吮,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,582評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了晶伦。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片碟狞。...
    茶點故事閱讀 38,716評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖婚陪,靈堂內(nèi)的尸體忽然破棺而出族沃,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 34,395評論 4 333
  • 正文 年R本政府宣布脆淹,位于F島的核電站常空,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏盖溺。R本人自食惡果不足惜漓糙,卻給世界環(huán)境...
    茶點故事閱讀 40,039評論 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望咐柜。 院中可真熱鬧兼蜈,春花似錦、人聲如沸拙友。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,798評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽遗契。三九已至辐棒,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間牍蜂,已是汗流浹背漾根。 一陣腳步聲響...
    開封第一講書人閱讀 32,027評論 1 266
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留鲫竞,地道東北人辐怕。 一個月前我還...
    沈念sama閱讀 46,488評論 2 361
  • 正文 我出身青樓,卻偏偏與公主長得像从绘,于是被迫代替她去往敵國和親寄疏。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 43,612評論 2 350

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

  • 1.塊級元素和行內(nèi)元素 塊級(block-level)元素僵井;行內(nèi)(內(nèi)聯(lián)陕截、inline-level)元素。 塊元素的...
    饑人谷_小侯閱讀 1,991評論 1 4
  • 本文是我報的網(wǎng)易微專業(yè)之《前端工程師》的第一篇課堂筆記批什,以后會多多的整理些課堂筆記給你們看农曲,希望熱愛前端的朋友們可...
    荷小音閱讀 1,280評論 0 7
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,737評論 1 92
  • 學習CSS的最佳網(wǎng)站沒有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_閱讀 1,033評論 0 1
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理驻债,服務發(fā)現(xiàn)乳规,斷路器,智...
    卡卡羅2017閱讀 134,637評論 18 139