【前端進階100天】Day02 CSS基礎 CSS樣式表 CSS選擇符

時間 2020-01-28

標籤前端進階100天 day02 day css 基礎樣式選擇欄目 CSS 简体版

原文原文鏈接

今日內容:javascript

一、CSS簡介
二、CSS語法
三、樣式的建立（內部樣式外部樣式內聯樣式）
四、兩種引入外部樣式表的區別
五、樣式表的優先級和做用域
六、CSS選擇器
七、選擇器的權重
八、HTML、CSS註釋

1、CSS簡介

CSS英文全名：cascading style sheets，層疊樣式表，WEB標準中的表現標準語言。表現標準語言在網頁中主要對網頁信息的顯示進行控制，簡單說就是如何修飾網頁信息的顯示樣式。css

1998年5月21日由w3C正式推出的css2.0，目前推薦遵循的是W3C發佈的CSS3.0。html

用來表現XHTML或者XML等樣式文件的計算機語言。java

2、CSS語法

CSS語法：選擇符{屬性：屬性值；屬性：屬性值；}瀏覽器

選擇符表示要定義樣式的對象，能夠是元素自己，也能夠是一類元素或者制定名稱的元素。dom

屬性：屬性是指定選擇符所具備的屬性，它是css的核心，css2共有150多個屬性。url

屬性值：屬性值包括法定屬性值及常見的數值加單位，如25px，或顏色值等。spa

說明：3d

（1）每一個CSS樣式由兩部分組成，即選擇符和聲明，聲明又分爲屬性和屬性值；htm

（2）聲明必須放在花括號中，屬性與屬性值用冒號鏈接。

（3）每條聲明用分號結束。

（4）當一個屬性有多個屬性值的時候，屬性值與屬性值不分前後順序。

（5）在書寫樣式過程當中，空格、換行等操做不影響屬性顯示。

3、樣式的建立(內部樣式外部樣式內聯樣式)

（1）內部樣式

語法：

/css語句/

</style>

注：

寬高寫在CSS中，CSS不能寫在body中，要寫在樣式表中。

使用style標記建立樣式時，樣式表必須寫在<head></head>中間，不寫在<head>中間也會執行，但不容許這樣寫。

body中得有結構，樣式纔有效。

（2）外部樣式

方法一：外部樣式表的建立：工做中用的比較多的是這一種外部樣式（link）

說明：

使用link元素導入外部樣式表時，需將該元素寫在文檔頭部，即<head>與</head>之間。

rel（relation）：用於定義文檔關聯，表示關聯樣式表；

type：定義文檔類型；

href=「../css/outstyle.css"樣式路徑，絕對路徑。

href=「css/outstyle.css"樣式路徑，相對路徑。

一個css文件能夠同時爲多個html文件引用

方法二：外部樣式表的導入

@import url(目標文件的路徑及文件名全稱);

</style>

注：@和import之間沒有空格 url和小括號之間也沒有空格；必須結尾以分號結束；

（3）內聯樣式（又稱行間樣式，行內樣式，嵌入式樣式，內嵌樣式）

做爲標籤的屬性，寫在body中。

語法：<標籤 style="屬性：屬性值;屬性:屬性值;"></標籤>

不論什麼樣式都要先建立結構（html）

4、兩種引入外部樣式表link和import之間的區別

擴展知識點：link和import導入外部樣式的區別：

差異1：本質的差異：link屬於XHTML標籤，而@import徹底是CSS提供的一種方式。

差異2：加載順序的差異：當一個頁面被加載的時候（就是被瀏覽者瀏覽的時候），link引用的CSS會同時被加載，而@import引用的CSS會等到頁面所有被下載完再被加載。因此有時候瀏覽@import加載CSS的頁面時開始會沒有樣式（就是閃爍），網速慢的時候還挺明顯。

差異3：兼容性的差異：@import是CSS2.1提出的，因此老的瀏覽器不支持，@import只有在IE5以上的才能識別，而link標籤無此問題。

差異4：使用dom(document object model文檔對象模型 )控制樣式時的差異：當使用javascript控制dom去改變樣式的時候，只能使用link標籤，由於@import不是dom能夠控制的。

5、樣式表的優先級

A、內聯樣式表的優先級別最高

B、內部樣式表與外部樣式表的優先級和書寫的順序有關，後書寫的優先級別高。

6、CSS選擇符（選擇器）

經常使用的選擇符有十種左右：

類型選擇符，id選擇符，class選擇符，通配符，羣組選擇符，包含選擇符，僞類選擇符(僞類選擇符CSS中已經定義好的選擇器,不能隨便取名)，僞對象選擇符(設置在對象後發生的內容。用來和content屬性一塊兒使用 )

