<progress id="52tge"></progress>
<tbody id="52tge"><pre id="52tge"></pre></tbody>
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;
}
<progress id="52tge"></progress>
<tbody id="52tge"><pre id="52tge"></pre></tbody>