css3

• 簡(jiǎn)介：與H5一樣肢专，css3就是css的一個(gè)新版本，新增了很多功能讓開(kāi)發(fā)更便捷有趣
• 現(xiàn)狀：
  • 瀏覽器支持程度較差缤苫，需要加前綴
  • 移動(dòng)端支持優(yōu)于PC端
  • 不斷改進(jìn)中，部分原JS實(shí)現(xiàn)的效果，css3也能做到
  • 應(yīng)用廣泛

屬性選擇器

• css3中新增了許多靈活查找元素的方法冈欢，讓獲取元素更加的精確，并且css3選擇器與jQuery中所提供的絕大部分選擇器兼容
  • E[attr] 獲取有attr屬性的E元素盈简，例如：div[class]
  • E[attr=val] 獲取屬性值完全等于val的E元素凑耻，=號(hào)是嚴(yán)格匹配，例如：div[class=red]
  • E[attr*=val]獲取屬性值里包含val字符并且在“任意”位置的E元素柠贤，只要有val就行香浩，例如：div[class*=dvaler]
  • E[attr^=val] 獲取屬性值里包含val字符并且在“開(kāi)始”位置的E元素，例如：div[class^=value]
  • E[attr$=val] 獲取屬性值里包含val字符并且在“結(jié)束”位置的E元素臼勉，例如：div[class$=itval]
• 可以發(fā)現(xiàn)其實(shí)是用到了正則的匹配符號(hào)

偽類選擇器

• 相對(duì)于兄弟元素的結(jié)構(gòu)偽類
  • +獲取相鄰滿足條件的兄弟元素邻吭，例如：.index + li獲取樣式名為index元素相鄰的li元素，必須是相鄰且為li的兄弟元素才能被獲取到
  • ~獲取滿足條件的兄弟元素宴霸，例如：.index ~ li獲取樣式名為index元素的所有兄弟li元素囱晴，只要是它的兄弟li元素都能獲取到
• 相對(duì)于父元素的結(jié)構(gòu)偽類(比較抽象，著重理解)
  • E:first-child獲取到E元素的父元素內(nèi)部的第一個(gè)子元素且必須是E元素瓢谢，如果其父元素內(nèi)部的第一個(gè)子元素不是E元素畸写，那么獲取不到
  • E:last-child獲取到E元素的父元素內(nèi)部的最后一個(gè)子元素且必須是E元素，如果其父元素內(nèi)部的最后一個(gè)子元素不是E元素氓扛，那么獲取不到
  • E:nth-child(索引||關(guān)鍵字||表達(dá)式)
    • 索引是數(shù)字枯芬，注意這里面索引是從1開(kāi)始。如果寫(xiě)索引就是獲取到E元素父元素內(nèi)，索引為幾的子元素千所。如果索引對(duì)應(yīng)的元素不是E狂魔，那么獲取不到
    • 關(guān)鍵字有even和odd。如果寫(xiě)關(guān)鍵字就是獲取E元素父元素內(nèi)淫痰，偶數(shù)或者奇數(shù)索引的所有子元素最楷，如果偶數(shù)或者奇數(shù)項(xiàng)中有不是E的元素，那么獲取不到
    • 表達(dá)式涉及到了一個(gè)默認(rèn)參數(shù)n黑界，它會(huì)自動(dòng)計(jì)算E元素父元素內(nèi)部的所有子元素個(gè)數(shù)管嬉，以線性遞增的方式，0,1,2,3,4,5....依次類推朗鸠，n的用法特別多蚯撩，具體看教案筆記。要知道是烛占，如果用n來(lái)參與運(yùn)算胎挎，那么整個(gè)表達(dá)式的結(jié)果才是真正的n
  • 重點(diǎn)：記住上面的偽類都有一個(gè)缺陷，就是沒(méi)有限制類型忆家，如果是E元素就能獲取犹菇，不是E元素就無(wú)效。這時(shí)將child改為of-type芽卿，限制只獲取E元素揭芍，其他子元素都會(huì)被過(guò)濾掉，解決問(wèn)題
    • 比如：E:first-of-type獲取E元素父元素中所有E元素的第一個(gè)卸例；E:nth-of-type(2)獲取到E元素父元素中所有E元素称杨，索引為2的那個(gè)；E:nth-of-type(odd)獲取到E元素父元素中所有E元素筷转，索引為奇數(shù)的項(xiàng)姑原；E:nth-last-of-type(-n+5)獲取到E元素父元素中所有E元素的最后五項(xiàng)
    • 總結(jié)就是，使用of-type限制后呜舒，過(guò)濾其他子元素锭汛，只找E元素，一般建議用of-type的寫(xiě)法
  • E:empty獲取E元素父元素內(nèi)部袭蝗，沒(méi)有任何內(nèi)容的E元素(有空格都不行)
