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