2.1樣式表的基本概論
2.1.1 內聯樣式表
在標簽中直接添加style 例：<p style=“”> </p>
2.1.2 內嵌樣式表
作為一個獨立區域內嵌在網頁內，必須卸載head標簽內
例：<head>
<style=“”>
</style>
</head>
2.1.3 外部樣式表
即css樣式表，需要新建一個css文件，用來放樣式表。如果在html文件中調用樣式表，需在html文件中點擊 右鍵→CSS樣式→附加樣式表。（一般用link連接方式）
注：有些標簽會有默認的邊距，一般寫代碼的時候會先去除（也可以設置其他需要的樣式）
* （對所有標簽起作用）
{margin：0px； （邊距）
padding：0px；} （間距）
2.2 選擇器
1、標簽選擇器
p{樣式} 該樣式對所有未加其他引用的p標簽起作用
2、class選擇器
在樣式表中寫法都是以 “.” 開頭，引用時為class=“”
例：
樣式表中 .a{樣式}
引用時 <div class=“a”></div>
3、id選擇器
在樣式表中寫法都是以 “#” 開頭，引用時為id=“”
例：
樣式表中 #a{樣式}
引用時 <div id=“a”></div>
注：id引用時在代碼中只能使用一次，而class可以無限次引用
4、復合選擇器
① 在樣式表中兩個標簽用 “，” 隔開，表示並列
例：
p，span{樣式} 表示p和span兩者同樣的樣式
② 用空格隔開，表示后代
例：
.main p{樣式} 找到使用main樣式的標簽，在該標簽內的p標簽使用該樣式
③ 篩選 用 “.” 隔開
例：
p.sp{樣式} 在標簽p中的class=“sp”的標簽執行該樣式
2.3 樣式屬性
背景
backround-color： 背景顏色，樣式表優先級高
backround-image：url（路徑） 設置背景圖片（默認）
backround-attachment：fixed 背景固定，不隨字體滾動
：scroll 背景隨字體滾動
backround-repeat：no-repeat 不平鋪
：repeat 平鋪
：repeat-x 橫向平鋪
：repeat-y 縱向平鋪
backround-position：center 背景圖居中（設置背景圖片位置時repeat必須為“no-repreat”）
：right top 背景圖片放在右上角（位置可以自己改）
：left 100px top 100px 距離左邊和上邊的距離（可以為負值）
字體
font-family：“字體” 設置字體
font-size：12px 字體大小，也可以用“2.5em” 即默認字體的2.5倍 也可以用百分數
font-weight：hold 加粗
：normal 正常
font-style：italic 傾斜
：normal 不傾斜
color： 顏色
test-decoration：underline 下划線
：overline 上划線
：line-through 刪除線
：none 去掉下划線
test-align：center 水平居中對齊
：left 水平左對齊
：right 水平右對齊
vertical-align：middle 垂直居中對齊
：top 頂對齊
：botton 低對齊（一般設置行高后使用）
text-indent：20px 首行縮進
line-height：20px 行高（一般為1.5-2倍字體大小）
display：none 不顯示
：inline-block 顯示為塊，不自動換行，寬高可設（black顯示為塊，自動換行。inline效果同span標簽類似，不自動換行，寬高不可設）
visibility（可視性）：hidden 隱藏（但是占空間，只是不可見）
：visible 顯示
其他樣式
當設置了.a后還可以添加其他幾種效果
a：link{樣式} 正常狀態是的樣式
a：visited{樣式} 點擊后的樣式（一般都是與link樣式一樣，否則會出現顯示錯誤）
a：hover{樣式} 鼠標懸停時的樣式
a：active{樣式} 點擊時的樣式
邊界和邊框
margin 表外間距
padding 內容與單元格間距
border： 表格和邊框的樣式
border：5px solid blue 四邊框：5像素粗、實線、藍色
border-width：5px 5像素粗
border-style：solid 實線
border-color：blue 藍色
border-top：5px solid blue 上邊框5像素粗、實線、藍色
margin：10px 四邊外邊框為10像素
：auto 居中
margin-top：10px 上邊外邊框為10px
margin：20px 10px 20px 10px 上-右-下-左 分別設置四個邊框，數據順序為順時針
2.4 格式與布局
position：fixed 鎖定位置（相對於瀏覽器的位置），列如某些網站右下角的彈窗
：sbsolute 外層沒有position：sbsolute（或relative）那么div相對於瀏覽器定位。外層有position：sbsolute（或relative）那么div相對於外層邊框定位
：relative 相對於默認位置的移動（也就是實際視覺效果是位移，而后台位置還是在原始位置）
z-index：2 相對於z軸拉近2層位置
float：left 位於左側浮動
：right 位於右側浮動
overflow：hidden 隱藏超出部分
：visible 顯示超出部分
：scroll 顯示出滾動條
cursor：pointer 鼠標懸停時的形狀
opacity：0.5 透明度為半透明