• 錨點(diǎn)結(jié)構(gòu)偽類
  • E:target獲取當(dāng)前觸發(fā)錨點(diǎn)的目標(biāo)元素唤殴，簡(jiǎn)單來(lái)說(shuō)：當(dāng)你點(diǎn)擊錨點(diǎn)的時(shí)候，錨點(diǎn)對(duì)應(yīng)的那個(gè)目標(biāo)元素就會(huì)被獲取到

偽元素選擇器

• 什么是偽元素
  • 偽元素就是指在頁(yè)面中顯示到腥，但是DOM樹(shù)結(jié)構(gòu)中卻找不到它眨八。每一個(gè)DOM元素都有偽元素
  • 偽元素默認(rèn)是行內(nèi)元素，必須設(shè)置content屬性左电，哪怕不寫(xiě)內(nèi)容
  • 它的優(yōu)點(diǎn)是不在DOM里面生成，所以會(huì)減少資源的消耗。但缺點(diǎn)同樣是因?yàn)椴辉贒OM中篓足，所以JS也不能獲取操作它
• 常用的偽元素：
  • ::before在元素內(nèi)容前面添加
  • ::after在元素內(nèi)容后面添加
  • ::first-letter獲取元素文本內(nèi)容的第一個(gè)字符段誊，注意它的優(yōu)先級(jí)高于下面兩個(gè)，如果設(shè)置了那么下面兩個(gè)偽元素設(shè)置的大部分樣式都不會(huì)其效果栈拖，但不是全部
  • ::first-line獲取元素文本的第一行
  • ::selection獲取并設(shè)置元素內(nèi)容被選中的文字连舍，只能修改顯示樣式不能修改文字大小
• 兼容老瀏覽器寫(xiě)法是只寫(xiě)單冒號(hào)，新瀏覽器單冒號(hào)也識(shí)別

新增顏色設(shè)置方法

• rgba(紅涩哟，綠索赏，藍(lán)，透明度)這個(gè)之前記過(guò)
• hsla(色調(diào)贴彼，飽和度潜腻，明亮度，透明度)下面對(duì)幾個(gè)參數(shù)做介紹：
  • 色調(diào)就規(guī)定顯示什么顏色器仗，與rgb有點(diǎn)區(qū)別的是融涣，css3將顏色做了一個(gè)環(huán)的處理，七彩色圍繞成一個(gè)環(huán)：
    • 紅色(0,360),橙色30精钮，黃色60威鹿，綠色120，青色180轨香，藍(lán)色240忽你，紫色300。其實(shí)就是0-360的取值臂容，度數(shù)變化顏色也會(huì)變化
    • 飽和度取值0%-100%科雳，就是顏色的本色強(qiáng)度，越低顏色越淡策橘，一般建議是100%
    • 明亮度取值0%-100%炸渡，越高越白，越低越黑丽已。一般建議50%蚌堵，注意css3中50%就等同于ps中的100%
    • 透明度取值0-1，不再說(shuō)明
