HTML 套用使用 CSS style 的方法

2015-03-28 腳印網頁資訊設計

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

外部連接 (External Link)

利用 <link> 標籤讀取外部 CSS 檔案，且只能在 <head> 標籤內使用，但可定義多次。

這種方是是最理想的，也是大部份設計師的選擇，因為能夠徹底區分 HTML 結構和 CSS 外觀設計。

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

<body>
    ...
</body>

</html>

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

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

<style type="text/css">
@import "layout.css";
@import "header.css";
...
</style>

@import "layout.css";
@import "header.css";
...

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

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

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

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