Sublime Text 3 教學-使用Emmet 快速建立CSS文字樣式-網頁設計教學

因為工作的關係，常常會需要用到Emmet快速建構HTML的結構與CSS標籤，所以分享一下
Emmet 常用的快速語法，這快捷用法在Sublime text, Atom, Visual Studio Code 都通用，應該說只要有安裝Emmet的編輯器都可以使用。

*2017-08-19 更新
前陣子因為在MacBook Pro上的Atom軟體不穩的因素，後來改用Visual Studio Code跟 Sublime text，實際執行後發現簡碼會有一點差別，例如在Atom上輸入mra[按下Tab鍵]後會出現 margin-right: auto 但是在Visual Studio Code就無法出現，所以這篇文章的簡碼會比較適合Atom。

另外標題也有變更，因為這篇文章主要在介紹Emmet建立CSS樣式，所以把標題修改成為比較貼近的敘述。



/*內的文字為指令*/，輸入後按下Tab鍵即可產生CSS屬性內容。

單位說明：
p=%
e=em
pt, px

文字
以文字為例

color: #000; /*c*/

font: 15em; /*f15e*/

text-decoration: none;/*td_n*/

list-style: none; /*lis:n*/

line-height: 10em; /*linh10em*/

方框
width: 90px; /*w90px*/

height: 100px; /*h100px*/

min-width: 10px; /*miw10px*/

min-height: 10px; /*mih10px*/

max-width: 10pc; /*ma10px*/

max-height: 10px; /*mah10px*/

margin: 10px; /*m10px*/

margin-right: auto;/*mra*/

margin-left: auto; /*mla*/

margin-top: 10px; /*mt10px*/

margin-bottom: 10px; /*mb10px*/

padding: 10px; /*p10px*/

padding-top: 10px; /*pt10px*/

padding-bottom: 10px; /*pb10px*/

padding-right: 10px; /*pr10px*/

padding-left: 10px; /*pl10px*/

float: ;/*fl*/

float: left; /*fll*/

float: right; /*flr*/

clear: ;/*cl*/

clear: both; /*clb*/

clear: right; /*clr*/

clear: left; /*cll*/

clear: none; /*cln*/

position: static; /*ps*/

position: absolute; /*psa*/

position: relative; /*psr*/

背景
background-color: #fff; /*bgc*/

background: #000; /*bg*/

background-image: url(images/); /*bgi*/

background-repeat: repeat;

background-repeat: no-repeat; /*bgrn*/

background-attachment: fixed; /*bgma-f*/

background-attachment: scroll; /*bgma-s*/

display: block; /*d*/

display:none; /*dn*/

邊框

border-right: 1px; /*br1px*/

bor /*bor-ra*/

border-radius:10px;  /*bor-r*/;


後記：
很早之前編輯網頁都必須要依靠Dreamweaver，後來因為一些因素改換文字編輯器，剛開始會比較慢一些，因為從視覺操作換到文字編碼需要一段時間適應，後來使用編輯器之後，開發的速度逐漸的加快了，標籤與編碼的結構也跟著提升。

但是工具換來換去真的挺累人的，剛開始因為教學需求，擔心學生因為必須支付Adobe每個月的費用，回家沒機會練習，所以後來硬著頭皮改換Sublime text，教了幾個班之後發現Sublime常跳出付費的通知，使用者付費這是沒問題，我個人有買授權，但課程是在補習班上，跟上頭說到錢就會考慮到成本之類的問題，最後才選擇開源軟體Atom。

這幾年下來，因為行動裝置的影響前端網頁設計也跟著當紅了起來，這對網頁設計的產業來說是一項利多，但對開發者的工作來說相對的就會比較吃重。

跟著潮流選擇新技術跟工具算是一筆投資，一起加油吧！

延伸學習：
Sublime Text 3 教學-必要的安裝與設定教學
Sublime Text 3 教學-使用 Emmet 快速建立HTML標簽1
Sublime Text 3 教學-使用 Emmet 快速建立HTML標簽2-網頁設計教學
Sublime Text 3 教學-使用Emmet 快速建立CSS文字樣式-網頁設計教學