技術文章 » 在html中css的分為幾大類

在html中css的分為幾大類

2022-09-21 18:02:12

css可分為三類：1、內聯（行內）樣式，使用style屬性在HTML標記內插入CSS程式碼，語法「<標籤名 style="css樣式">..</標籤名>」；2、內嵌樣式表，在檔案head部分的style標籤對中放入CSS程式碼，語法「<style>樣式</style>」；3、外部樣式表，將CSS程式碼放入「.css」檔案中，使用link標籤或「@import」規則引入html檔案中。

前端（vue）入門到精通課程：進入學習

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

在html程式碼中要實現一些效果常常要加入css修飾，html中的css一共分為三種：內聯樣式、內嵌樣式表、外部樣式表。

1、內聯（行內）樣式

內聯樣式就是將樣式資訊直接定義在 HTML 標籤的 style 屬性中，由於內聯樣式定義在標籤內部，所以它只對所在的標籤有效。

<body style="background-color:black;">
    <h1 style="color:white;padding:30px;">Hostinger Tutorials</h1>
    <p style="color:white;">Something usefull here.</p>
</body>

1.png

建議不要使用內聯CSS，因為每個HTML標記都需要單獨設定樣式，如果您只使用內聯CSS，管理網站可能會變得十分困難。但是，它在某些情況下很有用。例如，在您無法存取CSS檔案或僅需要為單個元素應用樣式的情況下。

缺點：

  • 定義內聯樣式需要在每個 HTML 標籤中定義 style 屬性，很不方便；

  • 在內聯樣式中使用雙引號或單引號時要特別小心，因為 HTML 標籤的屬性通常都會使用雙引號來包裹屬性的值，例如<input type="text">；

  • 在內聯樣式中定義的樣式不能再其它任何地方重用；

  • 內聯樣式在後期維護時很不方便，因為一個網站通常有很多頁面組成，當修改頁面樣式時需要對頁面逐個修改；

  • 新增過多的內聯樣式會導致 HTML 檔案的體積增大。

2、內嵌樣式表

將樣式程式碼寫在頁面<style>...</style>標籤之中

<style>
 bdoy{font-size:14px;}
</style>

<style>...</style>標籤結構可以位於頁面<HTML>標籤中的任何位置，也可以多次出現。通常是將整個<style>...</style>結構寫在頁面的<head>...</head>部分中。這種引入CSS方式的特點是每個頁面的CSS程式碼可能具有統一性和規劃性，一個頁面內部便於複用和維護，但多個頁面之間的CSS程式碼複用仍然不夠。

<!DOCTYPE html>
<html>
	<head>
		<style>
			body {
				background-color: linen;
			}

			h1 {
				color: maroon;
				margin-left: 40px;
			}
		</style>
	</head>
	<body>
		<h1>PHP中文網</h1>
		<p>https://www.php.cn/</p>
	</body>
</html>

2.png

因為內嵌樣式表需要將 CSS 樣式定義在 HTML 檔案的內部，所以會導致檔案的體積變大，而且當有其它檔案也需要使用內嵌樣式表中同樣的樣式時，無法引入到其他檔案，必須在其它檔案中重新定義，會導致程式碼冗餘，不利於後期維護。

3、外部樣式表

在實際的開發種都用於外部樣式表。適合樣式較多的情況。樣式單獨的寫到CSS檔案中，之後把CSS檔案引入到HTML中使用。

1）、使用link

連結樣式是指在外部定義CSS樣式表並形成以.CSS為擴充套件名檔案，然後在頁面中通過<link>連結標記連結到頁面中，而且該連結語句必須放在頁面的<head>標記區。

語法：

<link type="text/css" rel="styleSheet"  href="CSS檔案路徑" />

對各個屬性的說明：

  • href 屬性設定外部樣式表檔案的地址，可以是相對地址，也可以是絕對地址。

  • rel 屬性定義關聯的檔案，這裡表示關聯的是樣式表。

  • type 屬性定義匯入檔案的型別，同 style 元素一樣，text/css表明為 CSS 文字檔案。

一般在定義 <link> 標籤時，應定義 3 個基本屬性，其中 href 是必須設定屬性。

也可以在 link 元素中新增 title 屬性，設定可選樣式表的標題，即當一個網頁檔案匯入了多個樣式表後，可以通過 title 屬性值選擇所要應用的樣式表檔案。

提示：在 Firefox 瀏覽器中可以在選單中選擇「檢視 --> 頁面樣式」選項，然後在子選單中會顯示 title 屬性值，只需選擇不同的 title 屬性值，可以有選擇地應用需要的樣式表檔案。IE 瀏覽器不支援該功能。

另外，title 屬性與 rel 屬性存在聯絡，按 W3C 組織的計劃，未來的網頁檔案會使用多個 <link> 元素匯入不同的外部檔案，如樣式表檔案、指令碼檔案、主題檔案，甚至可以包括個人自定義的其他補充檔案。匯入這麼多不同型別、名稱各異的檔案後，可以使用 title 屬性進行選擇，這時 rel 屬性的作用就顯現出來了，它可以指定網頁檔案初始顯示時應用的匯入檔案型別，目前只能關聯 CSS 樣式表型別。

外部樣式是 CSS 應用的最佳方案，一個樣式表檔案可以被多個網頁檔案參照，同時一個網頁檔案可以匯入多個樣式表，方法是重複使用 link 元素匯入不同的樣式表檔案。

2）、使用@import

匯入式是通過@import在<style>標籤中進行宣告的

語法：

<style type="text/css">
  @import url("css檔案路徑");
</style>

在 @import 關鍵字後面，利用 url() 函數包含具體的外部樣式表檔案的地址。

簡單範例：

css外部樣式表 style.css

h1{
	color:red;
}
p{
	font-size:14px;
	color:green;
}

HTML檔案

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<link type="text/css" rel="styleSheet"  href="style.css" />
		<!-- <style>
			@import url("style.cs");
		</style> -->
	</head>
	<body>
		<h1>link標籤或@import的應用</h1>
		<p>外部定義CSS樣式表以.CSS為擴充套件名檔案，然後在頁面中通過link標籤或@import連結到頁面中。</p>
	</body>
</html>

實現效果：

3.png

兩種匯入樣式表的方法比較：

1、從屬關係區別

@import是 CSS 提供的語法規則，只有匯入樣式表的作用；link是HTML提供的標籤，不僅可以載入 CSS 檔案，還可以定義 RSS、rel 連線屬性等。

2、載入順序區別

載入頁面時，link標籤引入的 CSS 被同時載入；@import引入的 CSS 將在頁面載入完畢後被載入。

3、權重區別

link 方式的樣式的權重高於 @import 權重。

4、相容性區別

@import是 CSS2.1 才有的語法，故只可在 IE5+ 才能識別；link標籤作為 HTML 元素，不存在相容性問題。

5、DOM可控性區別

可以通過 JS 操作 DOM ，插入link標籤來改變樣式；由於 DOM 方法是基於檔案的，無法使用@import的方式插入樣式。

說明：

一般推薦使用 link 匯入樣式表的方法，@import 可以作為補充方法使用。

（學習視訊分享：）

以上就是在html中css的分為幾大類的詳細內容，更多請關注TW511.COM其它相關文章！