即時操作顯示,CSS屬性與屬性值筆記。
預覽:
CodePen URL:
GitHub:
- CSS 屬性控制模型 text-decoration / 文字畫線
- CSS 屬性控制模型 text-transform / 英文字大小寫:Aa
- CSS 屬性控制模型 文字斷行(word-break)、連字符號(hyphens)
- CSS 屬性控制模型 white-space / 文字空格
- CSS 屬性控制模型 text-align / 文字水平對齊
- CSS 屬性控制模型 font-weight / 文字粗細
- CSS 屬性控制模型 line-height / 文字行高
- CSS 屬性控制模型 font-size / 文字大小
- CSS 屬性控制模型 font-style / 文字樣式
說明:
- 條件判斷檢查是否有
type:color
,但最後要json格式要保留一個空陣物件,否則網站會掛掉。 - 使用Vue3寫法。
- 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 方式
製作文字樣式的參考:
- <angle> - CSS:层叠样式表 | MDN
- typeof - JavaScript | MDN
- Array.prototype.splice() - JavaScript | MDN
- font-style - CSS:层叠样式表 | MDN
製作Flexbox樣式的參考: