今天是學習css的第一天
1.css基礎認知：css使用場景，美化網頁，佈局頁面
1.1簡介：css是層疊樣式表
1.2css設定哪些樣式：文字內容、圖片、版面佈局。
1.3css語法規範：
包含：選擇器（改誰的樣式）、樣式宣告（改成什麼樣式）。
位置：<head></head>中
語法格式：屬性：_值；屬性；屬性
2.選擇器
分為基礎選擇器和複合選擇器
2.1標籤選擇器：
定義：用html標籤名作為選擇器
作用：把某一類標籤全部選出來，統一修改
2.2類選擇器：（.）
口訣：樣式點定義，結構類呼叫，一個或多個，開發最常用。
作用：差異化選擇不同標籤
注意：不能使用純數位、中文命名；寫拼音定義最好寫全拼；點後不要加標籤名。
多類名：給一個標籤指定多個類名。
①多類名使用方式：class中多個類名，類名之間空格隔開
②多類名使用場景：把一些標籤元素相同的樣式放在一個類裡面
2.3id選擇器（#）id=…
場景：給頁面唯一的元素樣式
id只能呼叫一次（唯一）id選擇器用的較少
2.4萬用字元選擇器：（*）
選取頁面中所有的標籤
不需要呼叫，自動使用
特殊情況才使用。
3.字型屬性（定義字型系列）
3.1 font-family （字型系列）
各種字型之間必須用英文逗號隔開；
有空格隔開的多個單片語成的字型加引號
儘量使用系統預設自帶字型
3.1 font-size （字型大小） px：單位（畫素） 谷歌預設：16px
標題標籤需要單獨指定字型大小；
可以給body指定整個頁面文字大小
擴充套件：ctrl+滾輪：頁面放大縮小、ctrl+0：恢復
3.3 font-weight （字型粗細）
normal：正常字型（400）
bold：加粗（700）
bolder：特粗
實際開發中用數值，表示加粗加細，沒有單位。
3.4 font-style （字型樣式）
主要針對傾斜，
normal：預設值；italic：傾斜
3.5 font複合屬性寫法
文字樣式綜合來寫
順序：font-style，font-weight，font-size/line-height，font-family
必須按照順序來寫，各個屬性空格隔開
必須保留 font-size和font-family
4 文字屬性（定義文字外觀）
4.1 color （文字顏色）
預定義： 英文
十六進位制：#…（用得最多）
RGB程式碼：rgb（.,.,.）
註釋：#ffffff：白色；#000000：黑色；#ff0000：紅色
rgba程式碼多加了個透明色
4.2 text-align（對齊文字）水平對齊方式
屬性：left（左）；right（右）；center（居中）
文字對齊對span，a，em，ins，strong等設定不生效
4.3 text-decoration（文字裝飾）
可以給文字新增下劃線、刪除線、上劃線
屬性：none預設沒有；underline下劃線；line-throught刪除線；overline上劃線
a{text-decoration：none}：取消下劃線
4.4 text-indent（文字縮排）
文字第一行的縮排（段落首行）
em是一個相對單位，相對當前元素一個文字大小
僅對獨佔一行元素生效
4.5 line-height（行間距）
用於控制文字行與行之間的距離
行間距：上間距，下間距，文字高度
5 css的三種引入方式
5.1 css三種樣式表
5.11 內部樣式表：寫在html內部
理論可以放在html任何地方，一般放在 /head 上
5.12 行內樣式表：
在元素標籤內部中的style屬性中設定樣式
沒有實現分離，樣式少時使用，不推薦使用
5.13 外部樣式表：
適合樣式比較多的情況
單獨寫在 .css檔案中，把css檔案引入到html中
css檔案中只有樣式，沒有標籤
新建 .css檔案，寫程式碼，在html頁面中，使用link標籤引入這個檔案
<link rel="stylesheet" href=".css檔案">
6 Chrome 偵錯工具
6.1 開啟偵錯工具：F12或者右鍵（檢查）
6.2 使用偵錯工具
6.11 ctrl+滾輪：縮放；ctrl+0:恢復
6.12 左：html；右：css
6.13 檢查錯誤
7 百度案例：
程式碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
text-align: center;
font: 15px 'microsoft yahei';
}
.xiahuaxian {
text-decoration: none;
font-weight: 700;
color: #000000;
}
.box {
width: 400px;
height: 40px;
}
.box1 {
width: 100px;
height: 45px;
}
a {
color: rgb(87, 0, 128);
}
p {
color: gray;
}
</style>
</head>
<body>
<div><img src="./image/bdlogo.gif" alt=""></div>
<div><a href="#">新聞</a>
<a href="#" class="xiahuaxian">網頁</a>
<a href="#">貼吧</a>
<a href="#">知道</a>
<a href="#">音樂</a>
<a href="#">圖片</a>
<a href="#">視訊</a>
<a href="#">地圖</a>
</div><br><br><br>
<div>
<input type="text" class="box"> <button class="box1">百度一下</button>
</div><br><br><br>
<div>
<a href="#">百科</a>
<a href="#">文庫</a>
<a href="#">hao12 | </a>
<a href="#">更多>></a>
</div><br><br><br>
<div>
<img src="./image/ic.jpg" alt="">
<a href="#">百度地圖帶你吃喝玩樂，全心全意為人民服務</a>
</div><br><br><br>
<div>
<a href="#">把百度設為主頁安裝百度衛士</a><br><br>
<a href="#">加入百度推廣|</a>
<a href="#">搜尋風雲榜|</a>
<a href="#">關於百度|</a>
<a href="#">About Baidu|</a><br>
<p>
©2013 Baidu 使用百度前必讀 京ICP證030173號
</p>
</div>
</body>
</html>
8 心得體會：
今天是學習css的第一天，經過昨天老師的幫助，預習了今天的課程，讓我學習的能夠輕鬆一些，希望明天能夠右更多的收穫，也會一直好好學習。