在html中css的分為幾大類-前端問答-PHP中文網

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

在html中css的分為幾大類

本教學操作環境：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>

登入後複製

在html中css的分為幾大類

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

缺點：

定義內嵌樣式需要在每個HTML 標籤中定義style 屬性，很不方便；
在內聯樣式中使用雙引號或單引號時要特別小心，因為HTML 標籤的屬性通常都會使用雙引號來包裹屬性的值，例如 ;
在內聯樣式中定義的樣式不能再其它任何地方重用；
內聯樣式在後期維護時很不方便，因為網站通常有很多頁面組成，當修改頁面樣式時需要對頁面逐一修改；
#添加過多的內聯樣式會導致HTML 文件的體積增加。

2、內嵌樣式表

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

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

登入後複製

<style>...</style>標籤結構可以位於頁面標籤中的任何位置，也可以多次出現。通常是將整個<style>...</style>結構寫在頁面的...部分。這種引入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>

登入後複製

在html中css的分為幾大類

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

3、外部樣式表

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

1）、使用link

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

語法：

<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在