您的位置：首页 > Web前端 > CSS

介绍一个支持多个文本编辑器的HTML和CSS代码快捷编写插件

2014-01-10 10:50 621 查看

Emmet基本符号说明

> 子级；

() 子级选择器，与>的不同是：>仅能跟一个，()可以有多个子级；

+ 连接符，如header+main+footer或者table>(thead>tr>th*5)(tbody>tr>td*5)，或者nav>ul>(li>a[href=#]{Link})*5；

^ 返回上一级，例如div+div>p>span+em^bq等同于

<div></div>

<div>

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

<blockquote></blockquote>

</div>

div+div>p>span+em^^^bq等同于

<div></div>

<div>

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

</div>

<blockquote></blockquote>

* 后面紧跟一个整数，声明输出数量，下面有示例；

$ 变量占位符，一般写在*之前，下面有示例；

@ 站位变量的偏移符号，下面有示例；

[] 可以在方括号里写属性及其值，如果单个属性有多个值，应该以双引号引起来；

{} 文本符号，例如： a{点我}等于<a href="#">点我</a>;a[href=http://wikipedia.org]{维基百科}

在CSS中，ID和CLASS分别以#和.前缀表示，可以直接连写；

一、在HTML中使用Emmet

!或者html:5

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

</head>

<body>

</body>

</html>

此外，还有比较老的html:xt或者html:4s

a.link等于

<a href="" class="link"></a>

button.btn.btn-blue等于

<button class="btn btn-blue"></button>

h1+div.content等于

<h1></h1>

<div class="content"></div>

.post(.title+.content)等于

<div class="post">

<div class="title"></div>

<div class="content"></div>

</div>

.post(.title+.content+.meta>(.author+.category+tags+.date))等于

<div class="post">

<div class="title"></div>

<div class="content"></div>

<div class="meta">

<div class="author"></div>

<div class="category"></div>

<tags></tags>

<div class="date"></div>

</div>

</div>

ul.list>li.list-item*5等于

<ul class="list">

<li class="list-item"></li>

<li class="list-item"></li>

<li class="list-item"></li>

<li class="list-item"></li>

<li class="list-item"></li>

</ul>

ul>li.list-item$*5等于

<ul>

<li class="list-item1"></li>

<li class="list-item2"></li>

<li class="list-item3"></li>

<li class="list-item4"></li>

<li class="list-item5"></li>

</ul>

ul>li.list-item$@6*5等同于

<ul>

<li class="list-item6"></li>

<li class="list-item7"></li>

<li class="list-item8"></li>

<li class="list-item9"></li>

<li class="list-item10"></li>

</ul>

示例内容的生成，如p>lorem*3等于

<p>

<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad, totam, praesentium, sequi, illo libero voluptatum doloribus deleniti error nulla molestias illum nesciunt nisi eaque nemo maxime eveniet delectus sapiente voluptatem.</span>

<span>Natus, cupiditate, accusamus iure tempora repellendus ad facilis aperiam adipisci fuga atque? Sit at ea nemo culpa tempora dolorem perspiciatis quas! Dolorum sint quidem architecto deleniti soluta aspernatur amet deserunt.</span>

<span>Vitae, ut, temporibus, laboriosam debitis incidunt veritatis tenetur reprehenderit nihil mollitia in eveniet perspiciatis voluptatibus possimus laborum quibusdam rem modi dignissimos laudantium alias itaque assumenda maxime voluptate exercitationem eligendi fugiat.</span>

</p>

p*3>lorem15等于生成单个段落，每个段落有十五个词：

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae numquam animi praesentium nulla dignissimos quibusdam!</p>

<p>Eaque, quaerat, unde, porro pariatur fugit debitis dignissimos sit architecto nostrum quisquam ipsam voluptatibus repellat.</p>

<p>Molestias, eveniet, nam error totam ex pariatur porro odio ratione distinctio quibusdam veritatis perferendis sed!</p>

二、在CSS中使用Emmet

p → %

e → em

x → ex

@f等于

@font-face {

font-family:;

src:url();

}

ov等于

overflow: hidden;

trs等于

-webkit-transition: prop time;

-moz-transition: prop time;

-ms-transition: prop time;

-o-transition: prop time;

transition: prop time;

还可以加前缀，如-suoling-shadow等于

-webkit-suoling-shadow: ;

-moz-suoling-shadow: ;

-ms-suoling-shadow: ;

-o-suoling-shadow: ;

suoling-shadow: ;

不想要前缀，例如-wm-trs等于：

-webkit-transition: prop time;

-moz-transition: prop time;

transition: prop time;

另外

w → -webkit-

m → -moz-

s → -ms-

o → -o-

-shadow等于

-webkit-shadow: ;

-moz-shadow: ;

-ms-shadow: ;

-o-shadow: ;

shadow: ;

也就是说，-suoling等同于-wmos-suoling。

lg(left, #fff 50%, #000)等于色彩渐变：

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);

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航