Zen Coding css, replace html abbreviation with Daguan and quickly write html and css_Experience exchange

Before reading this article, first read the website article carefully. Zen Coding implementation of quickly writing HTML/CSS code

Copy code The code is as follows:

E
Element name (div, p);
E#id
Element using id (div#content, p #intro, span#error);
E.class
Use class elements (div.header, p.error.critial). You can also use class in combination with idID: div#content.column.width;
E>N
Child elements (div>p, div#footer>p>span);
E N
Sibling elements (h1 p, div#header div#content div#footer);
E*N
Element multiplication (ul#nav>li*5>a);
E$*N
Item number (ul#nav>li.item-$*5);

zen coding replaces 'api'.

zen coding is an editor plug-in written by Russians (supports most popular editors today). Its installation is also very simple. Just install the plug-in, and then Just copy the js file in the project. When the project is published, the js file can be deleted. Its main task is to liberate front-end engineers from the tedious HTML and CSS structure codes, but there are many replacement abbreviations that need to be memorized. Based on the principle that it is better to watch it ten times than to do it manually, I can only memorize it while using it.

The css replacement function is also very good. However, there are also many redundant and useless substitutions in it. I am using it while correcting the substitutions that the original author defined that are unreasonable in actual production.

The zen_settings file will be sent up later, and the replacement code will be briefly explained.

It was definitely a bit unfamiliar at first, and I had to think about this structure while writing. But after getting used to it, I feel it is very convenient. I can use the word "speed" to summarize my mood when writing.

As for other experiences and experiences, I will slowly share them after using them for reference.

Zen features a profound imitation of CSS selectors. The jquery selector is also learned from the css selector, so people who are familiar with these two technologies will get started quickly. For additional details, please refer to the source website.

The html tag replacement learning--the source code is in its package zen-settings.js. I have listed most of the commonly used ones, and some less commonly used ones are not listed. Refer to the source file. The previous line is Manual input, the next line is the zen output after pressing the shortcut key (alt E), the environment is Aptana 2.0.2:
no longer exists, and the file cannot be downloaded.
This file was last updated in 2009. The main contents of this update are:

1. Add units after width is equal to the value.

2. Make commonly used abbreviations more user-friendly.

3. There are also several new abbreviations added.

In the past two days, we have done crazy experiments and improvements on the css replacement function. We have simplified the replacements that are used too frequently. For those that are difficult to remember, we use stress to distinguish them. This change also Change the extended shortcut key to alt s, because I usually use these two keys to send QQ messages. I am more accustomed to ctlr enter, left hand ctrl and right hand enter. It is too troublesome to combine the right hand ctrl enter and it takes too long to complete, so I have to finish it with the left hand. Let me share my experience as follows. The first letter is the original element, the next line is the element after zen expansion output, and so on:
In the original zen, the css attributes and attribute values ​​​​take the first letter colon and then the attribute value. This is how I write it. Simplified. Commonly used attributes are abbreviated. For example

Copy code The code is as follows:

The original p is padding, and the original zen is pos. It feels too troublesome, so it is reduced to pp, and then its attribute value.
ppa
position:absolute;

ppr
position:relative;

There are similar ones:
fl
float:left;
fr
float:right;
cb
clear:both;
db
display:block;
di
display:inline;
dib
display: inline-block;
oh
overflow:hidden;

Other css classes:

Copy code The code is as follows: div>

m
margin:;
mt
margin-top:;
mr
margin-right:; ml
margin-left:;
mb
margin-bottom:;

padding:;
pt, pr, pb, pl are the same as margin
bg
background:url() 0 0 no-repeat;
bg:n
background:none;
bg:x
background:url() 0 0 repeat-x;
bg: y
background:url() 0 0 repeat-y;
bg:ie
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='x.png');

border :1px solid #000;
bd:n
border:none;
bdc
border-color:#000;
c
color:#000;
d display:block;
f
font-size:12px;
h:;
height:;
w
width:;
d:i
display:inline;
d:b
display:block;
fl
float:left;
fr
float:right;
cl
clear:both;
c:l
clear:left;
c:r
clear:right;
c:n
clear:none;
t
top:; bt
bottom:;
r
right:;
l
left:;
r
right:;
z
z-index: ;
v
visibility:hidden;
o:h
overflow:hidden;
zoo
zoom:1;
m:a
margin:0 auto;
ol
outline:;
q
quotes:;
tc
text-align:center;
tl
text-align:left;
tr
text-align:right;
td
text-decoration:none;
te
text-emphasis:;
to:n
text-outline:none; whs:n
white-space:normal;
whs:nw
white-space:nowrap;
wob:k
word-break:keep-all;
fz
font-size:12px;
fw
font-weight:bold;
ff
font-family:;
op
opacity:;
c:p
cursor:pointer;

html class:
Comprehensive class: div#a div#b div.c-$*5 li*10

Copy code The code is as follows:

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

meta:utf

link

style

script

script:src

img

iframe

embed

object

param

map

area

form

form:get

form:post

label

input

input:hidden

input:h

input:text

input:t

input:search

input:email

input:url

input:p

input:date

input:datetime

input:month

input:week

input:time

input:number

input:color

input:checkbox

input:c

input:radio

input:r

input:f

input:s

input:i

input:reset

input:button

input:b

select

option

textarea

menu:c

bq

cap

optg

opt

fst

leg

sect

tarea

hdr

ol

1. 
   

ul

• 
  

dl

map

table





tr



select
optgroup

optg
empty

Commonly used shortcut keys are modified to:

Wrap with Abbreviation: alt x

Toggle Comment : alt 1

Match pair:alt D

Go to Matching Pair:alt s

In addition, the reasons for recommending the Aptana tool are as follows:

1. The shortcut key support is very complete.

For example, the more commonly used deletion of a single line: ctrl D;

Formatting: ctrl shift F;

Copying a single line: ctrl alt pageup

Moving a single line: alt pageup

2. js prompt is relatively powerful among the tools currently accepted by the front desk. It also has another feature, which is that it can be combined with firebug in Firefox to track the program execution process with breakpoints and view variables in real time. The value is very good.

3. The most powerful reason for the current recommendation is that it can be combined with zen coding to make your work as fast as lightning.

Its disadvantages:

1. Because the tool is relatively powerful, it requires a lot of memory consumption, but with the current hardware price, 2G of memory is basically acceptable.

2. Although the latest version 2.0.2 is a pure green version, you must install sun's jdk before installation. This thing is a headache and requires a lot of configuration. The front desk staff must have looked confused.

3. The built-in browsing method is relatively slow, purely static page, why is it so complicated, just browse it locally.

Pay attention to copyright, please indicate the source when reprinting http://www.cnblogs.com/jikey/archive/2009/12/19/1628002.html.