CSS簡介
學會了純文字的HTML 後，是否還是覺得網頁有些呆版、和其他網頁比起來差很多呢？要裝飾一個網頁的外觀最簡單的就是CSS(Cascading Style Sheets)了。至於常聽到的Bootstrap等都是CSS的模組，要有一定的CSS基礎上手才會比較快。CSS的三種樣子
- 行間 CSS：在標籤內加上style屬性，並把CSS的屬性及值打在""內
- head 裡的 CSS：在head標籤下層加入style標籤，並把CSS的屬性及值打在{}內
- 外部 CSS ：在外部設定CSS檔案(格式參照Head裡的CSS)，再加入link標籤至head標籤下層引入
EXAMPLE
常見的CSS選擇器
| 選擇器 | 範例 | 說明 |
|---|---|---|
| .class | .blablabla | class選擇器，一個class可以對應到多個標籤 |
| #id | #blablabla | id選擇器，一個id只能對應一個標籤 |
| tag | tag | 標籤選擇器，套用到所有的tag標籤 |
| * | * | 套用在整個網頁所有標籤 |
常用屬性
| 屬性 | 說明 |
|---|---|
| 文字相關 | |
| font-size | 字體大小，需加入單位 |
| font-family | 字形，如：標楷體、微軟正黑體...等 |
| color | 字體顏色，可用簡單顏色單字或參考色碼表的HEX(前面加#) |
| line-height | 指定行距 |
| text-decoration | 是否加入底線 (值：underline 加底線/none 不加) |
| text-align | 水平對齊方式 (值：left 靠左/right 靠右/center 置中/ justify 左右對齊 <--不清楚的話開WORD試試看就知道了) |
| text-shadow | 建立立體字 |
| 背景相關 | |
| background-color | 背景顏色，可用簡單顏色單字或參考色碼表的HEX(前面加#) |
| background-image | 背景圖片，後用url(圖片位址)指定圖片 ( ex:background-image:url(/pic/123.JPG); ) |
| background-repeat | 背景圖片是否重複 (值：no-repeat 不重複/ repeat-x 水平方向重複/ repaet-y 垂直方向重複) |
| background-attachment | 是否在螢幕上固定(值：fixed 固定/scroll 背景圖隨網頁捲動) |
| background-position | 背景圖片位置(值：top/center/buttum 三選一加 left/center/right 三選一 或 兩個數字/百分比，第一個距網頁最上面、第二距最左) |
| box-shadow | 建立3D效果 |
盒狀模型
盒狀模型試作
除border外，其他屬性沒辦法設定顏色！！！要設定margin的顏色，要在上層的盒子中設定background-color。
| 屬性 | 值 |
|---|---|
| 填充(padding) | |
| padding-top/-bottom/-right/-left | 上下左右的留白距離(文字到邊線的距離) 若無指定-top/-bottom/-right/-left，padding後依序輸入上右下左的距離值，值可為auto(自動) |
| 框線(border) | |
| border-color | 框線顏色，可用簡單顏色單字或參考色碼表 |
| border-style | 框線樣式(值：none 無/dotted 點/dash -/solid 實心/double 兩條...) |
| boder-width(可指定，如：border-top-width...) | 可為thin 細/think 粗/medium 中等 或其他單位 |
| border-radius | 圓角方框 |
| 邊界(margin) | |
| margin-top/-bottom/-right/-left | 上下左右的邊界距離(邊線到其他物件的距離) 若無指定-top/-bottom/-right/-left，padding後依序輸入上右下左的距離值，值可為auto(自動) |
單位
| 單位 | 說明 |
|---|---|
| px | pixals，螢幕上的像點大 |
| em | 目前字體大小大 |
| ex | 目前字體1/2高度 |
| % | 百分比 |
| in | 吋 |
| cm | 公分 |
| mm | 毫米 |
| pt | point，1pt=1/72in |
| pc | 1pc=12pt |