HTML 套用使用 CSS style 的方法

如何在 HTML 套用使用 CSS style 呢!又有幾種方式呢! 本篇文章將將個別介紹使用方式及較推薦的作法。

css

外部連接(External Link)

利用 <link> 標籤讀取外部 CSS 檔案,且只能在 <head> 標籤內使用,但可定義多次。最理想的方式,也是大部份設計師的選擇,因為能夠徹底區分結構(HTML)和外觀設計(CSS)。

<html>
<head>
	<title>...</title>

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

輸入;匯入 (Import)

利用 @import 讀取 CSS 文件,可運用在 HTML(.html) 及 CSS(.css) 文件。通常會將 CSS 的程式碼分解成幾部份,並以多個檔案進行管理時使用。

運用在 HTML(.html) 文件

@import 必須定義在 <style> 標籤內。

<style type="text/css">
@import "layout.css";  /* 排版 */
@import "header.css";  /* 檔頭 */
...
</style>

運用在 CSS(.css) 文件

@import "layout.css";  /* 排版 */
@import "header.css";  /* 檔頭 */
...

內嵌(Embed)

將 CSS 語法,寫至 <style> 標籤內。可放至在 HTML 的 <head><body> 標籤內。

<style type="text/css">
div {
	...
}
</style>

行內(Inline)

利用 <style> 屬性指定 CSS 語法。就是在 HTML 標籤內加上 <style> 屬性。

<p style="color: red;">紅色文字</p>

發表迴響