CSS3
屬性選擇器:
[attr]名稱
[attr="value"]選中了屬性，并且規(guī)定了屬性值?
結(jié)構(gòu)選擇器
nth-child(){ }標(biāo)簽名稱一樣，
nth-of-type(){ }標(biāo)簽名稱不一樣
結(jié)構(gòu)選擇器的使用
? ? ? ? 1.當(dāng)標(biāo)簽名稱是一樣的時(shí)候
? ? ? ? ? ? - 標(biāo)簽名稱的集合:first-child{} 集合下面的第一個(gè)
? ? ? ? ? ? - 標(biāo)簽名稱的集合:last-child{} 集合下面的最后一個(gè)
? ? ? ? ? ? - 標(biāo)簽名稱的集合:nth-child(序號){} 集合下面的第幾個(gè)(從前往后)
? ? ? ? ? ? - 標(biāo)簽名稱的集合:nth-last-child(序號){} 集合下面的第幾個(gè)(從后往前)
? ? ? ? ? ? ? ? - n 選擇全部(切記不要裝杯)
? ? ? ? ? ? ? ? - 2n/3n 公式
? ? ? ? ? ? ? ? - odd/even 奇數(shù)/偶數(shù)
? ? ? ? ? ? - 了解:標(biāo)簽名稱:only-child{} 只有一個(gè)子級元素的時(shí)候被選擇中
? ? ? ? 2.當(dāng)標(biāo)簽名稱是不一樣的時(shí)候: 先篩選出相同的標(biāo)簽名稱,再從集合中選擇到想到的標(biāo)簽
? ? ? ? ? ? - 標(biāo)簽名稱的集合:first-of-type{} 集合下面的第一個(gè)
? ? ? ? ? ? - 標(biāo)簽名稱的集合:last-of-type{} 集合下面的最后一個(gè)
? ? ? ? ? ? - 標(biāo)簽名稱的集合:nth-of-type(序號){} 集合下面的第幾個(gè)(從前往后)
? ? ? ? ? ? - 標(biāo)簽名稱的集合:nth-last-of-type(序號){} 集合下面的第幾個(gè)(從后往前)
? ? ? ? ? ? - 了解:標(biāo)簽名稱:only-of-type{} 只有一個(gè)子級元素的時(shí)候被選擇中
層級選擇器
選擇器: 包含選擇器 父級選擇器 子級選擇器{}
? ? 1.> 直接子級
? ? 2.+ E+F
選擇緊貼在E元素之后F元素。
? ? 3.~? 后面的全部
? ? hover
? ? ? ? - 改變自身? ? ? ? ? ? ? 選擇器:hover{}
? ? ? ? - 通過父級改變子級? ? ? 父級選擇器:hover 子級選擇器{}
? ? ? ? - 改變相鄰的同級
背景屬性
所有的背景圖片都是從padding區(qū)域開始排列的
? ? 屬性:background-size
? ? 屬性值
? ? ? ? - 100% 100% 寬 高 拉伸變形
? ? ? ? - cover 覆蓋 等比例的縮放 背景圖片不會變形
? ? ? ? - contain 覆蓋包含 根據(jù)圖片大小進(jìn)行變化
邊框?qū)傩?/h2>
邊框圓角屬性:border-radius(半徑)
? ? 屬性值:數(shù)值單位/百分比單位
? ? ? ? - 一個(gè)屬性值: 四個(gè)角 50%~100% 圓
? ? ? ? - 兩個(gè)屬性值: 左上右下? 右上左下
? ? ? ? - 三個(gè)屬性值: 左上 右上左下 右下
? ? ? ? - 四個(gè)屬性值: 左上 右上 右下 左下
? ? ? ? - 八個(gè)屬性值: 左上x 右上x 右下x 左下x/左上y 右上y 右下y 左下y
? ? 如何利用設(shè)計(jì)圖量取圓角
阿里巴巴矢量圖標(biāo)庫
文本屬性 不是圖片
? ? 1.離線使用(下載)
? ? ? ? 離線下載后文件的解釋
? ? ? ? ? ? - demo_index.html+demo.css 操作手冊
? ? ? ? ? ? - iconfont.css 文本修飾描述
? ? ? ? ? ? - iconfont.js/json 引入圖標(biāo)方式
? ? ? ? ? ? - iconfont.ttf\woff\woff2 文件類型
? ? ? ? - unicode方式導(dǎo)入 兼容性最好 缺點(diǎn)是不支持多色
? ? ? ? - fontclass方式導(dǎo)入 兼容相對來說較好 缺點(diǎn)依然是不支持多色 建議在工作中使用這種方式
? ? ? ? - symbol方式導(dǎo)入 兼容性最差 svg格式導(dǎo)入 渲染很差 不如jpg 支持多色
? ? 2.在線使用
font class方式為工作所用
