【轉載】Notepad++配置Zen Coding

原標題:Notepad++配置Zen Codingcss

爲Notepad++安裝 Zen Coding 插件html

下載 Zen.Coding 解壓框架

將解壓所得的文件放入 Notepad++ 程序的安裝目錄下的plugins文件夾。工具

重啓Notepad++,便可開始使用 Zen Coding。學習

Zen Coding 用法spa

首先,咱們先學習一下 Zen Coding 的縮寫規則 (其實就是CSS選擇器)插件

E
元素名 (div, p);
E#id
帶id的元素 (div#content, p#intro, span#error);
E.class
帶class的元素 (div.header, p.error.critial). id 和 class 能夠連寫,如: div#content.column.width;
E>N
子元素 (div>p, div#footer>p>span);
E+N
兄弟元素 (h1+p, div#header+div#content+div#footer);
E*N
多項元素 (ul#nav>li*5>a);
E$*N
帶序號的元素 (ul#nav>li.item-$*5);

接下來,咱們來熟悉 Zen Coding for Notepad++ 的快捷鍵,也是 Zen Coding 的精髓code

【Ctrl+E】 展開縮寫(Expand Abbreviation)htm

好比寫下 div#page>div.logo+ul>li*3>a ,按一下 Ctrl+E,立馬就能夠轉化成:ip

<div id="page"> <div class="logo"></div> <ul id="navigation"> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </div>

【Ctrl+Shift+A】 嵌套代碼(Wrap with Abbreviation)

好比,咱們想讓寫好的 <p>hello world</p> ,想在外層再套一個div,只需按下【Ctrl+Shift+A】,在彈出的對話框中輸入: div.wrap,回車。此標籤就能自動被嵌套。

甚至,咱們能夠玩的更炫一些,寫好三行列表內容,全裸,此時沒有任何標籤。只需按下【Ctrl+Shift+A】,輸入 ul>li* ,回車。這三行內容就能自動被ul li 嵌套起來。(不只限於 li 列表哦)

【Ctrl+Shift+D】選中代碼塊(Balance Tag Inward/Outward)

選中當前光標所在的代碼塊,長按可依次選中父塊

【Ctrl+Alt+[ , Ctrl+Alt+]】 轉到上一個/下一個編輯點(Go to Next/Previous Edit Point)

按下能夠依次跳到可輸入內容的編輯點,省去了不停按方向鍵或鼠標來定位編輯點的麻煩。

【Ctrl+Alt+M 】合併行(Merge Lines)

將選中的多行代碼合併爲一行。壓縮css、js代碼爲一行時,這個很方便。Ctrl+A,而後Ctrl+Alt+M,兩下便可搞定,免去了動用壓縮工具的麻煩。(固然這個只是簡單地將代碼合併爲一行,並不能作更深刻的代碼壓縮)

【Alt+/ 】添加、移除註釋(Toggle Comment)

註釋掉光標所在的代碼塊 (Notepad++ 自帶的Ctrl+Shift+Q也能夠用來註釋代碼)

【Ctrl+’ 】空標籤轉化(Split/Join Tag)

好比將 <div class="test"></div> 轉化爲 <div class="test"/>, 反向亦可。

【Ctrl+Shift+’ 】移除標籤(Remove Tag)

好比將 <div class="test">hello world</div> 移除div標籤,留下hello world。 好了,目前 Notepad++ 的 Zen Coding 只有這幾個快捷鍵,下面介紹一些經常使用到的縮寫

不知道你們新建一個html 頁面時,是如何輸入文檔聲明和 head 那一坨東西的。如今有了Zen Coding,只需輸入幾個字母就能立馬生成相應文檔聲明的 html 結構框架

html:4t (HTML 4.01 Transitional) html:4s (HTML 4.01) html:xt (XHTML 1.0) html:xs (XHTML 1.0 Strict) html:xxs (XHTML 1.1) html:5 (HTML5)

head 中經常使用到的一些縮寫

meta:utf, meta:compat style, link:css, link:print, link:favicon, link:rss, script, script:src

body 中會經常使用到的縮寫

諸如 div, p, a, ul, ol, input:t, input:r 等等

其中,相似 ul+ 的形式可展開爲(+號可自動生產默認的子元素)

<ul> <li></li> </ul>

相似的還有 ol+, dl+, table+, tr+, select+, map+, optg+ 等

IE 條件註釋:

cc:ie6, cc:ie, cc:noie

下邊是一些典型用法示例:

div#name.one.two => <div id="name" class="one two"></div>

[title="Hello world" rel] => <a href="" title="hello world" rel=""></a>

td[colspan=2] => <td colspan="2"></td>

li.item$*3 => <li class="item1"></li><li class="item2"></li><li class="item3"></li>

li.item$$$ => <li class="item001"></li>

li.item-$-content*3 => <li class="item-1-content"></li><li class="item-2-content"></li><li class="item-3-content"></li>

#content>.section => <div id="content"><div class="section"></div></div>

若是你寫了這麼一串出來,那麼一個頁面的基本結構就出來了:

div#page>(div#header>ul#nav>li4>a)+(div#page>(h1>span)+p2)+div#footer

此外【|e】 能夠輸出轉義字符

<div id="wrap"> <div class="content"> <p></p> </div> </div>

div#wrap>div.content>p|e|e 可轉化爲:

&lt;div id="wrap"&gt; &lt;div class="content"&gt; &lt;p&gt;&lt;/p&gt; &lt;/div&gt; &lt;/div&gt;

相關文章
相關標籤/搜索