140918●樣式表

標籤：style   blog   http   color   io   os   ar   2014   div   

樣式表優先順序高
一、背景與前景

　　background-color:#F90;    /*背景色，樣式表優先順序高*/
　　background-image:url(路徑);    /*設定背景圖片*/
　　background-attachment:fixed;    /*背景是固定的，不隨字型滾動*/
　　background-attachment:scroll;    /*背景隨字型滾動*/
　　background-repeat:no-repeat;    /*no-repeat,repeat,repeat-x,repeat-y,不平鋪，，橫向平鋪，*/
　　background-position:center;    /*背景圖置中，設定背景圖位置時，repeat必須為“no-repreat”*/
　　background-position:right top;    /*背景圖放到右上方（方位可以自己更改）*/
　　background-position:left 100px top 200px;    /*離左邊100像素，離上邊200像素（可以設為負值）*/

 

　　字型
　　font-family:"新宋體";    /*字型。常用微軟雅黑、宋體。*/
　　font-size:12px;    /*字型大小。常用像素12px、14px、18px。還可以用“em”，“2.5em”即：預設字型的2.5倍。還可以用百分數*/
　　font-weight:bold;    /*bold是加粗，normal是正常*/
　　font-style:italic;    /*傾斜，normal是不傾斜*/
　　color:#03C;    /*顏色*/
　　text-decoration:underline;    /*底線，overline是上劃線，line-through是刪除線,none是去掉底線*/

　　text-align:center;    /*（水平對齊）置中對齊，left是靠左對齊，right是靠右對齊*/
　　vertical-align:middle;    /*（垂直對齊）置中對齊，top是頂部對齊，bottom是底部對齊*/
　　text-indent:28px;    /*首行縮排量*/
　　line-height:24px;    /*行高。一般為1.5~2倍字型大小。*/

 

二、邊界和邊框：border（表格邊框、樣式等）、margin（表外間距）、padding（內容與儲存格間距）
　　border:5px solid blue    ;/*四邊框：5像素寬、實線、藍色（相當於以下三行）*/
　　border-width:5px;
　　border-style:solid;
　　border-color:blue;
　　border-top:5px solid blue;    /*上邊框：5像素寬、實線、藍色（分寫同上）*/
　　border-bottom:5px solid blue;    /*下邊框：5像素寬、實線、藍色（分寫同上）*/
　　border-left:5px solid blue;    /*左邊框：5像素寬、實線、藍色（分寫同上）*/
　　border-right:5px solid blue;    /*右邊框：5像素寬、實線、藍色（分寫同上）*/

　　margin:10px;    /*四邊外邊框寬度為10像素*/
　　margin-top:10px;    /*上邊外邊框寬度為10像素*/
　　margin:20px 0px 20px 0px;    /*上-右-下-左，四邊外邊框順時針順序*/

　　padding:10px;    /*內容與儲存格四邊間距為10像素*/
　　padding-top:10px;    /*內容與儲存格上間距為10像素*/
　　padding:20px 0px 20px 0px;    /*上-右-下-左，內容與儲存格四邊間距順時針順序*/

三、列表與方塊
　　width、height、（top、bottom、left、right）只有在絕對座標情況下才有用

　　list-style:none;    /*取消序號*/

　　list-style:circle;    /*序號變為圓圈，樣式相當於無序*/

　　list-style-image:url(圖片地址);    /*圖片做序號*/

　　list-style-position:outside;    /*序號在內容外*/

　　list-style-position:inside;    /*序號跟內容在一起*/

 

四、格式與布局

1、fixed，鎖定位置（相對於瀏覽器的位置），例如有些網站的右下角彈窗

 

例：

<head>
<title>123</title>
<style type="text/css">
#a
{
　　border:5px solid blue;
　　width:100px;
　　height:100px;
　　margin:10px;
　　background-color:#0F3;
　　left:30px;
　　bottom:20px;
　　position:fixed;
}
</style>
</head>
<body>

<div id="a">a
</div>

</body>

顯示如下

 

2、absolute

　　1）、外層沒有position:absolute（或relative）;，那麼div相對於瀏覽器定位，如中b（距離瀏覽器的右邊框50像素，距離瀏覽器的下邊框20像素）。

　　2）、外層有position:absolute（或relative）;，那麼div相對於外層邊框定位，如中bb（距離d的右邊框50像素，距離d的下邊框20像素）。

代碼：

<head>
<title>123</title>

 

<style type="text/css">
.b
{
　　border:5px solid blue;
　　width:100px;
　　height:100px;
　　margin:10px;
　　background-color:#0F3;
　　right:50px;
　　bottom:20px;
　　position:absolute; /**/
}
</style>
<style type="text/css">
.c
{
　　border:2px solid red;
　　width:400px;
　　height:200px;
}
</style>
<style type="text/css">
.d
{
　　border:2px solid red;
　　width:400px;
　　height:200px;
　　position:absolute;
}
</style>
</head>

<body>
<div class="c">c

　　<div class="b">b
　　</div>

</div>
<div class="d">d
　　<div class="b">bb
　　</div>
</div>

</body>

3、relative

　　相對於預設位置的移動。如，a在用relative移動前的位置，aa為用relative移動後的位置，aa距原位置上部間距50像素，距原位置左邊距20像素。

代碼：

<head>
<title>123</title>

<style type="text/css">
#a
{
border:5px solid blue;
width:100px;
height:100px;
margin:10px;
background-color:#0F3;
position:fixed;
}
</style>
<style type="text/css">
#aa
{
border:5px solid blue;
width:100px;
height:100px;
margin:10px;
background-color:#0F3;
left:20px;
top:50px;
position:relative;
}
</style>
</head>

<body>

<div id="a">a
</div>

<div id="aa">aa
</div>

</body>

顯示如下

 

 4、分層（z-index）。在Z軸方向分層，可以理解為分成一頁頁的紙，層數越高越靠上。

　　在上面relative的樣本中，我們看到aa蓋住了a，這是因為後寫代碼的會蓋住前面的，那麼在不改變代碼順序的情況下如何讓a蓋住aa，如下：

<head>
<title>123</title>

<style type="text/css">
.a
{
border:5px solid blue;
width:100px;
height:100px;
margin:10px;
background-color:#0F3;
position:fixed;
z-index:2;    /*這裡做一下修改，預設情況下，都是第1層*/
}
</style>
<style type="text/css">
.aa
{
border:5px solid blue;
width:100px;
height:100px;
margin:10px;
background-color:#0F3;
left:20px;
top:50px;
position:relative;
}
</style>
</head>

<body>

<div class="a">a
</div>

<div class="aa">aa
</div>

</body>

顯示如下

 

 

 

140918●樣式表