• <em id="52tge"><object id="52tge"><blockquote id="52tge"></blockquote></object></em>

  • <progress id="52tge"></progress>
      
      
      <tbody id="52tge"><pre id="52tge"></pre></tbody>
      <em id="52tge"></em>
      <li id="52tge"><acronym id="52tge"><u id="52tge"></u></acronym></li>

      <nav id="52tge"><sub id="52tge"><noframes id="52tge"></noframes></sub></nav>

      網站地圖 | RSS訂閱 老鐵博客 - 上海SEO優化|上海網站建設|蜘蛛池出租|站群代搭建
      你的位置:首頁 ? 前端腳本 ? 正文

      css3,css3新特性

      2020-3-17 14:30:43 | 作者:老鐵SEO | 0個評論 | 人瀏覽

        一、指代不同


        1、CSS3:是CSS(層疊樣式表)技術的升級版本,于1999年開始制訂,2001年5月23日W3C完成了CSS3的工作草案。


        2、CSS:是一種用來表現HTML(標準通用標記語言的一個應用)或XML(標準通用標記語言的一個子集)等文件樣式的計算機語言。


        二、內容不同


        1、CSS3:主要包括盒子模型、列表模塊、超鏈接方式、語言模塊、背景和邊框、文字特效、多欄布局等模塊。


        2、CSS:不僅可以靜態地修飾網頁,還可以配合各種腳本語言動態地對網頁各元素進行格式化。


        三、特點不同


        1、CSS3:新特征有很多,例如圓角效果、圖形化邊界、塊陰影與文字陰影、使用RGBA實現透明效果、漸變效果、使用@Font-Face實現定制字體、多背景圖、文字或圖像的變形處理(旋轉、縮放、傾斜、移動)、多欄布局、媒體查詢等。


        2、CSS:能夠對網頁中元素位置的排版進行像素級精確控制,支持幾乎所有的字體字號樣式,擁有對網頁對象和模型樣式編輯的能力。


        css3新特性


        1:CSS3選擇器部分


        E[att^="val"]匹配具有att屬性、且值以val開頭的E元素


        E[att$="val"]匹配具有att屬性、且值以val結尾的E元素


        E[att*="val"]匹配具有att屬性、且值中含有val的E元素


        E:root匹配文檔的根元素。在HTML中,根元素永遠是HTML


        E:nth-child(n)匹配父元素中的第n個子元素E


        E:nth-last-child(n)匹配父元素中的倒數第n個結構子元素E


        E:nth-of-type(n)匹配同類型中的第n個同級兄弟元素E


        E:nth-last-of-type(n)匹配同類型中的倒數第n個同級兄弟元素E


        E:last-child匹配父元素中最后一個E元素


        E:first-of-type匹配同級兄弟元素中的第一個E元素


        E:only-child匹配屬于父元素中唯一子元素的E


        E:only-of-type匹配屬于同類型中唯一兄弟元素的E


        E:empty匹配沒有任何子元素(包括text節點)的元素E


        :target匹配相關URL指向的E元素


        E:enabled匹配所有用戶界面(form表單)中處于可用狀態的E元素


        E:disabled匹配所有用戶界面(form表單)中處于不可用狀態的E元素


        E:checked匹配所有用戶界面(form表單)中處于選中狀態的元素E


        E::selection匹配E元素中被用戶選中或處于高亮狀態的部分


        E:not(s)匹配所有不匹配簡單選擇符s的元素E


        E~F匹配E元素之后的F元素


        2、CSS3特效部分1:圓角,陰影,漸變


        border-radius


        box-shadow


        text-shadow


        -webkit-gradient


        3、CSS3特效部分2:背景,邊框背景


        background-origin


        background-clip


        background-size


        multiplebackgrounds


        border-image


        4、CSS3特效部分3:變形


        rotate


        X/Y/Z


        scale


        translate


        transform-origin,transition-property,transition-duration,


        transition-timing-function,transition-delay'


        skew


        matrix


        5、CSS3特效部分4:動畫


        animation-name


        animation-duration


        animation-timing-function


        animation-delay


        animation-iteration-count


        -webkit-animation-direction


        css3動畫屬性


        animation-fill-mode:none|forwards|backwards|both;


        none:不改變默認行為。


        forwards:當動畫完成后,保持最后一個屬性值(在最后一個關鍵幀中定義)。


        backwards:在animation-delay所指定的一段時間內,在動畫顯示之前,應用開始屬性值(在第一個關鍵幀中定義)。


        both:向前和向后填充模式都被應用。


        CSS3是CSS(層疊樣式表)技術的升級版本,于1999年開始制訂,2001年5月23日W3C完成了CSS3的工作草案,主要包括盒子模型、列表模塊、超鏈接方式、語言模塊、背景和邊框、文字特效、多欄布局等模塊。


        CSS演進的一個主要變化就是W3C決定將CSS3分成一系列模塊。瀏覽器廠商按CSS節奏快速創新,因此通過采用模塊方法,CSS3規范里的元素能以不同速度向前發展,因為不同的瀏覽器廠商只支持給定特性。但不同瀏覽器在不同時問支持不同特性,這也讓跨瀏覽器開發變得復雜。


        css3新增的屬性


        h5是html的最新版本,是14年由w3c完成標準制定。增強了,瀏覽器的原生功能,減少瀏覽器插件(eg:flash)的應用,提高用戶體驗滿意度,讓開發更加方便。


        -h5新增的標簽


        新增元素


        說明


        video表示一段視頻并提供播放的用戶界面


        audio表示音頻


        canvas表示位圖區域


        source為video和audio提供數據源


        track為video和audio指定字母


        svg定義矢量圖


        code代碼段


        figure和文檔有關的圖例


        figcaption圖例的說明


        main


        time日期和時間值


        mark高亮的引用文字


        datalist提供給其他控件的預定義選項


        keygen秘鑰對生成器控件


        output計算值


        progress進度條


        menu菜單


        embed嵌入的外部資源


        menuitem用戶可點擊的菜單項


        menu菜單


        template


        section


        nav


        aside


        article


        footer


        header


        -css3


        css3被劃分為模塊,最重要的幾個模塊包括:選擇器、框模型、背景和邊框、文本效果、2D/3D轉換、動畫、多列布局、用戶界面


        選擇器


        框模型


        背景和邊框


        border-radius、box-shadow、border-image、


        background-size:規定背景圖片的尺寸


        background-origin:規定背景圖片的定位區域


        background-clip:規定背景的繪制區域


        文本效果(常用)


        text-shadow:設置文字陰影


        word-wrap:強制換行


        word-break


        css3提出@font-face規則,規則中定義了font-family、font-weight、font-style、font-stretch、src、unicode-range


        2/3D轉換


        transform:向元素應用2/3D轉換


        transition:過渡


        動畫


        @keyframes規則:


        animation、animation-name、animation-duration等


        用戶界面(常用)


        box-sizing、resize


        css3新增偽類


        :nth-child()


        :nth-last-child()


        :only-child


        :last-child


        :nth-of-type()


        :only-of-type()


        :empty


        :target這個偽類允許我們選擇基于URL的元素,如果這個元素有一個識別器(比如跟著一個#),那么:target會對使用這個ID識別器的元素增加樣式。


        :enabled


        :disabled


        :checked


        :not


        css3動畫效果


        主要需要使用-webkit-animation


        如:


        -webkit-animation:gogogo2sinfinitelinear;


        其中gogogo是自己定義的動畫幀,2s是整個動畫的秒數,infinite是永久循環linear是線性變化(step-end則是無線性變化,直接輸出結果)


        代碼如下:


        CSS:


        @-webkit-keyframesgogogo{


        0%{


        -webkit-transform:rotate(0deg);


        border:5pxsolidred;


        }


        50%{


        -webkit-transform:rotate(180deg);


        background:black;


        border:5pxsolidyellow;


        }


        100%{


        -webkit-transform:rotate(360deg);


        background:white;


        border:5pxsolidred;


        }


        }


        .loading{


        border:5pxsolidblack;


        border-radius:40px;


        width:28px;


        height:188px;


        -webkit-animation:gogogo2sinfinitelinear;


        margin:100px;


        }

    1. 本文來自: 老鐵博客,轉載請保留出處!歡迎發表您的評論
    2. 相關標簽:
    3. 已有0位網友發表了一針見血的評論,你還等什么?

      必填

      選填

      記住我,下次回復時不用重新輸入個人信息

      必填,不填不讓過哦,嘻嘻。

      ◎歡迎參與討論,請在這里發表您的看法、交流您的觀點。

      相關推薦

      色情激情片日本大全|亚洲无码色情gif|六人行成人版第九影院|亚洲成人电影理论电影

    4. <em id="52tge"><object id="52tge"><blockquote id="52tge"></blockquote></object></em>

    5. <progress id="52tge"></progress>
        
        
        <tbody id="52tge"><pre id="52tge"></pre></tbody>
        <em id="52tge"></em>
        <li id="52tge"><acronym id="52tge"><u id="52tge"></u></acronym></li>

        <nav id="52tge"><sub id="52tge"><noframes id="52tge"></noframes></sub></nav>