黑馬程式員第三天
今天是學習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的第一天，經過昨天老師的幫助，預習了今天的課程，讓我學習的能夠輕松一些，希望明天能夠右更多的識訓，也會一直好好學習，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/175491.html
標籤：其他
上一篇：Vue router