up
down
Close
架站盒子
Web Development Box
 

CSS class 與 style 差異

│ 1684 Views │ CSS

CSS全名為「Cascading Style Sheets(階層樣式表),用途是替HTML添增樣式,比如指定文字顏色、背景顏色、字體大小等版面設計,在網頁上看到的設計大部分是透過CSS來達成。

CSS如何使用?

CSS大致可以分為兩種使用方式,一種是直接寫在HTML(使用style屬性),另一種是寫在CSS檔案,並在HTML中引用該CSS檔。

style用法

style是直接寫在HTML原始碼中,比如想把某文字改為紅色,可以在HTML中這樣寫:

<span style="color:red;">紅色</span>

網頁顯示效果:紅色

span行內元素的意思。另外,顏色除了用顏色的英文(red, blue, gold等)之外,也可以用色碼,例如紅色的色碼為#ff0000,因此上面的句子也可以這樣寫:

<span style="color:#ff0000;">紅色</span>

網頁顯示效果:紅色

除了上述的方法外,還有一種方式也是直接寫在HTML,但不是寫在該元素上,而是獨立寫一個<style>,不過要指定classid等,這個部份待會兒會再提到。

優點與缺點

  • 優點:方便,可以直接寫在HTML中,且權重級別較大,可以覆蓋CSS檔的設定。
  • 缺點:維護困難,只能控制該元素,如果有多個元素,未來要修改時必須一個個改。
說明:如果有100頁的某文字都用style設定紅色,當未來要把紅色改為藍色時,需要手動修改100頁。(這裡不討論用JS等其他手段去控制的情況)

CSS檔用法

先建立一個副檔名為css的檔案,比如common.css,接著在HTMLclass選擇器命名(本文以class為例,不討論元素或id),接著在css中為指定的class設計樣式,我們以剛剛的例子來做:

HTML的部分:

<span class="textRed">紅色</span>

CSS檔案的部分:

.textRed {
 color:red;
}

※ 在HTML中需引入該CSS檔案(一般會在head中就引入,這裡也先不討論)。
textRed是自定義的值,可以任意命名,在CSS檔中須加上.,這是指class,另一種常見的是#,這代表id,本篇暫時不討論這部分。

網頁顯示效果:紅色

優點與缺點

  • 優點:維護方便,可以一次控制全站中指定屬性的值。
  • 缺點:(個人認為)除了權重級別沒有比直接寫在HTMLstyle高之外,不太有會令人困擾的缺點。

在文檔中寫<style>

前面提到在HTML中直接寫<style>,這個做法比較像CSS檔,只是不寫在CSS檔而是直接寫在文檔中,比如以下的HTML

<style>
.textRed {
 color:red;
}
</style>
<span class="textRed">紅色</span>

網頁顯示效果:紅色

這個做法是直接寫在HTML上,只是前後需用<style>包夾,它可以控制該網頁中所有.textRed的元素,但是其他頁面則不受影響。

優點與缺點

  • 優點:方便,可以一次控制該網頁中所有指定的元素。
  • 缺點:維護不易,由於只能控制該網頁,維護上沒有比CSS檔要來得方便。

小結

styleclass

style

<span style="color:red;">紅色</span>

可直接在HTML中設計,但只能控制該元素,如果寫100個,未來要改時要改100次。

class

<span class="textRed">紅色</span>

維護方便,即使寫100個,未來要改時只需要改1次。

 

延伸閱讀

本文是否對您有幫助?