april808/notes-view-demo

即時操作顯示，CSS屬性與屬性值筆記。

notes-view-demo

即時操作顯示，CSS屬性與屬性值筆記。

預覽：

CodePen URL:

• CSS 屬性控制模型-text-decoration-template
  • CSS 屬性控制模型 font-style (input[type="range"])
  • Vue template CSS 屬性控制模型

GitHub:

CSS 文字樣式

1. CSS 屬性控制模型 text-decoration / 文字畫線
2. CSS 屬性控制模型 text-transform / 英文字大小寫:Aa
3. CSS 屬性控制模型 文字斷行(word-break)、連字符號(hyphens)
4. CSS 屬性控制模型 white-space / 文字空格
5. CSS 屬性控制模型 text-align / 文字水平對齊
6. CSS 屬性控制模型 font-weight / 文字粗細
7. CSS 屬性控制模型 line-height / 文字行高
8. CSS 屬性控制模型 font-size / 文字大小
9. CSS 屬性控制模型 font-style / 文字樣式

CSS 背景樣式

1. CSS 屬性控制模型-background / 背景樣式(九種)

CSS 基本效果樣式

1. CSS 屬性控制模型-border / 邊框線
2. CSS 屬性控制模型-opacity / 元素不透明度

CSS 溢載樣式

1. CSS 屬性控制模型-overflow / text-overflow / 溢載樣式

CSS 進階排版樣式 - Flexbox

1. CSS 屬性控制模型-display / 觀察parent層 : flex

說明：

1. 條件判斷檢查是否有type:color,但最後要json格式要保留一個空陣物件，否則網站會掛掉。
2. 使用Vue3寫法。
3. CSS內容分類參考 : 成為前端工程師｜透過 HTML 與 CSS 認識網頁設計，從 0 到 1 打造實用介面，張互賓老師教材。

製作文字畫線的參考：

• Vue Color Picker Using Native Input Type Color
• simple color picker input with vue-color
• Vue Native Color Picker
• Vue / color
• [筆記][Vue.js]打開Vue.js世界的大門(6)-讓watch來當你的眼睛！
• 在vue裡綁定color Value 方式
  • https://stackoverflow.com/questions/68485996/html-input-type-color-display-as-text-color-code

製作文字樣式的參考：

• <angle> - CSS：层叠样式表 | MDN
• typeof - JavaScript | MDN
• Array.prototype.splice() - JavaScript | MDN
• font-style - CSS：层叠样式表 | MDN

製作Flexbox樣式的參考：

• 玩轉 CSS FLEX | CSS教學 | 網頁教學 | 網頁設計
• Why doesn't justify-content: stretch work?
• CSS Grid Cheat Sheet Illustrated in 2021🎖️
• FLEXBOX FROGGY