This is a paragraph.
... ``` --- ## CSS Syntax  --- ## CSS Selectors ### 1. Simple selectors - base on tag ```css= /* Example: 所有的都會符合受此 CSS 影響 */ p { text-align: center; color: red; } ``` ---- - base on id ```css= /* id 是在 html 中獨一無二的，不該出現兩個有同樣 id 的 tag */ /* 符合此 id 的 tag 都會影響 */ /* ex.
我想當標題
*/ #title { color: black; font-size: 36px; font-weight: bold; } ``` ---- - base on class ```css= /* 並不唯一， 可以同時對很多有相同 class 的 tag 做調整 */ /* 符合此 class 的都會影響 */ /* ex.我想當標題
*/ .title { color: black; font-size: 36px; font-weight: bold; } /* 可同時滿足多個 class，並用空白隔開 */ ``` ---- - universal selector ```css= /* 影響所有 html element */ * { text-align: center; color: blue; } ``` ---- - grouping selector ```css= /* 同時影響多的 element */ h1, h2, p { text-align: center; color: red; } ``` --- ### 2. Combinator selectors - Descendant Selector (space) ```css= /* 所有在*/ div p { background-color: yellow; } ``` - Child Selector (>) ```css= /* 所有在
*/ div > p { background-color: yellow; } ``` ---- - Adjacent Sibling Selector (+) ```css= /* 所有 與
(同一層) */ div + p { background-color: yellow; } ``` - General Sibling Selector (~) ```css= /*
(同一層) */ div ~ p { background-color: yellow; } ``` ----  --- ### 3. Pseudo-class selectors Define a special state of an element **語法：** ```css= selector:pseudo-class { property: value; } ``` ---- **Example：** ```css= /* unvisited link */ a:link { color: #FF0000; } /* visited link */ a:visited { color: #00FF00; } /* mouse over link */ /* 必須在 link, visited 之後！ */ a:hover { color: #FF00FF; } /* selected link */ /* 必須在 active 之後！ */ a:active { color: #0000FF; } ``` --- ### 4. Pseudo-elements selectors - Style 某 element 第一個字母、第一行 - 在 element 的前後插入東西 **語法：** ```css= selector::pseudo-element { property: value; } ``` ---- **Example:** ```css= p::first-letter { /* 第一個字母 */ color: #ff0000; font-size: xx-large; } p::first-line { /* 第一行 */ color: #0000ff; font-variant: small-caps; } h1::before { /* 內容之前插入 url */ content: url(smiley.gif); } h1::after { /* 內容之後插入 url */ content: url(smiley.gif); } ::selection { /* 用滑鼠反白的內容 */ color: red; background: yellow; } ``` --- ### 5. Attribute selectors 以 attribute 來分辨作用對象 **Example:** ```css= input[type="text"] { width: 150px; display: block; margin-bottom: 10px; background-color: yellow; } input[type="button"] { width: 120px; margin-left: 35px; display: block; } ``` --- ## CSS Comments ```css= /* */ ``` --- ## CSS Colors ```css= div { color: blue; background-color: rgba(79, 196, 255, 0.5); } ``` ---- 色碼示方法： ```css= blue /* 內建顏色，有140種 */ rgb(79, 196, 255) /* rgb (紅綠藍) */ #4fc4ff /* HEX (16進位表示 rgb) */ hsl(200°, 100%, 65%) /* HSL (色相、飽和度、亮度)*/ /* 多一個參數 (0~1)，意思是透明度 */ rgba(79, 196, 255, 0.3) hsla(200°, 100%, 0.2) ``` ---- 如何尋找喜歡的顏色? Google 搜尋: Color picker --- ## CSS Background ```css= body { background-color: rgba(0, 0, 0, 0.8); background-image: url("http://blog.hostbaby.com/wp-content/uploads/2013/07/scuffedstatic_dark1400x900.jpg"); /* 預設會 repeat 至填滿 */ /* 也可以設定縱向、橫向 repeat 即可 (repeat-y, repeat-x) */ background-repeat: no-repeat; background-position: left top; background-attachment: fixed; /* scroll or fixed */ background-size: cover; } ``` --- ## CSS Borders property: **上 右 下 左** (four values) property: **上 右左 下** (three values) property: **上下 左右** (two values) property: **全部** (one value) ```css= div.border { border-style: dotted solid; border-width: 1px 2px 1px 6px; border-color: white; border-radius: 20px; } div.border-short { border: 3px solid lightgray; } ``` --- ## CSS Box Model  ---- ### Margin ```css= div.margin { margin-top: 3px; margin-right: 6px; margin-bottom: 9px; margin-left: 12px; /* margin: 3px 6px 9px 12px; */ /* margin: 3px 6px 9px; */ /* margin: 3px 6px; */ } ``` ---- ### Padding ```css= div.padding { padding-top: 1px; padding-right: 2px; padding-bottom: 3px; padding-left: 4px; /* padding: 3px 6px 9px 12px; */ /* padding: 3px 6px 9px; */ /* padding: 3px 6px; */ } ``` ---- ### Height and Width ```css= div { height: 30%; width: 500px; } ``` ---- ### Element's height and width - 預設是一個element的長寬是 height/width + padding + border - 所以想要以 width / height 來作為排版用的長寬 `box-sizing: border-box;` ```css= * { box-sizing: border-box; } ``` --- ## CSS Text ```css= p.text { color: white; text-align: left; /* left right */ text-decoration: underline; /* none, overline, line-through */ text-transform: uppercase; /* lowercase capitalize */ text-indent: 30px; letter-spacing: 3px; line-height: 1.8; word-spacing: 10px; white-space: nowrap; } ``` --- ## CSS Font ```css= p { font-family: Arial, Helvetica, sans-serif; font-style: italic; /* normal, oblique */ font-weight: bold; font-size: 18px; } ``` 也有其他字體，中文也有很多字體，自行 Google~ --- ## CSS Display 大多是 element 預設是 block 或是 inline ---- ### Block-level elements 會換行，寬度會拉到最寬 ```html=