• 這兩個(gè)方法設(shè)置的透明度優(yōu)于opactiy的地方是：都只對(duì)當(dāng)前元素生效沛婴，對(duì)內(nèi)部元素不影響吼畏。大部分情況下設(shè)置顏色用拾色器就能獲取到值

文本陰影設(shè)置

• text-shadow:距離(左邊偏移值，上邊偏移值)嘁灯，模糊值泻蚊，顏色某些效果需要設(shè)置多層陰影來(lái)實(shí)現(xiàn)，多層陰影設(shè)置用逗號(hào)分隔即可

盒模型設(shè)置

• 在之前的css中丑婿，如果給盒子添加padding和border的時(shí)候性雄，會(huì)讓寬高增加没卸。因?yàn)槟J(rèn)給盒子的寬高只是限于內(nèi)容區(qū)域，而border和padding是內(nèi)容之外的秒旋，所以添加就會(huì)撐開(kāi)
• css3中為了解決這樣而引起的網(wǎng)頁(yè)混亂問(wèn)題约计，添加了box-sizing屬性
• box-sizing: border-box||content-box，屬性介紹：
  • content-box就是原有css設(shè)置方法迁筛，寬高設(shè)置給內(nèi)容區(qū)域
  • border-box是讓盒子設(shè)置的寬高包含了內(nèi)容內(nèi)邊距邊框煤蚌，這樣設(shè)置后就算你添加內(nèi)邊距和邊框都不會(huì)撐開(kāi)盒子，它會(huì)擠壓內(nèi)容的寬高细卧，把空間給內(nèi)邊距和邊框尉桩。好處是盒子的總寬高不會(huì)變，也就不會(huì)影響盒子布局了
• 瀏覽器兼容性：
  • IE8及以上版本支持該屬性贪庙，F(xiàn)irefox 需要加上瀏覽器廠商前綴-moz-蜘犁，對(duì)于低版本的IOS和Android瀏覽器也需要加上-webkit-

邊框圓角

• border-radius可以通過(guò)每個(gè)角點(diǎn)來(lái)設(shè)置邊框的圓角，以下是對(duì)值書(shū)寫(xiě)方式的說(shuō)明：
  • border-radius:*px 將創(chuàng)建四個(gè)大小一樣的圓角
  • border-radius:*px *px第一個(gè)值表示左上角插勤、右下角沽瘦；第二個(gè)值表示右上角、左下角
  • border-radius:*px *px *px第一個(gè)值表示左上角农尖；第二個(gè)值表示右上角析恋、左下角；第三個(gè)值表示右下角
  • border-radius:*px *px *px *px 四個(gè)值分別表示左上角盛卡、右上角助隧、右下角、左下角
• 上面是統(tǒng)一設(shè)置圓角滑沧，下面介紹單個(gè)圓角設(shè)置方法：
  • border-top-left-radius:*px設(shè)置左上角圓角
  • border-top-right-radius:*px設(shè)置右上角圓角
  • border-bottom-right-radius:*px設(shè)置右下角圓角
  • border-bottom-left-radius:*px設(shè)置左下角圓角
• 補(bǔ)充說(shuō)明：
  • 設(shè)置每個(gè)圓角的屬性值既可以設(shè)置一個(gè)并村，也可以設(shè)置兩個(gè)。如果設(shè)置一個(gè)表示水平和垂直坐標(biāo)值相同滓技，如果設(shè)置兩個(gè)就分別是水平坐標(biāo)和垂直坐標(biāo)（其實(shí)畫(huà)圓就是以角點(diǎn)為基準(zhǔn)哩牍， 走設(shè)置的距離，然后將水平和垂直位置的交叉點(diǎn)作為圓心畫(huà)圓）令漂，例如:border-top-left-radius:10px/20px就是分別設(shè)置距離
  • 如果想要每個(gè)點(diǎn)每個(gè)方向的距離都不相同還可以這樣寫(xiě)：border-radius:10px 20px 30px 40px/20px 40px 60px 80px這樣每個(gè)點(diǎn)會(huì)以斜線分隔膝昆，每個(gè)值按照順序一一對(duì)應(yīng)拼接，再按照左上右上右下坐下的順序來(lái)設(shè)置圓角

