css詳解之基本語法和樣式表定義

2023-05-07 分類：網站建設

CSS基本語法

CSS是Cascading Style Sheet的縮寫，中文譯作層疊樣式表（簡稱為樣式表），是W3C組織制定的，用于控制網頁樣式的一種標記性語言。

1.使用css可以簡單概括為：

1）選擇符：選擇符表示要定義樣式的對象，可以是元素本身，也可以是一類元素或者制定名稱的元素.

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

3）定義屬性值：屬性值包括常見的數值加單位，如25px。

2.每個CSS樣式都必須由兩部分組成：選擇符（Selector）和聲明(Declaration)。

聲明又包括屬性（Properyt）和屬性值（Value）

3.語法：selector{property:value;}

選擇符{屬性：屬性值；}

4.說明：

1、屬性必須要包含在{}號之中；

2、屬性和屬性值之間用“:”分隔；

3、當有多個屬性時，用“；”進行區分；

4、在書寫屬性時屬性之間使用空格、換行等，并不影響屬性的顯示；

5、如果一個屬性有幾個值，則每個屬性值之間用空格分隔開。

樣式表的定義

1、內聯樣式（嵌入式樣式、行間樣式表）

語法：<標記styl e="屬性：屬性值；屬性：屬性值；">

2、內部樣式

語法：

說明：1、內部樣式表必須定義在和之間；說明：

2、頁面所有樣式都可以寫在之間。

3、外部樣式

（A）使用link元素

使用link元素調用CSS的語法如下：

說明：rel="stylesheet"指這個link和其href之間的關聯樣式為樣式表文件。

type= "text/css"指文件類型是樣式表文本。

（B）使用@import

使用@import調用CSS的語法如下：

說明：@import的調用方法也可以寫在CSS文件中，用來調用其他的CSS。

區別：

1、import文字上與link的區別就是它可以把在一個CSS文件中引入其它幾個CSS文件；

2、IE6.0以下的版本：舊的瀏覽器是不支持@import方式的

3、如果你網頁head標簽里面十分簡單,只有@import屬性的話,當用戶瀏覽的網速較慢時,他會看到一個沒有風格樣式的頁面,然后隨著CSS文件被下載完成才可以看到應有的風格.要避免這樣的問題,你需要確保head里至少有一個script或是link標簽.

4、@import會使得CSS整體載入時間變長.并且在IE中會導致文件下載次序被更改,例如放置在@import后面的script文件會在CSS之前被下載.

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創新互聯

猜你還喜歡下面的內容