---

CSS Cheat Sheet

1. CSS 基本語法

選擇器 {
    屬性: 值;
}

---

2. 文字樣式

屬性	描述	範例
color	設定文字顏色	color: red;
font-size	設定文字大小	font-size: 16px;
font-family	設定字體	font-family: Arial, sans-serif;
font-weight	設定字體粗細	font-weight: bold;
text-align	對齊文字	text-align: center;
line-height	行高	line-height: 1.5;
text-decoration	添加文字裝飾（如底線、刪除線等）	text-decoration: underline;

---

3. 盒模型（Box Model）

屬性	描述	範例
width	元素寬度	width: 200px;
height	元素高度	height: 100px;
margin	外邊距（元素外部的距離）	margin: 20px;
padding	內邊距（內容與邊框之間的距離）	padding: 10px;
border	邊框	border: 2px solid black;

---

4. 背景樣式

屬性	描述	範例
background-color	設定背景顏色	background-color: yellow;
background-image	設定背景圖片	background-image: url('image.jpg');
background-size	設定背景圖片大小	background-size: cover;
background-position	設定背景圖片位置	background-position: center;
background-repeat	設定背景是否重複	background-repeat: no-repeat;

---

5. 佈局

屬性	描述	範例
display	設定元素顯示方式	display: block;
position	設定元素定位方式	position: relative;
top, right, bottom, left	設定元素距離	top: 10px; left: 20px;
float	浮動元素	float: left;
clear	清除浮動	clear: both;
z-index	設定堆疊順序	z-index: 10;
overflow	設定內容超出邊框時的處理方式	overflow: hidden;

---

6. 邊框與圓角

屬性	描述	範例
border	設定元素邊框	border: 1px solid black;
border-radius	設定元素圓角	border-radius: 10px;
border-top, border-right, border-bottom, border-left	設定單邊邊框	border-top: 2px dashed red;

---

7. 清單樣式

屬性	描述	範例
list-style-type	設定列表符號樣式	list-style-type: circle;
list-style-image	設定列表符號為圖片	list-style-image: url('bullet.png');

---

8. CSS 選擇器

選擇器	描述	範例
*	通配符，選擇所有元素	* { margin: 0; padding: 0; }
element	選擇特定 HTML 元素	p { color: blue; }
.classname	選擇擁有特定 class 的元素	.box { margin: 10px; }
#idname	選擇擁有特定 ID 的元素	#header { background: grey; }
element, element	群組選擇器，選擇多個元素	h1, p { color: black; }
element element	後代選擇器，選擇元素中的元素	div p { color: red; }
element > element	子選擇器，選擇直接子元素	div > p { color: green; }
element + element	鄰接兄弟選擇器，選擇緊跟其後的兄弟元素	h1 + p { font-size: 12px; }
:hover	選擇鼠標懸停的元素	a:hover { color: orange; }

---

9. CSS Flexbox

屬性	描述	範例
display: flex	啟用彈性佈局	display: flex;
flex-direction	設定主軸方向	flex-direction: row;
justify-content	沿主軸對齊內容	justify-content: center;
align-items	沿交叉軸對齊內容	align-items: flex-start;

---

10. CSS Grid

屬性	描述	範例
display: grid	啟用網格佈局	display: grid;
grid-template-columns	設定列數和列寬	grid-template-columns: 1fr 2fr;
grid-gap	設定網格間距	grid-gap: 10px;
grid-template-rows	設定行數和行高	grid-template-rows: 100px auto;

---

11. 動畫與過渡

屬性	描述	範例
transition	設定過渡效果	transition: all 0.3s ease;
animation	設定動畫	animation: slide 2s infinite;
@keyframes	定義動畫關鍵幀	@keyframes slide { 0% { left: 0; } 100% { left: 100px; } }

---

12. 其他有用屬性

屬性	描述	範例
opacity	設定透明度	opacity: 0.5;
cursor	設定鼠標指標樣式	cursor: pointer;
box-shadow	設定盒陰影	box-shadow: 2px 2px 5px grey;
text-shadow	設定文字陰影	text-shadow: 1px 1px 3px black;

---

這份 CSS Cheat Sheet 涵蓋了最常見和基本的 CSS 屬性和用法，讓你能夠快速參考與應用。進階部分如 Flexbox 和 Grid 也是現代網頁設計中的重要佈局工具，值得深入學習。