學習單下載
https://docs.google.com/document/d/1FVwxhEc-sTyc0dqjTyFCVOCabTSA6Bx6ydtK7Exzo74/edit?usp=sharing
學習單1
文字類相關屬性
文字類相關屬性
以下是常見的文字類 CSS 屬性,可應用於
元素:
font-size: 設定文字大小。
font-size: 16px;
font-weight: 設定文字粗細。
font-weight: bold;
文字內容 color: 設定文字顏色。
color: red;
font-family: 設定字型。
font-family: Arial, sans-serif;
font-style: 設定文字樣式(例如:斜體)。
font-style: italic;
font-variant: 設定小型大寫字母或其他變體。
font-variant: small-caps;
文字對齊 text-align: 設定文字對齊方式。
text-align: center; /* left, right, justify */
文字間距 letter-spacing: 設定字母之間的間距。
letter-spacing: 2px;
word-spacing: 設定單字之間的間距。
word-spacing: 5px;
line-height: 設定行高。
line-height: 1.5;
文字裝飾 text-decoration: 設定裝飾效果(如下劃線)。
text-decoration: underline; /* none, overline, line-through */
text-transform: 設定文字轉換為大寫、小寫或首字母大寫。
text-transform: uppercase; /* lowercase, capitalize */
文字陰影 text-shadow: 設定文字陰影效果。
text-shadow: 2px 2px 4px gray;
背景與邊框 background-color: 設定文字背景顏色。
background-color: yellow;
border: 設定邊框。
border: 1px solid black;
顯示與溢出 white-space: 控制空白與換行行為。
white-space: nowrap; /* normal, pre, pre-wrap */
overflow-wrap: 控制單字是否換行。
overflow-wrap: break-word; /* normal */
其他屬性 direction: 設定文字方向(從左到右或從右到左)。
direction: rtl; /* ltr */
visibility: 設定文字是否可見。
visibility: hidden;
以上屬性均可在 CSS 中應用到,以控制其文字相關的外觀和行為。