Emmet چیٹ شیٹ
قابل تلاش، قابل پرنٹ Emmet حوالہ: نیسٹنگ آپریٹرز، ضرب، گروپنگ، خصوصیات، HTML اور CSS مخففات۔ مفت۔
Nesting operators
8div>ul>li
div+p+blockquote
div+div>p>span+em
div+div>p>span+em^bq
div+div>p>span+em^^^bq
nav>ul>li*4>a
ul>li>a[href=#]{Link}
div>p+p+p
Multiplication & numbering
9ul>li*5
li.item$*3
li.item$$$*3
li.item$@-*3
li.item$@3*5
li.item$@-3*5
h$[title=item$]{Header $}*3
ul>li*3>a{Link $}
td*5
Grouping
8div>(header>ul>li*2>a)+footer>p
(div>dl>(dt+dd)*3)+footer>p
(li>a)*5
ul>(li>a{Item $})*4
(header+main+footer)
table>(tr>td*3)*4
(div.col)*2
section>(h2+p)*3
ID, class & attributes
10div#header
div.title
p.class1.class2.class3
form#search.wide
#page
.card
td[title="Hello" colspan=3]
a[href=# data-id=5]
input[type=text required]
img[src=logo.png alt=Logo]
Text & implicit tag names
9a{Click me}
a{click}+b{here}
a>{click}+b{here}
p>{Text }+a{link}+{ more}
.wrap>.content
em>.hint
ul>.item*3
table>.row>.col
select>.opt*3
HTML boilerplate
10!
html:5
!!!
meta:utf
meta:vp
link
link:css
link:favicon
script:src
doc
Common HTML abbreviations
14a
a:mail
img
btn
form:post
input:email
input:password
input:checkbox / input:radio
input:submit
sel>opt*3
label+input
tarea
table+
ol+ / ul+ / dl+
CSS abbreviations
15m10
p10-20
m10-auto
w100 / h50
df
dib / dn
pos:a / pos:r / pos:f
t0+l0
fz14
fwb / fw700
c#f00
bgc#fff
bd+
tac / tar
bdrs5
CSS values & units
11m10
m10p
m1.5
m10e
m10r
m10x
w100p
m-10
m10-20-30-40
lh1.5
fz2r
Vendor prefixes
9-bdrs
-wm-trf
-w-bxsh
trf:r
trf:s
trs
anim
us:n
-super-foo
Wrap & editor actions
11Wrap with Abbreviation
ul>li*
a[href=$#]{$#}
Balance (outward/inward)
Go to Matching Pair
Remove Tag
Split/Join Tag
Toggle Comment
Increment Number by 1/10/0.1
Select Next/Previous Item
Update Image Size
کوئی اندراج “:q” سے میل نہیں کھاتا۔
Emmet چیٹ شیٹ کے بارے میں
یہ Emmet چیٹ شیٹ مخفف سنٹیکس کو ایک قابل تلاش صفحے میں بدل دیتی ہے: نیسٹنگ آپریٹرز، ضرب اور نمبرنگ، گروپنگ، ID، کلاس اور خصوصیت کا سنٹیکس، متن اور ضمنی ٹیگ نام، HTML بوائلر پلیٹ، عام HTML مخففات، CSS مخففات، CSS ویلیوز اور یونٹس، وینڈر پریفکسز، اور ریپ اور ایڈیٹر ایکشنز۔
آپریٹرز یاد ہو جائیں تو Emmet اپنی قیمت وصول کر دیتا ہے: چائلڈ، سبلنگ اور اوپر چڑھنے والے حروف، ضرب اور $ نمبرنگ جو پوری فہرست بنا دیتی ہے، اور CSS شارٹ ہینڈز جو تین حروف سے پراپرٹی اور اس کی ویلیو پھیلا دیتے ہیں۔ ہر قطار مخفف اور وہ مارک اپ یا CSS دکھاتی ہے جس میں وہ پھیلتا ہے۔
اس گروپ کی ہر چیٹ شیٹ کی طرح یہ مفت اور کلائنٹ سائیڈ ہے: سرچ باکس سے قطاروں کو لائیو فلٹر کریں، چپکے رہنے والی فہرست مضامین سے حصوں کے درمیان کودیں، ایک کلک سے کوئی بھی مخفف کاپی کریں اور اپنے ایڈیٹر میں حوالے کے لیے صفحہ پرنٹ کریں۔
Emmet چیٹ شیٹ استعمال کرنے کا طریقہ
- شیٹ کھولیں اور حصوں کا جائزہ لیں، Nesting operators سے لے کر Wrap & editor actions تک۔
- numbering، boilerplate یا grid جیسا کوئی کلیدی لفظ تلاش کریں تاکہ ہر قطار لائیو فلٹر ہو جائے۔
- جب آپ کو مارک اپ کے بجائے پراپرٹی شارٹ ہینڈز چاہیے ہوں تو CSS abbreviations پر جائیں۔
- مخفف کو اپنی کلپ بورڈ پر کاپی کرنے کے لیے اس پر یا اس کے کاپی آئیکن پر کلک کریں، پھر اپنے ایڈیٹر میں اسے پھیلائیں۔
- مکمل Emmet حوالے کی کاغذی کاپی کے لیے Print استعمال کریں۔