CSS 學(xué)習(xí)筆記第二節(jié)/背屬屬性和文本屬性
1,這里是 CSS 里面常用的幾個屬性和他的基本用法
下面詳細(xì)的介紹一下...
1.背景,其實就是 background 屬性
他是一個復(fù)合屬性,其實包括了很多:
background-color背景顏色background-image背景圖片background-repeat是否平鋪background-attachment是否固定background-position圖片的偏移位置
這些沒有什么難度,都很簡單,這里就不再贅述了.平時在使用的時候,我們一般都是復(fù)合著來寫的,不用這這樣分開寫.這樣比較麻煩.看下面的代碼
/*這樣就是背景的一個復(fù)合用法,很簡單*/boyd{background:#ffffff url('img_tree.png') no-repeat right top;}
2.文本
文本其實常用的屬性有:
color用來設(shè)置字體的顏色.然后這個屬性的值可以設(shè)置三種,一種是顏色單詞,.一種是16進制的顏色模式.最后一種就是 rgb 了.
body {color:blue;}h1 {color:#00ff00;}h2 {color:rgb(255,0,0);}
text-align這個用來設(shè)置文本的對齊方式,可以設(shè)置為 left,center,right.其實很簡單,一想就明白了,對齊方式而已.然后文本就會根據(jù)設(shè)置的方式左中右對齊.
div{text-align:left;}h1 {text-align:center;}p.date {text-align:right;}
text-decoration這個用來修飾文本,不過他最大的用處就是用來設(shè)置 a 標(biāo)簽的下劃線的顯示還是隱藏.然后這個屬性的屬性值有:none.overline.underline.line-through.
h1 {text-decoration:overline;}//上劃線h2 {text-decoration:line-through;}//刪除線h3 {text-decoration:underline;}//下劃線
text-transform這個屬性可以在 CSS階段就完成大寫字母或者是小寫字母的轉(zhuǎn)換,好屌!看下面的一個代碼:
1.<!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="utf-8" />
5. <title></title>
6. <style type="text/css">
7. #p_1{text-transform: uppercase;}/*全部變成大寫*/
8. #p_2{text-transform: lowercase;}/*全部編程小寫*/
9. #p_3{text-transform: capitalize;}/*首字母大寫*/
10. </style>
11. <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
12. </head>
13. <body>
14. <!--這個項目復(fù)習(xí)的是 CSS 的一些寫法-->
15. <p id="p_1">hellow world.</p>
16. <p id="p_2">HELLO,WORLD!</p>
17. <p id="p_3">hi.man</p>
18. </body>
19. <script type="text/javascript">
20. $(function(){
21. //JS 代碼寫在這里.
22. })
23. </script>
24.</html>
text-indent這個是文本縮進的意思.什么是文本縮進:其實就是當(dāng)我們在寫一篇文章的時候第一行會進行一個縮進,一般是兩個文字.這個是大家都知道的.
p {text-indent:50px;}/*這個是縮進50px,這里可以用 em,2em 就代表的是2個文字,也可以用百分比.*/
寫在后面.這一節(jié)復(fù)習(xí)了背景屬性和文本相關(guān)的一些屬性,行了,就到這里,鼓掌撒花...
