css小知識點總結

背景

一、背景色  background-color 屬性爲元素設置背景色。這個屬性接受任何合法的顏色值。 例：這條規則把元素的背景設置爲灰色：p {background-color: gray;}

二、背景圖像   background-image 屬性爲元素設置背景圖像。background-image 屬性的默認值是 none，表示背景上沒有放置任何圖像。  例：若是須要設置一個背景圖像，必須爲這個屬性設置一個 URL 值： body {background-image: url(/i/eg_bg_04.gif);}

三、背景重複  background-repeat屬性值 repeat 致使圖像在水平垂直方向上都平鋪，就像以往背景圖像的一般作法同樣。repeat-x 和 repeat-y 分別致使圖像只在水平或垂直方向上重複，no-repeat 則不容許圖像在任何方向上平鋪。默認地，背景圖像將從一個元素的左上角開始。 例： body   {     background-image: url(/i/eg_bg_03.gif);   background-repeat: repeat-y;   } 

 四、背景定位  background-position 屬性改變圖像在背景中的位置： 例：在 body 元素中將一個背景圖像居中放置： body   {       background-image:url('/i/eg_bg_03.gif');     background-repeat:no-repeat;     background-position:center;   } 

 五、背景關聯  您能夠經過 background-attachment 屬性防止這種滾動。經過這個屬性，能夠聲明圖像相對於可視區是固定的（fixed），所以不會受到滾動的影響：  body    {    background-image:url(/i/eg_bg_02.gif);   background-repeat:no-repeat;   background-attachment:fixed   } 

文本

一、文本顏色：text-indent 屬性：  例：p {background-color: gray;}  a) 使用負值： 例：{text-indent: -5em;}  注意：在爲 text-indent 設置負值時要小心，若是對一個段落設置了負值，那麼首行的某些文本可能會超出瀏覽器窗口的左邊界。爲了不出現這種顯示問題，建議針對負縮進再設置一個外邊距或一些內邊距： p {text-indent: -5em; padding-left: 5em;} b) 使用百分比值    例：p {text-indent: 20%;}

二、水平對齊：text-algin屬性：值 left、right 和 center 會致使元素中的文本分別左對齊、右對齊和居中。

三、字間隔：word-spacing 屬性  word-spacing 屬性接受一個正長度值或負長度值。若是提供一個正長度值，那麼字之間的間隔就會增長。爲 word-spacing 設置一個負值，會把它拉近：  p.spread {word-spacing: 30px;} p.tight {word-spacing: -0.5em;}  <p class="spread">This is a paragraph. The spaces between words will be decreased.</p> <p class="tight">This is a paragraph. The spaces between words will be increased.</p>  

四、字符轉換text-transform 屬性  text-transform 屬性處理文本的大小寫。這個屬性有 4 個值：none 、uppercase 、lowercase 、capitalize 。  默認值 none 對文本不作任何改動，將使用源文檔中的原有大小寫。顧名思義，uppercase 和 lowercase 將文本轉換爲全大寫和全小寫字符。最後，capitalize 只對每一個單詞的首字母大寫。  例：h1 {text-transform: uppercase}

五、文本裝飾  text-decoration 屬性，這是一個頗有意思的屬性，它提供了不少很是有趣的行爲。 text-decoration 有 5 個值：none 、underline、overline 、line-through、blink。  不出所料，underline 會對元素加下劃線，就像 HTML 中的 U 元素同樣。overline 的做用剛好相反，會在文本的頂端畫一個上劃線。值 line-through 則在文本中間畫一個貫穿線，等價於 HTML 中的 S 和 strike 元素。blink 會讓文本閃爍，相似於 Netscape 支持的頗招非議的 blink 標記。  a {text-decoration: none;} 

 六、direction 屬性規定文本的方向 / 書寫方向。  該屬性指定了塊的基本書寫方向，以及針對 Unicode 雙向算法的嵌入和覆蓋方向。不支持雙向文本的用戶代理能夠忽略這個屬性。 實例：  把文本方向設置爲「從右向左」：div  {  direction: rtl  }