# CSS 樣式彙整-前端筆記
> [name=mr.01]
`css` `樣板` `html`
在學期間初學網頁設計整理的語法/好用工具
不定期更新 看到好用的就放上來這邊
---
蒐集樣式／模板的網站
https://codemyui.com
顏色選擇區 適合UI視覺設計師
https://randoma11y.com/
Bootstrap 視覺化排版
https://layoutit.com/build
grayshine 的 CSS筆記
https://hackmd.io/@grayshine/ryVK07EUK
六角學院助教課堂筆記/新手學習指南
https://hackmd.io/@WangShuan/HkPptPtnu
六角學院免費開放部分課程：
使用 HTML、CSS 開發一個網站
https://hackmd.io/@YmcMgo-NSKOqgTGAjl_5tg/ByjK1_z_d
---
> [TOC]
css reset
>https://meyerweb.com/eric/tools/css/reset/
css 優先順序
>https://www.oxxostudio.tw/articles/201405/css-specificity.html
Codepen 線上編輯器:
>https://codepen.io/mrwang01/
# CSS 漸層
簡單手動配置漸層
https://cssgradient.io
隨機生成好看的漸層：
https://coolors.co/gradient-maker/
特殊材質漸層
https://www.gradientmagic.com/
熱門色系 調色盤選擇器
https://coolors.co/palettes/popular
https://coolors.co/palettes/trending
# CSS 動畫
AOS 動畫 | Animate On Scroll Library
https://michalsnik.github.io/aos/
動畫樣式設定生成器：
https://animista.net/play/entrances/scale-in/scale-in-center
# Underlines 下劃線
<iframe height="300" style="width: 100%;" scrolling="no" title="Cool CSS Underline Effects" src="https://codepen.io/TheCSSKing/embed/VwwRzgg?default-tab=" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/TheCSSKing/pen/VwwRzgg">
Cool CSS Underline Effects</a> by Jordan Marshall (<a href="https://codepen.io/TheCSSKing">@TheCSSKing</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
# 假圖假字圖片
[假字、假圖產生器整理](https://hackmd.io/@chupai/SJOEPUpSE)
https://fakeimg.pl/
補上參數中文解釋：
```htmlmixed
<img src="https://fakeimg.pl/350x200/ff0000,128/000,255">
<img src="https://fakeimg.pl/寬x高/顏色（HEX 色碼）,亮度/黑字,255">
```
<img src="https://fakeimg.pl/350x200/ff0000,128/000,255">
---
實際應用：
模板的部分，可自行搜尋相關 Vscode 擴充套件
# HTML 模板
```htmlmixed
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="index.css"> <!-- 創建 index.css -->
</head>
<body>
<div class="style">
<h1>我是區塊元素</h1>
</div>
<script src="index.js"></script> <!-- 創建 index.js -->
</body>
</html>
```
# CSS模板
```css
@import url('https://fonts.googleapis.com/earlyaccess/notosanstc.css');
* {
font-family: "Noto Sans TC";
}
body {
background-color: red;
}
html, body {
display: flex;
justify-content: center;
align-items: center;
}
```
CSS 版面配置 ：
https://zh-tw.learnlayout.com/toc
感謝 Will 保哥中文翻譯
# 圖片填滿/圖片比例
> bg-img
>object-fit
> display: block
> calc
> aspect-ratio
詳細請參考文章：https://hackmd.io/@lunzaizai/B1mRKlqvY
# 字體單位設定
參考文章：
[一次搞懂 CSS 字體單位：px、em、rem 和 %](https://www.oxxostudio.tw/articles/201809/css-font-size.html)
//作者有很多實用前端技術文章
[CSS 長度單位：px, em, rem, vw, vh 該怎麼用？](https://noob.tw/css-units/))
//文章清晰好懂，很多網頁開發的主題文章
# overflow
```htmlmixed=
overflow: auto;
//自動捲軸
//如果要顯示超出內容，，可以加上 title Attribute
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
//只顯示三行
box-sizing:border-box;
```
# border-radius:
border-radius: 左上 右上 右下 左下 ;
# Html iframe
frameborder="0" ──不顯示邊框
frameborder="1" ──要顯示邊框
scrolling="no" ──代表不顯示
scrolling="auto" ──則代表根據網頁大小自動顯示。
# SVG Icons
編輯模式可查看原始程式碼
Flowbite Icons - Free and open-source SVG icons
[https://www.svgrepo.com](https://flowbite.com/icons/)
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-file-type-css" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="#6f32be" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M14 3v4a1 1 0 0 0 1 1h4" />
<path d="M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4" />
<path d="M8 16.5a1.5 1.5 0 0 0 -3 0v3a1.5 1.5 0 0 0 3 0" />
<path d="M11 20.25c0 .414 .336 .75 .75 .75h1.25a1 1 0 0 0 1 -1v-1a1 1 0 0 0 -1 -1h-1a1 1 0 0 1 -1 -1v-1a1 1 0 0 1 1 -1h1.25a.75 .75 0 0 1 .75 .75" />
<path d="M17 20.25c0 .414 .336 .75 .75 .75h1.25a1 1 0 0 0 1 -1v-1a1 1 0 0 0 -1 -1h-1a1 1 0 0 1 -1 -1v-1a1 1 0 0 1 1 -1h1.25a.75 .75 0 0 1 .75 .75" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-box-margin" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="#6f32be" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M8 8h8v8h-8z" />
<path d="M4 4v.01" />
<path d="M8 4v.01" />
<path d="M12 4v.01" />
<path d="M16 4v.01" />
<path d="M20 4v.01" />
<path d="M4 20v.01" />
<path d="M8 20v.01" />
<path d="M12 20v.01" />
<path d="M16 20v.01" />
<path d="M20 20v.01" />
<path d="M20 16v.01" />
<path d="M20 12v.01" />
<path d="M20 8v.01" />
<path d="M4 16v.01" />
<path d="M4 12v.01" />
<path d="M4 8v.01" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-seo" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="#009988" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M7 8h-3a1 1 0 0 0 -1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-3" />
<path d="M14 16h-4v-8h4" />
<path d="M11 12h2" />
<path d="M17 8m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v6a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-world-www" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="#009988" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M19.5 7a9 9 0 0 0 -7.5 -4a8.991 8.991 0 0 0 -7.484 4" />
<path d="M11.5 3a16.989 16.989 0 0 0 -1.826 4" />
<path d="M12.5 3a16.989 16.989 0 0 1 1.828 4" />
<path d="M19.5 17a9 9 0 0 1 -7.5 4a8.991 8.991 0 0 1 -7.484 -4" />
<path d="M11.5 21a16.989 16.989 0 0 1 -1.826 -4" />
<path d="M12.5 21a16.989 16.989 0 0 0 1.828 -4" />
<path d="M2 10l1 4l1.5 -4l1.5 4l1 -4" />
<path d="M17 10l1 4l1.5 -4l1.5 4l1 -4" />
<path d="M9.5 10l1 4l1.5 -4l1.5 4l1 -4" />
</svg>
# Icon to Font
IcoMoon──將icon轉成Font的平台
https://icomoon.io/app/#/select
# Button
1.基本按鈕樣式
<iframe height="265" style="width: 100%;" scrolling="no" title="CSS-Button樣式" src="https://codepen.io/mrwang01/embed/preview/jObLLvR?height=265&theme-id=light&default-tab=css,result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/mrwang01/pen/jObLLvR'>CSS-Button樣式</a> by mrwang01
(<a href='https://codepen.io/mrwang01'>@mrwang01</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
2.完美的按鈕並不存ㄗ...
<iframe height="300" style="width: 100%;" scrolling="no" title="CSS Tricks button style" src="https://codepen.io/noelpena/embed/dlovG?default-tab=css%2Cresult&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/noelpena/pen/dlovG">
CSS Tricks button style</a> by Noel Peña (<a href="https://codepen.io/noelpena">@noelpena</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
### button（單純按鈕）、reset（清空表單）、submit（送出表單）
```htmlmixed
<input type="button" value="按鈕值" name="按鈕名稱" style="按鈕樣式">
input{
border:0;
color:#fff;
background-color:#003C9D;
border-radius:10px;}
```
# 大小寫轉換
```htmlmixed
<p style="text-transform:uppercase;">Ework Design</p>
<p style="text-transform:lowercase;">Ework Design</p>
<p style="text-transform:capitalize;">ework design</p>
```
# < dl > < dt > < dd >
```htmlmixed
<dl>
<dt>項目標題一</dt>
<dd>這裡是項目敘述一 ...</dd>
<dt>項目標題二</dt>
<dd>這裡是項目敘述二 ...</dd>
</dl>
```
# 垂直置中
```htmlembedded
1.
display:flex;
align-items:center;(垂直置中)
justify-content:center;(水平置中)
2.
display:table-cell;
/*假表格*/
3.
transform:translateY(-50%);
/*子元素加 position:relative*/
/*CSS3位移*/
4.
calc 動態計算(算數學)
課堂老師提起的
```
參考文章：
https://www.oxxostudio.tw/articles/201408/css-vertical-align.html
https://www.oxxostudio.tw/articles/201502/css-vertical-align-7methods.html
# Input 美化
(自行調整...)
```htmlmixed=
input[type="text"]
{
padding:9px 35px;
border:3px black solid;
cursor:pointer;
-webkit-border-radius: 5px;
border-radius: 5px;
}
```
<!-- 
-->
# flexbox
詳細原理：[圖解：CSS Flex 屬性一點也不難](https://wcc723.github.io/css/2017/07/21/css-flex/)
> justify-content 主軸對齊 主軸線預設左到右
>
圖片來源：
[CSS3的flexbox版面配置－flex container(容器)可用的屬性](https://www.webdesigns.com.tw/flexbox_flex-container.asp)
<!-- display:flex -->
<!--
-->
# 偽類
以:為開頭，方便精準控制
>## 錨點偽類
```css
hover 要在 link visted 之後
active 要在 hover之後
```
>## -child
* first-child：第一個子元素
* last-child：最後一個子元素
* nth-child(數字)：第幾個子元素
* nth-child(2n)：挑出偶數的元素(2的倍數)
* nth-child(2n+1)：挑出奇數的元素
* nth-last-child(數字)：從後面數來第幾個子元素
* only-child：只有一個子元素
p>span :
`<p> 中的第一個 <span>`
其他變化一樣規則
學習資源: [Day 02 HTML/CSS 點擊超連結會經歷的偽類選取器(Pseudo-classes)](https://ithelp.ithome.com.tw/articles/10265504)
# 偽元素 Pseudo-elements
* ::before ::after
e.g 滑鼠滑過(hover)改變顏色可用
```htmlembedded
.xxx:hover::before{
background-color:#7f7f7f;
}
```
詳細參數設定： [CSS 偽元素 ( before 與 after )](https://www.oxxostudio.tw/articles/201706/pseudo-element-1.html)
# Hover
~~圖床不見了 imgur 上傳的 mp4~~
~~https://i.imgur.com/CRfi2St.mp4~~
按鈕 `hover` 樣式：
用 pug sass 製作的按鈕範例，系上學長製作的範例
https://codepen.io/mrwang01/pen/VRaWvM
偽元素+hover+animation 極致應用:
https://codepen.io/argyleink/pen/poEjvpd
<iframe height="500" style="width: 100%;" scrolling="no" title="CSS mouse-out transition effect" src="https://codepen.io/argyleink/embed/poEjvpd?default-tab=&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/argyleink/pen/poEjvpd">
CSS mouse-out transition effect</a> by Adam Argyle (<a href="https://codepen.io/argyleink">@argyleink</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
# calc() 數值運算
`calc()` 函數允許在CSS中進行數值計算，非常適合用於動態調整元素大小。以下是使用 `calc()` 的範例：
```css
width: calc(50% + 8px); /* 寬度設為父元素寬度的50%加上8px */
```
## 置中元素的方法
以下CSS示例展示了如何使用 `calc()` 函數和絕對定位來實現元素的水平置中：
```css
.text {
position: absolute;
left: 40px; /* 左邊距設為40px */
width: calc(100% - 80px); /* 寬度為父元素寬度減80px */
}
```
注意，如果元素包含 `border` 或 `padding`，則需調整 `calc()` 表達式以考慮這些額外的空間，確保元素正確置中。這可能需要數學計算，以確保所有尺寸都精確。
# RWD-Tablet
* 後台電商購物清單
簡潔的表單設計
https://codepen.io/AllThingsSmitty/pen/MyqmdM
* 多樣商品列表清單
https://codepen.io/pumii/pen/WNxvNGg
# 客製化 web fonts icon
實習期間修改 `bootstrap` 模版發現到的東西
https://icomoon.io/app/#/select
資料來源：[自己做web fonts icons](https://wcc723.github.io/css/2013/10/05/web-fonts-2/)
全裝置全包 icon 生成器
https://ossian.tw/%e5%85%a8%e5%b9%b3%e5%8f%b0%e7%b6%b2%e7%ab%99-icon-%e7%94%9f%e6%88%90%e5%99%a8/
https://realfavicongenerator.net/
免費 AI 生成 Icon (限次數)
https://www.icongeneratorai.com/
# 圖片輪播 Carousel
## bootstrap 元件
https://bootstrap5.hexschool.com/docs/5.0/components/carousel/
## jQuery - Owl Carousel
教學文章：
https://ithelp.ithome.com.tw/articles/10247358
基本款：
https://codepen.io/pumii/pen/yLJeZvg
好看的輪播圖片樣式：
https://codepen.io/fadzrinmadu/pen/RwryOVN
```javascript
loop: true, // 循環播放
margin: 10, // 外距 10px
nav: true, // 顯示點點
responsive: {
0: {
items: 1 // 螢幕大小為 0~600 顯示 1 個項目
},
600: {
items: 3 // 螢幕大小為 600~1000 顯示 3 個項目
},
1000: {
items: 5 // 螢幕大小為 1000 以上 顯示 5 個項目
}
}
```
# 陰影 box-shadow
可當作 Border : `box-shadow: 0 -10px #02523e inset;`
來自卡斯伯的文章
https://www.casper.tw/css/2020/02/21/css-border/#
好看的陰影
<iframe height="900" style="width: 100%;" scrolling="no" title="Material Design Box Shadows" src="https://codepen.io/sdthornton/embed/wBZdXq?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/sdthornton/pen/wBZdXq">
Material Design Box Shadows</a> by Samuel Thornton (<a href="https://codepen.io/sdthornton">@sdthornton</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
https://codepen.io/sdthornton/pen/wBZdXq
陰影做動畫 酷炫的功能 實用性未知？
https://ithelp.ithome.com.tw/articles/10220686
<iframe height="300" style="width: 100%;" scrolling="no" title="demo-box-shadow" src="https://codepen.io/yachen/embed/gOYEMoM?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/yachen/pen/gOYEMoM">
demo-box-shadow</a> by yachen (<a href="https://codepen.io/yachen">@yachen</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
用滑鼠點擊的互動模擬鍵盤
https://codepen.io/yachen/pen/PoYKVzb
----
Sign in with Wallet
Connect another wallet