資訊專欄INFORMATION COLUMN
css3新增選擇器
屬性選擇器 包括h5中新增的自定義屬性
sasas
屬性選擇器可以指定屬性值 的樣式變化
E[attr="value"] 指定屬性名
sasas1
sasas2
sasas3
只有第一行才會變?yōu)榧t色
E[attr~="value"] 屬性對應(yīng)的值是許多個值 其中包括這個value
E[attr^="value"] 屬性對應(yīng)的值是以value開頭的 一個值
E[attr$="value"] 屬性對應(yīng)的值是以value結(jié)束的 一個值
E[attr*="value"] 屬性對應(yīng)的值中包含value字符串包含字母 一個值
E[attr|="value"] 屬性值是以 value- 開始的
結(jié)構(gòu)選擇器
p:nth-child(1|odd（2n）|even(2n-1)) 作為第一個孩子的p會被選擇到
p:nth-last-child(1|odd（2n）|even(2n-1)) 作為倒數(shù)第幾個孩子的p節(jié)點(diǎn)
p:nth-of-type(1|odd（2n）|even(2n-1)) 找到父級下的第二個p標(biāo)簽
p:nth-last-of-type(1|odd（2n）|even(2n-1)) 找到父級下的倒數(shù)第二個p標(biāo)簽
p:first-child ==p:nth-child(1)
p:last-child ==p:nth-last-child(1)
P:first-of-type==p:nth-of-type(1)
p:empty 表示元素中沒有子節(jié)點(diǎn)
p:only-of-type 表示p的父元素中只有一個子節(jié)點(diǎn) 且這個唯一的子節(jié)點(diǎn)的必須是p
p:only-child 表示p的父元素中只有一個子節(jié)點(diǎn) 且這個唯一的子節(jié)點(diǎn)的必須是p
css3中新增加的偽類
URL 帶有后面跟有錨名稱 #，指向文檔內(nèi)某個具體的元素。這個被鏈接的元素就是目標(biāo)元素(target element)。
:target 選擇器可用于選取當(dāng)前活動的目標(biāo)元素。
url#value
div:target 會選擇到id為target的div
表單新增的偽類
input:disabled{} 會選擇到不能編輯的輸入框
input:enabled{} 會選擇到能編輯的輸入框
input:checked{} 會選擇到當(dāng)前選中的復(fù)選框
css3新增的兄弟選擇器
E~F 選擇到的是E元素后邊的所有兄弟節(jié)點(diǎn)
E+F 選擇到的是E后邊的第一個兄弟節(jié)點(diǎn)
實(shí)現(xiàn)模擬單選框
文本新增選擇器
p:first-line 選擇到文本的第一行
p:first-letter 選擇到文本的第一個文字
p::selection 文本被鼠標(biāo)選中的時(shí)候的樣式 注意到時(shí)雙冒號
p::selection{
color: red;background: green;
}
的囧事就打死的大世界第三
p:after {content:"添加的內(nèi)容" 樣式}
E:not(F) 選擇到不是F的E
h1:not(.h2) 選擇到類不是h2的h2標(biāo)簽
1、rgba顏色模式 紅綠藍(lán)透明度(0-1) 背景透明 文字不會透明
2、文字陰影 text-shadow: 0 0 10px red; / x y 模糊程度 陰影顏色/
text-shadow: 第一組陰影,第二組陰影;
3、文字描邊 webkit內(nèi)核瀏覽器才會支持
-webkit-text-stroke:3px寬度
父元素屬性 ：
1、display: -webkit-box;
2、內(nèi)部項(xiàng)目的布局方向 -webkit-box-orient: vertical; 默認(rèn)是橫向顯示的
3、內(nèi)部項(xiàng)目的元素排列 -webkit-box-direction: reverse; 實(shí)現(xiàn)元素顛倒
4、水平方向上對項(xiàng)目沒有占滿的富?？臻g的管理 -webkit-box-pack: end 富?？臻g在左側(cè)顯示
這就可以輕松的實(shí)現(xiàn)水平居中了：-webkit-box-pack: center
把富?？臻g清軍分配給每一個元素：-webkit-box-pack: justify
5、垂直方向上對項(xiàng)目沒有占滿的富裕空間的管理 -webkit-box-align:center ;
這就可以輕松的實(shí)現(xiàn)垂直居中了：-webkit-box-align: center
內(nèi)部項(xiàng)目的屬性：
1、希望元素顯示的位置：-webkit-box-ordinal-group：2
希望他顯示在第幾個
.box div:nth-of-type(1){
-webkit-box-ordinal-group: 2;
}
2、彈性空間管理
-webkit-box-flex:1 -webkit-box-flex:5
假設(shè)有兩個元素 第一個占1/3的父元素的寬度 第二個占2/3的父元素的寬度
box-shadow: 10px 10px 30px blue; //x偏移 y偏移 模糊程度 陰影顏色
box-shadow: inset 10px 10px 30px blue; //投影方式 x偏移 y偏移 模糊程度 陰影顏色
做邊框的一個新方法 利用陰影來做 同時(shí)陰影可以疊加 一個box上邊可以增加多個陰影
-webkit-box-reflect: below|left|right|top 倒影和元素之間的距離
css3漸變
background: -webkit-linear-gradient(red 0,blue 100%);
紅色在開始 藍(lán)色在結(jié)束 的一個漸變
但是這個屬性必須結(jié)合overflow: auto;來實(shí)現(xiàn)拖拽放大
css3中盒模型的解析方式box-sizing:content-box 標(biāo)準(zhǔn)盒模型 默認(rèn)的
內(nèi)容寬度=width
可視寬度=width+padding+border
box-sizing:border-box 怪異盒模型
可視寬度=原來的width 所以如果他有padding 此時(shí)再設(shè)置這個屬性 就會導(dǎo)致子元素就會被減小
分欄布局 針對許多文字 一定要加上webkit前綴
-webkit-column-width: 250px; 每一欄有多寬
-webkit-column-count: 4; 告訴瀏覽器有多少欄 瀏覽器自動算每一欄有多寬
-webkit-column-gap:10px 欄目之間多少px
-webkit-column-rule:1px solid red 欄目的分割線的樣式
當(dāng)設(shè)備的寬度在800px以上來引用的
當(dāng)設(shè)備的寬度在400到800之間 來引用的
當(dāng)設(shè)備的寬度在400以下的時(shí)候 來引用的
設(shè)備豎屏的情況下會加載這個css
設(shè)備橫屏的情況下會加載這個css
border-radius:10px;
兩個值：左上 右上 左下 右下
三個值：左上 右上左下 右下
實(shí)現(xiàn)畫橢圓 border-radius: 100px/150px; x軸的半徑/y軸的半徑
css3新增UI樣式 border-image:url
第一個參數(shù) url 使用的圖片
第二個參數(shù) 切割圖片 對背景的切割 上下 左右 再分配到邊框（固定的寬度）上做背景 不加px
第三個參數(shù) 圖片的排列方式 round stretch
背景和 div的邊框圖片的屬性值 都可以是線性漸變
-webkit-linear-gradient(起點(diǎn) 終點(diǎn) 起點(diǎn)的顏色 終點(diǎn)的顏色)
-webkit-linear-gradient(角度 起點(diǎn)的顏色 第二個新起點(diǎn)的顏色) 逆時(shí)針旋轉(zhuǎn)的角度 默認(rèn)是從左向右
-webkit-linear-gradient(角度 起點(diǎn)的顏色 起點(diǎn)的位置 終點(diǎn)的顏色 終點(diǎn)的位置)
改變某個位置的顏色 直接再在這個位置上寫一個顏色
實(shí)現(xiàn)鼠標(biāo)放上去 進(jìn)度條滾動的效果
sasa
使用 background 的時(shí)候 設(shè)置多個背景的時(shí)候 先設(shè)置的在上邊 后設(shè)置的在下邊
徑向漸變起點(diǎn)的位置 left top ,right top ,100px 100px 表示的是圓心的位置
參數(shù)2 圓的半徑
參數(shù)3 形狀的設(shè)置
sasa
屬性值的關(guān)鍵字
cover 用背景圖片（等比放大）鋪滿 可能導(dǎo)致圖片的寬或者高消失一部分
container 將圖片（等比縮小）從而放在div 里邊 但是可能會會出現(xiàn) 背景沒有覆蓋到的地方
padding-box 默認(rèn)的屬性值 原點(diǎn)就是padding的左上角
border-box 原點(diǎn)就是div的邊框的左上角
content 原點(diǎn)就是div的內(nèi)容的左上角
border-box 默認(rèn)值 會從邊框部分開始顯示北京圖片
padding-box 從padding區(qū)開始顯示背景區(qū)
content-box 從內(nèi)容區(qū)開始顯示背景區(qū)
自定義字體 使用方法
@font-face //關(guān)鍵字
{
font-family: myFirstFont; //定義的字體的名字
src: url("Sansation_Light.ttf"), //定義字體的來源
url("Sansation_Light.eot"); /* IE9 */ //兼容IE9
}
這樣就可以使用網(wǎng)上現(xiàn)在有的字體庫 從而是實(shí)現(xiàn)新的定義的字體
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/112622.html
摘要：重塑計(jì)劃一選擇符元素選擇符通配選擇符，選擇所有元素對象。選擇符，以唯一標(biāo)識符屬性等于的對象作為選擇符。選擇具有屬性且屬性值為包含的字符串的元素。偽類選擇符設(shè)置超鏈接在未被訪問前的樣式。僅用于規(guī)則匹配不含有選擇符的元素。 CSS重塑計(jì)劃（一）：選擇符 元素選擇符 *通配選擇符(Universal Selector)，選擇所有元素對象。E類型選擇符(Type Selector)，以文檔語言...
摘要：一背景介紹漸進(jìn)增強(qiáng)和優(yōu)雅降級這兩個概念是在出現(xiàn)之后火起來的。二概念理解漸進(jìn)增強(qiáng)漸進(jìn)增強(qiáng)一開始就針對低版本瀏覽器進(jìn)行構(gòu)建頁面，完成基本的功能，然后再針對高級瀏覽器進(jìn)行效果交互追加功能達(dá)到更好的體驗(yàn)。 一、背景介紹 漸進(jìn)增強(qiáng)和優(yōu)雅降級這兩個概念是在 CSS3 出現(xiàn)之后火起來的。由于低級瀏覽器不支持 CSS3，但是 CSS3 特效太優(yōu)秀不忍放棄，所以在高級瀏覽器中使用CSS3，而在低級瀏覽器...
摘要：而漸進(jìn)增強(qiáng)和優(yōu)雅降級兩種不同的開發(fā)流程，也是在我們項(xiàng)目初期做調(diào)研選型時(shí)會考慮的一個點(diǎn)。二者區(qū)別漸進(jìn)增強(qiáng)和優(yōu)雅降級只是看待同種事物的兩種觀點(diǎn)。漸進(jìn)增強(qiáng)和優(yōu)雅降級都關(guān)注于同一網(wǎng)站在不同設(shè)備里不同瀏覽器下的表現(xiàn)程度。 作為一名前端開發(fā)人員，最頭疼的莫過于瀏覽器兼容。遠(yuǎn)古時(shí)期萬惡的IE6，到現(xiàn)在CSS3不兼容的IE7/8.為了保證不同版本瀏覽器都有共同或更優(yōu)化的用戶體驗(yàn)，前端搬磚的我們不得不與...
摘要：而漸進(jìn)增強(qiáng)和優(yōu)雅降級兩種不同的開發(fā)流程，也是在我們項(xiàng)目初期做調(diào)研選型時(shí)會考慮的一個點(diǎn)。二者區(qū)別漸進(jìn)增強(qiáng)和優(yōu)雅降級只是看待同種事物的兩種觀點(diǎn)。漸進(jìn)增強(qiáng)和優(yōu)雅降級都關(guān)注于同一網(wǎng)站在不同設(shè)備里不同瀏覽器下的表現(xiàn)程度。 作為一名前端開發(fā)人員，最頭疼的莫過于瀏覽器兼容。遠(yuǎn)古時(shí)期萬惡的IE6，到現(xiàn)在CSS3不兼容的IE7/8.為了保證不同版本瀏覽器都有共同或更優(yōu)化的用戶體驗(yàn)，前端搬磚的我們不得不與...
摘要：而漸進(jìn)增強(qiáng)和優(yōu)雅降級兩種不同的開發(fā)流程，也是在我們項(xiàng)目初期做調(diào)研選型時(shí)會考慮的一個點(diǎn)。二者區(qū)別漸進(jìn)增強(qiáng)和優(yōu)雅降級只是看待同種事物的兩種觀點(diǎn)。漸進(jìn)增強(qiáng)和優(yōu)雅降級都關(guān)注于同一網(wǎng)站在不同設(shè)備里不同瀏覽器下的表現(xiàn)程度。 作為一名前端開發(fā)人員，最頭疼的莫過于瀏覽器兼容。遠(yuǎn)古時(shí)期萬惡的IE6，到現(xiàn)在CSS3不兼容的IE7/8.為了保證不同版本瀏覽器都有共同或更優(yōu)化的用戶體驗(yàn)，前端搬磚的我們不得不與...
閱讀 1953·2021-09-30 09:46
閱讀 1365·2019-08-30 15:43
閱讀 1123·2019-08-29 13:28
閱讀 1922·2019-08-29 11:24
閱讀 1681·2019-08-26 13:22
閱讀 3892·2019-08-26 12:01
閱讀 1816·2019-08-26 11:33
閱讀 3242·2019-08-23 15:34