邊框陰影

• box-shadow: h v [blur spread color inset]邊框陰影與文本陰影的設(shè)置方法相差不大叠必，下面對(duì)屬性介紹：
  • h 水平位置距離
  • v 垂直位置距離
  • blur 模糊值
  • spread 陰影擴(kuò)展荚孵，可放大或縮小陰影面積
  • color 設(shè)置陰影顏色
  • inset 設(shè)置內(nèi)陰影

漸變

• css3中增加了顏色漸變的效果，要注意因?yàn)闈u變不是單一色纬朝，所以不能設(shè)置給backgrond-color收叶，要設(shè)置給background
• 線性漸變，從一個(gè)方向往另一個(gè)方向產(chǎn)生漸變效果
  • background: linear-gradient(方向值共苛，顏色1 位置判没，顏色2 位置蜓萄，顏色3 位置....)
  • 方向值有4中寫(xiě)法：
    • to right從左往右漸變，也可以寫(xiě)90deg哆致，效果一樣
    • to left從右往左漸變绕德，也可以寫(xiě)270deg
    • to top從下往上漸變，也可以寫(xiě)0deg
    • to bottom從上往下漸變摊阀，也可以寫(xiě)180deg
  • 顏色如果不寫(xiě)位置，那么它默認(rèn)第一個(gè)是開(kāi)始顏色踪蹬，第二個(gè)是結(jié)束顏色胞此。寫(xiě)位置用百分比就行。如果出現(xiàn)兩個(gè)顏色位置相同跃捣，那么這兩個(gè)顏色就沒(méi)有漸變效果漱牵，直接跳轉(zhuǎn)
  • 徑向漸變，以一個(gè)中心點(diǎn)往四周擴(kuò)散漸變
  • background:radial-gradient(形狀 大小 坐標(biāo)疚漆，顏色)
    • 形狀參數(shù)有：circle和ellipse酣胀。它們是以元素的正中心點(diǎn)來(lái)擴(kuò)散漸變，但是circle適應(yīng)的形狀是正方形娶聘，ellipse會(huì)根據(jù)形狀來(lái)自適應(yīng)闻镶。一般這個(gè)參數(shù)很少寫(xiě)，不寫(xiě)默認(rèn)會(huì)自動(dòng)適應(yīng)形狀
    • 大小參數(shù)有：closest-side擴(kuò)散漸變到最近的邊丸升；farthest-side擴(kuò)散漸變到最遠(yuǎn)的邊铆农；closest-corner擴(kuò)散漸變到最近的角；farthest-corner擴(kuò)散漸變的最遠(yuǎn)的角狡耻。默認(rèn)值是最遠(yuǎn)的角墩剖，通過(guò)設(shè)置擴(kuò)散漸變停止的位置，可以控制它的漸變范圍
    • 坐標(biāo)：at x坐標(biāo) y坐標(biāo)夷狰，設(shè)置坐標(biāo)可以修改漸變的中心點(diǎn)岭皂，坐標(biāo)值可以是數(shù)值也可以是方位詞，只寫(xiě)一個(gè)方位詞沼头，那么另一個(gè)默認(rèn)是center
    • 顏色：與線性漸變一樣爷绘，可以寫(xiě)多個(gè)顏色和位置
• 重復(fù)漸變
  • 如果你有漸變樣式是重復(fù)多次漸變顏色，那么可以用到重復(fù)漸變瘫证，只需要寫(xiě)一次漸變色揉阎，它會(huì)自動(dòng)重復(fù)只寫(xiě)到結(jié)束為止(100%)，語(yǔ)法不變
  • repeating-linear-gradient()重復(fù)線性漸變
  • repeating-radial-gradient()重復(fù)徑向漸變

背景樣式設(shè)置

