Emmet – schneller HTML- und CSS-Code erstellen über Editor-Plug-In
Über die Software kann extrem schnell HTML-Code und CSS-Anweisungen erstellt werden. Über Kürzel und „kleine Anweisungen“ bekommen wir dann automatisch den korrekten Code erstellt.
Beispielsweise erzeugt die Eingabe von ul>li*3 bei Emmet die komplette HTML-Struktur für eine Liste:
<ul>
<li></li>
<li></li>
<li></li>
</ul>
Genauso wird die Erstellung von CSS-Anweisungen deutlich beschleunigt! Die Eingabe bei Emmet von bd5#0s erzeugt die CSS-Anweisung:
border: 5px #000 solid;
Im Folgenden als Beispiele (und als Gedächtnisstütze) die Emmet-Eingaben und die daraus erzeugten Codes:
Emmet: !
Emmet: html:5 (genauso wie die Eingabe von !)
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
Emmet: h2
<h2></h2>
Emmet: a
<a href=""></a>
Emmet: h2>{Inhalt}
<h2>Inhalt</h2>
Emmet: nav#steuerung
<nav id="steuerung"></nav>
Emmet: nav#steuerung>ul#menue>li*3
<nav id="steuerung">
<ul id="menue">
<li></li>
<li></li>
<li></li>
</ul>
</nav>
Emmet: li*5>a>{Nummer $}
<li><a href="">Nummer 1</a></li>
<li><a href="">Nummer 2</a></li>
<li><a href="">Nummer 3</a></li>
<li><a href="">Nummer 4</a></li>
<li><a href="">Nummer 5</a></li>
Emmet: article>h2>{Inhalt}+p*5
das Plus macht siblings
Emmet: article>(h2>{Inhalt})+p*5
Klammer, damit p außerhalb h2
<article>
<h2>Inhalt</h2>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</article>
Emmet: p*3>lorem3
ohne die Nummer nach „lorem“ wird der Fülltext sehr lang
<p>Lorem ipsum dolor.</p>
<p>Reiciendis, nobis, quos?</p>
<p>Doloremque, saepe, dicta!</p>
CSS und Emmet
| Eingabe | Ergebnis |
|---|---|
| p0 | padding: 0; |
| p0p | padding: 0%; |
| p0e | padding: 0em; |
| p0x | padding: 0ex; |
| m2 | margin: 2px; |
| m3e | margin: 3em; |
| b1 | bottom: 1px; |
| t2 | top: 2px; |
| l3 | left: 3px; |
| r4 | right: 4px; |
| m10e20p | margin: 10em 20%; |
| m1vht |
eigene Wertangabe margin: 1vht; |
| c#3 | color: #333; |
| c#a0 | color: #a0a0a0; |
| c#a0f |
color: #a0f; Kurzschreibweise abhängig vom Eintrag in den Preferenzen bei Editor (Brackets unter css.color.short) |
| bd5#0s | border: 5px #000 solid; |
| lh1.4 | line-height: 1.4; Ohne Einheiten! |
| fw | font-weight: ; |
| op | opacity: ; |
| zi2 | z-index: 2; |
| p2! | padding: 2px !important; |
Website von Emmet
mehr unter https://emmet.io/
Extension Locations für Brackets
Siehe: https://github.com/adobe/brackets/wiki/Extension-Locations
Mac: ~/Library/Application Support/Brackets/extensions/user Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :). Sie können uns eine Spende über PayPal zukommen lassen. Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen. Bestellen Sie Bücher über folgende Links bei Amazon: Vielen Dank für Ihre Hilfe E-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis. Mehr Details
Win: C:\Users\
Linux: ~/.config/brackets/extensions/user
Weiterempfehlen • Social Bookmarks • Vielen Dank
Bitte unterstützen Sie dieses Projekt
Spenden
Weiterempfehlungen
Bücher über Amazon
E-Books zum Kurs
von HTML-Seminar.de