iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 15
1
自我挑戰組

學習 HTML / CSS 遇到的問題 系列 第 15

外/內部 CSS 及 CSS 屬性支援

  • 分享至 

  • xImage
  •  

外部 CSS 或內部 CSS

通常都會將 CSS 樣式和 HTML 內容分開,將樣式與網頁結構分開的好處是,不需在每個網頁重複相同的樣式,要是有一些樣式是每個網頁幾乎都會使用到,如果都寫在同一個檔案,就要在每次將同樣的 CSS 樣式複製貼到 HTML 檔案中

先前有很多 HTML 標籤是單純只有給予外觀改變的標籤,像是 是讓文字變粗體、 在文字加上刪節號、還有 < font> 等等主要用於外觀改變的 HTML 標籤,會看到建議於 CSS 改變外觀樣式代替使用這些 HTML 標籤,自己推測應該是想將 HTML 語意結構的部分和單純的外觀樣式盡量分清楚,讓 HTML 和 CSS 各自本質上的功能更清楚

因此雖然可以在同一個 HTML 檔案中的 裡面使用內部 CSS 的方式 <style> </style> 在內部新增樣式,或是在 HTML 標籤上使用 style 屬性添加樣式,但若是開發一個較完整的網站,還是會建議使用 載入外部 CSS

若是網頁的內容不需重複使用、內容較少,使用外部或內部的 CSS 兩種方式都可選擇

CSS 屬性支援

像 HTML 一樣,CSS 也歷經幾個版本,目前 CSS3 算是已普及的最新版本, 雖然現在大部分都使用 Chrome 瀏覽器,但開發網站時還是需顧及不同瀏覽器有時會出現畫面顯示不同的情況,因每個瀏覽器支援的 CSS 屬性可能會有差異,這時可以藉由 Can I use… Support tables for HTML5, CSS3, etc 來查看自己是否有使用一些較新的 CSS 屬性,以及該 CSS 屬性在瀏覽器各版本支援度如何,依照客群使用的瀏覽器版本或裝置等等條件來斟酌是否使用此 CSS 屬性,這個線上查詢工具的名字意思也很好懂 ( Can I Use )

不過若是在不同瀏覽器顯示的畫面有差異不是因 CSS 屬性的支援度的關係,可以看看是否是 CSS bug 或是瀏覽器怪僻 (browser quirk ),除了 google 解決方式外也可以參考關於 quirk mode 的網站

參考資源:
HTML & CSS 網站設計建置優化之道


上一篇
CSS 基本樣式組成、載入 CSS
下一篇
關於盒模型 ( box model )
系列文
學習 HTML / CSS 遇到的問題 30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言