css 膠囊 兩種顏色 你所不知道的CSS小知識

2021-10-13 17:05:34 字數 1560 閱讀 3407

css是

cascading style sheet 的縮寫,翻譯過來就是「層疊樣式表」,css用來定義html的顯示樣式,用於設計網頁的外觀效果,通過使用css來實現頁面的內容與表現形式分離,可以很大程度的提高工作效率。

html網頁就像是沒有經過裝修的毛坯房,而html+css的網頁就像是精裝修後的房子

css3是css中的最新版本,也就是說還有其他的css版本,例如css2.1,相對於2.1來講,css3增加了很多強大的新功能,可以幫助開發人員解決實際問題,非常實用。

css3繼承了css2.1的部分內容,並且在其基礎上進行了很多的新增和修改。css3的新特性非常多,這裡簡單列舉被瀏覽器支援的使用特性。

完善選擇器

在2.1的基礎上進行改進,它可以在標籤中指定特定的html元素,而不必使用多餘的類、id或者js指令碼。如果想要設計輕量級的網頁,並且希望標籤更好的分離,高階選擇器是非常有用的。它可以減少在標籤中新增大量class和id屬性的數量,並讓開發人員更方便的維護樣式表。

完善視覺效果

網頁中最常見的效果包括圓角、陰影、漸變背景、半透明、邊框等。在之前的css中需要用到js或者設計師製作來去實現效果,而在css3中可以使用一些新特性去實現這些效果。

完善盒子模型

盒子模型在css中是非常重要的,css2中的盒模型只能實現一些基本的功能,對一些特殊的實現效果,需要借助js來實現。而css3中改善了這一點,我們可以直接使用css3中的新屬性來去實現。

增加彈性盒模型布局

彈性盒模型布局(flexible box layout)能讓塊在水平、垂直方向對齊,能讓塊自適應螢幕大小,相比較於浮動、定位布局來說,它顯得更加方便靈活,但是在一些瀏覽器中還不被支援。

增強顏色和透明度功能

css3顏色屬性的引入,使使用者在使用時,不在侷限於rgb和十六進製制這兩種模式。css3增加了hsl、hsla、rgba幾種新的顏色 模式。在設計網頁的時候,能輕鬆實現某個顏色變亮或者變暗。

增加圓角和邊框功能

在css3中使用圓角不需要新增任何標籤和,也不需要借助js指令碼,乙個屬性就可以實現。

完善**特性

**特性可以實現一種響應式布局,使布局可以根據使用者的裝置選擇對應的樣式顯示出來,從而達到在不同解析度或裝置下具有不同效果顯示的目的。

講到這裡,css3的概述我們已經接近了尾聲,如果有感興趣的朋友,歡迎加入我們!

css 膠囊 兩種顏色 CSS 知識總結

一 瀏覽器渲染原理 1 html dom樹 描述內容 css cssom樹 描述需要對文件應用的樣式規則 dom樹和cssom樹合併後形成渲染樹 render tree 構建渲染樹 1 從dom樹根節點開始遍歷每個可見節點。某些節點不可見 例 指令碼標記 元標記 某些節點通過css隱藏,因此在渲染樹...

css 膠囊 兩種顏色 CSS 基礎知識

語法一 樣式語法 選擇器注意事項 語法二 語法 chartset utf 8 import url 2.css media min width 100px and max width 200px 注意事項 方法 如何使用開發者工具 流動方向 寬度 高度 overflow 溢位 當內容大於容器時 cs...

css你所不知道技巧

當元素沒有文字內容,但有href屬性的時候,顯示它的href屬性 table layout fixed可以讓每個格仔保持等寬 table max height與 overflow hidden 一起來建立純 css 的滑塊 slider slider hover 使列表的每項都由逗號分隔 ul li...