Emmet: Quick coding of HTML/CSS code, emmetcss

Source: Internet
Author: User

Emmet: Quick coding of HTML/CSS code, emmetcss

1. Introduction to Emmet

The predecessor of Emmet is Zen Coding, which uses the syntax of the CSS selector to generate code, greatly improving the speed of HTML/CSS code writing. It consists of two core components: an abbreviation extender (a CSS-like selector) is a context-independent HTML Tag pair.

Ii. Quick coding of HTML code

1. Initialization

HTML documents must contain fixed tags, such as

For example, enter "!" Or "html: 5", and then press the Tab key to generate:

<!doctype html>

Html: 5 or! : Used for HTML5 document types;

Html: xt: used for filtering document types in XHTML;

Html: 4 s: used for html 4 strict document type.

2. easy addition of classes, IDs, text and attributes

For continuous input of element names and IDs, Emmet will automatically complete. For example, input p # foo to generate:

<p id="foo"></p>

Consecutive input classes and IDs, such as p. bar # foo, are automatically generated:

<p class="bar" id="foo"></p>

Define the content of the element:

H1 {content }:

<H1> content 

Define the attributes of an element:

A [href = #]:

<a href="#"></a>

3. nesting

You can use Emmet to implement tag nesting with only one line of code:

>: Child element symbol, indicating nested elements;

+: Same-level label symbol;

^: You can use the label before the symbol to promote a row.

For example:

P> span:

<p><span></span></p>

H1 + h2:

P> span ^ p:

<p><span></span></p><p></p>

4. Group

Emmet can be used to quickly generate some code blocks through nesting and parentheses. For example, input (. foo> h1) + (# bar> h2) will be automatically generated:

<div class="foo">    

5. Implicit tag

Declare a tag with a class. You only need to input div. item to generate the tag automatically:

<div class="item"></div>

In previous versions, you can omit div, that is, enter. item to generate <div class = "item"> </div>. If only. item is input, Emmet determines Based on the parent tag. For example, if you enter. item in <ul>, <li class = "item"> </li> is generated.

Li: Used in ul and ol;

Tr: Used in table, tbody, thead, and tfoot;

Td: Used in tr;

Option: Used in select and optgroup.

6. Define Multiple Elements

To define multiple elements, you can use the symbol *, for example, ul> li * 5:

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

7. Define multiple elements with attributes

Enter ul> li. item $ * 3, which will be automatically generated:

<ul>    <li class="item1"></li>    <li class="item2"></li>    <li class="item3"></li></ul>

Iii. CSS abbreviations

1. Value

For example, to define the width of an element, you only need to enter w100 to generate:

width: 100px;

In addition to px, other units can also be generated. For example, input h10p + m5e will generate:

height: 10%;margin: 5em;

Organization Alias List:

P: %;

E: em;

X: ex.

2. Fuzzy match

If some abbreviations are inaccurate During writing, Emmet will match the closest syntax based on the input content. For example, input ov: h, ov-h, ovh, and oh will generate:

overflow: hidden;

3. Supplier prefix

If you enter a CSS attribute that is not W3C standard, Emmet automatically adds the supplier prefix. For example, if you enter trs, the following code is generated:

 -webkit-transition: prop time; -moz-transition: prop time; -ms-transition: prop time; -o-transition: prop time; transition: prop time;

If you do not want to add any prefix, you can also use the abbreviation. For example, if you enter-wm-trf, only the prefix-webkit and-moz is added:

 -webkit-transform: ; -moz-transform: ; transform: ;

The prefix is described as follows:

W:-webkit -;

M: indicates-moz -;

S:-ms -;

O: represents-o -.

4. gradient (not supported by webStorm)

Enter lg (left, # fff 50%, #000) to automatically generate:

background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.5, #fff), to(#000));  background-image: -webkit-linear-gradient(left, #fff 50%, #000);  background-image: -moz-linear-gradient(left, #fff 50%, #000);  background-image: -o-linear-gradient(left, #fff 50%, #000);  background-image: linear-gradient(left, #fff 50%, #000); 

Iv. Plug-ins for different editors

Emmet supports the following Editor:

1. Sublime Text 2;

2. TextMate 1.X;

3. Eclipse/Aptana;

4. Coda 1.6 and 2.x;

5. Espresso;

6. Chocolat (add in the "Install Mixin" dialog box );

7. Komodo Edit/IDE (via Tools → Add-ons menu );

8. Notepad ++;

9. ps3;

10. <textarea>;

11. CodeMirror2/3;

12. Brackets;

13. WebStorm;

 

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.