css的藝術

時間 2020-03-22

標籤 css 藝術欄目 CSS 简体版

原文原文鏈接

1、HTML、CSS、JavaScript之間的關係

HTML:網頁內容的載體css

CSS: 控制頁面的樣式html

JavaScript: 用來實現網頁功能瀏覽器

CSS層疊樣式表(Cascading Style Sheets)：用於定義HTML內容在瀏覽器內的顯示樣式bash

2、`CSS`發展歷史：

1996年W3C發佈CSS1
1998年W3C發佈CSS2
如今CSS3

3、CSS內容：

CSS基礎語法
CSS使用方法
CSS選擇器
CSS繼承和層疊
CSS優先級
CSS命名規範

4、引入css方法：

行內樣式：標籤內引入style屬性。加載順序：和頁面同時加載。cookie
內部樣式（嵌入樣式）：在<head></head>中<style></style>。加載順序：和頁面同時加載。app
鏈入外部樣式：<link href='xxx.css' rel='stylesheet' type='text/css' />標籤要放在<head></head>標籤之間。加載順序：頁面加載時，同時加載css樣式。最經常使用。dom
css導入式：1. @import "./***.css" 2. @import url(***.css)。加載順序：在讀取完html以後加載。可能存在問題：頁面加載慢時，dom加載完，可是css沒有加載完，頁面沒有樣式。同時import也存在瀏覽器兼容性問題。ide

CSS使用方法優先級：行內樣式 > 內部樣式 > 外部樣式字體

內部樣式 和 鏈入外部樣式 的優先級取決於引入的先後位置，就近原則。最後定義的優先級最高。url

5、CSS選擇器

標籤選擇器
類選擇器
ID選擇器
全局選擇器
羣組選擇器
後代選擇器

1. 標籤選擇器

以HTML標籤做爲選擇器。p、h1~h6等

經過標籤選擇器設置的樣式，使用該標籤的內容都會引入該樣式。

2. 類選擇器

.sepcial {color: red;} 只要經過class屬性引用類選擇器設置的樣式，那該標籤引用相應樣式。

可對不一樣類型元素的同一個名稱的類選擇器設置不一樣的樣式規則：

p.red {font-size: 16px;}
h1.red {font-size: 36px;}
複製代碼

同一個元素能夠設置多個類，之間有空格隔開：

<p class="special red">段落</p>
複製代碼

3. ID選擇器

ID選擇器與類class選擇器使用方法基本相同

#one {color: yellow;}
複製代碼

同一個html下，ID是惟一的。

4. 羣選擇器和全局選擇器

羣選擇器：集體統一的設置樣式。選擇器之間用逗號隔開。

p,h1,h2,h6 {font-size: 30px;}
複製代碼

class名和id名是區分大小寫的。 全局選擇器：*爲通配符

* {font-size: 50px;}
複製代碼

5. 後代選擇器

使用後代選擇器，選擇器之間用空格隔開

p em {font-size: 36px;}
h1.special em {color: orange;}
複製代碼

6. 僞類選擇器

僞類選擇器定義特殊狀態下的樣式

沒法用標籤、id、class及其它屬性實現

<a></a>連接的4種狀態：激活狀態、已訪問狀態、未訪問狀態、鼠標懸停狀態

僞類	說明
:link	未訪問的連接
:visited	已訪問的連接
:hover	鼠標懸停狀態
:active	激活的連接（鼠標點擊但未鬆開）

以點擊過的狀態會存儲到cookie中，須要清除才能夠重置。

僞類:hover和:active兼容

IE6及更早版本，支持<a>標籤的4種狀態
IE6瀏覽器不支持其餘元素的:hover和:active

連接僞類的書寫順序：順序錯誤會致使樣式不生效 :link > :visited > :hover > :active

a:hover必須置於:link和 :visited以後纔有效
a:active必須置於:hover以後，纔有效
僞類名稱對大小寫不敏感

6、CSS繼承、層疊和優先級

1. CSS繼承：從父元素那裏繼承部分CSS屬性。不是全部的屬性均可以繼承。

繼承的好處：

父元素設置樣式，子元素能夠繼承部分屬性
減小CSS代碼

Chrome瀏覽器默認字體16px，h1默認字體大小2em。h1爲父級字體大小的2倍。

CSS層疊：多個樣式應用於同一個元素。

CSS層疊：

能夠定義多個樣式
不衝突是，多個樣式能夠層疊爲一個
衝突時，按不一樣樣式規則優先級來應用樣式

2. CSS優先級

行內樣式 > 內部樣式 > 外部樣式

說明：

鏈入外部樣式與內部樣式表之間的優先級取決於所處位置的前後
最後定義的優先級最高（就近原則）

優先級：

id選擇器 > class選擇器 >標籤選擇器

同類樣式屢次引用，樣式表中後定義的優先級高

2. CSS權重

後代選擇器的優先級如何判斷

p a em {}
#p1 em {}
p.red a em {}
複製代碼

同同樣式表中：

權值相同。就近原則（離被設置元素越近優先級越高），同類樣式屢次引用，樣式表中後定義的優先級高。
權值不一樣。根據權值來判斷CSS樣式，哪一種CSS樣式權值高，就使用哪一種樣式。

選擇器權值

選擇器	權值
標籤選擇器	1
類原則器和僞類	10
ID選擇器	100
通配符選擇器	0
行內樣式	1000

權值規則：

統計不一樣選擇器的個數
每類選擇器的個數乘以相應權值
把全部選擇器的值相加得出選擇器的權值

3. CSS權值和優先級

!important規則：可調整樣式規則的優先級。添加在樣式規則以後，中間用空格隔開。通常不要輕易使用。如：

div{color; red !important;}
複製代碼

CSS優先級總結

!important聲明高
CSS使用方法的優先級：行內樣式 > 內部樣式 > 外部樣式
link鏈入外部樣式和style內部樣式優先級，取決於前後順序。
樣式表中優先級。id選擇器 > class選擇器 > 標籤選擇器 > 通配符

權值相同	權值不一樣
就近原則	使用權值搞的

7、CSS應用

CSS樣式命名規則：

採用英文字母、數字以及 - 和 _ 命名
以小寫字母開頭，不能以數字和 - 、_ 開頭
命名形式：單字，連字符，下劃線和駝峯
使用有意義的命名

經常使用的CSS樣式命名

1）頁面結構：

頁頭：header 頁面主體： main 頁尾：footer 內容： content、container 容器：container 導航：nav 側欄：sidebar 欄目：column 頁面外圍控制：wrapper 左右中：left right center

2）導航：

導航：nav 主導航：mainnav 子導航：subnav 頂導航：topnav 邊導航：sidebar 左導航：leftsidebar 右導航：rightsidebar 菜單：menu 子菜單：submenu 標題：title 摘要：summary

3）功能：

標誌：logo 廣告：banner 登陸：login 登陸條：loginbar 註冊：register 搜索：search 功能區：shop 標題： title

id和class使用：