• background-repeat背景平鋪屬性介紹：
  • repeat自動(dòng)平鋪背捌，repeat-x橫向平鋪毙籽，repeat-y縱向平鋪
  • no-repeat不平鋪
  • round自動(dòng)縮小圖片再平鋪，實(shí)現(xiàn)正好鋪滿效果
  • space自動(dòng)為圖片添加相等的間距毡庆，實(shí)現(xiàn)正好鋪滿效果
• background-attachment背景滾動(dòng)方式屬性介紹：
  • fixed背景不會(huì)跟隨頁(yè)面滾動(dòng)
  • scroll當(dāng)元素沒(méi)有滾動(dòng)條的時(shí)候坑赡，它作用是背景跟隨頁(yè)面滾動(dòng)烙如；當(dāng)元素有滾動(dòng)條的時(shí)候，它作用是不跟隨元素內(nèi)容一起滾動(dòng)
  • local當(dāng)元素有滾動(dòng)條的時(shí)候毅否，跟隨元素內(nèi)容一起滾動(dòng)
• background-size背景圖片大小設(shè)置屬性介紹：
  • auto不作任何操作亚铁，讓圖片保持原大小
  • number設(shè)置實(shí)際數(shù)值尺寸，讓圖片改變大小螟加，注意如果圖片比背景區(qū)域小或者與圖片不是同比例徘溢，直接設(shè)置會(huì)造成圖片失真變形
  • percentage設(shè)置百分比，可以是0%-100%之間任何值捆探，但是只有塊級(jí)元素的背景可以用百分比設(shè)置然爆。同時(shí)百分比計(jì)算的依據(jù)是其所屬元素的寬度值
  • cover將圖片等比例縮放，自適應(yīng)鋪滿整個(gè)容器黍图，這樣設(shè)置有可能出現(xiàn)圖片溢出的情況曾雕。其實(shí)就圖片高度自適應(yīng)與盒子高度一樣
  • contain與cover剛好相反，也是等比例縮放圖片助被，但是它是讓容器完全包含整張圖片剖张，所以這樣設(shè)置有可能出現(xiàn)空白區(qū)域。其實(shí)就是自適應(yīng)圖片寬度與盒子寬度一樣
  • 當(dāng)background-size取值為number和percentage時(shí)可以設(shè)置兩個(gè)值揩环，也可以設(shè)置一個(gè)值搔弄，當(dāng)只取一個(gè)值時(shí)，第二個(gè)值相當(dāng)于auto检盼，但這里的auto并不會(huì)使背景圖片的高度保持自己原始高度肯污，而是會(huì)參照第一個(gè)參數(shù)值進(jìn)行等比例縮放
• background-origin:背景對(duì)齊方式屬性介紹：
  • border-box背景默認(rèn)對(duì)齊邊框左上角，會(huì)重疊邊框
  • padding-box背景默認(rèn)對(duì)齊內(nèi)邊距左上角吨枉，會(huì)重疊內(nèi)邊距
  • content-box背景默認(rèn)對(duì)齊內(nèi)容左上角蹦渣，會(huì)重疊內(nèi)容
• background-clip背景裁切屬性介紹：
  • border-box背景顯示邊框及以內(nèi)部分
  • padding-box背景顯示內(nèi)邊距及以內(nèi)部分
  • content-box背景顯示內(nèi)容部分
  • background-clip與box-sizing和background-origin配合使用，可以實(shí)現(xiàn)一個(gè)a鏈接圖片顯示小貌亭，但點(diǎn)擊觸發(fā)范圍大的效果

邊框圖片(難點(diǎn))

