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: ;
}
/*...*/
/* 版首 */
/* 版尾 */
```
### 結構
> - 相關性很重要, 內容相關的放在一個盒子裡
> 
> - 圖中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);
}
```
Sign in with Wallet
Connect another wallet