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{ }
----------class命名:多個單詞的時候: word1-word2
id-------------屬性名前加“#”,例如 #blue-background{ }
- 1
- 2
- 3
- 4
- 5
注意:ID是唯一標識
一個頁面中不要有重複的ID,一個ID名只能出現一次
一般不要用ID作為選擇器,因為優先順序比較高
不要輕易使用 !important
- 1
- 2
- 3
- 4
選擇器優先順序-----!important > #id選擇器 > .class選擇器
> 標籤選擇器div > 萬用字元*
- 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行業,更要與時俱進——學新增的,耍舊有的。