HTML & CSS === > 2023/10/27 & 2023/10/31 # 解析度 * 手機 * 3 = 電腦 (不是一定) * 0.5像素 = 灰色 * desktop ![](https://hackmd.io/_uploads/ryprdjOzp.jpg) * mobile ![](https://hackmd.io/_uploads/SkVUdiOMp.jpg) # UI&UX * KVG = 第一屏 # CSS ## 建立CSS ### lnline-style: 瀏覽器解析效率高 ```css= <h1 style="color: red"> ``` ### 建立<style></style>標籤，可在內寫CSS語法 * 寫在<head></head>內，因為解析是由上到下 ```css= <style> h1 { color: red; } </style> ``` ### 建立.css檔案，將html連結起來 ```css= <link rel="stylesheet" href="style.css" /> <style> ``` ### 共用CSS & 非共用CSS 比都連同一個效能較好 * 可能一個頁面會連兩個CSS，一個是共用、一個非共用 ### 檢測網頁速度 & SEO [PageSpeed Insights](https://pagespeed.web.dev/) ### css寫法 * 寫法一 ```css= p { color: pink; font-size: 22px; border: 3px double red; } ``` * 寫法二 ```css= p { color: pink; font-size: 22px; border-width:3px 6px 9px 12px /* 上 右 下 左 */ border-style:double border-color:red } ``` * border-width寫法 | 數字 | 設定值 | | -------- | -------- | | 1 | <上下左右> | | 2 | <上下> <右左> | | 3 | <上> <右左> <下> | | 4 |<上> <右> <下> <左> | ## 相同設定 ```css= .no1, .no2 { color: pink; font-size: 22px; border: 3px solid red; } ``` # 選取器 ## 同等級選取器 後面會蓋掉前面 ### 選取器順序 #### !important > animation > inline-style > ID > class > Tag * ID不能被重複使用 * 還是最常使用class * 若標籤+clss 特異性更高，優先順序更高 ```css= /* 標籤＋class */ p.no3 { color: #ccd5ae; } ``` * 怎麼比較？ p.no1 > .no1 ; 11 > 10 ![](https://hackmd.io/_uploads/rJbDNAOzp.png) * important v.s. important 比較ID > class > tag * 對div設定色彩 裡面的文字也會改變 * 繼承自父層的設定 * 確認選取的對象，若選到同一個才會有分數的計算 * “＊”不算分，不列入算分的比較中 * 空格的寫法是下一層，可以用此做區隔 ```js= div span { background-color: darkblue; color: red; } ``` ## 偽類 : 優先權和class一樣 瀏覽器內建的分類 or CSS內建的分類 * 第一個 p:first-of-type ```css= p:first-of-type { background-color: darkblue; color: red; } ``` * 第一個子物件 p:first-child 會看第一個子物件是不是div 只要是第一個child，都會被選到 ```js= p:first-child { background-color: darkblue; color: red; } ``` * 最後一個子物件 :last-child * 第n個子物件 :nth-child(n) * 倒數第n個子物件 :nth-last-child(n) * 只有一個子物件 :only-child * 搜尋tag往下的唯一子層 * 第一個物件 :first-of-type{} ```javascript= body *:first-of-type{ backgound-color:orange } ``` * 最後一個物件 :last-of-type{} * 第n個物件 :nth-of-type(n) * 倒數n個物件 :nth-last-of-type(n) * :not(){} * :empty{} # 超連結 ```css= a { color: pink; } /* 已造訪 */ a:visited { color: gray; } /* 聚焦 */ a:focus { color: red; } /* 滑過 */ a:hover { color: green; } /* 按下去 */ a:active { color: orange; } ``` # 統一預設值 ## Reset [meyerweb](https://meyerweb.com/eric/tools/css/reset/) ## normalize 沒有那麼強制，只將各家瀏覽器變為預設值 [normalize](https://necolas.github.io/normalize.css/) # 單位 * em 父層行高 * rem 根目錄層（HTML為20px） * ex （px的一半） * px * % # 補充 可以看P.17-P.20 # box ![](https://hackmd.io/_uploads/rJA5sJ0Ma.png) * box-sizing只能設定content-box or border-box ```css= .box { width: 200px; background-color: #fa0; font-size: 20px; border: 20px solid red; padding: 20px; margin: 20px; box-sizing: border-box; } ``` * ```<H1>```和```<P>```都屬於block元素 * block = 區塊元素；inline = 行元素 ## 要怎麼讓block橫排？ * display:flex * display = 把物件特性改掉 ### 對齊方向： ```css= .wrap p { width: 200px; background-color: #fa0; display: inline-block; margin: 10px; vertical-align: middle; /* top/baseline/middle */ } ``` 橫向空白字元text-align：inline、inline-block *margin:auto 把剩餘空間分配，可利用此居中 ```css= .wrap div { margin-left: auto; margin-right: auto; } ``` * inline-box的空間是被撐開的，所以```margin-top: auto```不會有反應 ### flex-direction 方向 * row由左至右（依照文字方向） ```html= <html lang="en" dir="rtl"> //(由右至左」) ``` ```html= writing-mode: verticaal-lr //直書 ``` * 主軸： ```html= flex-direction：row flex-direction：row-reverse ``` ### flex-wrap 換列、欄，交叉軸 * 交叉軸： ```html= flex-wrap: wrap flex-wrap: wrap-reverse ``` ### justify-content * content = 空間 控制子物件在父層空間中"主軸"的對齊與分佈 ### aligh-content 控制彈性列在父層空間中"交叉軸"的對齊與分佈 ### aligh-item * items = 子物件 控制子物件在彈性列中交叉軸的位置 --- 剩餘空間併入彈性列 - stretch 剩餘空間不會併入彈性列 - flex-strat - center - flex-end - space-between - spcace=around - space-evenly