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
- WBOYOriginal
- 2016-05-16 12:04:051675Durchsuche
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
复主代码 代码如下:
div#width>p#a>p#a>p*10>p#a
复主代码 代码如下:
ul#a>li.c-$*5+li.0>a.title
复system代码 代码如下:
html:xt
复代码 代码如下:
<머리>
<제목>
<본문>
아아아