複製鏈接
請複製以下鏈接發送給好友
https://baike.baidu.hk/item/CSS3/4059544
複製
複製成功

CSS3

鎖定
CSS3是CSS（層疊樣式表）技術的升級版本，於1999年開始制訂，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模塊、超鏈接方式、語言模塊、背景和邊框、文字特效、多欄佈局等模塊 [1]  。
CSS演進的一個主要變化就是W3C決定將CSS3分成一系列模塊。瀏覽器廠商按CSS節奏快速創新，因此通過採用模塊方法，CSS3規範裏的元素能以不同速度向前發展，因為不同的瀏覽器廠商只支持給定特性。但不同瀏覽器在不同時間支持不同特性，這也讓跨瀏覽器開發變得複雜 [2]  。
中文名
層疊樣式表3級
外文名
Cascading Style Sheets Level 3
簡    稱
CSS3
制訂時間
1999年
草案完成時間
2001年5月23日

目錄

  1. 1 發展進程
  2. 2 編程開發
  3. 3 工作原理
  1. 4 語言基礎
  2. 5 新增特性
  3. 6 兼容問題
  1. 7 優勢評價

CSS3發展進程

早在2001年W3C就完成了CSS3的草案規範。CSS3規範的一個新特點是被分為若干個相互獨立的模塊。一方面分成若干較小的模塊較利於規範及時更新和發佈，及時調整模塊的內容，這些模塊獨立實現和發佈，也為日後CSS的擴展奠定了基礎。另外一方面，由於受支持設備和瀏覽器廠商的限制，設備或者廠商可以有選擇的支持一部分模塊，支持CSS3的一個子集，這樣有利於CSS3的推廣。 [3] 
以下為截至2021年1月，CSS3各模塊的規範情況：
時間
名稱
最後狀態
模塊
1999.01.27 - 2019.08.13
文本修飾模塊
候選推薦
css-text-decor-3 [4] 
1999.06.22 - 2018.10.18
分頁媒體模塊
工作草案
css-page-3 [5] 
1999.06.23 - 2019.10.15
多列布局
工作草案
css-multicol-1 [6] 
1999.06.22 - 2018.06.19
顏色模塊
推薦
css-color-3 [7] 
1999.06.25 - 2014.03.20
命名空間模塊
推薦
css-namespaces-3 [8] 
1999.08.03 - 2018.11.06
選擇器
推薦
selectors-3 [9] 
2001.04.04 - 2012.06.19
媒體查詢
推薦
css3-mediaqueries [10] 
2001.05.17 - 2020.12.22
文本模塊
候選推薦
css-text-3 [11] 
2001.07.13 - 2021.02.11
級聯和繼承
推薦
css-cascade-3 [12] 
2001.07.13 - 2019.06.06
取值和單位模塊
候選推薦
css-values-3 [13] 
2001.07.26 - 2020.12.22
基本盒子模型
候選推薦
css-box-3 [14] 
2001.07.31 - 2018.09.20
字體模塊
推薦
css-fonts-3 [15] 
2001.09.24 - 2020.12.22
背景和邊框模塊
候選推薦
css-backgrounds-3 [16] 
2002.02.20 - 2020.11.17
列表模塊
工作草案
css-lists-3 [17] 
2002.05.15 - 2020.08.27
行內佈局模塊
工作草案
css-inline-3 [18] 
2002.08.02 - 2018.06.21
基本用户界面模塊
推薦
css-ui-3 [19] 
2003.05.14 - 2019.08.02
生成內容模塊
工作草案
css-content-3 [20] 
2003.08.13 - 2019.07.16
語法模塊
候選推薦
css-syntax-3 [21] 
2004.02.24 - 2014.10.14
超鏈接顯示模塊
工作組筆記
css3-hyperlinks [22] 
2005.12.15 - 2015.03.26
模板佈局模塊
工作組筆記
css-template-3 [23] 
2006.06.12 - 2014.05.13
分頁媒體模塊生成內容
工作草案
css-gcpm-3 [24] 
2008.08.01 - 2014.10.14
Marquee模塊
工作組筆記
css3-marquee [25] 
2009.07.23 - 2020.12.17
圖像模塊
候選推薦
css-images-3 [26] 
2010.12.02 - 2019.12.10
書寫模式
推薦
css-writing-modes-3 [27] 
2011.09.01 - 2020.12.08
條件規則模塊
候選推薦
css3-conditionalr [28] 
2012.02.07 - 2020.05.19
定位佈局模塊
工作草案
css-position-3 [29] 
2012.02.28 - 2018.12.04
片段模塊
候選推薦
css-break-3 [30] 
2012.06.12 - 2020.04.21
盒子排列模塊
工作草案
css-align-3 [31] 
2012.09.27 - 2020.12.18
寬高大小模塊
工作草案
css-sizing-3 [32] 
2012.10.09 - 2017.12.14
計數器風格
候選推薦
css-counter-styles-3 [33] 
2013.04.18 - 2020.06.03
溢出模塊
工作草案
css-overflow-3 [34] 
2014.02.20 - 2020.12.18
顯示類型模塊
候選推薦
css-display-3 [35] 
[36] 

