2017年4月27日 星期四

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。

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

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

沒有留言:

張貼留言