溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

css內鏈式、外鏈式和嵌入式之間有哪些區別

發布時間:2020-11-18 10:43:09 來源:億速云 閱讀:738 作者:小新 欄目:web開發

這篇文章主要介紹了css內鏈式、外鏈式和嵌入式之間有哪些區別,具有一定借鑒價值,需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

區別:內鏈式是指使用style屬性在HTML標簽中寫css樣式;外鏈式是指將css樣式單獨寫在一個以“.css”為擴展名的文件中,使用link標簽引用;嵌入式使用style標簽引用,在“”中單獨寫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”為擴展名,一般放在<head>內(不是在<style>標簽內)使用<link>標簽將css樣式文件鏈接到HTML文件內。

使用語法:

<link href="style.css" rel="stylesheet" type="text/css" />

詳細講解:

1、href=""內部的就為css文件的地址一般以英文命名,比如 base.css或者style.css等等。

2、rel="stylesheet" type="text/css" 這是w3c的標準,固定寫法不可修改。

3、<link>標簽位置一般寫在<head>標簽之內。

我們在網站建設中,一般都會使用外部式寫法,一來可以做到代碼分離,有助于后期的修改維護;二來可以減少頁面代碼的冗余,有助于優化。具體的頁面代碼就如下圖所示:

我們以上三種寫法,最后所得到的結果都是一樣的,在網頁中呈現的效果都如下圖所示:

css內鏈式、外鏈式和嵌入式之間有哪些區別

感謝你能夠認真閱讀完這篇文章,希望小編分享css內鏈式、外鏈式和嵌入式之間有哪些區別內容對大家有幫助,同時也希望大家多多支持億速云,關注億速云行業資訊頻道,遇到問題就找億速云,詳細的解決方法等著你來學習!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女