国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

css3

RancherLabs / 1132人閱讀

css3新增選擇器

屬性選擇器 包括h5中新增的自定義屬性



     
sasas

屬性選擇器可以指定屬性值 的樣式變化
E[attr="value"] 指定屬性名



     
sasas1

     
sasas2

     
sasas3

只有第一行才會變為紅色
E[attr~="value"] 屬性對應的值是許多個值 其中包括這個value
E[attr^="value"] 屬性對應的值是以value開頭的 一個值
E[attr$="value"] 屬性對應的值是以value結束的 一個值
E[attr*="value"] 屬性對應的值中包含value字符串包含字母 一個值
E[attr|="value"] 屬性值是以 value- 開始的
結構選擇器
p:nth-child(1|odd（2n）|even(2n-1)) 作為第一個孩子的p會被選擇到
p:nth-last-child(1|odd（2n）|even(2n-1)) 作為倒數第幾個孩子的p節點
p:nth-of-type(1|odd（2n）|even(2n-1)) 找到父級下的第二個p標簽
p:nth-last-of-type(1|odd（2n）|even(2n-1)) 找到父級下的倒數第二個p標簽
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 表示元素中沒有子節點
p:only-of-type 表示p的父元素中只有一個子節點 且這個唯一的子節點的必須是p
p:only-child 表示p的父元素中只有一個子節點 且這個唯一的子節點的必須是p

css3中新增加的偽類
URL 帶有后面跟有錨名稱 #，指向文檔內某個具體的元素。這個被鏈接的元素就是目標元素(target element)。
:target 選擇器可用于選取當前活動的目標元素。
url#value
div:target 會選擇到id為target的div
表單新增的偽類
input:disabled{} 會選擇到不能編輯的輸入框
input:enabled{} 會選擇到能編輯的輸入框
input:checked{} 會選擇到當前選中的復選框
css3新增的兄弟選擇器
E~F 選擇到的是E元素后邊的所有兄弟節點
E+F 選擇到的是E后邊的第一個兄弟節點
實現模擬單選框

文本新增選擇器
p:first-line 選擇到文本的第一行
p:first-letter 選擇到文本的第一個文字
p::selection 文本被鼠標選中的時候的樣式 注意到時雙冒號

    p::selection{
      color: red;background: green;
    }


   

       的囧事就打死的大世界第三

p:after {content:"添加的內容" 樣式}
E:not(F) 選擇到不是F的E
h1:not(.h2) 選擇到類不是h2的h2標簽

文本新增屬性

1、rgba顏色模式 紅綠藍透明度(0-1) 背景透明 文字不會透明
2、文字陰影 text-shadow: 0 0 10px red; / x y 模糊程度 陰影顏色/
text-shadow: 第一組陰影,第二組陰影;
3、文字描邊 webkit內核瀏覽器才會支持
-webkit-text-stroke:3px寬度

css3新增盒模型

父元素屬性 ：
1、display: -webkit-box;
2、內部項目的布局方向 -webkit-box-orient: vertical; 默認是橫向顯示的
3、內部項目的元素排列 -webkit-box-direction: reverse; 實現元素顛倒
4、水平方向上對項目沒有占滿的富裕空間的管理 -webkit-box-pack: end 富裕空間在左側顯示
這就可以輕松的實現水平居中了：-webkit-box-pack: center
把富裕空間清軍分配給每一個元素：-webkit-box-pack: justify
5、垂直方向上對項目沒有占滿的富裕空間的管理 -webkit-box-align:center ;
這就可以輕松的實現垂直居中了：-webkit-box-align: center
內部項目的屬性：
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
假設有兩個元素 第一個占1/3的父元素的寬度 第二個占2/3的父元素的寬度

css3對盒模型的陰影

box-shadow: 10px 10px 30px blue; //x偏移 y偏移 模糊程度 陰影顏色
box-shadow: inset 10px 10px 30px blue; //投影方式 x偏移 y偏移 模糊程度 陰影顏色
做邊框的一個新方法 利用陰影來做 同時陰影可以疊加 一個box上邊可以增加多個陰影

css3盒模型的倒影

-webkit-box-reflect: below|left|right|top 倒影和元素之間的距離
css3漸變

background: -webkit-linear-gradient(red 0,blue 100%);
紅色在開始 藍色在結束 的一個漸變

css3的拖拽放大屬性

但是這個屬性必須結合overflow: auto;來實現拖拽放大

css3中盒模型的解析方式

box-sizing:content-box 標準盒模型 默認的
內容寬度=width
可視寬度=width+padding+border
box-sizing:border-box 怪異盒模型
可視寬度=原來的width 所以如果他有padding 此時再設置這個屬性 就會導致子元素就會被減小

css3布局相關的東西

分欄布局 針對許多文字 一定要加上webkit前綴
-webkit-column-width: 250px; 每一欄有多寬
-webkit-column-count: 4; 告訴瀏覽器有多少欄 瀏覽器自動算每一欄有多寬
-webkit-column-gap:10px 欄目之間多少px
-webkit-column-rule:1px solid red 欄目的分割線的樣式

css3實現響應式 IE6 7 8 不兼容


當設備的寬度在800px以上來引用的

當設備的寬度在400到800之間 來引用的

當設備的寬度在400以下的時候 來引用的



設備豎屏的情況下會加載這個css

設備橫屏的情況下會加載這個css

css3新增UI樣式-border-radius

border-radius:10px;
兩個值：左上 右上 左下 右下
三個值：左上 右上左下 右下
實現畫橢圓 border-radius: 100px/150px; x軸的半徑/y軸的半徑
css3新增UI樣式 border-image:url

