..”；2、內嵌樣式表，在文檔head部分的style標籤對中放入CSS程式碼，語法「」；3、外部樣式表，將CSS程式碼放入「.css」檔案中，使用link標籤或“@import”規則引入html文件中。"/> ..”；2、內嵌樣式表，在文檔head部分的style標籤對中放入CSS程式碼，語法「」；3、外部樣式表，將CSS程式碼放入「.css」檔案中，使用link標籤或“@import”規則引入html文件中。">
搜尋

首頁  >  文章  >  web前端  >  在html中css的分為幾大類

在html中css的分為幾大類

青灯夜游
青灯夜游原創
2022-09-21 16:28:452977瀏覽

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在

语法：

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

实现效果：

在html中css的分為幾大類

两种导入样式表的方法比较：

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 可以作为补充方法使用。

（学习视频分享：web前端）

以上是在html中css的分為幾大類的詳細內容。更多資訊請關注PHP中文網其他相關文章！

html5 firefox css css3 html JS dom href 样式表 input
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：html和css算程式語言嗎下一篇：html和css算程式語言嗎

相關文章

看更多