●样式表
樣式表優先級高
一、背景與前景
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; /**/
}
.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;
}
#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層*/
}
.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>
顯示如下
?
5、float:left,right
?
?<div style="clear:bote"></div> ? ?截斷流
?
<style type="text/css">
a:link/*一般鏈接*/
{
color:blue;
}
a:visited/*訪問過的鏈接的格式*/
{
color:green;
}
a:hover/*設置鼠標指向鏈接時的形式*/
{
color:red;
}
</style>
?
轉載于:https://www.cnblogs.com/phantom-k/p/3980420.html
總結
- 上一篇： Python 学习散记
- 下一篇： Codeforces Round #26