天天看點

【CSS】網頁樣式設定之CSS簡介一、來曆二、CSS語言特點三、CSS文法規範

一、來曆

我們知道,從HTML誕生開始,樣式就以各種各樣的形式存在并修飾網頁内容資訊。CSS未出現時,我們會用各種屬性來對HTML中的元素進行樣式修飾,随着HTML的快速發展,慢慢的出現了很多的弊端:1.相同的屬性設定,可能使用的是不同的屬性來完成的。2.相同的操作,要重複寫,可維護性和可重用性較低。而CSS的出現正是解決了這些弊端,并且使web程式設計變得更加高效和可重複。

CSS(Cascading Style Sheets)——層疊樣式表,為HTML标記語言提供了一種樣式描述,定義了其中元素的顯示方式,(css與HTML不能分家)

二、CSS語言特點

1、繼承性(有層級關系的元素)

大部分的CSS效果是可以直接繼承給子元素的

2、層疊性

可以為一個元素定義多個樣式規則,規則中的屬性不沖突時,可以同時都應用到目前元素上。

3、優先級

在層疊性基礎上,如果樣式聲明沖突的話。則按照預設的優先級去應用樣式

由低到高:浏覽器的預設設定——樣式表(後定義着優先)——内斂方式

4、!important原則

顯示調整樣式屬性優先級

樣式屬性:值 !important; (!important加在誰的後面,就以誰為主)

5、多頁面應用

CSS樣式表可以單獨存放在一個CSS檔案中,這樣我們就可以在多個頁面中使用同一個CSS樣式表。CSS樣式表理論上不屬于任何頁面檔案,在任何頁面檔案中都可以将其引用。這樣就可以實作多個頁面風格的統一。

三、CSS文法規範

1、使用css樣式表方式

内斂方式——又稱行内樣式、内聯樣式

特點:将CSS内容定義在HTML标記中

文法:<ANY style=“樣式聲明1;樣式聲明2;。 … …”>

樣式聲明:

1》由樣式屬性名 以及 值來組成

2》屬性名 與 值 之間使用 :做連結

3》多個樣式聲明之間用 ; 做分隔 (最後一個可以不用)

常用的樣式屬性和值

1》設定文本顔色的屬性和值

屬性:color

值:合法的顔色值(英文)

Ex:color:red

2》設定背景顔色的屬性和值

屬性:backGround

值:合法的顔色值(英文)

3》設定文字大小的屬性和值

屬性:font—size

值:以px或pt為機關的數值

Ex :color:red

内部樣式表——在網頁中的一個獨立的地方聲明 網頁要用到的所有的樣式

文法:

<head>
	<style>
	/* 注釋*/
			樣式規則一
			樣式規則二
			樣式規則。。。
	</style>
</head>
           

樣式聲明:明确樣式規則裡面内容是什麼。

選擇器:規範了頁面中那些元素能夠使用聲明好的樣式,其實就是為了比對頁面中的元素。

樣式規則:由 選擇器 和 樣式聲明 組成。(說明可以試用在誰的身上)

樣式規則文法:

選擇器{

樣式聲明1;

樣式聲明2;

}

例如:

Div{
	Color:red;
	Background:yellow;
	Font-size:16px;
}
							
           

外部樣式表——在獨立于任何網頁的位置處,聲明一個樣式表檔案(.css),在檔案中聲明樣式,在使用的網頁中進行引入。

使用步驟:

1.建立樣式表檔案,并編寫樣式

在xxx.css 檔案中編寫樣式規則

2.在使用的網頁上對樣式表檔案進行引入

<head>
	<link rel="stylesheet"  href="xxx.css" target="_blank" rel="external nofollow" />
</head>
           

2、CSS選擇器

選擇器作用:

規範了頁面中那些元素能夠使用聲明好的樣式,其實就是為了比對頁面中的元素。

選擇器類型:

通用選擇器

作用:可以與頁面上的任意元素相比對

文法:*{樣式聲明}

ex:
 *{
	font-size:12px;
	color:red;
}
           

元素選擇器

作用:設定頁面上某種元素的預設樣式

文法:标記{樣式聲明}

ex: 
H3{color:red;}
           

類選擇器

作用:定義頁面上某個或某些元素的樣式

特點:通過元素的class屬性進行引用的選擇器

文法:

. 類名{樣式聲明}
           

注意: 點不能省。類名不能以數字開頭。由英文,-,_來組成

引用:<ANY class=“類名”>

特殊用法:

1.分類選擇器的定義方式,類選擇器和元素選擇器結合使用

文法:元素選擇器 . 類選擇器{}

ex:div.text{} 定義class為text的div元素的樣式。

2.多類選擇器的引用方式

讓元素應用多個類選擇器

文法:

id選擇器

作用:與id屬性聯用,為了設定指定id元素的樣式(專屬定制)

文法:#ID值{…}

群組選擇器

作用:将多個選擇器放在一起進行樣式的聲明定義

文法:選擇器1,選擇器2,選擇器3,…{…}

後代選擇器

作用:通過元素的後代關系比對元素

文法: 選擇器1 選擇器2{}

子代選擇器

作用:通過元素的子代(一層的層級關系)關系比對元素

文法:選擇器1>選擇器2{}

僞類選擇器

作用:為了比對元素不同的狀态的選擇器

文法: 所有的僞類都是以 : 為開始的

選擇器 : 僞類選擇器{…}

僞類 标記 說明 舉例
連結僞類 : link 比對元素尚未被通路時候的狀态 a : link
連結僞類 : visited 比對元素通路過的狀态 a:visited
動态僞類 : hover 比對滑鼠懸停在元素上時的效果
動态僞類 : active 比對元素被激活時的狀态
動态僞類 :focus 比對元素擷取焦點時的狀态

選擇器級别

【CSS】網頁樣式設定之CSS簡介一、來曆二、CSS語言特點三、CSS文法規範

沒有自定義的樣式看繼承,有自定義的直接看自定義 群組選擇器的權值不累加