# 從零開始學CSS, HTML5, RWD網站
###### tags: `從零開始學CSS, HTML5, RWD網站`
'
### 1.1介紹網頁開發
>* **ui ux設計師**:設計介面圖
工具:photoshop.sketch.adobe xd.liilustrator.css
>* **前端工程師**:看得到的.把介面圖變成網頁.把伺服器傳來的資料放到網頁
工具:html.css.javascript變動很快永遠學不完
>* **後端工程師**:看不到的.伺服器資料庫
工具:php.python.ruby.node
>**html**是負責網站的架構
**css**負責網頁的美觀
**js**負責網頁上的行為及動畫送表單資料接收資料
>**RWD（Responsive Web Design）「響應式網站設計」:**
當你在設計網站排版時，能根據 RWD 的設計原則實作，網站內容就會像水一般，在各種裝置中自然的流動成最適當的樣子。
在 RWD 中有五種比較常用的設計模式：局部流動 (mostly fluid)、欄內容下排 (column drop)、版面配置位移 (layout shifter)、細微調整 (tiny tweaks) 和畫布外空間利用 (off canvas)。
**局部流動 (mostly fluid):**
在小尺寸螢幕時，內容會以垂直堆疊的方式排列；隨著螢幕尺寸變大時，內容會流動成多欄的方式，直到達到某個尺寸後，將內容置中並停止流動。
```
/* media query */
@media (min-width: 600px) {
.c2, .c3, .c4, .c5 {
width: 50%;
}
}
@media (min-width: 800px) {
.c1 {
width: 60%;
}
.c2 {
width: 40%;
}
.c3, .c4 {
width: 33%;
}
.c5 {
width: 34%;
}
}
```
**欄內容下排（column drop）:**
在大尺寸時會以多欄版面配置，隨著視窗寬度變窄時，內容會垂直堆疊所有欄。
```
/* media query */
@media (min-width: 600px) {
.c1 {
width: 60%;
order: 2;
}
.c2 {
width: 40%;
order: 1;
}
.c3 {
width: 100%;
order: 3;
}
}
@media (min-width: 800px) {
.c2 {
width: 20%;
}
.c3 {
width: 20%;
}
}
```
---
### 2.2環境設定，工具介紹(vscode)
>[vscode下載](https://code.visualstudio.com/)
>常用套件 : Live Server
>開發瀏覽器(常用) : chrome (開發者工具)
[找圖片網站](https:www.pexels.com)
[html arrow code html箭頭編碼](https://html-css-js.com/html/character-codes/arrows/)
[顏色編碼](https://flatuicolors.com/)
___
### 2.3html介紹跟&開發(head，body)
>html是負責整個的網頁的架構.是一種標籤標記語言
>* head負責瀏覽器需要的資訊.載入css.載入js
>* body負責網站內容架構
```
lorem亂字生產器
style{屬性:值;}
div width=""
line-height行距字上下距離
letter-spacing字跟字左右距離
```
---
### 2.5box sizing
>box sizing間距
>**padding**:box內間距
>**margin**:box外間距
>**border**:邊界
```
margin:0 auto 0 auto上 右 下 左
margin:0 auto上下 左右
```
**border-box**:padding.border都算在box內
`{box sizing:border-box;}`
**content-box**:padding.border都算在box外.算距離非常辛苦
`{box sizing:content-box;}`
info日期
author作者
layout排版
reset
---
### 2.7
>***{display:block;}**
>寬度佔全部.會換行.垂直排列.除非設定 position 或 float。
>可以設定高度、寬度、上方與下方距離margin-top margin-bottom
>div.section.nav.h1.footer
>
>***{display:inline;}**
>寬度佔box寬度.不換行，水平排列。
>不能設定高度、寬度、上方與下方距離margin-top margin-bottom
>span.img.a.b.atrong
>***{display:inline-block;}**
>讓水平排列的區塊以 block 模式呈現，這樣就不會被後面的其它元素所覆蓋
>可以設定高度、寬度、上方與下方距離margin-top margin-bottom
```
p{font-size大小
font-family字型
font-weight粗度
font-style:italic;斜體
h1 {text-transform:uppercase}全部大寫
h2 {text-transform:capitalize}第一個字大寫
p {text-transform:lowercase}全部小寫
h1 {text-decoration: overline}字上面一槓
h2 {text-decoration: line-through}字中間一槓
h3 {text-decoration: underline}字下面一槓
h4 {text-decoration:blink}
a {text-decoration: none}標籤的特性拿掉
ul li{list-style:none;不要導覽列小圓點}
list-style: square inside url('/i/eg_arrow.gif')
```
---
### 3.1
```
<!DOCTYPE html>
<html lang="zh-tw" html支援的語言中文
<head>
<title>文档标题</title>標籤: 網頁標題
meta tag: 提供搜尋引擎關於網頁內容的簡介
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 設置IE兼容模式. 強制瀏覽器呈現為特定的版本的標準。
<meta charset="UTF-8">瀏覽器支援UTF-8 - Unicode 字符编码ISO-8859-1 - 拉丁字母表的字符编码
<meta name="meta tag" content="內容">
<meta name="keywords" content="網頁關鍵字">
<meta name="description" content="網頁內容描述">
<meta name="author" content="網頁作者名稱">
<meta name="generator" content="網頁編輯器">
<meta name="copyright" content="網頁版權宣告">
<meta name="distribution" content="網頁發佈地區">
link tag: 網頁內與外部資源的關連
<link 屬性="" type="屬性種類" href="嵌入檔案">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css" />讓所有瀏覽器產生一致性
<link rel="stylesheet" type="text/css" href="src/style.css" />
HTML link tag 的屬性有非常多種可使用，例如 media、rel、rev、target 這些都是
base tag: 設定網頁內 URL 的預設目標
<base href="連結網址" target="連結目標">
<base href="連結網址" target="_self"：在本來的視窗開啟
<base href="連結網址" target="_blank"：在新的視窗開啟
<base href="連結網址" target="_parent"：在父層視窗開啟
<base href="連結網址" target="_top"：以 top 模式開啟
style: 導入網頁樣式，如 CSS
script: 導入 javascript 或 vbscript
</head>
```
---
### 3.4 css註解
```
<!--html-->
/*css*/
background:url('../img/');
```
---
### 3.5導覽列
**Normalize.css**讓所有瀏覽器產生一致性
`<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css">`
**reset css**讓標籤有同樣預設
```
*{marger:0;
padding:0;
border:1 solid color;
box-sizing:border-box;算距離比較簡單}
```
<img src="./img/" alt="">
---
### 3.7觀念 CSS Layout排版 (Float, Flex, Grid)
### float
支援度100%
現在普遍性最高
最多人用的排版
缺點:彈性不高
>『float:left;』代表向左浮動，
>『float:right;』代表像右浮動，
>『float:none;』則代表元素不要浮動，
>在 DIV 區域使用 float 技巧，通常還會搭配 DIV 的寬度，來達成每個 DIV 正確排列的效果。
>使用 float 浮動屬性讓它們水平排列，可是橘色的區塊就覆蓋上去了，必須額外在 DIV_B 中使用＂clear＂屬性才能避免被覆蓋的結果，
>
clearfix
.row::after{
content: "";
clear: both;
display: table;
}
使用的是 display:inline-block 的設定，這樣橘色區塊（DIV_D）就不用額外使用 clear 屬性也不會覆蓋上去
在 W3C 的定義裡總共有五個偽元素 ( 其他仍在測試階段 )，分別是::before、::after、::first-line、::first-letter和::selection，為了和偽類區分，偽元素使用兩個冒號「::」開頭，而偽類使用一個冒號「:」開頭 ( 像是 :hover、:target...等 )。
::before 是在原本的元素「之前」加入內容，::after 則是在原本的元素「之後」加入內容
### flex
支援度98%
現代開發非常普遍
適合1-Dimensional排版(x-axis,x-axis)
### grid
支援度90%
適合2-Dimensional排版(xy-axis)
未來的趨勢
## 4
工具 - Emmet
Code - Jumbotron
觀念 - HTML Elements & SEMANTIC HTML
觀念 - Positions
觀念 - CSS Relative Vs Fixed Units
### 4-2 emmet
https://docs.emmet.io/cheat-sheet/
.about=><div class="about"></div>
h1.big=><h1 class="big"></h1>
.container=><div class="container"></div>
ul.row>li*4>a=>
<ul coass="row">
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
background-size:cover;
background-position:center;
4-4 semantic HTML
使用semantic HTML的好處:
* SEO排名佳
* 下載速度
* 好維護
* 無障礙網頁
對眼睛不好的人會用聲音聽網頁
form表單
nav導覽列
header頁頭
section區塊
article
aside
footer頁尾
## 4-6position位置
### position: static;
預設的
自動往上排
### position: fixed;
絕對的px.cm.in
==瀏覽器視窗來定位==，這意味著即便頁面捲動，它還是會==固定在相同的位置==。
### position: relative;
相對的%.em受父層引響.rem受root層引響
relative的表現跟static一樣
可以設定寬高
### position: absolute;
元素的定位是在他所處上層容器的相對位置
跟fixed很像
位子跟父層有關係
父層需要是relative
5-2
google font
https://fonts.google.com/?subset=chinese-simplified
5-5
flex
display:flex寬度佔100%
display:inline-flex寬度佔box寬度跟inline-block一樣
justify-content(x-axis)
center/space-between/space-around
align-items(y-axis)
center/flex-start/flex-end
height:100%;
6-4transform
7-6 grid Layout 12格寬度100%
Responsive Web Design - Grid-View
https://www.w3schools.com/CSS/css_rwd_grid.asp
http://www.responsivegridsystem.com/
.col-md-4 { /** 3格卡片**/
width: calc((100% - 2 * 30px) / 3);
}
.col-md-3 {/** 4格贊助**/
width: calc((100% - 3 * 30px) / 4);
}
<img src="" alt="給眼睛不方便的人聽得"/>
9.3google map
google map寬度
https://www.labnol.org/internet/embed-responsive-google-maps/28333/
iframe是一種內置框架或內聯框架用來在網頁內嵌入另外一個網頁
9-4表單
placeholder預設文字
字閉合self-closing:img.br.input不需要</img>結尾
10-3
awesome開啟網站找到要的圖片
https://fontawesome.com/icons?d=gallery&p=2
在head加入這段
<script
src="https://kit.fontawesome.com/3d798f3890.js"
crossorigin="anonymous"
></script>
改變字的大小
fa-xs fa-sm fa-lg fa-2x fa-3x-fa-5x- fa-7x da-10x
改變顏色style="color: cornsilk
11.4響應式網站
https://medium.com/frochu/html-meta-viewport-setting-69fbb06ed3d8
http://www.flycan.com/article/rwd/meta-veiwport-1316.html
設定viewport調整手機解析度
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
```
@media only screen and (max-width: 768px){
.container { width:100%;}
}平板
@media only screen and (max-width: 600px){
.container { width:100%;}}手機
@media only screen and (max-width: 900px){
.container { width:100%;}}電腦
```
11-5導覽列響應式
fontawesome
https://fontawesome.com/icons?d=gallery&p=2&q=menu&m=free
找menu
## 基本功
Display Block vs Display Inline
Box Sizing
Box -Model
Reset & Normalize CSS
Position
CSS Relative vs Fixed Units
Semantic HTML
Responsive Web Design
Float & Clearfix
---
==[CSS Selectors](https://www.w3schools.com/cssref/css_selectors.asp)==
群組式選擇器：[selectors A], [selectors B]各別對元素附上相同的樣式
複合式選擇器：[selectors A][selectors B]以該元素具有的類別種類做區分
子孫選擇器：[selectors A] [selectors B]
只能夠選擇到第一層的子點
複合選擇器的兩個selector之間是沒有任何空白的，而子孫點選擇器必須以至少一個空白隔開。
子點選擇器：[selectors A] > [selectors B]改變一個元素底下的某些子元素的屬性
相鄰選擇器：+用於選擇第一個兄弟
後位選擇器：~用於選擇所有的相鄰兄弟(但不包含前面的兄弟)
[Pseudo-classes](https://www.w3schools.com/css/css_pseudo_classes.asp)
:link
:visited
:hover
:active
[CSS Pseudo-elements](https://www.w3schools.com/css/css_pseudo_elements.asp)
::before
::after
[其他HTML tags](https://www.w3schools.com/tags/ref_byfunc.asp)
small
strong
Rem vs Ems
Display
Pseudo Class Selector
[CSS 權重](https://ithelp.ithome.com.tw/articles/10196454)
CSS Color (RGBA, HSLA)
---
規劃
區塊
標籤
高度
HTML ( Structure | Inline vs Block)
CSS (Inline vs Block)
Layout vs Component
先把版型用出來或者一個區塊先用好
---
如何練習
[UI Challenge](https://collectui.com/)
參考別人網站 (ex. airbnb.com 的 footer)
做一個小project 慢慢練習
---
如何找工作
(作品集, blog, 履歷表)
10個小ui切版
3個完整頁面切版購物車官網ui介面
15篇css文章基本功
面試, Live-code現場切版
---
網頁設計(基本)
Color | 顏色 主色
Contrast | 對比 對比色深淺做搭配
[Fonts | 字體 ](https://www.w3schools.com/css/css_font.asp)
分兩種一種叫serif fonts(尖的)另一種叫Sans-serif(平的)
google font
Spacing |留白 padding 行距
Grid | 格線
[Images | 圖片](https://www.pexels.com/zh-tw/)
Personal Experience | 個人經驗
xd
選字體
顏色對比色
設計元件
線框圖
完整圖
---
### 進階css
sass
postcss
autoprefixer css支援不同瀏覽器
flexbox
grid
framework框架bootstrap、tailwind
---
---
Sign in with Wallet
Connect another wallet