CSS筆記(一):用途、加入方法

歸納各家CSS教程的開宗明義,CSS的用處有以下幾種:

1.    改變頁面的外觀,如字體、顏色、行距等。
2.    將內容與外觀顯示設定分離,加快頁面下載的速度。
3.    排版,控制頁面的佈局。
4.    用統一的CSS來管理整個網站的樣式,使網站容易維護。
5.    同一份原始碼可以跨瀏覽器,甚至跨媒體。
6.    有助於原始碼符合Web Standard,使網頁內容在語意或搜尋結果上,都有更好的表現。

這可以做為學習CSS的里程碑,各個擊破。

將CSS附加到HTML中的方法

1. Inline Style:

例: <p style="color:#000; font-size:1.2em">…..</p>

2. Internal Style Sheet: 加在<head>標籤裡

例:
<head>
<style> <!—
h1{font-size: 36px; color: #aaa }
–>
</style>
</head>

3. Enternal Style Sheet – link: 連結外部CSS檔

例:
<head>
<link href="css.css" rel="stylesheet" type="text/css">
</head>

4. Enternal Style Sheet – @import: 匯入外部CSS檔

例:
<head>
@import url(“css.css");
</head>

CSS檔案本身也可以import另一個CSS檔。

以上各方法的優先權:Inline > Internal > Link/Import >Browser Default

也就是同一屬性若在各階層的CSS設定有衝突時,Inline Style會有最高優先權,可覆寫其他地方的設定。

廣告

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s