第一個參數 url 使用的圖片
第二個參數 切割圖片 對背景的切割 上下 左右 再分配到邊框（固定的寬度）上做背景 不加px
第三個參數 圖片的排列方式 round stretch

線性漸變

背景和 div的邊框圖片的屬性值 都可以是線性漸變
-webkit-linear-gradient(起點 終點 起點的顏色 終點的顏色)
-webkit-linear-gradient(角度 起點的顏色 第二個新起點的顏色) 逆時針旋轉的角度 默認是從左向右
-webkit-linear-gradient(角度 起點的顏色 起點的位置 終點的顏色 終點的位置)
改變某個位置的顏色 直接再在這個位置上寫一個顏色
實現鼠標放上去 進度條滾動的效果



    
sasa

使用 background 的時候 設置多個背景的時候 先設置的在上邊 后設置的在下邊

徑向漸變

起點的位置 left top ,right top ,100px 100px 表示的是圓心的位置
參數2 圓的半徑
參數3 形狀的設置

背景尺寸 background-size: 寬 高 


    
sasa

屬性值的關鍵字
cover 用背景圖片（等比放大）鋪滿 可能導致圖片的寬或者高消失一部分
container 將圖片（等比縮小）從而放在div 里邊 但是可能會會出現 背景沒有覆蓋到的地方

背景圖的原點設置 background-origin :屬性值

padding-box 默認的屬性值 原點就是padding的左上角
border-box 原點就是div的邊框的左上角
content 原點就是div的內容的左上角

背景圖的裁切 background-clip:屬性值

border-box 默認值 會從邊框部分開始顯示北京圖片
padding-box 從padding區開始顯示背景區
content-box 從內容區開始顯示背景區

css-font-face

自定義字體 使用方法

@font-face    //關鍵字  
{
font-family: myFirstFont;            //定義的字體的名字  
src: url("Sansation_Light.ttf"),     //定義字體的來源 
     url("Sansation_Light.eot"); /* IE9 */     //兼容IE9
}

這樣就可以使用網上現在有的字體庫 從而是實現新的定義的字體

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/112622.html

相關文章

  • CSS重塑計劃（一）：選擇符

    摘要：重塑計劃一選擇符元素選擇符通配選擇符，選擇所有元素對象。選擇符，以唯一標識符屬性等于的對象作為選擇符。選擇具有屬性且屬性值為包含的字符串的元素。偽類選擇符設置超鏈接在未被訪問前的樣式。僅用于規則匹配不含有選擇符的元素。 CSS重塑計劃（一）：選擇符 元素選擇符 *通配選擇符(Universal Selector)，選擇所有元素對象。E類型選擇符(Type Selector)，以文檔語言...

    lx1036 評論0 收藏0

  • 前端面試題-漸進增強和優雅降級

    摘要：一背景介紹漸進增強和優雅降級這兩個概念是在出現之后火起來的。二概念理解漸進增強漸進增強一開始就針對低版本瀏覽器進行構建頁面，完成基本的功能，然后再針對高級瀏覽器進行效果交互追加功能達到更好的體驗。 一、背景介紹 漸進增強和優雅降級這兩個概念是在 CSS3 出現之后火起來的。由于低級瀏覽器不支持 CSS3，但是 CSS3 特效太優秀不忍放棄，所以在高級瀏覽器中使用CSS3，而在低級瀏覽器...

    HollisChuang 評論0 收藏0

  • 雜談：漸進增強與優雅降級

    摘要：而漸進增強和優雅降級兩種不同的開發流程，也是在我們項目初期做調研選型時會考慮的一個點。二者區別漸進增強和優雅降級只是看待同種事物的兩種觀點。漸進增強和優雅降級都關注于同一網站在不同設備里不同瀏覽器下的表現程度。 作為一名前端開發人員，最頭疼的莫過于瀏覽器兼容。遠古時期萬惡的IE6，到現在CSS3不兼容的IE7/8.為了保證不同版本瀏覽器都有共同或更優化的用戶體驗，前端搬磚的我們不得不與...

    hiyang 評論0 收藏0

  • 雜談：漸進增強與優雅降級

    摘要：而漸進增強和優雅降級兩種不同的開發流程，也是在我們項目初期做調研選型時會考慮的一個點。二者區別漸進增強和優雅降級只是看待同種事物的兩種觀點。漸進增強和優雅降級都關注于同一網站在不同設備里不同瀏覽器下的表現程度。 作為一名前端開發人員，最頭疼的莫過于瀏覽器兼容。遠古時期萬惡的IE6，到現在CSS3不兼容的IE7/8.為了保證不同版本瀏覽器都有共同或更優化的用戶體驗，前端搬磚的我們不得不與...

    王軍 評論0 收藏0

  • 雜談：漸進增強與優雅降級

    摘要：而漸進增強和優雅降級兩種不同的開發流程，也是在我們項目初期做調研選型時會考慮的一個點。二者區別漸進增強和優雅降級只是看待同種事物的兩種觀點。漸進增強和優雅降級都關注于同一網站在不同設備里不同瀏覽器下的表現程度。 作為一名前端開發人員，最頭疼的莫過于瀏覽器兼容。遠古時期萬惡的IE6，到現在CSS3不兼容的IE7/8.為了保證不同版本瀏覽器都有共同或更優化的用戶體驗，前端搬磚的我們不得不與...

    SimonMa 評論0 收藏0

發表評論

0條評論

RancherLabs

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<