亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

CSS常用文本樣式總結(jié)

cnblogs   發(fā)布時(shí)間：2016-04-01 11:43:23   作者：小火柴的藍(lán)色理想   我要評(píng)論
這篇文章主要介紹了CSS常用文本樣式的總結(jié),包括段落首字下沉、字體對(duì)齊、字母間間隔設(shè)置等人們?nèi)罕娤猜剺?lè)見(jiàn)的常用文本處理方法,需要的朋友可以參考下

　　CSS文本樣式是相對(duì)于內(nèi)容進(jìn)行的樣式修飾。由于在層疊關(guān)系中，內(nèi)容要高于背景。所以文本樣式相對(duì)而言更加重要。有些人對(duì)文本和字體樣式之間的不同不太了解，簡(jiǎn)單地講，文本是內(nèi)容，而字體則用于顯示這個(gè)內(nèi)容。本文將詳細(xì)介紹文本相關(guān)樣式。

首行縮進(jìn)
定義

　　首行縮進(jìn)是將段落的第一行縮進(jìn)，這是常用的文本格式化效果。一般地，中文寫(xiě)作時(shí)開(kāi)頭空兩格，類(lèi)似于此。

　　[注意]該屬性可以為負(fù)值

text-indent

　　值: <length> | <percentage> | inherit

　　初始值: 0

　　應(yīng)用于: 塊級(jí)元素(包括block和inline-block)

　　繼承性: 有

　　百分?jǐn)?shù): 相對(duì)于包含塊的寬度
201641113443838.png (262×58)

應(yīng)用

懸掛縮進(jìn)

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. div{   
  2.     width: 200px;   
  3.     border: 1px solid black;   
  4.     text-indent: -1em;//關(guān)鍵代碼   
  5.     padding-left: 1em;//關(guān)鍵代碼   
  6. }  

201641113507170.png (213×160)

首字下沉

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. div{   
  2.     width: 200px;   
  3.     border: 1px solid black;   
  4.     text-indent: 0.5em;   
  5. }   
  6. div:first-letter{   
  7.     font-size: 30px;   
  8.     float: left;   
  9. }    

201641113525388.png (199×178)

水平對(duì)齊
定義

　　水平對(duì)齊是影響一個(gè)元素中的文本的水平對(duì)齊方式。

text-align

　　值: left | center | right | justify | inherit

　　初始值: left

　　應(yīng)用于: 塊級(jí)元素(包括block和inline-block)

　　繼承性: 有
201641113548513.png (259×93)

兩端對(duì)齊

　　當(dāng)水平對(duì)齊方式為兩端對(duì)齊時(shí)，word-spacing可能會(huì)調(diào)整，以便文本在整行中正好放下。如果為letter-spacing指定一個(gè)長(zhǎng)度值，則letter-spacing不會(huì)兩端對(duì)齊影響，除非letter-spacing值為normal。
201641113607256.png (274×58)

IE兼容

　　對(duì)于IE7-瀏覽器來(lái)說(shuō)，使用text-align不僅會(huì)改變文本的水平對(duì)齊方式，也會(huì)改變后代塊級(jí)元素的水平對(duì)齊方式

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .box{   
  2.     width: 200px;   
  3.     height: 200px;   
  4.     background-color: pink;   
  5.     border: 1px solid black;   
  6.     text-align: rightright;   
  7. }       
  8. .in{   
  9.     height: 100px;   
  10.     width: 100px;   
  11.     background-color: lightgreen;   
  12. }  
XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <div class="box">  
  2.     <div class="in">測(cè)試文字</div>  
  3. </div>  

201641113626052.gif (1279×751)

字間隔
　　字間隔是指單詞間距，用來(lái)設(shè)置文字或單詞之間的間距。實(shí)際上，"字"表示的是任何非空白符字符組成的串，并由某種空白符包圍

　　[注意]單詞之間用空格分開(kāi)，單詞之間的間距 = word-spacing + 空格大小

　　[注意]字間隔可為負(fù)值

word-spacing

　　值: <length> | normal | inherit

　　初始值: normal(默認(rèn)為0)

　　應(yīng)用于: 所有元素

　　繼承性: 有
201641113748421.png (276×56)

字母間隔
　　字母間隔是指字符間距

　　[注意]字母間隔可為負(fù)值

letter-spacing

　　值: <length> | normal | inherit

　　初始值: normal(默認(rèn)為0)

　　應(yīng)用于: 所有元素

　　繼承性: 有
201641113809863.png (268×59)

文本轉(zhuǎn)換
　　文本轉(zhuǎn)換用于處理英文的大小寫(xiě)轉(zhuǎn)換

text-transform

　　值: uppercase(全大寫(xiě)) | lowercase(全小寫(xiě)) | capitalize(首字母大寫(xiě)) | none | inherit

　　初始值: none

　　應(yīng)用于: 所有元素

　　繼承性: 有
201641113837425.png (273×114)

文本修飾
定義

　　文本修飾用于為文本提供修飾線(xiàn)

　　[注意]文本修飾線(xiàn)的顏色與文本顏色相同

text-decoration

　　值: none | [underline(下劃線(xiàn)) || overline(上劃線(xiàn)) || line-through(中劃線(xiàn))] | inherit

　　初始值: none

　　應(yīng)用于: 所有元素

　　繼承性: 無(wú)

繼承

　　文本修飾屬性無(wú)法繼承，意味著子元素文本上的任何修飾線(xiàn)與父元素的顏色相同。子元素文本上的修飾線(xiàn)實(shí)際上是父元素的，只是正好"經(jīng)過(guò)"而已。
201641113934935.png (265×59)

　[注意]互不沖突的文本修飾線(xiàn)可出現(xiàn)多條

201641113950064.png (267×55)

相關(guān)文章

  • css文字控制與css文本樣式示例和屬性

    這篇文章主要介紹了css文字控制與css文本樣式示例和屬性,需要的朋友可以參考下
    2014-04-16

  • Css樣式--文本樣式詳解

    文本樣式包括所謂的文本縮進(jìn)：text-indent、水平對(duì)齊：text-align:center;left;right、字間隔和字母間距、字符轉(zhuǎn)換：text-transform等等，在本文將為大家詳細(xì)介紹下，感興
    2013-09-24

最新評(píng)論