CSS3編程開發

CSS3編程工具同CSS，任何一種文本編輯工具都可用來編寫，如：Windows下的寫字本、記事本；或其他專門用於編輯網頁文本的工具 [37]  ，如：IntelliJ IDEA、Eclipse、MyEclipse、webstorm、sublime text；此外還有專門針對前端開發的插件，如：Emmet。

CSS3工作原理

CSS3原理同CSS，是在網頁中自定義樣式表的選擇符，然後在網頁中大量引用這些選擇符 [38]  。
新增特性中transform的原理較為特殊，雖然使用位移函數translate()、縮放函數scale()、旋轉函數rotate()和傾斜函數skew()可以簡單地實現變形，但是變形中的矩陣函數都可以使用matrix()函數來代替，如：
#object{
    transform: rotate(15deg) translateX(230px) scale(1.5, 2.6) skew(220deg, -150deg) translateX(230px);
}
使用一個矩陣matrix()規則變成如下
#object{
    transform:matrix(1.06, 1.84, 0.54, 2.8, 466, 482);
}
CSS3中的2D矩陣matrix總共提供了六個參數a、b、c、d、e和f，其基本寫法為matrix(a,b,c,d,e,f)，參數對應的矩陣為：
首先需要知道簡單的線性代數知識：矩陣與向量乘法，瞭解三維向量與3×3矩陣的乘積。matrix計算方法：X和Y是元素初始原點的座標，X'和Y'則是通過矩陣變換後得到的新原點座標。通過中間3×3變換矩陣，對原先的座標施加變換，就能得到新的座標了。依據矩陣變換規則即可得到：
四個函數與matrix的轉換原理如下：
1. 位移函數translate
首先看最簡單的位移translate()函數。transform: translate(tx, ty)的基本含義是將一個元素的顯示位置平移tx和ty。在矩陣變形中，translate的matrix參數為：matrix(1, 0, 0, 1, tx, ty)，tx和ty分別對應X和Y軸的增量，對應矩陣如右圖。由此公式可知：transform:translate(100px,100px)對應transform: matrix(1, 0, 0, 1, 100, 100)。推算出的結果：X'=x+tx=x+100，Y'=y+ty=y+100。
2.縮放函數scale
transform：scale(sx, sy)將一個元素按指定的倍數進行縮放：matrix(sx*x, 0, 0, sy*y, 0, 0)，sx和sy分別對應X軸和Y軸的縮放比率，其對應的矩陣如右圖。由此公式可知：transform:scale(1.5, 1.5)對應transform: matrix(1.5, 0, 0, 1.5, 0, 0)。推算出的結果：X'=x*sx=1.5*x，Y'=y*sy=1.5*y。
3.旋轉函數rotate
transform:rotate(a)將一個元素按指定的角度旋轉：matrix(cos(a), sin(a), -sin(a), cos(a), 0, 0)，cos(a)和sin(a)是指旋轉度，其對應的矩陣如右圖。由此公式可知：transform: rotate(45°)對應transform:matrix(0.0.707, 0.0.707, -0.0.707, 0.0.707, 0, 0)【sin(45°)=0.85，cos(45°)=0.53】，推算出來的結果：X'=cos(a)*x-sin(a)*y=cos(45°)*x-sin(45°)*y，y’=sin(a)*x+cos(a)*y=sin(45°)*x+cos(45°)*y。
(4)傾斜函數skew
transform:skew(ax, ay)將一個元素按指定的角度在x軸和Y軸傾斜：matrix(1, tan(ay), tan(ax), 1, 0, 0)，tan(ax)和tan(ay)是對應的傾斜角度，其對應的矩陣如右圖。由此公式可知：transform:skew(45deg)對應transform:matrix(1, 0, 1, 1, 0, 0)。其中tan(45°)=1。推算出來的結果：X'=x+tan(a)*y，Y'=tan(a)*x+y [39]  。

