# 2023-2-20 CSS
###### tags: `HTML` `CSS`
## 語法規則
css可，或是
- 內部Link：寫在html的`<style>`標籤內
- 外部Link(推薦)：獨立成.css檔案，由`<link>`標籤連接。通常css會先寫在html的前面，可以避免網路速度過慢時只看到html的原始樣貌。
HTML:

    <link rel="stylesheet" href="xxx.css">

CSS:

    /*@import這招不推薦*/
    @import url(a.css);
    @import url(b.css);

- inline-style寫法(超級不推薦)

    <div style="width: 10px;"></div>

## Selector

優先權：
- !important > animation > inline-style > ID > class > Tag > * > 繼承
- 後寫 > 先寫
- 有分數的概念（前提：選取對象是同一個）
| ID | Class | Tag |
| -------- | -------- | -------- |
| 百位 | 十位 | 個位 |

不算分的：*, 繼承, >, +, ~

/* !important */
/* 強烈建議不要用 */
div{
    ...; !important
}

/* Universal selector 通用選取器*/
*{
    ...;
}

/* Descandent combinator 層疊式*/
/* span 裡面的 span 也會被選到 */
div span{
    ...;
}

/* Child combinator 子代選取器 */
/* 只選到該層，不會再往下挖 */
div > span{
    ...;
}

/* Adjacent sibling combinator */
/* div同層的下一個p */
div + p{
    ...;
}
/* 常用來排除第一個選項 */
li + li{
    ...;
}

/* General sibling combinator */
/* div同層的所有p */
div ~ p{
    ...;  
}

/* Compound selector組合式 */
p.box#idname{
    ...;
}

/* Pseudo class偽類 :focus :link :visited :hover :active*/
/* 懸浮 */
a:hover{
    ...;
}
/* 已點擊 (建議放在:hover後面，因為優先權)*/
a:active{
    ...;
}

div :first-child{
    ...;
}
div :last-child{
    ...;
}

div span:first-of-type{
    ...;
}
div span:last-of-type{
    ...;
}

/* 否定選取器 */
.menu a:not(:first-child){
    ...;
}  

## inline, block, inline-block
padding, margin: `上下左右`, `上下` `左右`, `上` `左右` `下`, `上` `右` `下` `左`

inline特性的物件有空白字元的問題

| | inline | block | inline-block |
| -------- | -------- | -------- | -------- |
| width | X | O | O |
| height | X | O | O |
| padding 上下 | X | O | O |
| padding 左右 | O | O | O |
| margin 上下 | X | O | O |
| margin 左右 | O | O | O |
| 預設排列方向 | 橫向 | 直向 | 橫向 |
| text-align 支援 | O | X | O |
| vertical-align 支援 | O | X | O |
| transform | X | O | O |
| 空白字元問題 | O | X | O |