搜尋

熱門關鍵字:

最新文章

  1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. CSS
  6. »
  7. CSS 文字與區塊間距模組！只需透過HTML就可設定，網頁在不同裝置的文字大小與區塊距離

CSS 文字與區塊間距模組！只需透過HTML就可設定，網頁在不同裝置的文字大小與區塊距離

2021/06/16

梅問題－CSS 文字與間距模組，只需透過HTML就可設定，不同裝置的文字大小與區塊間距
　　每隔一陣子梅干就會買個網頁版型，看看有沒有什麼新的寫法或是架構，而最近購買了一個版型，讓梅干覺得很奇怪，怎麼有mt、pl….的類別，最後開啟它的CSS樣式檔後，才發現到原來是作者將平時在設計網頁，常會遇到的文字大小、區塊間的距離作成模組化，透過已設定好的樣式，再透過HTML就可定義區塊與文字的樣式，完全不用再開啟CSS作修正。


　　而這個概念梅干個人感覺很好，使用起來就像Bootstrap的概念，因此梅干就比照Boostrap的概念，分別將它加入xs與md與預設，讓網頁在不同的裝置下，可設定文字的大小、粗細，以及區塊的的內距與間距，同時梅干也將這個檔案整整理，並放在GitHub中，因此有需要的朋友，就自行下載，至於這隻CSS檔，裡面到底作那些的設定，現在梅干就為大家來解說一下囉！

CSS 文字與間距模組
下載連結：https://github.com/minwt/CSS-module
在下載完畢後，梅干總共設了二組的斷點，分別為小於576px(xs)、768px(md)
文字樣式設定－粗細：
fw200、xs-fw200、md-fw200：font-weight: 200
fw300、xs-fw300、md-fw300：font-weight: 300
fw400、xs-fw400、md-fw400：font-weight: 400
fw500、xs-fw500、md-fw500：font-weight: 500
fw600、xs-fw600、md-fw600：font-weight: 600
fw700、xs-fw700、md-fw700：font-weight: 700
文字樣式設定－字距：
ls1、xs-ls1、md-ls1：letter-spacing: 1px
ls2、xs-ls2、md-ls2：letter-spacing: 2px
ls3、xs-ls3、md-ls3：letter-spacing: 3px
ls4、xs-ls4、md-ls4：letter-spacing: 4px
ls5、xs-ls5、md-ls5：letter-spacing: 5px
文字樣式設定－字級：
fz-13、xs-fz-13、md-fz-13：font-size: 13px
fz-15、xs-fz-15、md-fz-15：font-size: 15px
fz-16、xs-fz-16、md-fz-16：font-size: 16px
fz-18、xs-fz-18、md-fz-18：font-size: 18px
fz-20、xs-fz-20、md-fz-20：font-size: 20px
fz-30、xs-fz-30、md-fz-30：font-size: 30px
fz-36、xs-fz-36、md-fz-36：font-size: 36px
fz-48、xs-fz-48、md-fz-48：font-size: 48px
區塊－間距 Margin：
區塊間的間距中，從5px開啟一直到200px，每一個級距為5px。
margin-top：mt
margin-bottom：mb
margin-left：ml
margin-right：mr
ex:上方5像素
mt-5、xs-mt-5、md-mt-5
區塊－內距 Padding：
區塊內的間距中，從5px開啟一直到200px，每一個級距為5px。
padding-top：pt
padding-bottom：pb
padding-left：pl
padding-right：pr
ex:上方5像素
pt-5、xs-pt-5、md-pt-5
透過這樣子的設定，就不用再開啟CSS來作修改，直接從HTML改變class名稱，立即就可實現區塊間的距離，或是文字的大小與粗細，而各位使用上有任何問題，也歡迎提出討論囉！


css 教學, css字級設定, css模組, css間距設定,