常见文本样式及标签
本文設(shè)計(jì)到常見對(duì)文檔的處理樣式，和塊，行標(biāo)簽的特點(diǎn)。
沒用什么重要內(nèi)容，只是自己的一些知識(shí)點(diǎn)的回憶，對(duì)以前知識(shí)的一個(gè)梳理過(guò)程，望某懶蟲加油！！！
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>文本樣式和塊、行、內(nèi)斂標(biāo)簽</title><style>div{color: red;/*這是顏色，對(duì)于顏色的幾種表示方式，大家都懂不用多說(shuō)*//*text-align: left;text-align: right;text-align: center;*//*text-align: justify;*//*這是文本排列對(duì)其方式，對(duì)于justify的意思就是，在一個(gè)容器里展開寬度的相等的。*//*text-decoration: overline;text-decoration:line-through;*/text-decoration: underline;/*這是對(duì)文本進(jìn)行劃線裝飾，比如商場(chǎng)的大甩賣在價(jià)格中間劃一道線*//*text-transform:uppercase;text-transform:lowercase;*/text-transform: capitalize;/*這是文本的轉(zhuǎn)換，全部轉(zhuǎn)換成大寫，或者小寫，對(duì)于capitalize,意思是將每一個(gè)單詞的首字母轉(zhuǎn)換成大寫*//*text-indent:2em;*//*這是文本縮進(jìn)，通常情況下，em承接父級(jí)字體px,2em就是剛好縮進(jìn)2字符。有時(shí)候用text-indent:-9999px;來(lái)偏移掉字體，偏離可見區(qū)域。*//*letter-spacing:10px;*//*設(shè)置字母間的間距*//*line-height: 30px;*//*這是文本的行高，通常與height搭配，使文字垂直居中*/text-shadow: 5px 5px 10px yellow;/*這是文字的陰影，第一個(gè)5px是水平方向，第二個(gè)5px是垂直方向,注意10px是陰影的模糊范圍。和box-shadow類似*/font-family: 微軟雅黑;font-style: italic;word-spacing: 10px;vertical-align: center;white-space: nowrap;/*當(dāng)然還有不經(jīng)常用到的這些，知道意思就行，用到的時(shí)候能想到，W3CSchool，菜鳥教程必備的工具。對(duì)于文本樣式還有很多簡(jiǎn)寫的方式，font,background,border,padding,margin,*//* 寫到了這么多文本樣式，突然想到經(jīng)常遇到的一個(gè)問題，就是要求你在一行文本中，文本超出寬度溢出顯示省略號(hào)，css解決方案如下：*/width: 100px;/*給出你顯示文本的范圍，當(dāng)然如果用em來(lái)代替效果會(huì)更好，不會(huì)出出現(xiàn)半截在外面的丑態(tài)*/overflow: hidden;/*讓超出部分隱藏*//*white-space: nowrap;*//*前面剛提到，意思是強(qiáng)制不換行，這是對(duì)一行文本的操作，對(duì)于多行文本，一般用js來(lái)寫效果更好*/text-overflow: ellipsis;/*文本隱藏后添加省略號(hào)，通過(guò)這幾句話就可以實(shí)現(xiàn)文本溢出顯示省略號(hào)了*/}</style> </head> <body><div>這是一行文字！</div><!-- 這兩天寫著寫著寫煩了，就納悶，這么簡(jiǎn)單的東西花時(shí)間寫干什么，寫了8百遍的東西，寫了也算是一種回顧，以后看到了，告訴自己學(xué)過(guò)這個(gè)啊（苦笑） --><!-- 接下來(lái)讓我們閑扯一下常見標(biāo)簽有哪些，當(dāng)然他們是有分類的比如，塊標(biāo)簽，內(nèi)斂屬性的標(biāo)簽以及內(nèi)斂塊。下面我們一一講解他們的特點(diǎn)和區(qū)別 --><!-- 對(duì)于塊標(biāo)簽來(lái)說(shuō)，他們獨(dú)一無(wú)二1,獨(dú)占一行2，支持所有的css樣式3，寬度會(huì)繼承父級(jí)100%（默認(rèn)情況） --><div style="height:20px;padding:10px 10px;background-color: yellow;"><div style="background-color: red;">寬度繼承</div></div><!-- 常見的塊標(biāo)簽有標(biāo)題標(biāo)簽，列表標(biāo)簽等 --><!-- 對(duì)于行標(biāo)簽1，內(nèi)容撐開高度2，不支持寬高，不支持上下的margin，padding（對(duì)于設(shè)置相應(yīng)的屬性，沒用效果）3,同屬性的標(biāo)簽排在同一排4，代碼換行被解析 --><!-- 行標(biāo)簽常見的有span,a,strong,em(斜體)等寫網(wǎng)頁(yè)的時(shí)候經(jīng)常會(huì)設(shè)置寬高沒用效果，可能就是行標(biāo)簽的作為，看情況轉(zhuǎn)換成塊或內(nèi)斂快就行，有時(shí)候被定位或者浮動(dòng)了就不需要設(shè)置。 --><!-- 通常用a標(biāo)簽可以設(shè)置錨點(diǎn) --><a href="#tips">訪問到id名為tip的位置</a><a id="tips" href="javascripts;">我的名字叫tips</a><!-- 標(biāo)簽a有target屬性，_self默認(rèn)在當(dāng)前頁(yè)打開_blank在新的窗口打開 --><!-- 對(duì)于內(nèi)聯(lián)塊標(biāo)簽1，內(nèi)容撐開寬度2,同屬性的標(biāo)簽排在同一排3，支持所有的css樣式4，代碼換行被解析 --><!-- 常見的內(nèi)聯(lián)塊標(biāo)簽有img標(biāo)簽，注意當(dāng)頁(yè)面加入img時(shí)，要指定它的寬高，這樣當(dāng)頁(yè)面加載，或者維護(hù)人員加入圖片，保證圖片不變形 --> </body> </html>
?
總結(jié)
- 上一篇： css的使用
- 下一篇： border，padding，margi