Zen Coding css, remplacez l'abréviation html par Daguan et écrivez rapidement l'échange html et css_Experience

Avant de lire cet article, lisez d’abord attentivement l’article du site Web. Implémentation Zen Coding d'écriture rapide de code HTML/CSS

Copier le code Le code est le suivant :

E
Nom de l'élément (div, p);
E#id
Élément utilisant l'identifiant (div#content, p#intro, span#error
E. class
Utiliser des éléments de classe (div.header, p.error.critial Vous pouvez également utiliser class et idID en combinaison : div#content.column.width;
E>N
Éléments enfants (div> ; p, div#footer>p>span);
E+N
élément frère (h1+p, div#header+div#content+div#footer); élément Multiplier (ul#nav>li*5>a);
E$*N
Numéro d'article (ul#nav>li.item-$*5


zen); coding Remplacez l'affichage 'api'.

zen coding est un plug-in d'éditeur écrit par des Russes (prend désormais en charge les éditeurs les plus populaires). Son installation est également très simple, puis copiez js. le projet Il suffit de déposer. Lorsque le projet est publié, le fichier js peut être supprimé. Sa tâche principale est de libérer les ingénieurs front-end des fastidieux codes de structure HTML et CSS, mais il existe de nombreuses abréviations de remplacement qui doivent être mémorisées. Basé sur le principe qu'il vaut mieux le regarder dix fois que de le faire manuellement, Je ne peux le mémoriser qu'en l'utilisant.

La fonction de remplacement CSS est également très bonne. Cependant, il contient également de nombreuses substitutions redondantes et inutiles. Je l'utilise en corrigeant les substitutions que l'auteur original a définies comme déraisonnables dans la production réelle.

Le fichier zen_settings sera envoyé ultérieurement et le code de remplacement sera brièvement expliqué.

C'était définitivement un peu inconnu au début, et j'ai dû réfléchir à la structure en écrivant. Mais après s'y être habitué, cela semble très pratique. Vous pouvez utiliser le mot « vitesse » pour résumer votre humeur lorsque vous écrivez.

Quant aux autres expériences et expériences, je les partagerai lentement après les avoir utilisées comme référence.

La fonctionnalité zen est une profonde imitation du sélecteur CSS. Le sélecteur jquery est également appris à partir du sélecteur css, afin que les personnes familiarisées avec ces deux technologies se lancent rapidement. Pour plus de détails, veuillez vous référer au site Web source.

Parmi eux, l'apprentissage du remplacement des balises HTML - le code source est dans son package zen-settings.js. J'ai répertorié la plupart des codes couramment utilisés, et certains moins couramment utilisés ne sont pas répertoriés. le fichier source. La ligne précédente est la saisie manuelle, la ligne suivante est la sortie zen après avoir appuyé sur la touche de raccourci (alt+E), l'environnement est Aptana 2.0.2 :
n'existe plus et le fichier ne peut pas être téléchargé. .
Ce fichier a été mis à jour pour la dernière fois en 2009. Le contenu principal de cette mise à jour est :

1. Ajoutez des unités après que la largeur soit égale à la valeur.

2. Rendre les abréviations couramment utilisées plus conviviales.

3. Plusieurs nouvelles abréviations ont également été ajoutées.

Au cours des deux derniers jours, nous avons testé et amélioré la fonction de remplacement CSS. Nous avons simplifié le remplacement qui est utilisé trop fréquemment. Pour ceux qui sont difficiles à retenir, nous utilisons le stress pour les distinguer. Ce changement modifie également la touche de raccourci étendue en alt+s, car j'utilise habituellement ces deux touches pour envoyer des messages sur QQ. Je suis plus habitué à ctlr + enter, ctrl gauche et enter droite. Ctrl + Entrée de la main droite. Cela prend trop de temps, je dois donc le terminer avec la main gauche. Permettez-moi de partager mon expérience comme suit. La première lettre est l'élément d'origine, la ligne suivante est l'élément après la sortie de l'extension zen, et ainsi de suite :
Dans le zen d'origine, les attributs css et les valeurs d'attribut sont les premiers. lettre deux points puis la valeur de l'attribut. C'est ainsi que je l'écris simplifié. Les attributs couramment utilisés sont abrégés. Par exemple,

Copier le code Le code est le suivant :

Le p original est un remplissage, et le zen original est pos. C'était trop gênant, donc il a été réduit à pp, puis à ses valeurs d'attribut.

ppa
position:absolute;

ppr
position:relative

Il y en a des similaires :
fl
float:left; fr
float:right;
cb
clear:both
db
display:block
display:inline
dib
display: inline-block;
oh
overflow:hidden;


Autres classes CSS :

Copier le code

Le code est le suivant :

m
marge :;
mt
marge-haut :;
mr
marge-droite :;
ml
marge-gauche :;
mb
marge-bas :;

rembourrage :;
pt,pr,pb,pl同margin
bg
background:url() 0 0 no-repeat;
bg:n
arrière-plan:aucun;
bg:x
background:url() 0 0 répétition-x;
bg:y
background:url() 0 0 répétition-y;
bg:ie
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='x.png');

bordure : 1px solide #000 ;
bd:n
border:aucun;
bdc
border-color:#000;
c
couleur :#000;
d
display:block;
f
font-size:12px;
h:;
hauteur :;
w
largeur :;
d:i
affichage:inline;
d:b
affichage:bloc;
fl
float:gauche;
fr
float:right;
cl
clear: les deux;
c:l
clear:gauche;
c:r
clear:right;
c:n
clear:aucun;
t
haut :;
bt
bas :;
r
à droite :;
l
à gauche :;
r
à droite :;
z
z-index :;
v
visibilité : cachée ;
o:h
débordement:caché;
zoo
zoom:1;
m:a
marge:0 auto;
ol
aperçu :;
q
citations :;
tc
text-align:center;
tl
text-align:left;
tr
text-align:right;
td
text-decoration:none;
te
text-emphase:;
à :n
text-outline:aucun;
whs:n
espace blanc:normal;
whs:nw
espace blanc:nowrap;
wob:k
word-break:keep-all;
fz
font-size:12px;
fw
font-weight:bold;
ff
font-family :;
op
opacité :;
c:p
curseur:pointeur;

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

复制代码 代码如下 :

html:xt

复制代码 代码如下:

aaa

更多的

复制代码 代码如下 :

cc:ie6

cc:ie

cc:noie

aa


link:css

a:mail

méta:utf

lien

style

script

script:src

img

iframe

intégrer

objet

param

carte

zone

formulaire

form:get

form:post

étiquette

entrée

input:hidden

input:h

input:text

input:t

input:search

input:email

input:url

input:p

input:date

input:datetime

input:mois

input:week

input:time

input:numéro

input:color

input:checkbox

input:c

input:radio

input:r

input:f

input:s

input:i

input:reset

input:bouton

input:b

sélectionnez

option

textarea

menu :c

bq

casquette

optg

opter

fst

jambe

secte

tarea

hdr

ol+

ul+

dl+

map+

table+





tr+



sélectionnez

optgroup+

optg+

vide

Les touches de raccourci couramment utilisées sont modifiées comme suit :

Envelopper avec l'abréviation : alt+x

Comment basculer : alt+1

Match paire : alt+D

Aller à Matching Pair : alt+s

De plus, les raisons de recommander l'outil Aptana sont les suivantes :

1 La prise en charge des touches de raccourci est très complète.

Par exemple, la suppression d'une seule ligne la plus couramment utilisée : ctrl + D

Formatage : ctrl + shift + F

Copier une seule ligne : ctrl + ; alt+ pageup

Déplacer une seule ligne : alt + pageup

2. Les invites js sont relativement puissantes parmi les outils actuellement acceptés par la réception. Une autre fonctionnalité est qu'elles sont combinées avec Firebug dans Firefox. pour suivre l'exécution du programme avec des points d'arrêt. Processus, la visualisation instantanée des valeurs des variables est très agréable.

3. La raison la plus puissante de la recommandation actuelle est qu'elle peut être combinée avec le codage zen pour rendre votre travail aussi rapide que l'éclair.

Les inconvénients :

1 Parce que l'outil est relativement puissant, il nécessite beaucoup de consommation de mémoire, mais avec le prix actuel du matériel, 2 Go de mémoire sont fondamentalement acceptables.

2. Bien que la dernière version 2.0.2 soit une version purement verte, vous devez installer le jdk de Sun avant l'installation. Cette chose est un casse-tête et nécessite beaucoup de configuration. Le personnel de la réception a dû avoir l'air confus.

3. La méthode de navigation intégrée est une page relativement lente et purement statique, pourquoi est-elle si compliquée, parcourez-la simplement localement.

Faites attention au droit d'auteur, veuillez indiquer la source lors de la réimpression http://www.cnblogs.com/jikey/archive/2009/12/19/1628002.html.