（1） 標籤選擇符/元素選擇符/類型選擇符（element選擇器 )

語法：元素名稱{屬性：屬性值；}

說明：

a)元素選擇符就是以文檔語言對象類型做爲選擇符，即便用結構中元素名稱做爲選擇符。例如body，div，p，img，em，strong，span......等。

b)全部的頁面元素均可以做爲選擇符;

用法：

1)若是想改變某個元素的默認樣式時，可使用類型選擇符；

（如：改變一個div、p、h1樣式）

2) 當統一文檔某個元素的顯示效果時，可使用類型選擇符

（如：改變文檔全部p段落樣式）

（2）id選擇器

語法：#id名{屬性：屬性值;}

說明：

a）當咱們使用id選擇符時，應該爲每一個元素定義一個id屬性

如：<div id="div1"></div>

b）id選擇符的語法格式是「#」加上自定義的id名

如：#box{width:300px; height:300px;}

c) 起名時要取英文名，不能用關鍵字：(全部的標記和屬性都是關鍵字)

如：head標記

d）一個id名稱只能對應文檔中一個具體的元素對象，由於id只能定義頁面中某一個惟一的元素對象。

e) 最大的用處：建立網頁的外圍結構。

（3）class選擇器

語法：.class名{屬性：屬性值;}

說明：

a）當咱們使用class選擇符時，應先爲每一個元素定義一個類名稱。

b）class選擇符的語法格式是："如：<div class="top"></div>"

用法：class選擇符更適合定義一類樣式；

（4）通配符

語法：*{屬性：屬性值；}

說明：通配選擇符的寫法是「*」，其含義就是全部元素。表明全部標籤，權重是最低的。

用法：經常使用來重置樣式。

（5）羣組選擇器

語法：選擇符1，選擇符2，選擇符3{屬性：屬性值;}

說明：當有多個選擇符應用相同的樣式時，能夠將選擇符用「，」分隔的方式，合併爲一組。

（6）包含選擇器

語法：選擇符1 選擇符2{屬性：屬性值;}

說明：選擇符1和選擇符2用空格隔開，含義就是選擇符1中包含的全部選擇符2；精確地找到要改變的元素。

用法：當個人元素存在父級元素的時候，我要改變本身自己的樣式，能夠不另加選擇符，直接用包含選擇器的方式解決。

（7）僞類選擇器(僞類選擇符)

語法：

a:link{屬性：屬性值;}超連接的初始狀態;

a:visited{屬性：屬性值;}超連接被訪問後的狀態;

a:hover{屬性：屬性值;}鼠標懸停，即鼠標劃過超連接時的狀態;

a:active{屬性：屬性值;}超連接被激活時的狀態，即鼠標按下時超連接的狀態;

h標籤沒有訪問連接，沒有link和visited屬性。

IE6不支持除了a之外的僞類選擇器標籤。

要讓他們遵照Link--visited--hover--active原則。

說明：

a）當這4個超連接僞類選擇符聯合使用時，應注意他們的順序，正常順序爲：

a:link,a:visited,a:hover,a:active,錯誤的順序有時會使超連接的樣式失效；

b）爲了簡化代碼，能夠把僞類選擇符中相同的聲明提出來放在a選擇符中；

例如：a{color:red;} a:hover{color:green;} 表示超連接的三種狀態都相同，只有鼠標劃過變顏色。

a:hover 時想改變元素狀態必須是a的子元素。

7、CSS選擇符的權重

css中用四位數字表示權重，權重的表達方式如：0，0，0，0

子選擇符的權重爲0000

類型選擇符的權重爲0001

class選擇符的權重爲0010

id選擇符的權重爲0100

屬性選擇符的權重爲0010

僞類選擇符的權重爲0010

僞元素選擇符的權重爲0001

包含選擇符的權重：爲包含選擇符的權重之和

羣組選擇符的權重：爲各自的權重

內聯樣式的權重爲1000

繼承樣式的權重爲0000

通配符選擇器權重爲0

當不一樣選擇符的樣式設置有衝突的時候，高權重選擇符的樣式會覆蓋低權重選擇符的樣式。

例如：b .demo的權重是1+10=11

.demo的權重是10

因此常常會發生.demo的樣式失效

相同權重的選擇符，樣式遵循就近原則：哪一個選擇符最後定義，就採用哪一個選擇符樣式。

（注意：是css樣式中定義該選擇符的前後，而不是html中使用前後）

8、頁面中的註釋

Html註釋

css的註釋

/ 我是css的註釋 /

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。