CSS
爲什麼要使用CSS ？
樣式表能實現內容與樣式的分離，方便團隊開發
樣式複用、方便網站的後期維護
頁面的精確控制，實現精美、複雜頁面
CSS的用途?
1、外觀美化
2、佈局、定位
語法：
<head>
<style type="text/css"> 注意：類型的聲明 CSS
選擇器（即修飾對象）{
對象的屬性1: 屬性值1;
對象的屬性2: 屬性值2;
}
</style>
</head>
選擇器的分類
1.標籤選擇器
標籤名{
color:red;
background:green;
}
eg.
li{
color:red;
font-size:28px;
font-family:隸書;
}
2.類選擇器
<style type="text/css">
.blue{color:blue;}
……
</style>
<div class="blue" ></div>
類選擇器優先級比標籤選擇器高
3.id選擇器
<style>
#menu{
width:200px; background:#ccc;
font:bold 14px 宋體;
}
</style>
<div id ="menu" ></div>
優先級別：id選擇器 > class類選擇器 > 標籤選擇器
具體css優先級-->請參考
外部樣式表的引用
關聯文件 路徑 類型
<link rel="stylesheet" href=CSS外部文件名 type="text/css" />
行內樣式 > 內部樣式 > 外部樣式
就近原則
字體、字號：
font（縮寫形式）
font-weight（粗細）
font-size（大小）
font-family（字體）
行距、對齊等：
line-height （行高）
text-align （對齊）
letter-spacing （字符間距）
text-decoration （文本修飾 ）
背景
background （縮寫形式）
background-color（背景色 ）
background-image（背景圖 ）
background-repeat（背景圖重複方式 ）
background-position（位置座標、偏移量）
針對於<li>
屬性值 方式 語法實現 示例
none 無風格 list-style:none; 刷牙 洗臉
disc 實心圓（<ul>默認類型） list-style:disc; ● 刷牙 ● 洗臉
circle 空心圓 list-style:circle; ○ 刷牙 ○ 洗臉
square 實心正方形 list-style:square; ■ 刷牙 ■ 洗臉
decimal 數字（<ol>默認類型） list-style:decimal 1. 刷牙 2. 洗臉
-------------------------------------------------------------
css的佈局
<div>模型
1.盒模型 網頁中的所有元素可以看作一個一個的“盒子”
元素內容
填充（也稱內邊距）
邊框
邊界（也稱外邊距）
盒子屬性：
border（邊框）
margin（外邊距/邊界）
padding（內邊距/填充 ）
margin
margin-top
margin-right
margin-bottom
margin-left
eg.
margin：1px 2px 3px 4px; （上，右，下，左）(順序以人爲基準)(順時針)
padding: 10px 50px;
屬性值 auto 指 左右居中 上下置頂
注意：如果兩個屬性 上 、 左
用空格間隔
border屬性
border-color
border-width
border-style
元素的實際佔位（實際寬、高）
盒子高度 = height屬性 + 上下填充高度 + 上下邊框高度
盒子寬度 = width屬性 + 左右填充寬度 + 左右邊框寬度
body {
margin:100px; //指<body>對瀏覽器上邊框的距離
padding:100px; //距離<body>的上邊框的距離
background:#ccc;
}
浮動的三大顯著特徵
1.DIV塊元素失去“塊狀”換行顯示特徵，變爲行內元素 就是失去了前後換行
2.緊貼上一個浮動元素（同方向）或父級元素的邊框，如寬度不夠將換行顯示
3.佔據行內元素的空間，導致行內元素圍繞顯示
float right/left 漂浮
clear both/right/left 對應左右不漂浮
超鏈接僞類樣式
四個僞類樣式(建議使用)
a:link{color: #FF0000;/*未訪問超鏈接時字體的顏色爲紅色*/}
a:visited{color: #60C5F1;/*已訪問超鏈接時字體的顏色爲藍色*/}
a:hover{color: #FFF766;/*鼠標移動到超鏈接上時字體的顏色爲黃色*/}
a:active{color: #22B14C;/*鼠標移動到超鏈接上並按下時（激活選定狀態）字體的顏色爲綠色*/}
CSS 僞類、僞元素、超鏈接僞類樣式<--學習
三類應用樣式的方式
行內樣式 只作用於本標籤
內部樣式表 只作用於本頁面
外部樣式表 作用於各網頁
各類樣式的優先級
瀏覽器默認設置 <外部樣式表文件 <內部樣式表 <行內樣式表
（就近原則：同級別樣式 選擇就近樣式）
佈局：
div-ul(ol)-li：常用於分類導航或菜單等場合；
div-dl-dt-dd：常用於圖文混編場合；
table-tr-td：常用於圖文佈局或顯示數據的場合； 展示
form-table-tr-td：常用於佈局表單的場合； 提交數據
實現步驟
先建立HTML標籤組織結構
建立CSS樣式表，逐一添加各類樣式
測試樣式細節