CSS樣式表
CSS樣式表的樣式主要可以分為大小,背景,字體,對齊方式,邊界邊框,列表方塊,格式布局等。
元素的大小:
#div1{ width:300px; height:1000px; }
width:寬度,單位可以使用百分比或者像素
height:高度,單位可以使用百分比或者像素
如果沒有內容且不設置高度和寬度在頁面是看不到。
背景:
#div1{ width:300px; height:1000px; background-color:#0C0; background-image:url(preview.jpg); background-repeat:no-repeat; background-position:center; background-attachment:scroll; background-size:200px 250px; }
background-color:背景顏色
background-image:背景圖片,在頁面中背景圖在背景顏色上邊
background-repeat:背景圖片的平鋪方式
常用的有:
background-repeat:repeat;平鋪,默認選項
:no-repeat;不平鋪
:repeat-x;橫向平鋪
:repeat-y;縱向平鋪
background-position:背景圖的位置,圖片默認出現在左上角
常用的有:
background-position:top;上
:bottom;下
:left;左
:right;右
:center;居中
background-position還可以使用空格和像素來達到靠右下角並且留有一定距離的效果
#div1{ background-position:bottom 20px right 20px; }
background-attachment:背景圖是否隨著滾動條滾動
主要有:
background-attachment:fixed;不滾動
:scroll;滾動
background-size:背景圖的大小,可以自己設置像素大小,也可以根據提示這只自動等
文字:
#div1{ font-family:微軟雅黑; font-size:.5em; font-style:italic; font-weight:bold; text-decoration:line-through; color:#666; text-indent:-5em; }
font-size:字體大小,可以用像素表示,普通正文一般用14px,頁腳一般用12px,也可以用百分比或者em表示,200%是默認字體的兩倍,.5是默認字體的0.5倍
font-family:字體樣式,原則上不能使用太過花哨特殊的字體,因為用戶電腦上可能沒有,特殊情況可以使用圖片代替
color:文字顏色
font-weight:bold;加粗
font-style:italic;傾斜
text-decoration:underline;下劃線
none;去掉下劃線
line-through;刪除線
text-indent:首行縮進,特殊情況可以使用負號
文字對齊方式:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文檔</title> <style> #div1{ height:50px; background-color:#9CC; text-align:center;} #div2{ height:50px; background-color:#666; text-align:right; vertical-align:center; line-height:50px; } </style> </head> <body> <div id="div1">這是第一個div中的文字</div> <div id="div2">這是第二個div中的文字</div> </body> </html>
text-align:水平對齊方式
center;居中
left;左
right;右
vertical-align:垂直對齊方式,單獨設置沒有效果,需要和行高配合使用
middle;居中
top;上
bottom;下
line-height:行高
邊界與邊框:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文檔</title> <style> #div1{ height:100px; width:100px; border:1px #000033 solid; margin:10px 20px 30px 40px; padding:10px 20px 30px 40px;} #div2{ height:30px; width:20px; border:1px #00FF00 solid;} </style> </head> <body> <div id="div1"> <div id="div2"> </div> </div> </body> </html>
margin:外邊距,用像素表示,順序依次為上右下左,順時針方向,也可以分別用margin-top/right/bottom/left來設置,如果只寫一個表示四個方向的距離均為此值。
padding:內邊距,和margin相同,都是用像素,上右下左,也可以分別設置,如果使用了padding,該元素會相應變大
border:邊框,可以同時設置寬度,顏色,邊框線,用空格隔開,也可以單獨設置,border也可以單獨設置上/下/左/右邊框,邊框的大小也是包含元素裏面的
關於border,還有很多用法:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文檔</title> <style> #div1{ width:0px; height:0px; border-top:100px solid #000; border-right:100px solid #FFF; border-bottom:100px solid #FFF; border-left:100px solid #FFF;} </style> </head> <body> <div id="div1"> </div> </body> </html>
可以利用border的特性制作一些不規則的形狀。
列表與方塊:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文檔</title> <style> #ol1{ list-style:none;} #ol2{ list-style-image:url(%E5%9B%BE%E7%89%87%E6%98%BE%E7%A4%BA7.gif)} </style> </head> <body> <ol id="ol1"> <li>第一項</li> <li>第二襲</li> <li>第三幕</li> <li>第四部</li> </ol> <ol id="ol2"> <li>第一項</li> <li>第二襲</li> <li>第三幕</li> <li>第四部</li> </ol> </body> </html>
list-style:列表符號的樣式
inside 符號在元素裏面
outside 符號在元素外部
none 沒有符號
list-style-image:列表前面加圖片作為排序符號
格式與布局:
格式與布局比較復雜難以理解
position:
下面舉例來說明:
absolute; 絕對定位(相對於瀏覽器邊界)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文檔</title> <style> #div1{ height:200px; width:200px; background-color:#006; position:absolute; top:20px; right:30px; } .d1{ width:100px; height:500px;} </style> </head> <body> <div id="div1"> </div> <div class="d1"></div> <div class="d1"></div> <div class="d1"></div> <div class="d1"></div> <div class="d1"></div> </body> </html>
拉動滾動條,位置隨之改變。
fixed 固定位置:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文檔</title> <style> #div1{ height:200px; width:200px; background-color:#006; position:fixed; top:20px; right:30px; } .d1{ width:100px; height:500px;} </style> </head> <body> <div id="div1"> </div> <div class="d1"></div> <div class="d1"></div> <div class="d1"></div> <div class="d1"></div> <div class="d1"></div> </body> </html>
拉動滾動條,位置不變。
relative 相對定位,相對於該元素本該出現的位置:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文檔</title> <style> #div1{ background-color:#0F0; position:relative; top:20px; left:30px; } </style> </head> <body> 這是一段文字 <div>這是div中的文字</div> <div id="div1"> 這是相對定位div中的文字 </div> </body> </html>
在原本應該出現的位置偏移。
需註意的是,只要加了position,該元素就和其他元素不在同一層了,原本被擠下去下面的元素就會浮上來。
設置居中:margin:0px auto;
流式布局:
做網頁布局。可以讓元素流動。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文檔</title> <style> .div1{ margin:10px; width:100px; float:right; background-color:#999;} #nr{ height:300px; width:100%; background-color:#063;} </style> </head> <body> <div class="div1">首頁</div> <div class="div1">產品介紹</div> <div class="div1">發展歷史</div> <div class="div1">個人中心</div> <div class="div1">相關內容</div> <div class="div1">聯系我們</div> <div style="clear:both"></div> <ul style="list-style:none;"> <li class="div1">首頁</li> <li class="div1">首頁</li> <li class="div1">首頁</li> <li class="div1">首頁</li> <li class="div1">首頁</li> <li class="div1">首頁</li> </ul> <div style="clear:both"></div> <div id="nr"></div> </body> </html>
float:left/ight; 向左/右流,會隨著瀏覽器大小適應
截斷流:<div style="clear:both"></div>
z-index:給元素設置一個層級,數字越大越靠上
其他:
HTML和css使用的註釋不同,在HTML代碼中使用<!-- -->,但是在css中該註釋無效,應使用/* */。
CSS樣式表