css3詳解

一.什么是CSS3

CSS3是Cascading Style Sheets的第三個版本,是一種用于描述文檔樣式的語言(CSS3是CSS(層疊樣式表)技術的升級版本)。它是前端開發中用于控制網頁布局和樣式的技術之一。CSS3引入了許多新的特性和功能,如圓角、陰影、漸變、動畫等,大大增強了網頁設計和交互的能力。與CSS2相比,CSS3提供了更多的選擇和靈活性,使開發人員可以以更精細的方式控制網頁的外觀和表現。

二.css3相較于css有什么改進(優點)

  1. 模塊化:CSS3將樣式表分成了多個模塊,每個模塊負責一個特定的功能或特性。這種模塊化的設計使得CSS3更加靈活和可擴展。
  2. 新特性:CSS3引入了大量新的特性,包括圓角、陰影、漸變、動畫、多列布局等。這些新特性使得開發者能夠更方便地實現復雜的樣式效果。
  3. 增強樣式選擇器:CSS3引入了一些新的選擇器,如屬性選擇器、偽類選擇器和偽元素選擇器等。這些新的選擇器使得開發者能夠更精確地選擇DOM元素,從而靈活地應用樣式。
  4. 響應式布局:CSS3引入了媒體查詢功能,可以根據設備的不同,自動適應不同的屏幕尺寸和分辨率。這使得開發者能夠更輕松地創建響應式布局,提供更好的用戶體驗。
  5. 字體支持:CSS3引入了新的字體模塊,可以支持更多的字體格式和字體效果,提高了網頁的設計效果。
  6. 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

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/716489.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/716489.shtml
英文地址,請注明出處:http://en.pswp.cn/news/716489.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Linux常用操作命令大全

Linux常用操作命令大全 Linux,作為一款開源的操作系統,深受全世界開發者和系統管理員的喜愛。在Linux環境下,用戶通過命令行界面可以執行各種操作,從而實現對系統的全面控制。本文將詳細介紹Linux中常用的操作命令,幫助讀者更好地理解和運用這些命令。 一、文件操作命令…

hexo圖片顯示不出且圖片路徑錯誤/.com//

參考博客: hexo 圖片顯示問題及使用typora設置圖片路徑-CSDN博客 javascript - hexo 圖片路徑錯誤/.com// - SegmentFault 思否 先說如何讓hexo圖片成功地顯示出來 Step1: 修改config設置 將 _config.yml 設置文件中的 post_asset_folder 修改為 true 這一步的作…

平衡二叉樹,二叉樹的路徑,左葉子之和

第六章 二叉樹part04 今日內容: 110.平衡二叉樹 257. 二叉樹的所有路徑 404.左葉子之和 110.平衡二叉樹 (優先掌握遞歸) 給定一個二叉樹,判斷它是否是高度平衡的二叉樹。 本題中,一棵高度平衡二叉樹定義為&am…

【不可不知的考研復試秘籍 1】

----------------------------------------------------------------------------------------------------- 考研復試科研背景提升班 教你快速深入了解掌握考研復試面試中的常見問題以及注意事項,系統的教你如何在短期內快速提升自己的專業知識水平和編程以及英語…

windows下安裝cnpm

cnpm是淘寶團隊開發的一個針對中國用戶的npm鏡像源,它是npm的一個定制版本。由于國外的npm源在國內訪問速度較慢,所以cnpm鏡像源可以提供更快的下載速度。cnpm的使用方式與npm基本相同,只需將npm替換為cnpm即可。 要想使用cnpm等先安裝node.…

反序列化逃逸 [安洵杯 2019]easy_serialize_php1

打開題目 題目源碼&#xff1a; <?php$function $_GET[f];function filter($img){$filter_arr array(php,flag,php5,php4,fl1g);$filter /.implode(|,$filter_arr)./i;return preg_replace($filter,,$img); }if($_SESSION){unset($_SESSION); }$_SESSION["user&qu…

每日一題 KY148還是暢通工程

某省調查鄉村交通狀況&#xff0c;得到的統計表中列出了任意兩村莊間的距離。省政府“暢通工程”的目標是使全省任何兩個村莊間都可以實現公路交通&#xff08;但不一定有直接的公路相連&#xff0c;只要能間接通過公路可達即可&#xff09;&#xff0c;并要求鋪設的公路總長度…

PostgreSQL對已有表增加自增序列

對已有表增加自增序列&#xff1a; 1、在PostgreSQL當中&#xff0c;我們要實現對已有表的ID字段自增。 首先需創建一個關聯序列&#xff0c;以下sql語句是創建一個序列&#xff1a; CREATE SEQUENCE menu_id_seq START 6000001; 序列名稱是menu_id_seq&#xff0c;起始…

sizeof 和 strlen的區別

