CSS核心語法 :選擇器{屬性:值;...}
選擇器
I桑李、元素選擇 | ID 選擇器| Class選擇器
II毕籽、偽類選擇器 (除連接和表單外)| 屬性選擇器
選擇器可以組合(多個選擇器共同指定一類屬性)脐供,可以有 子孫選擇器凫佛, 可以有父子選擇器
div p
div>p
div+p
div~p
結(jié)合了偽類讲坎,還可以指定某些狀態(tài)/選擇特定子孫/ 選擇特定屬性
屬性和樣式
所有元素都共有的屬性
背景屬性(顏色孕惜、圖片)
文本屬性(段落、顏色晨炕、對齊衫画、修飾等)
字體屬性(字體、樣式瓮栗、大邢髡帧)
邊框/OutLine(樣式、寬度费奸、顏色)
尺寸(width弥激、height)
可見性(display 內(nèi)聯(lián)、塊愿阐、none/visibility)
特殊元素的樣式
列表(樣式微服、圖片)
表格(邊框折疊?) - 好像沒有特別的樣式
鏈表(點擊缨历、懸停等 以蕴?) - 懸停等樣式也適合其他元素
盒子模型
margin - border - padding - content - padding - border - margin
定位和布局
定位有四種方式
1、static - 靜態(tài)定位(默認流式布局)
2辛孵、relative - 相對定位
3丛肮、absolute - 絕對定位
4、fixed - 固定定位
// 絕對和相對都有一個比較固定的位置魄缚,不同的是 固定定位不隨瀏覽器的滾動而滾動
結(jié)合定位有幾種布局方式
1宝与、普通流式布局(塊元素縱向擴展、內(nèi)聯(lián)元素橫向擴展)依次擺放
2冶匹、絕對定位布局 - 適用于 下來菜單等等
3习劫、固定定位布局 - 使用于導(dǎo)航 菜單,表頭等等
4徙硅、使用 浮動元素布局 + clear 屬性榜聂,可以把某個 快元素布局在頁面的某一個位置搞疗。
5嗓蘑、使用 可見性 display的樣式,實現(xiàn) table方式布局
6匿乃、使用 盒子模型的 marging/padding 實現(xiàn)凝膠布局
普通流式布局+浮動元素布局(左右分欄桩皿,可以使用浮動把整個塊放到一邊) 是頁面整體布局的方式;
結(jié)合絕對定位布局+固定定位布局 做一些菜單導(dǎo)航的 細微控制
是布局的主要思路幢炸。
PS:樣式里面泄隔,如果是同一個 屬性的 不同值需要逗號分隔;如果是 多個屬性合并在一起的比如 margin:10px 15px;則不需要逗號分隔