知識點一:
CSS概念:CSS 指層疊樣式表 (Cascading Style Sheets)(級聯樣式表)
Css是用來美化html標簽的,相當於頁面化妝。
知識點二:
選擇器格式與部分屬性:
寫法:
選擇器{屬性:值;屬性:值}
選擇器是一個選擇(一/多個)標簽的過程。
對應的屬性與值表:
Width:20px; 寬
Height:20px; 高
背景顏色
font-size:24px; 文字大小
text-align:left | center| right 內容的水平對齊方式
text-indent:2em; 首行縮進
Color:red; 文字顏色
知識點三:
基礎選擇器:
一:標簽選擇器:
特點:標簽選擇器定義之后,會將頁面所有的元素都執行這個標簽樣式。
標簽{屬性:值}
div{ font-size: 50px; color:green; background-color:yellow; width:300px; height:200px;
} p{ color:pink; font-size:60px;
}
顏色的顯示方式:
- 直接寫顏色名稱。
- 十六進制顯示顏色。
#000000;前2位代表紅色,中間代表綠色,后兩位代表藍色。值越接近0顏色越深
- RGB
color:rgb(120,120,120);值在0-255之間。
- RGBA 最后一位值在0-1
color: rgba(102,217,239,0.5);
二:類選擇器:
特點:誰調用,誰生效。一個標簽可以調用多個類選擇器,多個標簽可以調用同一個類選擇器。
在標簽中使用class屬性調用,不同的類之間用空格分開。
.自定義類名{屬性:值;屬性:值;}
.box{ font-size: 50px; color:green; background-color:yellow; width:300px; height:200px;
} .miss{ color:pink; font-size:60px;
}
類選擇器命名規則:
不能用純數字或數字開頭來定義類名
不能使用特殊符號或者特殊符號開頭(_)來定義類名。
不建議使用漢字來定義類名。
不推薦使用屬性或者屬性的值來定義類名。
常見的命名模板:
三:ID選擇器:
特點:一個ID選擇器在一個頁面只能調用一次。如果使用兩次或多次以上,是不符合w3c規范的,JS調用會出現問題。
一個標簽只能調用一個ID選擇器。
一個標簽可以同時調用類選擇器與ID選擇器。
#自定義名稱{屬性:值;}
四:通配符選擇器:
特點:給所有的標簽都使用相同的樣式。
不推薦使用。
*{屬性:值;}
知識點四:
復合選擇器: 概念:兩個或兩個以上的基礎選擇器通過不同的方式連接在一起。
一:交集選擇器:
特點:既要滿足使用的某個標簽選擇器,又要滿足使用了類選擇器。
標簽+類(ID)選擇器{屬性:值;}
div.box{ color:red; } div#miss{ width:400px; height:300px; background-color:yellow;
}
二:后代選擇器:
選擇器特點:后代選擇器首先要滿足包含(嵌套關系)
父集元素在前,子集元素在后。
特點:無限制隔代。
只要能代表標簽,標簽、類選擇器、ID選擇器自由組合。
div #miss{ width:400px; height:300px; background-color:yellow;
} <div> <div id="miss"></div> </div>
三:子代選擇器:
選中直接下一代元素
選擇器>選擇器{屬性:值;}
div>span{ width:300px; height:200px;
} p>span{ width:300px; height:200px;
} <div> <p> <span>趙靈兒</span> </p> <span>林月如</span> </div>
四:並集選擇器:
選擇器+,+選擇器+,選擇器{屬性:值;}
特點:某些元素或部分元素的屬性完全相同,則他們可以寫在一塊。
.box,#miss,span,h1{ width:300px; color:#000;
}
知識點五:
文本元素:
一:屬性:
font-size:16px; 文字大小
font-weight:700; 值從100-900,文字粗細,不推薦使用font-weight:bold;
font-family:微軟雅黑; 文字字體
font-style:normal|italic normal默認值,italic斜體。
line-heitht:10px; 行高。
文本屬性連寫:
font: font-style font-weight font-size/line-height font-family;
注意:font:后邊寫屬性的值。一定按照書寫順序。
文本屬性連寫文字大小和字體為必寫項。
例: Font:italic 700 16px/40px 微軟雅黑;
文字的字體表達形式:
一:直接寫中文名稱:
div{ font-family:微軟雅黑; font-size:60px; }
二:寫字體的英文名稱:
div{ font-family:microsoft yahei; font-size:15px;
}
Unicode編碼:
如何快速獲得字體的Unicode編碼:
在頁面的console中
escape(“字體名”)
即可獲取。