Ideal zum Lernen:
Kurs als Videos
Video-Kurs HTML5, CSS
& Webdesign
HTML-Kurs, CSS u. Webdesign lernen & die eigene Website erstellen
Videos eBook Forum Kontakt

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
Win: C:\Users\\AppData\Roaming\Brackets\extensions\user
Linux: ~/.config/brackets/extensions/user

Weiterempfehlen • Social Bookmarks • Vielen Dank

Wenn Sie einen Fehler finden, bitte mitteilen (egal ob Schreibfehler oder inhaltlicher Fehler).

Mit Maus fehlerhafte Stelle markieren und übernehmen mit folgendem Button:



(kann angegeben werden)

Nach Absenden kommt hier Feedback! Bitte nicht doppelt absenden. Danke.

Bitte unterstützen Sie dieses Projekt

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 :).

unsere Videos bestellen

Unsere Videos und eBooks bestellen.

Spenden

Sie können uns eine Spende über PayPal zukommen lassen.

Weiterempfehlungen

Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.

Bücher über Amazon

Bestellen Sie Bücher über folgende Links bei Amazon:

Fehler melden

Vielen Dank für Ihre Hilfe