• border-image-source:url(...)設(shè)置邊框背景圖片
• border-image-slice:xx裁切圖片柬唯，根據(jù)你設(shè)置的值來(lái)裁切背景圖片為九宮格的形式，xx就是你設(shè)置的內(nèi)偏移距離圃庭，也就是裁切距離
  • 只寫(xiě)一個(gè)值就代表四個(gè)方向都一樣锄奢，如果每個(gè)方向想不同，那就按上右下左的順序來(lái)寫(xiě)剧腻，它會(huì)分別根據(jù)設(shè)置的值來(lái)裁切拘央。注意這個(gè)值是不帶單位的
  • 另外分成九份后，分別是左上角书在、右上角灰伟、右下角、左下角儒旬、頂側(cè)欄栏账、右側(cè)欄帖族、地側(cè)欄、左側(cè)欄挡爵、中間竖般。默認(rèn)情況下中間是不顯示的，設(shè)置fill才能顯示中間部分
  • 注意裁切之后茶鹃，除了中間部分涣雕，其它只會(huì)顯示在邊框以內(nèi)，所以要么設(shè)置邊框?qū)挾缺蒸妫磁浜蟗order-image-width屬性胞谭，要么設(shè)置padding值才能看到
• border-image-width:xxpx設(shè)置邊框圖片寬度，如果不設(shè)置這個(gè)屬性男杈，默認(rèn)就是邊框的寬度。但是要注意邊框圖片本質(zhì)就是被背景圖片调俘，它不會(huì)影響內(nèi)容顯示伶棒，所以如果設(shè)置過(guò)寬就會(huì)與內(nèi)容重疊。一般情況下建議這個(gè)屬性的值與邊框?qū)挾认嗤?/li>
• border-image-outset:xxpx擴(kuò)展邊框?qū)挾炔士猓@個(gè)屬性一般不用肤无，因?yàn)樵O(shè)置它會(huì)撐開(kāi)盒子，影響整體布局
• border-image-repeat:stretch||repeat||round設(shè)置邊框圖片平鋪的方式骇钦，注意九宮格四個(gè)角點(diǎn)是不會(huì)平鋪的宛渐。stretch是默認(rèn)值拉伸，repeat是直接平鋪眯搭，round會(huì)自動(dòng)縮放圖片大小窥翩，再平鋪達(dá)到完全鋪滿的效果
• 連寫(xiě)方法：border-image: source slice/width/outset repeat;

過(guò)渡效果

• 過(guò)渡效果實(shí)際上就是讓樣式變化時(shí)，以動(dòng)畫(huà)的方式來(lái)改變鳞仙，它跟之前學(xué)的js動(dòng)畫(huà)函數(shù)其實(shí)是一個(gè)功能寇蚊，是什么元素的樣式要加上過(guò)渡效果，就寫(xiě)在該元素選擇器內(nèi)
• transition-property:樣式名你想讓什么樣式改變時(shí)以動(dòng)畫(huà)方式實(shí)現(xiàn)棍好，就寫(xiě)對(duì)應(yīng)的樣式名
• transition-duration:xs變化時(shí)動(dòng)畫(huà)執(zhí)行多長(zhǎng)時(shí)間仗岸，以秒為單位
• transition-timing-function:linear||ease||規(guī)定動(dòng)畫(huà)的移動(dòng)的方式
  • linear勻速移動(dòng)
  • ease先慢后快結(jié)束時(shí)又變慢
  • steps(x)固定動(dòng)畫(huà)一步一步的執(zhí)行，參數(shù)是數(shù)值幾步
• transition-delay:xs過(guò)渡執(zhí)行的延遲時(shí)間借笙，以秒為單位
• 簡(jiǎn)寫(xiě)方式：
  • transition:屬性名 動(dòng)畫(huà)時(shí)間 移動(dòng)方式 延遲時(shí)間如果有多個(gè)樣式要實(shí)現(xiàn)過(guò)渡改變扒怖，用逗號(hào)分隔寫(xiě)多次。
• 最后业稼，過(guò)渡效果只能產(chǎn)生某個(gè)值到另一個(gè)具體值的過(guò)渡盗痒，所以必須是帶有具體數(shù)值的css樣式改變才能用過(guò)渡，例如：display它的值是none和block盼忌，不是具體值所以用過(guò)渡無(wú)效积糯。并且過(guò)渡默認(rèn)是在觸發(fā)事件結(jié)束后掂墓，自動(dòng)還原樣式值