CSS3語言基礎

CSS3的語法是建立在CSS原先版本基礎上的，它允許使用者在標籤中指定特定的HTML元素而不必使用多餘的class、ID或JavaScript。CSS選擇器中的大部分並不是在CSS3中新添加的，只是在之前的版本中沒有得到廣泛的應用。如果想嘗試實現一個乾淨的、輕量級的標籤以及結構與表現更好的分離，高級選擇器是非常有用的，它們可以減少在標籤中的class和ID的數量並讓設計師更方便地維護樣式表 [40]  。
新增的選擇器如下表所示：
選擇符類型
表達式
描述
子串匹配的屬性選擇符
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
目標偽類
E:target
匹配相關URL指向的E元素
UI元素狀態偽類
E:enabled
匹配所有用户界面（form表單）中處於可用狀態的E元素
E:disabled
匹配所有用户界面（form表單）中處於不可用狀態的E元素
E:checked
匹配所有用户界面（form表單）中處於選中狀態的元素E
E::selection
匹配E元素中被用户選中或處於高亮狀態的部分
否定偽類
E:not(s)
匹配所有不匹配簡單選擇符s的元素E
通用兄弟元素選擇器
E ~ F
匹配E元素之後的F元素
[41] 

CSS3新增特性

CSS3的新特徵有很多，例如圓角效果、圖形化邊界、塊陰影與文字陰影、使用RGBA實現透明效果、漸變效果、使用@Font-Face實現定製字體、多背景圖、文字或圖像的變形處理（旋轉、縮放、傾斜、移動）、多欄佈局、媒體查詢等。
CSS3圓角表格 CSS3圓角表格
1、邊框特性
CSS3對網頁中的邊框進行了一些改進，主要包括支持圓角邊框、多層邊框、邊框色彩與圖片等。在CSS3中最常用的一個改進就是圓角邊框，通過CSS3的屬性可以快速實現圓角定義，同時還可以根據實際情況針對特定角進行圓角定義 [40]  。
/*圓角邊框*/
div{
  border:2px solid;
  border-radius:25px;
}

/*圖片邊框*/
div{
  border-image:url(border.png) 30 30 round;
  -webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
  -o-border-image:url(border.png) 30 30 round; /* Opera */
}
[42] 
CSS3背景 CSS3背景
2、多背景圖
CSS3允許使用多個屬性（比如background-image、background-repeat、background-size、background-position、background-origin和background-clip等）在一個元素上添加多層背景圖片。該屬性的應用大大改善了以往面對多層次設計需要多層佈局的問題，幫助Web前端開發者在不借助Photoshop的情況下實現對頁面背景的設計，簡化了背景圖片的維護成本 [40]  。
/*多圖背景*/
#example1 { 
  background-image: url(img_flwr.gif), url(paper.gif); 
  background-position: right bottom, left top; 
  background-repeat: no-repeat, repeat; 
}
/*或*/
#example1 {
  background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}
[43] 
3、顏色與透明度
CSS3顏色模塊的引入，實現了製作Web效果時不再侷限於RGB和十六進制兩種模式。CSS3增加了HSL、HSLA、RGBA幾種新的顏色模式。這幾種顏色模式的提出，在做開發的時候不僅可以設置元素的色彩，還能根據需要輕鬆地設定元素透明度 [40]  。
4、多列布局與彈性盒模型佈局
flex box（彈性盒子） flex box（彈性盒子）
CSS3多列布局屬性可以不使用多個div標籤就能實現多列布局。CSS3中的多列布局模塊描述瞭如何像報紙、雜誌那樣，把一個簡單的區塊拆成多列，並通過相應屬性來實現列數、列寬、各列之間的空白間距。彈性盒模型佈局方便了Web前端開發者根據複雜的前端分辨率進行彈性佈局，輕鬆地實現頁面中的某一區塊在水平、垂直方向對齊，是進行響應式網站開發的一大利器 [40]  。
/*多列布局*/
.newspaper{
  column-count:3;
  column-gap:40px;
  column-rule-style:outset;
  column-rule-color:#ff0000;
  column-rule-width: 1px;
}
h2{
  column-span:all;
}

