iT邦幫忙

2021 iThome 鐵人賽

DAY 11
0
自我挑戰組

網頁前端工程探討系列 第 11

認識CSS(一):什麼是CSS

  • 分享至 

  • xImage
  •  

CSS(Cascading Style Sheets)是建立在HTML的基礎上,它既不是標準程式語言,也不是標記語言,它是風格樣式語言頁面(樣式表語言)。它能用來美化網頁,在HTML文件中的元素上,套用不同的style。

換言之,HTML就像一個建築的結構與主體,而CSS就像是建築外型的設計與內部的裝潢,增添建築的美觀和提升它的價值。

  • CSS的特色:
  1. 讓我們能夠更精確的控制網頁版面的文字內容、字型、背景、顏色等顯示特性。
  2. 加深了HTML文件內容的可看性,也讓HTML顯得更加生動。
  3. 提升網頁讀取速度: CSS能大量簡化網頁所使用的原始碼、程式碼與圖片,讓頁面執行能更順暢、也更快速。
  • CSS3的新功能:
    CSS是由W3C定義和維護,但新一代的CSS3這樣的名稱指的是W3C組織CSS3(CSS Level 3)規格。CSS是以Level區分,而Level3則是包含了Level2和Level1的內容。
  1. 提供了更強大的選擇器
    在不須使用id識別碼或是class類別就能指向HTML中特定的元素,讓語法更加順暢,不易出錯。
  2. 視覺特效
    推出更多新的屬性,讓過去必須要用圖片才能達到的視覺效果,可以利用CSS3語法取代,讓視覺效果更加豐富。
  3. 變形、轉換和動畫
    CSS3另一個更加重要的特效,是能對於元素進行變形、轉換,甚至是動畫的設定。
    變形效果:是針對區塊進行移動、縮放、旋轉、傾斜等效果。
    轉換效果:針對元素在不同樣式之間變化的動作。
    動畫效果:是根據播放時關鍵影格的不同屬性設定所呈現的動畫。
  4. 自訂顯示字型
    CSS3能夠連結網路上的字型檔案,讓網頁的文字不但能以瀏覽者系統字型進行顯示,還可以用自訂的字型來呈現,讓整個頁面呈現更美觀的畫面。

參考文獻:學好跨平台網頁設計 /文淵閣工作室


上一篇
認識HTML(八):表單欄位(下)
下一篇
認識CSS(二):如何使用CSS
系列文
網頁前端工程探討30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言