首頁 > web前端 > css教學 > css內鍊式、外鍊式和嵌入式有什麼區別?

css內鍊式、外鍊式和嵌入式有什麼區別?

青灯夜游
發布: 2020-11-17 14:53:15
原創
8278 人瀏覽過

區別:內鍊式是指使用style屬性在HTML標籤中寫css樣式;外鍊式是指將css樣式單獨寫在一個以“.css”為擴展名的檔案中,使用link標籤引用;嵌入式使用style標籤引用,在「」中單獨寫css樣式。

css內鍊式、外鍊式和嵌入式有什麼區別?

【推薦教學:CSS影片教學 】

#在HTML中引用css的方法有三種:內鏈式、外鍊式和嵌入式。

從功能上來說,這3個實現的功能是一樣的,都能夠達到對內容進行排版修飾。但是,從用法上來說,他們的使用方式是不同的,下面我們來一一區分:

(1)內鍊式引入

##內鍊式css樣式表就是把css程式碼直接寫在現有的HTML標籤中,具體的使用方法如下面所示:

<div style="color:red;">设置文字的颜色为红色</div>
登入後複製

這裡要注意:樣式的內容寫在元素的開始標籤裡,並且css樣式代碼要寫在雙引號中,如果有多條css樣式代碼設定可以寫在一起,中間用分號隔開。多個css樣式寫在一起的效果如下面所示:

<div style="color:red;font-size:14px;">>设置字体颜色为红色,并且字体大小为14px</div>
登入後複製

(2)嵌入式引入

嵌入式樣式表與內鍊式不同的是可以很方便的同時修改多個相同元素的樣式屬性,例如我們想要將某個標籤內的內容字體都調整為紅色,並且加粗,字體大小都調整為14px;

我們如果使用內鍊式的方式,我們需要在每個標籤上都要加上樣式,程式碼就如下圖所示:

css內鍊式、外鍊式和嵌入式有什麼區別?

從上邊可以看出,內鏈式會產生一堆的冗餘程式碼,而使用我們的嵌入式就比較簡單了,程式碼如下圖所示:

css內鍊式、外鍊式和嵌入式有什麼區別?

由上圖可以看出,嵌入式我們只需要修改span標籤,那麼所有的span標籤內內容的樣式都會跟著修改。

(3)外部式引入

外部式css樣式就是把css程式碼寫一個單獨的外部文件中,這個css樣式檔以「.css」為副檔名,一般放在內(不是在