---
# System prepended metadata

title: CSS

---

CSS
===
## What is CSS

- CSS stands for ==C==ascading ==S==tyle ==S==heets
- CSS describes how HTML elements are to be displayed on screen, paper, or in other media
- CSS saves a lot of work. It can control the layout of multiple web pages all at once
- 簡單來講就是把網頁弄的美美ㄉ
## 語法
```css
body {
    background-color :red;
}
```

也就是
- Selector (==body==)
- Property (==background-color==)
- 冒號
- Value (==red==)
- 分號
### Selector

## 如何加入CSS
- External include(大部分都是這種)
- Internal include
- Inline
### External include 
```html
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
```
## Position
有==static==, ==relative==, ==fix==, ==absolute==，預設是 ==static==
- static: 就是預設排版，元素依序排列
- relative: 沒做任何設置的話就跟 ==static== 一樣，但可以設置top, bottom, left, right 屬性，讓他在本應出現的位置上相對移動
- fix: 元素會固定在畫面上的位置(根據top, bottom, left, right)，儘管畫面捲動也不會改變(ex: fb的navbar)
- absolute: 跟fix很像，但是相對的基準是 parent 不是整個頁面，==absolute== 會參考最近的且 position 屬性是 ==relative== 或 ==absolute== 的 parent，根據top, bottom, left, right改變位置
![](https://i.imgur.com/ho34bAF.png)

## Padding
內容與border的距離
## Margins-排版的重要技術
元素與元素之間的距離
## Navagation Bar-導覽列

## 參考資料
>[CSS長度單位](http://www.1keydata.com/css-tutorial/tw/length-units.php)
>[w3school CSS Tutorial](https://www.w3schools.com/css/default.asp)