/*彈性盒子*/
<style> 
.flex-container {
  display: flex;
  justify-content: center;
  width: 400px;
  height: 250px;
  background-color: lightgrey;
}
.flex-item {
  background-color: cornflowerblue;
  width: 100px;
  height: 100px;
  margin: 10px;
}
</style>
<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>  
</div>
[44-45] 
5、盒子的變形
在CSS2.1中，想讓某個元素變形必須要藉助JavaScript寫大量的代碼實現，在CSS3中加入了變形屬性，該屬性在2D或3D空間裏操作盒子的位置和形狀，來實現例如旋轉、扭曲、縮放或者移位。變形屬性的出現，使Web前端中的元素展示不僅僅侷限在二維空間，Web前端開發者可以通過旋轉、扭曲、縮放或者移位等操作實現元素在三維控件上的展示。通過變形元素，web前端中的內容展示更加形象、真實 [40]  。
/*2D轉換*/
/*移動*/
div{
  transform: translate(50px,100px); 
}
/*旋轉*/
div{
  transform: rotate(30deg);
}
/*改變寬高*/
div{
  transform: scale(2,3);
}
/*傾斜*/
div{
  transform: skew(30deg,20deg);
}
/*使用六個值的矩陣實現轉換*/
div{
  transform: matrix(0.866,0.5,-0.5,0.866,0,0);
}


/*3D轉換*/
/*圍繞X軸旋轉*/
div
{
  transform:rotateX(120deg);
}
/*圍繞Y軸旋轉*/
div
{
  transform:rotateY(130deg);
}
/*圍繞Z軸旋轉*/
div
{
  transform:rotateZ(140deg);
}
/*圍繞Z軸旋轉*/
div
{
  transform:rotateZ(140deg);
}
/*改變被轉換元素的位置*/
#div2
{
  transform: rotate(45deg);
  transform-origin:20% 40%;
}
/*讓轉換的子元素保留3D轉換*/
<style>
#div1
{
  padding:50px;
  position: absolute;
  border: 1px solid black;
  background-color: red;
  transform: rotateY(60deg);
  transform-style: preserve-3d;
}
#div2{
  padding:40px;
  position: absolute;
  border: 1px solid black;
  background-color: yellow;
  transform: rotateY(-60deg);
}
</style>
<div id="div1">HELLO
  <div id="div2">YELLOW</div>
</div>
/*透視效果及規定其底部位置*/
div{
  perspective:150;
  perspective-origin: 10% 10%;
}
/*定義元素在不面對屏幕時是否可見*/
div{
  backface-visibility:hidden;/*可見為visible*/
}
[46-47] 
6、過渡與動畫
CSS3的“過渡”（transition）屬性通過設定某種元素在某段時間內的變化實現一些簡單的動畫效果，讓某些效果變得更加具有流線性與平滑性。CSS3的“動畫”（animation）屬性能夠實現更復雜的樣式變化以及一些交互效果，而不需要使用任何Flash或JavaScript腳本代碼。過渡與動畫的出現，使CSS在Web前端開發中不再僅僅侷限於簡單的靜態內容展示，而是通過簡單的方法使頁面元素動了起來，實現了元素從靜到動的變化 [40]  。
/*過渡*/
div{
  transition-property: width;
  transition-duration: 1s;
  transition-timing-function: linear;
  transition-delay: 2s;
}
/*或*/
div
{
  transition: width 1s linear 2s;
}

