iT邦幫忙

2025 iThome 鐵人賽

DAY 8
0
Security

跨出第一步:D 從0到0.1的Web security 系列 第 8

Day 7: 美化我們的留言板:CSS 是甚麼

  • 分享至 

  • xImage
  •  

延續昨天的主題,如果說HTML是一個網頁的建築本身,那CSS就是一個網站的裝潢

今天我們就簡單介紹關於CSS是甚麼

CSS 的全名是 Cascading Style Sheets,中文譯為「層疊樣式表」或「串接樣式表」。

CSS 是一種用來描述 HTML 或 XML 文件外觀和格式的樣式表語言。它讓你可以精確控制以下各種視覺效果:

顏色 (Color): 文字顏色、背景顏色。
字體 (Typography): 字型、大小、粗細、行高。
間距 (Spacing): 邊距 (margin)、內距 (padding)。
尺寸 (Sizing): 元素的寬度、高度。
排版 (Layout): 元素的位置、對齊方式、浮動,以及現代的 Flexbox 和 Grid 佈局。
背景 (Background): 背景圖片、漸層。
響應式設計 (Responsive Design): 讓網頁在不同尺寸的裝置(如電腦、平板、手機)上都能有最佳的瀏覽效果。
動畫與過渡效果 (Animation & Transition): 讓元素可以有動態的視覺變化。

CSS 的核心概念:它是如何運作的?
CSS 的運作基於一個簡單的規則系統。一條 CSS 規則主要由三個部分組成:

選擇器 (Selector): 用來「選取」你想要套用樣式的 HTML 元素。例如,你可以選取所有的 段落標籤,或是有特定 class 或 id 的元素。

屬性 (Property): 你想要改變的視覺樣式,例如 color (顏色)、font-size (字體大小)、background-color (背景顏色)。

值 (Value): 你為屬性設定的具體數值,例如 red (紅色)、16px (16 像素)。

這邊也不多說關於語法的事情,有興趣的同學可以自行去W3school學習


上一篇
Day 6: 網頁的骨架:HTML 基礎結構與常用標籤
下一篇
Day 8: 網站中的互動點:JavaScript 變數、函式與基礎語法
系列文
跨出第一步:D 從0到0.1的Web security 9
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言