sizeof sizeof是單目操作符,sizeof計算變量所棧內存空間大小,單位是字節,如果操作數是類型的話,會計算類型所占大小,sizeof指在乎占用內存空間大小不在乎內容是什么. int main() {int a 0;printf("%zd\n", sizeof(a));printf("%zd\n", sizeof a );printf…

巧【二叉搜索樹的最近公共祖先】【二叉搜索樹的性質】Leetcode 235. 二叉搜索樹的最近公共祖先

【二叉搜索樹的最近公共祖先】【二叉搜索樹性質】Leetcode 235. 二叉搜索樹的最近公共祖先 【巧】解法1 利用二叉搜索樹有序的性質解法2 采用二叉樹求最近公共祖先的方法——后序遍歷 ---------------&#x1f388;&#x1f388;235. 二叉搜索樹的最近公共祖先 題目鏈接&#x…

huggingface上傳或發布自己的模型(大語言模型LLM)

創建huggingface賬號和token 在https://huggingface.co/join注冊huggingface賬號&#xff0c;登錄賬號后&#xff0c;在https://huggingface.co/settings/tokens創建token&#xff0c;注意需要將token的類型設置為WRITE。 安裝必要軟件包和初始化環境 安裝git lfs curl -s …

Springboot+vue的制造裝備物聯及生產管理ERP系統(有報告)。Javaee項目,springboot vue前后端分離項目。

演示視頻&#xff1a; Springbootvue的制造裝備物聯及生產管理ERP系統&#xff08;有報告&#xff09;。Javaee項目&#xff0c;springboot vue前后端分離項 項目介紹&#xff1a; 本文設計了一個基于Springbootvue的制造裝備物聯及生產管理ERP系統&#xff0c;采用M&#xff…

WebSocket協議及其在實時通信中的重要性

本文深入介紹了WebSocket協議及其在實時通信中的重要性。從HTTP的限制到WebSocket的優勢&#xff0c;再到連接建立和實際應用&#xff0c;全面闡述了WebSocket的工作原理及其在實際業務中的應用場景。 一、引言 在生產中&#xff0c;有時需要服務端向客戶端發送消息&#xff0…

三元組的最小距離

題目鏈接&#xff1a; 三元組最小距離 定義三元組 $(a, b, c)$&#xff08;$a,b,c$ 均為整數&#xff09;的距離 $D|a-b||b-c||c-a|$。 給定 $3$ 個非空整數集合 $S_1, S_2, S_3$&#xff0c;按升序分別存儲在 $3$ 個數組中。 請設計一個盡可能高效的算法&#xff0c;計算并…

AI學習集合-前瞻

AI學習前瞻 工作崗位 算法工程師機器學習工程師圖像算法工程師ai工程師NLP高級算法工程師 學習路線 應用場景 計算機視覺技術應用場景 自然語言應用 AI流程 AI擬人流程 機器人歷史數據經驗模型規律依據模型預測未來依據規律做出判斷 AI基本流程 術語所用到的技術手段數據數…

javascript中對包含關系判斷介紹

本文將為您詳細講解 JavaScript 中對包含關系的判斷&#xff0c;包括數組、字符串等&#xff0c;并提供相應的代碼例子。 1. 數組包含關系判斷 在 JavaScript 中&#xff0c;數組包含關系判斷通常使用 Array.prototype.includes() 方法。這個方法返回一個布爾值&#xff0c;表示…

牛客網C++專項題目整理(2)

1.參加位運算的數據可以是任何類型的數據。請問這句話的說法是正確的嗎&#xff1f; 答案&#xff1a;錯誤 位運算符主要用于整型數據&#xff08;如int、unsigned int、long、unsigned long等&#xff09;和字符型數據&#xff08;如char和unsigned char&#xff09;&#x…

mac 本地使用dockerfile啟動 springboot項目

1.創建Dockerfile放在項目的根目錄下 2.編寫Dockerfile FROM openjdk:11 MAINTAINER ChengLinADD target/JiaLi-0.0.1-SNAPSHOT.jar /app.jar# 暴露 Spring Boot 應用的端口號 EXPOSE 8088 # 啟動 Spring Boot 應用 CMD ["java", "-jar", "app.jar&q…

前端學習第四天-css提升

達標要求 掌握css復合選擇器 塊級元素和行內元素及行內塊的區別? 哪些元素是塊元素,行內元素及行內塊元素? 熟練掌握display的用法 能夠說出css三大特性 熟練運用背景樣式 1. CSS復合選擇器 復合選擇器是由兩個或多個基礎選擇器&#xff0c;通過不同的方式組合而成的…

vue2結合electron開發跨平臺應用(桌面端應用)

1.確定nodejs和electron的版本號 確定nodejs和electron的版本號及其重要&#xff0c;因為electron的開發版本需要指定的nodejs版本支持。 本文安裝測試使用的是: 1.node18.19.0 2.npm10.2.3 3.vue-cli5.0.8 4.electron29.0.0 2.創建vue2項目 vue create elctron29.0.0_no…