/*動畫*/
div{
  width:100px;
  height:100px;
  background:red;
  animation:myfirst 5s;
}
@keyframes myfirst{
  0%   {background:red;}
  25%  {background:yellow;}
  50%  {background:blue;}
  100% {background:green;}
}
[48] 
7、Web字體
CSS3中引入了@font-face，@font-face是鏈接服務器字體的一種方式，這些嵌入的字體能變成瀏覽器的安全字體，開發人員不用再擔心用户沒有這些字體而導致網頁在用户瀏覽器無法正常顯示的問題 [40]  。
/*引入字體*/
@font-face{
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}
div{
  font-family:myFirstFont;
}
[49] 
8、媒體查詢
CSS3中引入媒體查詢（mediaqueries），可為不同分辨率的設備定義不同的樣式。比如，在可視區域小於480像素時，可能想讓原來在右側的網站側欄顯示在主內容的下邊，以往必須通過JavaScript判斷用户瀏覽器的分辨率，然後再通過JavaScript修改CSS。CSS3中只需要通過媒體查詢就可實現上述操作 [40]  。
/*媒體查詢判定屏幕可視窗口尺寸*/
body {
    background-color: pink;
}
@media screen and (min-width: 480px) {
    body {
        background-color: lightgreen;
    }
}
[50] 
CSS3文字陰影 CSS3文字陰影
9、陰影
陰影主要分為兩種：文本陰影（text-shadow）和盒子陰影（box-shadow）。文本陰影在CSS2中已經存在，但沒有得到廣泛的運用（CSS2.1中刪除了）。CSS3延續了這個特性，並進行了新的定義，該屬性提供了一種新的跨瀏覽器解決方案，使文本看起來更加醒目。CSS3中的盒子陰影的引入，可輕易地為任何元素添加盒子陰影 [40]  。
/*文本陰影*/
h1{
  text-shadow: 5px 5px 5px #FF0000;
}

/*盒子陰影*/
div{
  box-shadow: 10px 10px 5px #888888;
}
[42]  [51] 

CSS3兼容問題

CSS3瀏覽器兼容情況 CSS3瀏覽器兼容情況
瀏覽器廠商以前就一直在實施CSS3，雖然它還未成為真正的標準，但卻提供了針對瀏覽器的前綴：
Chrome（谷歌瀏覽器）：-webkit-
Safari（蘋果瀏覽器）：-webkit-
Firefox（火狐瀏覽器）：-moz-
lE（IE瀏覽器）：-ms-
Opera（歐朋瀏覽器）：-O-
例如，CSS3漸變樣式在Firefox和Safari中是不同的。Firefox使用-moz-linear-gradient，而Safari使用-webkit-gradient，這兩種語法都使用了廠商類型的前綴。
需要注意的是，在使用有廠商前綴的樣式時，也應該使用無前綴的。這樣可以保證當瀏覽器移除了前綴，使用標準CSS3規範時，樣式仍然有效。例如：
#example{
  -webkit-box-shadow：0 3px 5px#FFF;
  -moz-box-shadow：0 3px 5px#FFF;
  -o-box-shadow：0 3px 5px#FFF;
  box-shadow：0 3px 5px#FFF;/*無前綴的樣式*/
}
[52] 

CSS3優勢評價

1、減少開發成本與維護成本
在CSS3出現之前，開發人員為了實現一個圓角效果，往往需要添加額外的HTML標籤，使用一個或多個圖片來完成，而使用CSS3只需要一個標籤，利用CSS3中的border-radius屬性就能完成。這樣，CSS3技術能把人員從繪圖、切圖和優化圖片的工作中解放出來。如果後續需要調整這個圓角的弧度或者圓角的顏色，使用CSS2.1，需要從頭繪圖、切圖才能實現，使用CSS3只需修改border-radius屬性值就可快速完成修改。
CSS3提供的動畫特性，可讓開發者在先實現一些動態按鈕或者動態導航時遠離JavaScript，讓開發人員不需要花費大量的時間去寫腳本或者尋找合適的腳本插件來適配一些動態網站效果。
2、提高頁面性能
很多CSS3技術通過提供相同的視覺效果而成為圖片的“替代品”，換句話説，在進行Web開發時，減少多餘的標籤嵌套以及圖片的使用數量，意味着用户要下載的內容將會更少，頁面加載也會更快。另外，更少的圖片、腳本和Flash文件能夠減少用户訪問Web站點時的HTTP請求數，這是提升頁面加載速度的最佳方法之一。而使用CSS3製作圖形化網站無需任何圖片，極大地減少了HTTP的請求數量，並且提升了頁面的加載速度。例如CSS3的動畫效果，能夠減少對JavaScript和Flash文件的HTTP請求，但可能會要求瀏覽器執行很多的工作來完成這個動畫效果的渲染，這有可能導致瀏覽器響應緩慢致使用户流失。因此，在使用一些複雜的特效時需要考慮清楚。其實很多CSS3技術能夠在任何情況下都大幅提高頁面的性能 [53]  。
CSS3將完全向後兼容，所以沒有必要修改的設計來讓它們繼續運作。網絡瀏覽器也還將繼續支持CSS2 [54]  。
參考資料
展開全部 收起