前端-CSS- 第三天學習記錄（CSS層疊樣式表一）
一，CSS簡介
1.CSS簡介
CSS的主要使用場景：美化網頁，佈局頁面
1.1HTML的侷限性
HTML只關注內容的語義
HTML可以做簡單的樣式，但非常繁瑣。
1.2CSS-網頁美容師
CSS是層疊樣式表的簡稱
CSS是一種標記語言
CSS主要設定HTML頁面中的文字內容（字型，大小，對齊方式等），圖片的外形（寬高，邊框樣式，邊距等）以及版面的佈局和外觀顯示樣式。
CSS可以美化HTML，讓HTML更漂亮，讓頁面佈局更簡單。
總結：
①HTML主要做結果，顯示元素內容。
②CSS美化HTML佈局網頁。
③CSS最大價值：由HTML專注去做結果呈現，樣式交給CSS即結構（HTML）與樣式（css）相分離。
1.3CSS語法規範
CSS規則由兩個部分構成，選擇器以及一條或多條宣告。
①選擇器是用於指定CSS樣式的HTML標籤，花括號內是對該物件設定的具體樣式。
②屬性與屬性之間以“鍵值對”的形式出現。
③屬性是對指定的物件設定的樣式屬性，例如文字大小，文字顏色等。
④屬性與屬性值之間用英文“：”分開。
⑤多個“鍵值對”之間用英文“；”進行區分。
1.4CSS程式碼風格
符號實際書寫開發
1.樣式格式書寫
①緊湊格式
例：h3{ color:deeppink;font-size:20px;}
②展開格式
h3{
color:pink;
font-size:20px;
}
更提倡用第二種形式
2.樣式的大小寫
全部用小寫字母書寫
3.空格規範
①屬性值前面。冒號後面，保留一個空格。
②選擇器和大括號之間保留空格。
二，CSS基礎選擇器
2.1CSS選擇器的作用
選擇器：就行選擇標籤作用的
2.2選擇器的分類
選擇器可以分為基礎選擇器和複合選擇器
基礎選擇器：
①基礎選擇器是由單個選擇器組成的
②基礎選擇器又包括：標籤選擇器，類選擇器，id選擇器和萬用字元選擇器
2.3標籤選擇器
就是值用HTML標籤名稱作為選擇器，按標籤名分類。
語法：
標籤名{
屬性1:屬性值;
屬性2:屬性值;
屬性13屬性值;
}
作用：標籤選擇器把某一類標籤全部選擇出來，比如所有的<div>標籤和所有的<span>標籤。
優點：能快速為頁面中同類的標籤同意設定樣式。
確定：不能差異化設定。
2.4類選擇器
如果想要差異化選擇不同的標籤，單獨選擇一個或者某幾個標籤，可以使用類選擇器。
語法：
.類名{
屬性1:屬性值1;
}
結構需要用class屬性來呼叫class類的意思
<div class="red">變紅色</div>
注意：
①類選擇器使用“.”進行標識，後面緊跟類名（自定義，自己命名）。
②也可以理解為給這個標籤起了一個名字，來表示。
③長名稱或片語可以使用中橫線來為選擇器命名。
④不要使用純數字，中文等命名，儘量使用英文字母來表示。
⑤命名要有意義，儘量使別人一眼就知道這個類名的目的。
⑥命名規範：Wed前端開發規範手冊
類選擇器口訣：樣式點定義，結構類（class）呼叫，一個或多個，開發最常用
類選擇器-多類名
給一個標籤指定多個類名
多類名的使用方式
<div class="red font20">亞瑟</div>
①在標籤class屬性中寫多個類名。
②多個類名中間必須用空格分開。
多類名的使用場景
①可以把一些標籤元素相同的樣式放到一個類裡面。
②這些標籤都可以呼叫這個公共的類，然後再呼叫自己獨有的類。
③節省CSS統一修改 減少程式碼量。
2.5 id選擇器
HTML元素以id屬性來設定id選擇器，CSS中id選擇器以#來定義
語法：
#id名{
屬性1:屬性值1;
}
id選擇器口訣：樣式#定義，結構id呼叫，只能呼叫一次，別人切勿使用。
id選擇器和類選擇器的區別：
①類選擇器（class）好比人的名字，一個人可以有好多個名字，同時一個名字也可以被多個人使用。
②id選擇器好比人的身份證號碼，全國唯一，不得重複。
③id徐昂之前和類選擇器最大的不同在於使用次數上。
④類選擇器在修改樣式中用的最多，id選擇器一般用於頁面唯一性的元素上，經常和JavaScript搭配使用
2.6萬用字元選擇器
在CSS中，萬用字元選擇器使用“*”定義，它表示選取頁面中所有的元素。
語法：
*{
屬性1：屬性值1:；
}
萬用字元選擇器不需要呼叫，自動就給所有的元素使用樣式
特殊情況才會使用，後面講解使用場景
三，CSS字型屬性
CSSfonts（字型）屬性用於定義字體系列，大小 粗細 和文字樣式（如斜體）
3.1字體系列
CSS使用font-family屬性定義文字的字體系列。
p {font-family:"微軟雅黑"；}
div {font-family：Arial,"Microsoft Yahei","微軟雅黑"；}
①各個字型之間必須使用英文狀態下的逗號隔開。
②一般情況下，如果有空格隔開的多個單片語成的字型，加引號。
③提倡系統預設自帶字型，保證在任何使用者的瀏覽器中都能正確顯示。
3.2字型大小
CSS使用font-size屬性定義字型大小。
p{
font-size:20px;
}
①px(畫素)大小是我嗎網頁的最常用的單位。
②谷歌瀏覽器預設的文字大小為16px
③不同瀏覽器可能預設顯示的字號大小不一致，我嗎儘量給一個明確值大小，不要預設大小。
④可以給body指定整個頁面文字大小
3.3字型粗細
CSS使用font-weight屬性設定文字字型的粗細。
p{
font-weight:boid;
}
屬性值 描述
normal 預設值（不加粗）
bold 定義粗體（加粗的）
100-900 400等同於normal 而700等同於bold 注意這個數字後面不跟單位。這是通常使用的
①學會讓一個加粗標籤不加粗，或者讓其他標籤加粗
3.4文字樣式
CSS使用font-style屬性設定文字的風格。
p{
font-style：normal;
}
屬性值 作用
normal 預設值，瀏覽器會顯示標準的字型樣式font-style1:normal；
italic 瀏覽器會顯示斜體的樣式。
注意：平時我們很少給文字加斜體，反而要給斜體標籤（em,i）改為不斜體。
3.5 字型複合屬性
字型屬性可以把上述文字樣式綜合來寫，這樣可以更節約程式碼。
body{
font1:font-style font-weight font-size/font-height font-family
}
①使用font屬性時，必須按上面語法格式中的順序書寫，不能更換順序，並且各個屬性間以空格隔開。
②不需要的屬性可以省略，但必須保留font-size和font-family屬性，否則font屬性將不起作用。
3.6字型屬性小結
屬性 表示
font-size 字號(單位是px畫素 不能忘記)
font-family 字型
font-weight 字型粗細
font-style 字型樣式（傾斜italic與不傾斜normal）
font 字型連寫（字型連寫是由小順序的不能隨意更換位置，其中字號和字型大小必須同時出現）
四，CSS文字屬性
CSSText屬性可定義文字的外觀，比如文字的顏色，對齊文字，裝飾文字，文字縮排，行間距。
4.1 文字的顏色
div{
color:red;
}
表示 屬性值
預定義的顏色值 red green blue pink
十六進位制 #FF0000 #FF6600,#29D794
RGB程式碼 rgb(255,0,0)或rgb(100%,0%,0%)
4.2 對齊文字
text-align屬性用於設定元素內文字內容的水平對齊方式。
div{
text-align:rcenter;
}
屬性值 解釋
left 左對齊
right 右對齊
center 居中對齊
4.3裝飾文字
text-decoration屬性規定新增到文字的修飾，可以給文字新增下劃線，刪除線，上劃線
div{
text-decoration:underline;
}
屬性值 描述
none 預設，沒有裝飾線（最常用）
underline 下劃線 連結a自帶下劃線（常用）
overline 上劃線（幾乎不用）
line-through 刪除線（不常用）
重點記住如何新增下劃線？如何刪除下劃線？
4.4文字縮排
text-indent屬性用來指定文字的第一行的縮排，通常是將段落的首行縮排。
div{
text-indent:10px;
}
文字的第一行縮排多少距離
p {
text-indent:2em;
}
em是一個相對單位，就是當前元素(font-size)1個文字的大小，如果當前元素沒有設定大小。則會按照父元素的1個文字大小。
4.5 行間距
line-height屬性用於設定行間的距離（行高），可以控制文字行與行之間的距離。
p {
line-height:26px;
}
4.6文字屬性總結
屬性 表示
color 文字顏色
text-align 文字對齊
text-indent 文字縮排
text-decoration 文字修飾
text-height 行高
五，CSS的引入方式
5.1CSS的三種樣式表
5.2內部樣式表（行內式）
是寫到html頁面內部，是將所有的CSS程式碼抽取出來，單獨放到一個<style>標籤中。
<style>
div{
color:red;
font-size:12px;
}
</style>
①<style>標籤理論上可以放在HTML文件的任何地方，但一般會放在文件的<head>標籤中。
②通過此種方式，可以方便控制當前整個頁面中的元素樣式設定。
③程式碼結構清晰，但是並沒有完全分類。
④使用內部樣式列表設定CSS，通常也被稱為嵌入式引入，這種方式是我們練習常用的方式。
5.3行內樣式表
是元素標籤內部的style屬性中設定CSS樣式。適合修改簡單樣式。
<div style="color:red;font-size:12px;">青春不常在，抓緊談戀愛</div>
①style其實就是標籤的屬性
②在雙引號中間，寫法符號CSS規範
③可以控制當前的標籤設定樣式。
④由於書寫頻繁，並且沒有體現出結構與樣式相分離的思想，所有不推薦大量使用，只有對當前元素新增簡單樣式的時候，可以考慮使用。
5.4外部樣式表
實際開發都是外部樣式表，適合於樣式比較多的情況，核心是樣式單獨寫到CSS檔案中，之後把CSS檔案引入大HTML頁面中使用。
使用外部樣式表：
①新建一個字尾名為.css的樣式檔案，把所有CSS程式碼都放入次檔案中。
②在HTML頁面中，使用<link>標籤引入這個檔案。
<link rel="stylesheet" href="css檔案路徑">
屬性 作用
rel 定義當前檔案與被連結文件之間的關係，在這裡需要指定為"stylesheet",表示被連結的文件是一個樣式表文件。
href 定義所在連結外部樣式表文件的URL,可以是相對路徑，也可以是絕對路徑。
六，綜合案例
七，Chrome除錯工具
使用除錯工具
①Ctrl+滾輪可以放大開發者程式碼大小
②左邊是HTML元素結構，右邊是CSS樣式
③右邊CSS樣式可以改動數值和檢視顏色
④Ctrl+0可以復原瀏覽器大小
⑤如果點選元素，發現右側沒有樣式引入，極可能是類名或者樣式引入錯誤
⑥如果有樣式，但是樣式前面有黃色感嘆號，則是樣式屬性書寫錯誤。
好難！！！！！！！！！！！！！！！！！！！！！！！！