CSS的特性以及在HTML中的三種用法

2021-06-17 17:27:59 字數 1875 閱讀 6499

css和html一樣,也是一種標記語言,**簡單,通過瀏覽器解釋執行,是一種用於為html文件定義布局的樣式表語言。

html用於結構化內容;css用於格式化結構化的內容

ø  css的出現彌補了html對標記屬性控制的不足,如「背景影象重複」只能用css的「background-repeat」才能實現

ø  css將網頁內容與樣式進行了分離,實現了對兩者的「解耦和」,因此使得樣式內容可以被很好的復用,大大提高了**開發者的工作效率和後期的維護工作

指被包在內部的標籤將擁有外部標籤的的樣式性質。

例:

指當有多個選擇器都作用於同一元素時,即多個選擇器的範圍發生了重疊,css該怎樣處理?

(1)    若多個選擇器定義的樣式不發生衝突,則元素應用所有選擇器定義的樣式

例:

(2)    若多個選擇器定義的樣式發生衝突(比如:同時定義了字型顏色屬性),則css按選擇器的優先順序,讓元素應用優先順序高的選擇器樣式。

css定義的選擇優先順序從高到低為:行內樣式

> id

樣類別樣式

>

標記樣式

測試: 

hello world

分別用四種樣式設定「hello world」的顏色屬性,最終顯示樣式是「行內樣式」的red。如下:

注:我們可以通過「!important「屬性強制改變選擇器優先順序,加!important的選擇器優先順序最高。

例:將上例中的標籤樣式語句改為「p」,這樣執行結果會變為黃色,通過加!important,將本來優先順序最低的「標籤樣式」變為了優先順序最高。

直接將使用html元素的style屬性來改變元素的樣式,style屬性可以應用於任意body元素(包括body本身)

例:

style="color:red">這裡應用css內聯樣式表,為紅色字型

執行結果:

採用html元素的style屬性,將樣式表的內容定義在html檔案的這裡應用css內部樣式表,為藍色字型

執行結果:

(3)外部樣式表:

引用乙個樣式表有兩種方法:(1)鏈入外部樣式表 (2)匯入外部樣式表

其中url為樣式表檔案的位址,可以是相對位址和絕對位址

這裡應用css外部樣式表,為紅色字型

原理:告訴瀏覽器,在執行html檔案時,應使用相應url下的css檔案進行布局和格式化。(檔案style.css放在style目錄下,**為 .csstest)

在html檔案的

@import宣告可以放到這裡應用css外部樣式表的匯入外部樣式表形式,為紅色字型

原理同上面的「鏈入外部樣式表」;

注:@import宣告後的「; 」不能省略,此外,某些瀏覽器可能不支援匯入外部樣式表的@import宣告,所有最好別用這種方法,見到了認識即可。

CSS的特性以及在HTML中的三種用法

css和html一樣,也是一種標記語言,簡單,通過瀏覽器解釋執行,是一種用於為html文件定義布局的樣式表語言。html用於結構化內容 css用於格式化結構化的內容 css的出現彌補了html對標記屬性控制的不足,如 背景影象重複 只能用css的 background repeat 才能實現 css...

css簡介以及在html中匯入css

css指層疊樣式表 cascading style sheets 樣式表解決了html的內容與表現分離的圍 使用樣式表可以提公升工作效率 基本語法 css語法主要由兩部分組成。1選擇器2一條或多條宣告 選擇器主要作用是為了確定需要改變樣式的html的元素 每一條宣告由乙個屬性和乙個值組成,使用花括號...

理解CSS中的 BFC以及其特性

1.什麼是bfc 1.1 bfc是塊級格式上下文,是頁面中,盒布局的css渲染模式。2.bfc的特性 2.1 bfc內部相鄰的box設定margin會重疊,並且優先使用值最高的margin。2.2 bfc是乙個獨立的區域,其內部的元素不會印象到外部,外部的元素也不會印象到內部。2.3 bfc的區域不...