--- title: 快速了解CSS與CSS常用屬性 tags: 網頁排版編輯 --- 快速了解CSS === 1. Cascading Style Sheets(層疊樣式表) 2. 用來裝飾網頁 3. 放在html的style裡面就是css 4. class=類別(.) 5. id=獨一無二的名字(#) 6. css的格式 ```css= .header{ color: pink ; } ``` CSS的常用屬性 === ### color 顏色 可放色碼與顏色名稱 ```css= color: #000000; ``` ### background-color 背景顏色 ```css= background-color: #000000; ``` ### text-align 排列方式 如 center(置中)right(靠右)left(靠左) ```css= text-align: center; ``` ### width 設定寬 ```css= width: 10px; ``` ### height 設定高 ```css= height: 10px; ``` ### text-decoration 文字特效 1. text-decoration-line 設定線的位置 2. text-decoration-color 線的顏色 3. text-decoration-style 線的樣式 ```css= text-decoration: none black soild; ``` ### border 邊框 1. border-width 邊框的寬度 2. border-style 邊框樣式 3. border-color 邊框顏色 ```css= border: 1px solid blue; ``` ### font-size 字的大小 ```css= font-size: 10px; ``` ### font-family 字體 ```css= font-family: '標楷體'; ``` ### font-style 字的樣式 ```css= font-style: italic ; ``` ### padding跟margin ![](https://i.imgur.com/ZZb8cMZ.png)