學習HTML 第二章css基礎

2021-10-01 23:58:09 字數 2601 閱讀 9961

cascading style sheets    漢譯層疊樣式表,web標準中的表現標準語言,表現標準語言在網頁中主要對網頁資訊的顯示進行控制,簡單說就是如何修飾網頁資訊的顯示樣式。

目前推薦遵循的是w3c發布的css3.0.

用來表現xhtml或者xml等樣式檔案的計算機語言。

2023年5月21日由w3c正式推出的css2.0

1.內部樣式  :

語法:

注:使用style標記建立樣式時,最好將該標記寫在;

2.外部樣式

語法:

3.內聯樣式(行間樣式,行內樣式,嵌入式樣式)

語法:

這是一段文字

4.@import方式引入樣式檔案

語法:

選擇符

div

說明:

1)每個css樣式由兩部分組成,即選擇符和宣告,宣告又分為屬性和屬性值;

2)屬性必須放在花括號中,屬性與屬性值用冒號連線。

3)每條宣告用分號結束。

4)當乙個屬性有多個屬性值的時候,屬性值與屬性值不分先後順序。

5)在書寫樣式過程中,空格、換行等操作不影響屬性顯示

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

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

選擇符表示要定義樣式的物件,可以是元素本身,也可以是一類元素或者制定名稱的元素.

常用的選擇符有十種左右

型別選擇符,id選擇符,class選擇符,萬用字元,群組選擇符,

包含選擇符,偽類選擇符

1. 元素選擇符/型別選擇符(element選擇器 )

語法:

元素名稱

div

說明:

a)元素選擇符就是以文件語言物件型別作為選擇符,即使用結構中元素名稱作為選擇符。例如body、div、p,img,em,strong,span…等。

b)所有的頁面元素都可以作為選擇符;

用法:1)如果想改變某個元素的預設樣式時,可以使用型別選擇符;

2) 當統一文件某個元素的顯示效果時,可以使用型別選擇符;

2.id選擇器

語法:

#id名

#top

說明:

1)當我們使用id選擇符時,應該為每個元素定義乙個id屬性,

如:2)id選擇符的語法格式是「#」加上自定義的id名

如:#box

3)  起名時要取英文名,不能用關鍵字:(所有的標記和屬性都是關鍵字)

如:head標記

4)乙個id名稱只能對應文件中乙個具體的元素物件,因為id只能定義頁面中某乙個唯一的元素物件。

5)   最大的用處:建立網頁的外圍結構。

3.class選擇器

語法:

.class名

.top

說明:

1)當我們使用類選擇符時,應先為每個元素定義乙個類名稱,

2)類選擇符的語法格式是:「如:

」用法:class選擇符更適合定義一類樣式;

4.*萬用字元

語法:

*

*

說明:通配選擇符的寫法是「*」,其含義就是所有元素。

用法:常用來重置樣式。

5.群組選擇器

語法:

選擇符1,選擇符2,選擇符3

.box,.name

說明:當有多個選擇符應用相同的樣式時,可以將選擇符用「,」分隔的方式,合併為一組。

6.包含選擇器(後代選擇器)

語法:

選擇符1    選擇符2

.box .name

說明:選擇符1和選擇符2用空格隔開,含義就是選擇符1中包含的所有選擇符2;

7.偽類選擇器(偽類選擇符)

語法 :

a:link超連結的初始狀態;

a:visited超連結被訪問後的狀態;

a:hover滑鼠懸停,即滑鼠劃過超連結時的狀態;

a:active超連結被啟用時的狀態,即滑鼠按下時超連結的狀態;

說明:1)當這4個超連結偽類選擇符聯合使用時,應注意他們的順序,正常順序為:

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

(愛恨原則【l o v e】 【h a t e】)

2)為了簡化**,可以把偽類選擇符中相同的宣告提出來放在a選擇符中;

例如:a     a:hover表示超連結的三種狀態都相同,只有滑鼠劃過變顏色。

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

型別選擇符的權重為0001

class選擇符的權重為0010

id選擇符的權重為0100

子選擇符的權重為0000

屬性選擇符的權重為0010

偽類選擇符的權重為0010

偽元素選擇符的權重為0001

包含選擇符的權重:為包含選擇符的權重之和

內聯樣式的權重為1000

繼承樣式的權重為0000

HTML學習5 30(第二章)

我採用了華為彩雲字型,字型大小為5,顏色為藍色 我採用預設字型,字型大小為3,顏色為綠色 我採用了隸書字型,字型大小和顏色均預設!什麼也不設定 測試預設字型大小,這裡應該和第一行字型大小一致 測試預設字型大小,size 5 color blue 這裡應該和第一行字型大小一致 測試預設字型大小,siz...

第二章 HTML基礎(上)

一.html語言 標籤 元素 屬性 html hypertest markup language 超文字標記語言 製作網頁的標準語言,標籤構成。標籤由尖括號包圍,比如 通常是成對出現的 單獨出現標籤 標籤巢狀 表示文件型別符合html5標準 1.一級標題比二級標題大 2.段落內容 這是段落,每個段落...

第二章 HTML結構

dtd document type definition 規定了標記語言的規則,使得瀏覽器可以正確的呈現內容。html結構是一種巢狀結構,如同洋蔥,從外到裡。web頁面結構,即dom document object model 樹結構。現在主流的編輯器 ide 都會帶有 提示功能,如webstorm...