---
# System prepended metadata

title: CSS-3

---

CSS-3
===

## CSS檢測工具
> - [CSS States](https://www.cssstats.com/)
> - [W3: Unicorn](https://validator.w3.org/unicorn/) 
>   - 這個可以檢測本地文件

## CSS壓縮工具
> - 提高載速和節約空間
> - [站長工具](http://tool.chinaz.com/Tools/CssFormat.aspx)


## 實作: 標靶
<img src="https://i.imgur.com/UAVpXEl.png" style="width: 150px;"/>

```htmlmixed=
<head>
    <meta charset="utf-8"/>
    <style>
    div {
        border: 3px solid black;
        margin: 27px;
        border-radius: 50%;
    }
    .out {
        width: 300px;
        height: 300px;
        margin: 300px auto;
        background: blue;
    }
    .out div:first-child {
        width: 240px;
        height: 240px;
    }
    .out div:first-child div:first-child {
        width: 180px;
        height: 180px;
    }
    .out div:first-child div:first-child div{
        width: 120px;
        height: 120px;
        background: red;
    }
    </style>
</head>
<body>
    <div class="out">
        <div>
            <div>
                <div></div>
            </div>
        </div>
    </div>
</body>
```


## 實作: 小小兵
```htmlmixed=
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <style>
        * {
            padding: 0px;
            margin: 0px;
        }

        .container {
            width: 400px;
            height: 600px;
            border: 1px solid red;
            margin: 200px auto;
            position: relative;
        }

        .body {
            width: 250px;
            height: 400px;
            border: 5px solid black;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate3d(-50%, -50%, 0);
            border-radius: 150px;
            background: yellow;
            overflow: hidden;
        }

        .hair_t,.hair_b {
            width: 100px;
            height: 50px;
            border-top: 10px solid black;
            border-radius: 50%;
            position: absolute;
            transform: rotateZ(30deg);
        }
        .hair_t {
            left: 120px;
            top: 80px;
        }
        .hair_b {
            left: 120px;
            top: 70px;
        }

        .hand_l, .hand_r {
            height: 80px;
            width: 60px;
            border: 5px solid #000;
            position: absolute;
            top: 313px;
            background: yellow;
            border-radius: 20px;
            z-index: -1;
        }
        .hand_l {
            left: 44px;
            transform: rotate(30deg);
        }
        .hand_r {
            right: 44px;
            transform: rotate(-30deg);
        }
        .hand_l::after, .hand_r::after {
            content: "";
            height: 20px;
            border: 5px solid black;
            position: absolute;
            border-radius: 5px;
            top: 30px;
        }
        .hand_l::after {
            left: 20px;
        }
        .hand_r::after {
            right: 20px;
        }

        /* 眼睛 */
        .eye_r, .eye_l {
            width: 90px;
            height: 90px;
            border: 5px solid black;
            background: #fff;
            position: absolute;
            top: 70px;
            border-radius: 50%;
        }
        .eye_l {
            left: 25px;
        }
        .eye_r {
            right: 25px;
        }
        .eye_l_black, .eye_r_black {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: #000;
            position: absolute;
            top: 20px;
            left: 20px;
            animation: 10s infinite;
        }
        .eye_r_black {
            animation: MoveEye_r 5s infinite;
        }
        .eye_l_black {
            animation: MoveEye_l 5s infinite;
        }

        .eye_l_white, .eye_r_white {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #fff;
            position: absolute;
            top: 15px;
        }
        .eye_l_white {
            right: 5px;
        }
        .eye_r_white {
            left: 5px;
        }
        /* 眼鏡 */
        .eye_l::after, .eye_r::after {
            content: "";
            width: 30px;
            height: 20px;
            background: #000;
            position: absolute;
            top: 15px;
        }
        .eye_l::after {
            left: -30px;
            transform: rotate(30deg);
        }
        .eye_r::after {
            right: -30px;
            transform: rotate(-30deg);
        }

        /* 嘴巴 */
        .mouth {
            width: 60px;
            height: 35px;
            border: 5px solid #000;
            position: absolute;
            top: 186px;
            left: 90px;
            background: #fff;
            border-radius: 0 0 15px 15px;
            transform: rotate(-30deg);
        }
        .mouth::after {
            content: "";
            width: 81px;
            height: 31px;
            border-bottom: 5px solid #000;
            position: absolute;
            transform: rotate(30deg);
            top: -20px;
            left: -5px;
            z-index: 1;
            background: yellow;
        }

        /*褲子 */
        .paint_t {
            width: 150px;
            height: 45px;
            background: blue;
            border: 5px solid #000;
            border-bottom: 0;
            position: absolute;
            bottom: 95px;
            left: 45px;
        }

        .paint_t_l, .paint_t_r {
            width: 100px;
            height: 20px;
            border: 5px solid #000;
            background: blue;
            position: absolute;
            top: -30px;
        }
        .paint_t_l {
            left: -85px;
            transform: rotate(30deg);
        }
        .paint_t_r {
            right: -85px;
            transform: rotate(-30deg);
        }
        .paint_t_r::after, .paint_t_l::after {
            content: "";
            width: 10px;
            height: 10px;
            background: #000;
            border-radius: 50%;
            position: absolute;
            top: 6px;
        }
        .paint_t_l::after {
            left: 85px;
        }
        .paint_t_r::after {
            left: 5px;
        }

        .paint_b {
            width: 250px;
            height: 95px;
            border-top: 5px solid #000;
            position: absolute;
            bottom: 0;
            background: blue;
            z-index: -1;
        }	




        .foot_l_sock, .foot_r_sock {
            width: 40px;
            height: 70px;
            background: #000;
            position: absolute;
            top: 485px;
            z-index: -1;
        }
        .foot_l_sock {
            left: 155px;
        }
        .foot_r_sock {
            right: 155px;
        }
        .foot_r_shoes, .foot_l_shoes {
            width: 80px;
            height: 40px;
            background: #000;
            position: absolute;
            top: 520px;
        }
        .foot_r_shoes {
            right: 115px;
            border-radius: 0 25px 25px 0;
        }
        .foot_l_shoes {
            left: 115px;
            border-radius: 25px 0 0 25px;
        }


        @keyframes MoveEye_r {
            0% {
                transform: translateX(0);
            }
            25% {
                transform: translateX(10px) rotate(-30deg);
            }
            50% {	
                transform: translateX(0);
            }
            75% {
                transform: translateX(-10px) rotate(-30deg);
            }
            100% {
                transform: translateX(0);
            }
        }
        @keyframes MoveEye_l {
            0% {
                transform: translateX(0);
            }
            25% {
                transform: translateX(10px) rotate(30deg);
            }
            50% {	
                transform: translateX(0);
            }
            75% {
                transform: translateX(-10px) rotate(30deg);
            }
            100% {
                transform: translateX(0);
            }
        }




        </style>
    </head>
    <body>
        <!-- 容器 -->
        <div class="container">
            <!-- 頭髮 -->
            <div class="hair">
                <div class="hair_t"></div>
                <div class="hair_b"></div>
            </div>
            <!-- 身體 -->
            <div class="body">
                <!--眼睛-->
                <div class="eye">
                    <div class="eye_r">
                        <div class="eye_r_black">
                            <div class="eye_r_white"></div>	
                        </div>
                    </div>
                    <div class="eye_l">
                        <div class="eye_l_black">
                            <div class="eye_l_white"></div>
                        </div>
                    </div>
                </div>
                <!-- 嘴巴-->
                <div class="mouth"></div>
                <!-- 褲子 -->
                <div class="paint">
                    <div class="paint_t">
                        <!-- 肩帶 -->
                        <div class="paint_t_l"></div>
                        <div class="paint_t_r"></div>
                    </div>
                    <div class="paint_b"></div>
                </div>
            </div>
            <!-- 手 -->
            <div class="hand">
                <div class="hand_l"></div>
                <div class="hand_r"></div>
            </div>
            <!-- 腳 -->
            <div class="foot">
                <div class="foot_l">
                    <div class="foot_l_sock"></div>
                    <div class="foot_l_shoes"></div>
                </div>
                <div class="foot_r">
                    <div class="foot_r_sock"></div>
                    <div class="foot_r_shoes"></div>
                </div>
            </div>
        </div>
    </body>
</html>
```


## icon

### 添加
> - 很多網站的icon檔名都叫做`favicon.ico`, 
> - 放的位置都直接放在根目錄下, 因為他是圖標不是圖片
>   - [google](https://www.google.com/favicon.ico)
>   - [Amazon](https://www.amazon.com/favicon.ico)
>   - [Apple](https://www.apple.com/favicon.ico)
> - 檔案放好後用link導入
>   `<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />`
>   - type 可以省略

```
.
├── css
│   ├── base.css
│   └── normalize.css
├── favicon.ico
├── fonts
├── images
├── index.html
└── js
```

### 製作
> - 選定
> <img src="https://i.imgur.com/zBLpN45.png" style="width: 200px" /> -> <img src="https://i.imgur.com/li7gUy0.png" style="width: 150px" /> -> <img src="https://i.imgur.com/81MhrFA.png" style="width: 200px" />
> - 導出
> <img src="https://i.imgur.com/TQJ2Yh7.png" style="width: 200px" /> -> <img src="https://i.imgur.com/43FLMH9.png" style="width: 150px" /> -> <img src="https://i.imgur.com/w7wWTwj.png" style="width: 200px" />
> - 轉換
>   - https://convertico.com/
>   - http://www.bitbug.net/


## Search Engine Optimization(SEO)
> - 通過網站優化提高網站排名

### 站內優化
<img src="https://i.imgur.com/pBC1Jk8.png" style="width: 350px" /><img src="https://i.imgur.com/44MdgXp.png" style="width: 340px" />

> ### 標題 Title
> `<title>標題</title>`
> - 長度: 
>   - Google: 70KB, 35個中文字
>   - Baidu: 56KB, 28個中文字

> ### 網站說明 Description
> `<meta name="description" content="內容" />`
> - 就網站清楚且簡單的說明

> ### 關鍵字 Ketwords
> `<meta name="keywords" content="K1,K2,K3,..."/`
> - 就是關鍵字
> - 每個關鍵字用半形逗號(,)隔開


> ### Logo
> - Logo常用`<h1></h1>`包起來來提高SEO權重
> - Logo一般常用BG來做

> - 要用`<h1>`包`<a>` 還是`<a>`包`<h1>`?
>   - 都有人做, 我的想法是我要跟人家導覽前, 應該先跟人家介紹我的東西, 人家才會點
>   - 所以我先告訴你這是我的Logo, 我是在幹嘛的, 然後才讓你點我

> ### 其他
> - 反正寫得越清楚, 分數就有可能越高, 例如 img.alt 也寫一寫
> - 不是每個網站都需要追逐SEO分數, SEO必須視網站性質而定, 長久且需要接觸客戶的才需要追求SEO, 例如官網
>   - 活動網站: 
>     - 通常這種都有行銷預算, 花錢廣告課金戰士就是大爺
>     - SEO需要時間累積, 等你SEO分數起來後, 你活動都結束了
>   - 後端平台
>     - 看得懂就好了, `<div class='ul li'>` 開下去就對了
```htmlmixed=
<div class="logo">
    <h1>
        <a href="#"></a>
    </h1>
</div>
```
```css
.logo {
	width: ;
	height: ;
	background: url() no-repeat;
	background-size: cover;
}
```

## 小絕招
### 自己製作小三角方向箭頭

<img src="https://i.imgur.com/2ze1xWX.png" style="width:200px;"/>

> - 想法: 利用字符◇，切掉上下左右就是了
> - 實作: 
>   - 創造一個小框框包住◇
>   - `overflow:hidden`
>   - 然後再控制◇的位置即可
```htmlmixed=
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
    /* 初始化開始 */
    * {
        margin: 0;
        padding: 0;
    }
    i, s {
        text-decoration: none;
        font-style: normal;
    }
    /* 初始化結束 */
    div {
        width: 100px;
        height: 100px;
        border: 1px solid skyblue;
        margin: 300px auto;
        position: relative;
    }
    i { /* 創造一個7高15寬的小框框包住◇ */
        position: absolute;
        height: 7px;
        width: 15px;
        overflow: hidden;
    }
    s {	/* ◇ 的大小有15*15, 所以一定只能露出一半 */
        font-size: 15px;
        position: absolute;
        /*top: -3px; /* 向上箭頭 */
        top: -10px; /* 向下箭頭 */
    }
    </style>
</head>
<body>
    <div> 
        <i><s>◇</s></i>
    </div>
</body>
```

### 圖片變色

> - 看京東的網站學的
> - 圖片變色除了用IconFont外, 京東使用變換圖片的方法
>   - 同一個位置放兩張圖片, hover經過後將上層圖片隱藏`visibility:hidden`
```htmlmixed=
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
    * {
        margin: 0;
        padding: 0;
    }
    i {
        font-style: normal;
    }
    div {
        width: 100px;
        height: 100px;
        border: 1px solid skyblue;
        margin: 300px auto;
        position: relative;
    }
    i {
        height: 25px;
        width: 25px;
        position: absolute; /* 為了給寬高 */
    }
    i img {
        height: 100%;
        width: 100%;
        position: absolute;/* 讓照片重疊 */
        top: 0;
        left: 0;
    }
    i:hover .hoverBF { /* 滑鼠移到i 時, 上面那張照片隱藏 */
        visibility: hidden;
    }
    </style>
</head>
<body>
    <div> 
        <i>
            <img src="images/21.png"/>
            <img src="images/21-1.png" class="hoverBF"/>
        </i>
    </div>
</body>
```

### 移動的變色圖標
<img src="https://i.imgur.com/fx124kC.png" style="width: 100px;" /><img src="https://i.imgur.com/T2OPbhz.png" style="width: 100px;" />

> - 也是跟京東學的，歎為觀止
> - 預期效果: 滑鼠滑動到圖標時, 圖標會變色，且有一個滑動的效果
> - 作法: 
>   1. 準備一張sprite圖, 相鄰放上這兩個icon
>   2. 創造一個icon大小的盒子，背景圖放上一個icon
>   3. 利用 `transition` 跟 改變`background-position`位置來完成
```htmlmixed=
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
    * {
        margin: 0;
        padding: 0;
    }
    i { /* 這個icon為 15*20 */
        font-style: normal; /* 初始化 */
        position: absolute; /* 創造空間 */
        width: 15px;
        height: 20px;
        background: url(images/sprite.png) no-repeat;
        transition: all .5s; /* 關鍵1 */
    }
    i:hover { /* 關鍵2 */
        background-position: 0 -25px;
    }
    div {
        width: 92px;
        height: 100px;
        border: 1px solid skyblue;
        margin: 300px auto;
        position: relative;
    }
    </style>
</head>
<body>
    <div>
        <i></i>
    </div>
</body>
```

### 塞li框框
> - 這裡有一個大框框，想要塞下這九個`<li>`小框框
<img src="https://i.imgur.com/cFdmsjK.png" style="width: 100px;" />

> - 作法: 
>   1. 浮動
>   <img src="https://i.imgur.com/f7xGt8l.png" style="width: 100px;" />
>   2. 因為ul本來繼承的寬是淺藍框框的寬, 所以塞不下，讓ul增大到第三個可以塞進去
>   <img src="https://i.imgur.com/RP9WTtP.png" style="width: 100px;" />
>   3. 最後淺藍框框把多出來的切到即可`overflow: hidden;`
>   <img src="https://i.imgur.com/U6tED6S.png" style="width: 100px;" />

```htmlmixed=
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
    * {
        margin: 0;
        padding: 0;
    }
    ul {
        list-style: none;
    }
    div {
        width: 92px;
        height: 100px;
        border: 1px solid skyblue;
        margin: 300px auto;
        overflow: hidden;
    }
    ul {
        width: 93px;
    }
    li { /* 三個li加起來是93px */
        height: 30px;
        width: 30px;
        border-right: 1px solid darkblue;
        border-bottom: 1px solid darkblue;
        float: left;
    }
    </style>
</head>
<body>
    <div> 
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
```

### 模塊化CSS
> - 就是API的概念
> - 圖拿到之後看到很多一樣的東西時, 就可以寫一個模塊css來導入



## 小工具
### 網頁擷取工具
> - Google
>   1. 開啟開發人員工具(⌘⌥I)
>   2. 執行指令框(⌘⌥P)
>     <img src="https://i.imgur.com/oqaSecT.png" style="width: 100px;" />
>   3. 輸入指令`Capture full size screenshot`
>   <img src="https://i.imgur.com/cPyz4Dy.png" style="width: 300px;" />

### 練習切版
> - https://templated.co/
> - https://www.templatemonster.com/




## 經驗筆記
### 初始設置
> - 站點: 就是設一個網站專屬的資料夾
> - 規劃: 
>   - 資料夾
>     - 一般來說至少會有 `images/` `css/`
>   - css
>     - `base.css` 或 `global.css`
>       - 網站很常會有重複的版面，尤其是頭尾
>       - 為了不重複寫那些重複版面的樣式, 所以一般都會有基礎版面的css
>       - 有些常用的東西，例如網站用字的大小、顏色、版心寬等, 為了方便而設置公共類
>     - `normalize.css`
>       - 初始化css, 有些人會直接寫在公共的css上
> - icon      

`$ tree`
```
.
├── css
│   ├── base.css
│   └── index.css
├── favicon.ico
├── images
└── index.html
```
`$ cat index.html`
```htmlmixed=
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="css/base.css" />
        <link rel="stylesheet" href="css/index.css" />
        <link rel="shortcut icon" href="favicon.ico"  type="image/x-icon" />
    </head>
    <body>
        <!-- 版首 Start-->
        <!-- 版首 End-->
        <!-- 版尾 Start-->
        <!-- 版尾 End-->
    </body>
</html>
```
`$ cat css/base.css`
```css=
@charset "UTF-8";

/*css 初始化 */
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6,
form, fieldset, legend, img { 
    margin: 0; 
    padding: 0; 
}

fieldset, img, input, button { 
    border: none; 
    padding: 0;
    margin: 0;
    outline-style: none; 
}
select, input { 
    vertical-align: middle;
}
select, input, textarea { 
    margin: 0; 
}
textarea { 
    resize: none; 
}

ul, ol { 
    list-style: none; 
}
img {
    border: 0;	
    vertical-align: middle; /* 去除圖片底下空白縫隙 */
} 
table { 
    border-collapse: collapse; 
}

.clearfix:before,.clearfix:after { /* 清除浮動 */
    content: "";
    display: table;
}
.clearfix:after{
    clear: both;
}
.clearfix{
    *zoom: 1;/*IE/7/6*/
}

a {
    text-decoration: none; 
}

h1,h2,h3,h4,h5,h6 {
    text-decoration: none;
    font-weight: normal;
    font-size: 100%;
}
s,i, em{
    font-style: normal;
    text-decoration: none;
}

/* 公共類 */
.w { /* 版心 */
    width: ;
}
.font {
    color: # ;
    font-size: ;
}
.fl {
    float: left;
}
.fr {
    float: right;
}
body {
    background: ;
}
/*...*/

/* 版首 */
/* 版尾 */
```

### 結構
> - 相關性很重要, 內容相關的放在一個盒子裡
>   ![](https://i.imgur.com/RLJK0dN.png)
>   - 圖中Logo，搜尋欄，地點，熱搜字各自裝一個盒子
>   - 如果點熱搜字時，搜尋欄會出現該字，那表示這兩個相關，故兩個要裝一起



## 響應式
> - 盡量把媒體查詢樣式放在同個頁面, 用註釋區分, 以減少客戶端向服務器請求的次數

### viewport
`<meta name='viewport' content='initial-scale=1.0,width=device-width' />`
> - `name='viewport'` : 說明這個標籤用來設置 viewport 的屬性
> - `content`
>   - `initial-scale=1.0` : 將頁面放大一倍
>   - `width=device-width` : 頁面寬度與設備寬度相同
>   - `maximum-scale` : 最大可放大倍數
>   - `minimum-scale` : 最小可壓縮倍數
>   - `user-scalable=yes | no` : `yes` or `no`, `no` 表示禁止縮放
 
### @media
```css
@media mediaType and|not|only (media feature) {style}
```
> - `mediaType` : 媒體類型
>   - `all` : 全部設備
>   - `print` : 影印設備
>   - `screen` : 螢幕
>   - `speech` : 閱讀器
> - `media feature` 

```htmlmixed=
<head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0'/>
    <style>
    /* PC */
    @media screen and (min-width:960px) {
        body {
            background: red;
        }
    }

    /* PAD */
    @media screen and (max-width: 960px) and (min-width: 750px) {
        body {
            background: blue;
        }
    }

    /* PHONE */
    @media screen and (max-width: 750px) {
        body {
            background: yellow
        }
    }
    </style>
</head>
```
> - 全螢幕
>   <img src='https://i.imgur.com/AP4F74G.png' style='width: 200px;'>
> - PAD
>   <img src='https://i.imgur.com/0skvCFM.png' style='width: 200px;'>
> - PHONE
>   <img src='https://i.imgur.com/w155QfM.png' style='width: 200px;'>


## backdrop-filter
`background-filter: <filter-function>`
> - `blur(radius)`: 模糊效果, 一般都用 px
> - `brightness(<amount(Num | %)>)`: 調整亮度, 預設為 1 || 100%
>   - `amount = 1` : 沒有調整
>   - `0 < amount < 1` : 調暗
>     - .4 => 調整亮度40%
>   - `amount > 1` : 調亮
>     - 2 => 調整亮度 200%
> - `contrast(amount)`: 對比度, 預設為 1
> - `grayscale(amount)` : 調整後面灰色度數, 預設為 1
> - `hue-rotate(Ndeg)` : 調整後面整體色調, 預設為 360deg
> - `invert(amount)` : 反轉顏色, value 為 0~1 || 0%~100%
> - `saturate(amount)` : 飽和度,預設為 1 || 100%
> - `sepia(amount)`: 轉棕褐色, value 為 0~1 || 0%~100%

> - 讓元素`背後`所有元素添加某種效果
> - 元素本身須部分透明才看得到
```htmlmixed=
<head>
    <meta charset="UTF-8">
    <style>
    .fa {
        background: url(https://picsum.photos/300/300?rendom=1) no-repeat center center;
        background-size: cover;
        width: 300px;
        height:300px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .son {
        height: 300px;
        width: 300px;
        background-color: rgba(255, 225, 128, .9); /* 因為是改後面元素, 
                                                    * 元素本身需部分透明才看得到效果 */
        backdrop-filter: brightness(.4); /* 讓後面元素暗60% */
    }

    </style>
</head>
<body>
    <div class='fa'>
        <div class='son'>123</div>
    </div>
</body>
```




## 其他
### calc()
> - 讓CSS的值可以做運算
> - `*` `/` 至少一個值必須是數字
> - `+` `-` 的兩側必須空格
```css
.box {
  height: calc(20px - 10px);;
  width: 200px;
  background: blue;
  margin: 20px 0 0 20px;
  transform: scale(1);
}
```













