iT邦幫忙

2026 iThome 鐵人賽

DAY 18
0
自我挑戰組

美術生的前端初體驗 : 從畫畫到網頁的30天系列 第 18 篇

Day 18|CSS 的文字與視覺樣式

  • 分享至 

  • xImage
  •  

前幾天一路從最基本的標籤選擇器、Class、ID等等......
好不容易把「選取對象」的方法搞懂了,終於可以來做一件期待的事——幫這些文字裝扮一下!
想到在photoshop、Illustrator、word當中,常會在「字元面板」裡調整字型、字級大小跟顏色。
而在 CSS 裡面,這一切也是透過一連串的屬性(Properties)來設定的:

    color: #e65100;
    font-size: 28px;
    font-family: "Helvetica Neue", Arial, sans-serif;
    text-align: center;
}

稍微筆記了一下認幾個基本樣式屬性:

  1. color(文字顏色)
    可以直接寫顏色名稱(如 red),也可以用做設計時最熟悉的 HEX 色碼(如 #e65100)或 RGB。看到這個屬性時對我來說超級親切,完全就是熟悉的色板工具!

  2. font-size(字級大小)
    控制文字的大小,最常見是用 px(像素)來設定。

  3. font-family(字型指定)設定文字要套用什麼字型。有趣的是,在網頁上通常會同時指定好幾個字型(備用字型),當使用者的電腦裡沒有第一個字型時,瀏覽器就會自動往後替換。

  4. text-align(文字對齊)控制文字要靠左(left)、置中(center)還是靠右(right)。這跟排版軟體裡的文字對齊按鈕功能一模一樣!

Day 18,筆記了 CSS 文字與基本視覺樣式。


上一篇
Day 17|結構
下一篇
Day 19|Box Model 盒子模型
系列文
美術生的前端初體驗 : 從畫畫到網頁的30天 共 20 篇
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言