一.什么是CSS3
CSS3是Cascading Style Sheets的第三個版本,是一種用于描述文檔樣式的語言(CSS3是CSS(層疊樣式表)技術的升級版本)。它是前端開發中用于控制網頁布局和樣式的技術之一。CSS3引入了許多新的特性和功能,如圓角、陰影、漸變、動畫等,大大增強了網頁設計和交互的能力。與CSS2相比,CSS3提供了更多的選擇和靈活性,使開發人員可以以更精細的方式控制網頁的外觀和表現。
二.css3相較于css有什么改進(優點)
-
模塊化:CSS3將樣式表分成了多個模塊,每個模塊負責一個特定的功能或特性。這種模塊化的設計使得CSS3更加靈活和可擴展。
-
新特性:CSS3引入了大量新的特性,包括圓角、陰影、漸變、動畫、多列布局等。這些新特性使得開發者能夠更方便地實現復雜的樣式效果。
-
增強樣式選擇器:CSS3引入了一些新的選擇器,如屬性選擇器、偽類選擇器和偽元素選擇器等。這些新的選擇器使得開發者能夠更精確地選擇DOM元素,從而靈活地應用樣式。
-
響應式布局:CSS3引入了媒體查詢功能,可以根據設備的不同,自動適應不同的屏幕尺寸和分辨率。這使得開發者能夠更輕松地創建響應式布局,提供更好的用戶體驗。
- 字體支持:CSS3引入了新的字體模塊,可以支持更多的字體格式和字體效果,提高了網頁的設計效果。
-
2D和3D轉換:CSS3新增了2D和3D轉換的屬性,可以實現元素的旋轉、縮放、傾斜等效果,增強了用戶體驗和頁面的動態效果。
總的來說,CSS3相比于CSS具有更多的功能和更靈活的樣式選擇器,能夠更方便地實現復雜的樣式效果和響應式布局。
三.css3必學的重點
CSS3 邊框
CSS3 圓角
CSS3 背景
CSS3 漸變
CSS3 文本效果
CSS3 字體
CSS3 2D 轉換CSS3 3D 轉換(旋轉)
CSS3 過渡
CSS3 動畫
CSS3 多列
CSS3 用戶界面
CSS3 圖片
CSS3 按鈕
CSS3 分頁
CSS3 框大小
CSS3 彈性盒子
CSS3 多媒體查詢
CSS3 多媒體查詢實例
CSS 網格布局
CSS 網格容器Css 網格元素
四.新增重點特性
background屬性
background-image:設置元素的背景圖像。
background-origin:規定背景圖片的定位區域。。
background-size:規定背景圖片的尺寸。。
·background-repeat:設置是否及如何重復背景圖像。
background-clip:用于確定背景畫區
word-wrap屬性
word-wrap 屬性允許長單詞或 URL 地址換行到下一行
注:所有主流瀏覽器都支持 word-wrap 屬性。
基礎語法:
word-wrap:normal break-word:
text-shadow屬性
text-shadow 屬性:向文本設置陰影。
text-shadow基礎語法:
text-shadow:5px 5px 5px #FF0000:
參數分別表示:水平陰影,垂直陰影,模糊距離,陰影顏色;
font-face屬性
font-face屬性:定義自己的字體
transform 屬性
提供了元素變形效果,也叫做變換。它可以將元素實現旋轉、縮放和平移的功能。
屬性值
border新增
-
border-radius:創建圓角邊框
-
box-shadow:為元素添加陰影
-
border-image:使用圖片來繪制邊框
linear-gradient:(線性漸變)
radial-gradient :(徑向漸變)
transition-property屬性
定義:設置對象中的參與過渡的屬性
語法:transition-property:none | all | property
特點
?沒有屬性改變
默認值,所有屬性都改變
元素的屬性名 width,color等
transition-duration屬性
定義: 設置對象過渡的持續時間
語法:transition-duration:time
規定完成過渡效果需要花費的時間,以秒或者毫秒計,默認值0
transition-timing-function屬性
定義:設置對象中過渡的動畫類型,即規定過渡效果的速度曲線。
該屬性允許過渡效果隨著時間來改變其速度。
語法:只能使用一個屬性值
有興趣加一下社區:http://t.csdnimg.cn/nl4Fi