Heim
Web-Frontend
CSS-Tutorial
Zen Coding CSS, ersetzen Sie die HTML-Abkürzung durch Daguan und schreiben Sie schnell HTML und CSS_Erfahrungsaustausch



Zen Coding CSS, ersetzen Sie die HTML-Abkürzung durch Daguan und schreiben Sie schnell HTML und CSS_Erfahrungsaustausch
May 16, 2016 pm 12:04 PM
css
html
Bevor Sie diesen Artikel lesen, lesen Sie zun?chst den Website-Artikel sorgf?ltig durch. Zen Coding-Implementierung zum schnellen Schreiben von HTML/CSS-Code
Code kopieren Der Code lautet wie folgt:
E
Elementname (div, p);
E#id
Element mit ID (div#content, p#intro, span#error); class
Verwenden Sie Klassenelemente (div.header, p.error.critial). Sie k?nnen class und idID auch in Kombination verwenden: div#content.column.width;
E>N
Children-Elemente (div>). ;p, div#footer>p>span);
E+N
Geschwisterelement (h1+p, div#header+div#content+div#footer); element Multiply(ul#nav>li*5>a);
E$*N
Artikelnummer(ul#nav>li.item-$*5);
zen Codierung Ersetzen Sie display 'api'. Zen Coding ist ein von Russen geschriebenes Editor-Plugin (unterstützt jetzt die meisten g?ngigen Editoren). Das Projekt einfach ablegen. Wenn das Projekt ver?ffentlicht wird, kann die js-Datei gel?scht werden. Seine Hauptaufgabe besteht darin, Front-End-Ingenieure von den mühsamen HTML- und CSS-Strukturcodes zu befreien, aber es gibt viele Ersatzabkürzungen, die man sich merken muss. Basierend auf dem Prinzip, dass es besser ist, es zehnmal anzusehen, als es manuell zu tun. Ich kann es mir nur merken, w?hrend ich es benutze.
Die zen_settings-Datei wird sp?ter gesendet und der Ersatzcode wird kurz erl?utert.
Am Anfang war es definitiv etwas ungewohnt und ich musste beim Schreiben über die Struktur nachdenken. Aber nachdem man sich daran gew?hnt hat, fühlt es sich sehr praktisch an. Man kann das Wort ?Geschwindigkeit“ verwenden, um seine Stimmung beim Schreiben zusammenzufassen.
Was andere Erfahrungen und Erfahrungen betrifft, werde ich sie langsam teilen, nachdem ich sie als Referenz verwendet habe.
Die Zen-Funktion ist eine tiefgreifende Nachahmung des CSS-Selektors. Der JQuery-Selektor wird auch vom CSS-Selektor gelernt, sodass Personen, die mit diesen beiden Technologien vertraut sind, schnell loslegen k?nnen. Weitere Einzelheiten finden Sie auf der Website der Quelle.
Darunter das Ersetzen von HTML-Tags – der Quellcode befindet sich in seinem Paket zen-settings.js. Ich habe die meisten der am h?ufigsten verwendeten aufgelistet, und einige weniger h?ufig verwendete sind nicht aufgeführt Die vorherige Zeile ist die manuelle Eingabe, die n?chste Zeile ist die Zen-Ausgabe nach dem Drücken der Tastenkombination (Alt+E), die Umgebung ist Aptana 2.0.2:
existiert nicht mehr und die Datei kann nicht heruntergeladen werden .
Diese Datei wurde zuletzt im Jahr 2009 aktualisiert. Der Hauptinhalt dieser Aktualisierung ist:
1. Einheiten hinzufügen, nachdem die Breite dem Wert entspricht.
2. Machen Sie h?ufig verwendete Abkürzungen benutzerfreundlicher.
3. Es wurden auch mehrere neue Abkürzungen hinzugefügt.
In den letzten zwei Tagen haben wir die CSS-Ersetzungsfunktion verrückt getestet und verbessert. Wir haben die Ersetzung, die zu h?ufig verwendet wird, vereinfacht und verwenden Stress, um sie zu unterscheiden. Diese ?nderung ?ndert auch die erweiterte Tastenkombination zu Alt+S, da ich diese beiden Tasten normalerweise zum Senden von Nachrichten auf QQ verwende. Ich bin es eher gewohnt, Strg + Eingabetaste, linke Strg-Taste und rechte Eingabetaste zu verwenden rechte Hand Strg + Eingabetaste Es dauert zu lange, also muss ich es mit der linken Hand beenden. Lassen Sie mich meine Erfahrungen wie folgt teilen. Der erste Buchstabe ist das ursprüngliche Element, die n?chste Zeile ist das Element nach der Zen-Erweiterungsausgabe und so weiter:
Im ursprünglichen Zen stehen die CSS-Attribute und Attributwerte an erster Stelle Buchstaben-Doppelpunkt und dann der Attributwert. So schreibe ich es. H?ufig verwendete Attribute werden abgekürzt. Zum Beispiel:
Code kopieren
Der Code lautet wie folgt: Das ursprüngliche p ist eine Auffüllung, und der ursprüngliche Zen ist pos. Es war zu mühsam, also wurde es auf pp und dann auf seine Attributwerte reduziert. ppa position:absolute;
ppr
position:relative;
Es gibt ?hnliche:
fl
float:left
fr
float:right;cb
clear:both
display:block
di
dib
display: inline-block;
oh
overflow:hidden;
Andere CSS-Klassen:
Code kopieren
position:relative;
Es gibt ?hnliche:
fl
float:left
fr
float:right;cb
clear:both
display:block
di
dib
display: inline-block;
oh
overflow:hidden;
Andere CSS-Klassen:
Code kopieren
Der Code lautet wie folgt:
m
??:;
mt
margin-top:;
mr
??-???:;
ml
??-??:;
mb
??-??:;
??:;
pt,pr,pb,pl???
bg
background:url() 0 0 ?? ??;
bg:n
??:??;
bg:x
??:url() 0 0 ??-x;
bg:y
??:url() 0 0 ??-y;
bg:ie
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='x.png');
???:1px ??? #000;
bd:n
???:??;
bdc
border-color:#000;
c
??:#000;
d
?????:??;
f
?? ??:12px;
?:;
?:;
w
??:;
d:i
?????:???;
d:b
?????:??;
fl
float:??;
fr
float:right;
cl
clear:? ?;
c:l
clear:left;
c:r
clear:right;
c:n
clear:none;
t
?:;
bt
??:;
r
????:;
l
??:;
r
????:;
z
z-??:;
v
???:??;
o:h
????:??;
???
zoom:1;
m:a
??:0 ??;
ol
??:;
q
???:;
tc
??? ??:???;
tl
??? ??:??;
tr
text-align:right;
td
??? ??:??;
te
??? ??:;
to:n
text-outline:none;
whs:n
??:??;
whs:nw
white-space:nowrap;
wob:k
word-break:keep-all;
fz
?? ??:12px;
fw
font-weight:bold;
ff
???:;
op
????:;
c:p
??:???;
html類:
綜?類:div#a+div#b+div.c-$*5+li*10
復(fù)主代碼 代碼如下:
div#width>p#a>p#a>p*10>p#a
復(fù)主代碼 代碼如下:
ul#a>li.c-$*5+li.0>a.title
復(fù)system代碼 代碼如下:
html:xt
復(fù)代碼 代碼如下:
?>
?>??>
?>
???