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)