CSS 基礎學習
阿新 • • 發佈：2018-12-24
簡介
- 層疊樣式表(級聯樣式表)
- 全稱: Cascading Style Sheets
- 主要用來設定網頁的樣式
- 字尾名： .css
- 註釋：/…/
- 程式設計字型：consolas， monaco， Fira Code,
source code pro, ubuntu mono
用的字型，能分清 1跟l 0跟o - 瀏覽器預設行為：p標籤—-上下16px的外邊距
小技巧
快速選擇
- 點結尾，按住shift，點選開始處————-快速選中一段內容
- 按住Ctrl+shift，再按住鍵盤的右鍵箭頭——快速選擇一段文字或符號
- 按住Ctrl，再按鍵盤左右箭頭—————-快速移動游標
操作技巧
- ctrl + 箭頭—————快速移動游標
- ctrl + shift + 箭頭——快速選擇一段文字或單詞
- 雙擊———————–快速選擇一個單詞
- home（PgUp）——–跳到行首
- end（PgDn）———-跳到行尾
CSS內容
1.選擇器
- 元素選擇器
div------------就是div{ } 選擇的是所有的div標籤
*萬用字元---------就是 *{ } 選中所有元素
class----------屬性名前加“.”，例如 .yellow-text{ }
- 1
- 2
- 3
- 4
- 5
注意：ID是唯一標識
一個頁面中不要有重複的ID，一個ID名只能出現一次
一般不要用ID作為選擇器，因為優先順序比較高
不要輕易使用 !important
- 1
- 2
- 3
- 4
選擇器優先順序-----!important > #id選擇器 > .class選擇器
- 1
- 2
- 關係選擇器
後代選擇器（空格）----------eg.div a{ }
選中的是div中所有的a標籤，不管是子級還是孫子級別的都會被選中
子級選擇器（>）-------------eg.div>a{ }
只會選中div的子級a元素，孫子級不會被選中
- 1
- 2
- 3
- 4
2.屬性
- 尺寸屬性
寬--------width:400px;
高--------height:300px;
文字大小---font-size:25px;
內邊距-----padding:35px;
-----padding-left:4px;
邊距-------border:1px;
外邊距-----margin:25px;
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 顏色屬性
字型顏色-----color:#0ab;
背景顏色-----background:#0df;
-----background-color:#0df;
-----background-image:url( 路徑及圖片名 );
- 1
- 2
- 3
- 4
3.HTML中CSS的使用方式
- 內聯引入
方式：在元素上加屬性style
格式：<屬性 style="屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;">
</屬性>
缺點：與HTML混合在一起，程式碼不美觀；
內聯樣式一次，只能對一個標籤起作用，
如果有多個相同屬性樣式，需要重複寫很多；
可維護性差；
可複用性差。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 內嵌引入
方式：在head裡寫style標籤，style標籤中寫CSS內容
格式：<style>
選擇器{ 屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3; }
div{
font-size:20px;
color:#0ab;
}
</style>
缺點：可複用性差
維護性一般
與HTML混在一起，不美觀
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 外部引入
方式：將CSS樣式內容獨立為 .css 檔案，在HTML中通過link標籤引入
格式：.css檔案中
屬性1:屬性值1;
屬性2:屬性值2;
屬性3:屬性值3;
.html檔案<head>標籤中
<link rel="stylesheet" href="css/03.css" />
好處： 將CSS與HTML獨立出來，程式碼整潔
可複用性高
可維護性高
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
link標籤的屬性：
rel="stylesheet" 告訴瀏覽器這是一個樣式表
href="CSS檔案的路徑" 連結引入對應的CSS檔案
- 1
- 2
- 3
- 4
- 匯入（不推薦使用）
方式：@import 匯入檔案
格式一：<style>
@import url(CSS檔案的路徑及檔名)
</style>
格式二：在CSS檔案中帶入其他CSS檔案的內容
eg.03.css檔案中已經寫好內容，在04.css檔案中寫：
@import url(03.css);
- 1
- 2
- 3
- 4
- 5
- 6
- 7
注意：如果樣式表內容不多，可以使用內嵌的方式，絕大多數情況推薦使用外部引入的方式。
- 1
- 引入方式的優先順序
link與style內嵌同時存在，採用“就近原則”，後寫的會將先寫的覆蓋掉；
內聯的優先順序 要 高於 內嵌 跟 外部引入。
“` - @import與link的區別
link是HTML標籤，@import只能在CSS中使用
link會在網頁載入時同時載入，而@import需要網頁完全載入才能載入
link無相容問題，@import 是CSS2.1以後加入的，相容性一般
link可以使用JS指令碼控制，而@import不可以 - 掌握重點
四種引入方式分別是什麼
各自的優缺點
優先順序關係
@import與link的區別
4.盒模型
塊級元素如果沒有設定寬度，預設就是佔滿父級元素的寬度，就是100%；
如果沒有設定高度，高度是被內容撐開的
學習感想
- 有的東西不是你學了就代表你全會了，就像是CSS裡的關係選擇器中的後代選擇器（空格）和子級選擇器（>）以及其他的選擇器。
- 有的東西不是隻學皮毛就可以，小的注意點往往會影響整體的效果，比如
元素選擇器中一般不使用id選擇器，再比如不要輕易地使用 !important。 - 三十年河西三十年河東，世界發展太快，尤其是IT行業，更要與時俱進——學新增的，耍舊有的。