7-4三種方法的優先級 · 初識HTML+CSS

有的小伙伴問了，如果有一種情況：對于同一個元素我們同時用了三種方法設置css樣式，那么哪種方法真正有效呢？在右邊編輯器就出現了這種情況 1、使用`內聯式`CSS設置“超酷的互聯網”文字為`粉色`。 2、然后使用`嵌入式`CSS來設置文字為`紅色`。 3、最后又使用`外部式`設置文字為`藍色`（style.css文件中設置）。但最終你可以觀察到“超酷的互聯網”這個短詞的文本被設置為了`粉色`。因為這三種樣式是有優先級的，記住他們的優先級：`內聯式?>?嵌入式 > 外部式` 但是嵌入式\>外部式有一個前提：嵌入式css樣式的位置一定在外部式的后面。如右代碼編輯器就是這樣，代碼在...代碼的前面（實際開發中也是這么寫的）。感興趣的小伙伴可以試一下，把它們調換順序，再看他們的優先級是否變化。其實總結來說，就是`--就近原則（離被設置元素越近優先級別越高）`。但注意上面所總結的優先級是有一個前提：內聯式、嵌入式、外部式樣式表中css樣式是在的相同權值的情況下，什么是權值呢？在后面的9-2小節中會講解到。 ### 任務分別使用內聯式、嵌入式和外部式CSS樣式，把“超酷的互聯網”文本字號進行設置，感受一下這三種方法的優先級。 ``` <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>嵌入式css樣式</title> <link href="style.css" rel="stylesheet" type="text/css"> <style type="text/css"> span{ color:red; } </style> </head> <body> <p>慕課網，<span>超酷的互聯網</span>、IT技術免費學習平臺，創新的網絡一站式學習、實踐體驗；服務及時貼心，內容專業、有趣易學。專注服務互聯網工程師快速成為技術高手！</p> </body> </html> ``` ***** ``` span{ color:blue; } ```