


Zen Coding css, replace html abbreviation with Daguan and quickly write html and css_Experience exchange
May 16, 2016 pm 12:04 PMBefore reading this article, first read the website article carefully. Zen Coding implementation of quickly writing HTML/CSS code
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
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:
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
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
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.

Hot AI Tools

Undress AI Tool
Undress images for free

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

The web page structure needs to be supported by core HTML elements. 1. The overall structure of the page is composed of , , which is the root element, which stores meta information and displays the content; 2. The content organization relies on title (-), paragraph () and block tags (such as ,) to improve organizational structure and SEO; 3. Navigation is implemented through and implemented, commonly used organizations are linked and supplemented with aria-current attribute to enhance accessibility; 4. Form interaction involves , , and , to ensure the complete user input and submission functions. Proper use of these elements can improve page clarity, maintenance and search engine optimization.

There are three ways to create a CSS loading rotator: 1. Use the basic rotator of borders to achieve simple animation through HTML and CSS; 2. Use a custom rotator of multiple points to achieve the jump effect through different delay times; 3. Add a rotator in the button and switch classes through JavaScript to display the loading status. Each approach emphasizes the importance of design details such as color, size, accessibility and performance optimization to enhance the user experience.

Client-sideformvalidationcanbedonewithoutJavaScriptbyusingHTMLattributes.1)Userequiredtoenforcemandatoryfields.2)ValidateemailsandURLswithtypeattributeslikeemailorurl,orusepatternwithregexforcustomformats.3)Limitvaluesusingmin,max,minlength,andmaxlen

Use tags in HTML to group options in the drop-down menu. The specific method is to wrap a group of elements and define the group name through the label attribute, such as: 1. Contains options such as apples, bananas, oranges, etc.; 2. Contains options such as carrots, broccoli, etc.; 3. Each is an independent group, and the options within the group are automatically indented. Notes include: ① No nesting is supported; ② The entire group can be disabled through the disabled attribute; ③ The style is restricted and needs to be beautified in combination with CSS or third-party libraries; plug-ins such as Select2 can be used to enhance functions.

To use HTML button elements to achieve clickable buttons, you must first master its basic usage and common precautions. 1. Create buttons with tags and define behaviors through type attributes (such as button, submit, reset), which is submitted by default; 2. Add interactive functions through JavaScript, which can be written inline or bind event listeners through ID to improve maintenance; 3. Use CSS to customize styles, including background color, border, rounded corners and hover/active status effects to enhance user experience; 4. Pay attention to common problems: make sure that the disabled attribute is not enabled, JS events are correctly bound, layout occlusion, and use the help of developer tools to troubleshoot exceptions. Master this

Hello, JavaScript developers! Welcome to this week's JavaScript news! This week we will focus on: Oracle's trademark dispute with Deno, new JavaScript time objects are supported by browsers, Google Chrome updates, and some powerful developer tools. Let's get started! Oracle's trademark dispute with Deno Oracle's attempt to register a "JavaScript" trademark has caused controversy. Ryan Dahl, the creator of Node.js and Deno, has filed a petition to cancel the trademark, and he believes that JavaScript is an open standard and should not be used by Oracle

CSS,orCascadingStyleSheets,isthepartofwebdevelopmentthatcontrolsawebpage’svisualappearance,includingcolors,fonts,spacing,andlayout.Theterm“cascading”referstohowstylesareprioritized;forexample,inlinestylesoverrideexternalstyles,andspecificselectorslik

Use tags to embed other website content into your own web page. The basic syntax is:, you can add width, height, and style="border:none;" to control the appearance; in order to achieve responsive layout, you can set the size through percentage or use containers to combine padding and absolute positioning to maintain the aspect ratio, while paying attention to cross-domain restrictions, loading performance, SEO impact, and security policies. Common uses include embedding maps, third-party forms, social media content and internal system integration.
