摘要:一前言在中使用,包括內聯式內嵌式鏈接式和導入式。鏈接式使用時需要在標記中使用標記,通過標記的相關屬性指明外部文件的路徑,以方便找到其中定義的樣式并運用在當前網頁元素上。導入式通過在標記的標記中使用方法導入相應的文件。
一、前言
在 HTML 中使用 CSS,包括內聯式、內嵌式、鏈接式和導入式。
二、分類 2.1 內聯式內聯式是所有樣式應用方式中最為直接的一種,它通過對 HTML 標記使用 style 屬性,將 CSS 代碼直接寫在其中。
在HTML中使用CSS之內聯式 在HTML中使用CSS之內聯式
內聯式是最簡單、直接的 CSS 使用方法,但它的針對性很明顯,只能作用于當前標記,造成代碼冗余,維護比較困難。
2.2 內嵌式內嵌式與內聯式使用方法不同,它將 CSS 代碼寫在 標記之間,并需要采用 標記進行聲明。
在HTML中使用CSS之內嵌式 在HTML中使用CSS之內嵌式
使用內嵌式 CSS 用法時 CSS 代碼將被集中放在 標記中,這樣方便查找,對后期維護比較方便,頁面代碼也會減少。但是,如果一個網站有很多頁面,如果多個網頁的某個標記要使用相同的樣式效果,內嵌式也會 出現代碼冗余和維護困難的問題,所以,內嵌式比較適合個別風格特殊的頁面效果設置。
2.3 鏈接式在實際的網頁設計中,鏈接式 CSS 用法是最常用的,也是效果最好的。鏈接式特點是將 CSS 代碼多帶帶放在一個或多個 .css 文件中,實現了 CSS 代碼和 HTML 代碼的分離,這樣使前期設計和后期維護都很方便,也有助于實現前臺美工設計與后臺程序設計人員的合理分工。
鏈接式 CSS 使用時需要在 標記中使用 標記,通過 標記的相關屬性指明外部 CSS 文件的路徑,以方便找到其中定義的 CSS 樣式并運用在當前網頁元素上。
在HTML中使用CSS之鏈接式 在HTML中使用CSS之鏈接式
@charset "utf-8"; /* CSS Document */ p{ color: #39f; }
鏈接式 CSS 用法的最大特點是將 CSS 代碼和 HTML 代碼分離,這樣就可以實現將一個 CSS 文件鏈接到不同的 HTML 網頁中。使用鏈接式 CSS,可以在設計整個網站時,將多個頁面都會用到的 CSS 樣式定義在一個或多個 .css 文件中,然后在需要用到該樣式的 HTML 網頁中通過 標記鏈接這些 .css 文件,通過鏈接式 CSS 可以降低整個網站的頁面代碼冗余并提高網站的可維護性。
2.4 導入式導入式和鏈接式的用法基本相同,區別在于語法和使用方式上略有不同。導入式通過在 標記的 標記中使用 @import 方法導入相應的 CSS 文件。被導入的 HTML 文件在初始化時,會將該 CSS 文件導入 HTML 文件中,作為此 HTML 文件的一部分,類似于內嵌式的效果,而鏈接式是在 HTML 的標記需要 CSS 樣式的時候才會以鏈接的方式引入進來。
在HTML中使用CSS之導入式 在HTML中使用CSS之導入式
不只是 HTML 文件的 標記可以導入 CSS 文件,在 CSS 文件內也可以導入其他的 CSS 文件。例如,可以在 style.css 文件中不寫任何 CSS 代碼,只寫 @import url(style.css);,這樣所有導入或鏈接到該 CSS 文件的 HTML 頁面都可以使用 style.css 中定義的所有樣式效果。
三、提醒如果你網頁中使用多種方式,樣式之間可能會出現沖突。這時解決 CSS 沖突你就要了解在 HTML 中使用 CSS 的優先級規則:
內聯式 > 內嵌式 > 外部樣式;
在多個樣式中,后出現的樣式的優先級高于先出現的樣式;
在樣式中,選擇器的優先級:id 樣式 > class 樣式 > 標記樣式。
為了避免 CSS 沖突,建議你不要混合使用多種,強力推薦使用鏈接式。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/115132.html
摘要:一前言在中使用,包括內聯式內嵌式鏈接式和導入式。鏈接式使用時需要在標記中使用標記,通過標記的相關屬性指明外部文件的路徑,以方便找到其中定義的樣式并運用在當前網頁元素上。導入式通過在標記的標記中使用方法導入相應的文件。 一、前言 在 HTML 中使用 CSS,包括內聯式、內嵌式、鏈接式和導入式。 二、分類 2.1 內聯式 內聯式是所有樣式應用方式中最為直接的一種,它通過對 HTML 標記...
摘要:元素是使用小于號和大于號包裹元素名來標示。一個結束標簽表示元素的結束它由小于號元素名組成例如。和嵌套在內,它們頁面中都是可視的。使用選擇器類型選擇器類型選擇器也叫作元素選擇器根據元素類型選擇元素。 可以的話,請想象一下互聯網沒有發明之前的日子。網站還不存在,紙質的書本是我們主要的信息來源,而在書本中查詢我們想要的資料會耗費相當多的精力和時間。 而如今,你打開個瀏覽器用搜索引擎搜索,任...
摘要:元素是使用小于號和大于號包裹元素名來標示。一個結束標簽表示元素的結束它由小于號元素名組成例如。和嵌套在內,它們頁面中都是可視的。使用選擇器類型選擇器類型選擇器也叫作元素選擇器根據元素類型選擇元素。 可以的話,請想象一下互聯網沒有發明之前的日子。網站還不存在,紙質的書本是我們主要的信息來源,而在書本中查詢我們想要的資料會耗費相當多的精力和時間。 而如今,你打開個瀏覽器用搜索引擎搜索,任...
摘要:每條屬性聲明實現對網頁元素進行某種特定格式的設置,由一個屬性和一個值組成,屬性和值之間使用冒號連接,不同聲明之間用分號分隔,所有屬性聲明放到一對大括號中。 showImg(https://segmentfault.com/img/bVbkQCI?w=900&h=383); showImg(https://segmentfault.com/img/bVbkQCO?w=900&h=383)...
摘要:我們可以做很多事情來減少阻塞渲染的,例如,緩存等。但是如何減少阻塞渲染的為此,可以拆分并優先加載首次渲染所需要的關鍵,然后再加載其它。請注意,文件在標簽里引入,因此將會阻塞渲染。 showImg(https://segmentfault.com/img/remote/1460000011503289?w=600&h=321); 原文地址: Critical CSS and Webpa...
閱讀 1200·2021-11-23 09:51
閱讀 1980·2021-10-08 10:05
閱讀 2339·2019-08-30 15:56
閱讀 1900·2019-08-30 15:55
閱讀 2639·2019-08-30 15:55
閱讀 2487·2019-08-30 13:53
閱讀 3498·2019-08-30 12:52
閱讀 1250·2019-08-29 10:57