---
# System prepended metadata

title: '[筆記] CSS 基礎'
tags: [CSS, 程式語言, 筆記]

---

# [筆記] CSS 基礎

### 特性

寫在後面的CSS會覆蓋前面的CSS

### 用法

1. Inline

    ```HTML=
    <p style="color: red">text</p>
    ```

2. Internal

    ```HTML=
    <html>
    <head>
    <title>CSS Example</title>
    <style>

        p {
            color: red;
        }

        a {
            color: blue;
        }

    </style>
    ...
    ```

3. External

    * style.css檔

    ```css=
    p {
        color: red;
    }

    a {
        color: blue;
    }
    ```

    * HTML檔

    ```HTML=
    <html>
    <head>
        <title>CSS Example</title>
        <link rel="stylesheet" href="style.css">
    ...
    ```

### Selectors, Properties, and Values

![](https://i.imgur.com/zxgKppz.png)

* 單位

    * px
    * em : 相對單位
    * pt
    * % : 螢幕寬度的 X %

### Colors

* red
* rgb(255,0,0)
* rgb(100%,0%,0%)
* #ff0000
* #f00

**可以用的Properties** : color、background-color

**好用工具** : 吸色工具

### Text

* font-family : 字型
* font-size : 字體大小
* font-weight : 文字粗細
* font-style : 斜體(italic )
* text-decoration

    * text-decoration: underline
    * text-decoration: overline
    * text-decoration: line-through

* text-transform
* letter-spacing : 字母間隔
* word-spacing : 字間隔
* text-align : 靠左、靠右、置中
* text-indent : 縮排

**font-style, font-weight, font-size, line-height, font-family合在一起寫**

```css=
p {
    font: italic bold 12px/2 courier;
}
```

### Margins and Padding

* Margins

    ```css=
    p {
        margin-top: 1px;
        margin-right: 5px;
        margin-bottom: 10px;
        margin-left: 20px;
    }
    ```
    可以寫成這樣(四個參數 : 上、右、下、左，兩個參數 : 上下、右左)
    ```css=
    p {
        margin: 1px 5px 10px 20px;
    }
    ```
    
    * 左右置中方法

        1. 左右有margin

        ```css=
        margin: 0 auto;
        ```
        
        2. 左右沒有margin

        ```css=
        text=align: center;
        ```

* Box Model : F12可看到，可搭配調整

![](https://i.imgur.com/xSZAP4d.png)
    
### Borders

```css=
p {
    border-width: 1px;
    border-color: red;
    border-style: solid;
}
```
可以寫成這樣
```css=
p {
    border: 1px red solid;
}
```

![](https://i.imgur.com/QvMS0u0.png)

### Class and ID Selectors

1. id

    ```css=
    #id{
        ...
    }
    ```

2. class

    ```css=
    .class{
        ...
    }
    ```

**class允許多個，但id擁有多個在javascript可能出錯，在CSS沒差**

### Grouping and Nesting

1. Grouping : id、class有相同的properties，可以合在一起使用

    * Grouping前

    ```css=
    h2 {
    color: red;
    }

    .thisOtherClass {
        color: red;
    }

    .yetAnotherClass {
        color: red;
    }
    ```
    
    * Grouping後
    
    ```css=
    h2, .thisOtherClass, .yetAnotherClass {
        color: red;
    }
    ```
    
2. Nesting

    ```css=
    #top h1 {
        color: #ff0;
    }

    #top p {
        color: red;
        font-weight: bold;
    }
    ```
    
    ```HTML=
    <div id="top">
        <h1>Chocolate curry</h1>
        <p>This is my recipe for making curry purely with chocolate</p>
        <p>Mmm mm mmmmm</p>
    </div>
    ```
    
### Pseudo Classes

```css=
selector:pseudo_class{
    property: value;
}
```

* link : 未連結
* visited : 已連結過
* active : 點擊連結
* hover : 滑鼠指到
* focus : 點擊過後不變
* first-child : 第一個selector
* last-child : 最後一個selector
* nth-child(2n+1) : 第2n+1個selector

### Background Images

```css=
body {
    background: white url(http://www.htmldog.com/images/bg.gif) no-repeat top right;
    background-size: contain
}
```

**[Unsplash](https://unsplash.com/)** : 圖床

### Specificity

權重較高就不會被覆蓋

```css=
div p { color: red } //不會被影響
p { color: blue }
```

![](https://i.imgur.com/a9e4eHv.png)

### Display

1. Inline : 文字

```css=
li { display: inline }
```

2. Block : 區塊

```css=
#navigation a {
    display: block;
}
```

**Inline與Block差異 :**

![](https://i.imgur.com/NLqypsw.png)

3. None : 隱藏

### CSS版面配置

**margin: auto;**

水平置中，避免該元素從左到右撐滿容器

**max-width: 600px;**

可以完美處理瀏覽器視窗小於元素寬度的情形

**box-sizing: border-box;**

因為元素的邊框（margin）和內距（padding）會撐開元素，導致實際顯示的元素超出你的設定，這個可以解決這問題

**關於 position 屬性**

* static : 預設值
* relative : 可以設定top、right、bottom、left，來移動元素相對位置
* fixed : 可以設定top、right、bottom、left，來固定元素在畫面中的絕對位置
* absolute : 可以設定top、right、bottom、left，來固定元素在上層元素中的絕對位置

**關於 float 屬性**

可用於實現文繞圖，也能實現上述position的效果

![](https://i.imgur.com/r1Q700v.png)

**關於 clear 屬性**

解決使用float時的重疊現象

**clearfix 密技**

解決使用float時，圖片大小溢出容器外

```css=
.clearfix {
  overflow: auto;
}
```

**百分比寬度**

百分比是一種相對於目前容器元素寬度的單位

**媒體查詢（media queries）**

一種讓網站針對不同的瀏覽器和上網裝置「響應」不同顯示效果的策略

```css=
@media screen and (min-width:600px) {
  nav {
    float: left;
    width: 25%;
  }
  section {
    margin-left: 25%;
  }
}
@media screen and (max-width:599px) {
  nav li {
    display: inline;
  }
}
```

###### tags: `筆記` `程式語言` `CSS`