【行動網頁規劃】CSS 架構建立(套用方式)與選擇器

Hi! 各位朋友好,我是小蔡老師,今天延續上一個章節的HTML5,這次的教學著重於CSS的架構與HTML5的結合應用。在一開始我們先簡單的說明一下何謂CSS?

何謂CSS?

CSS 的全名為 Cascading Style Sheets,是一種樣式表 (Stylesheet)語言。它的目的是為了對像 XHTML 及 HTML 之類的標記語言 (markup language) 提供一個顯示層。有了 CSS,我們就可以將資料層及顯示層分開:HTML 文件就只包括資料,而 CSS 則是告訴瀏覽器這些資料應該要如何顯現出來。

CSS的應用

所謂的CSS應用簡言之為CSS於HTML的格式上套用方式主要分為四種模式
● 行內套用 (Inline)
001

● 嵌入套用 (Embed)
002

003

● 外部連接套用 (External Link)
005

004

006

● 匯入套用 (Import)
007

@import 指令最初的用意,是為了能夠針對不同的瀏覽器而運用不同的樣式。不過,現在已經沒有這個必要。現在用 @import 的目的,最常是要加入多個 CSS 樣式。當多個 CSS 樣式被 @import 的方式加入,而不同 CSS 樣式互相有衝突時,後被加入的 CSS 樣式有優先的順位,所以我們改採類似於外部連接套用的方式來完成匯入套用的作法

CSS的選擇器

Css的選擇器(selector)主要可以分為class與id兩種:

class與id最大的不同,是在於 ID 選擇器在一個 HTML 文件中只能被使用一次,而 Class 選擇器在一個 HTML 文件中可以被使用多次。第二個不同的地方,是 ID 選擇器可以被 Javascript 中的 GetElementByID 函數所運用,而 Class 選擇器無法被 Javascript 運用到。至於判斷使用的方式會於下個單元CSS靜態網頁排版簡單的說明

(BLOG 線上教學皆為雅朵美術工房所有&BLOG作品皆為設計者阿哲類所有 未經同意請勿盜連或者轉帖,違反者依法處理)

我想發問