Zen Coding css, gantikan singkatan html dengan Daguan dan tulis html dan css_Experience exchange dengan pantas

Sebelum membaca artikel ini, baca dahulu artikel laman web dengan teliti. Pelaksanaan Pengekodan Zen menulis kod HTML/CSS dengan pantas

Salin kod Kod tersebut adalah seperti berikut:

E
Nama elemen (div, p);
E#id
Elemen menggunakan id (div#kandungan, p#intro, span#error); class
Gunakan elemen kelas (div.header, p.error.critial Anda juga boleh menggunakan class dan idID dalam kombinasi: div#content.column.width;
E>N
Elemen kanak-kanak (div> ;p, div#footer>p>span);
E+N
elemen adik beradik (h1+p, div#header+div#content+div#footer); elemen Darab (ul#nav>li*5>a);
E$*N
Nombor item (ul#nav>li.item-$*5); pengekodan Gantikan paparan 'api'

pengekodan zen ialah pemalam editor yang ditulis oleh orang Rusia (menyokong kebanyakan editor popular sekarang. Hanya pasang pemalam dan kemudian salin js masuk projek Hanya fail. Apabila projek diterbitkan, fail js boleh dipadamkan. Tugas utamanya adalah untuk membebaskan jurutera hadapan daripada kod struktur HTML dan CSS yang membosankan, tetapi terdapat banyak penggantian singkatan yang perlu dihafal Berdasarkan prinsip bahawa adalah lebih baik untuk menontonnya sepuluh kali daripada melakukannya secara manual. Saya hanya boleh menghafalnya semasa menggunakannya.

Fungsi penggantian css juga sangat bagus. Walau bagaimanapun, terdapat juga banyak penggantian yang berlebihan dan tidak berguna di dalamnya saya menggunakannya sambil membetulkan penggantian yang ditakrifkan oleh pengarang asal sebagai tidak munasabah dalam pengeluaran sebenar.

Fail zen_settings akan dihantar kemudian, dan kod gantian akan diterangkan secara ringkas.

Sudah pasti ia agak asing pada mulanya, dan saya terpaksa memikirkan strukturnya semasa menulis. Tetapi setelah membiasakan diri, rasanya sangat mudah Anda boleh menggunakan perkataan "kelajuan" untuk meringkaskan mood anda ketika menulis.

Untuk pengalaman dan pengalaman lain, saya akan kongsikan secara perlahan-lahan selepas menggunakannya sebagai rujukan.

Ciri zen ialah tiruan mendalam bagi pemilih css. Pemilih jquery juga dipelajari daripada pemilih css, jadi orang yang biasa dengan kedua-dua teknologi ini akan bermula dengan cepat. Untuk butiran tambahan, sila rujuk laman web sumber.

Antaranya, pembelajaran penggantian teg html--kod sumbernya ada dalam pakej zen-settings.js saya telah menyenaraikan kebanyakan yang biasa digunakan, dan beberapa yang kurang biasa digunakan tidak disenaraikan fail sumber. Baris sebelumnya ialah input Manual, baris seterusnya ialah output zen selepas menekan kekunci pintasan (alt+E), persekitaran adalah Aptana 2.0.2:
tidak lagi wujud dan fail tidak boleh dimuat turun .
Fail ini kali terakhir dikemas kini pada tahun 2009. Kandungan utama kemas kini ini ialah:

1 Tambah unit selepas lebar adalah sama dengan nilai.

2. Jadikan singkatan yang biasa digunakan lebih mesra pengguna.

3. Terdapat juga beberapa singkatan baharu ditambah.

Dalam dua hari yang lalu, kami telah menguji dan menambah baik fungsi penggantian css Kami telah memudahkan penggantian yang digunakan terlalu kerap Bagi mereka yang sukar diingat, kami menggunakan tekanan untuk membezakannya. Perubahan ini juga Tukar kekunci pintasan lanjutan kepada alt+s, kerana saya biasanya menggunakan dua kekunci ini untuk menghantar mesej pada QQ Saya lebih terbiasa dengan ctlr + enter, ctrl tangan kiri dan masuk tangan kanan Terlalu menyusahkan untuk menggabungkan tangan kanan ctrl + enter Ia mengambil masa terlalu lama untuk menyelesaikannya, jadi saya perlu menyelesaikannya dengan tangan kiri. Izinkan saya berkongsi pengalaman saya seperti berikut Huruf pertama ialah elemen asal, baris seterusnya ialah elemen selepas output pengembangan zen, dan seterusnya:
Dalam zen asal, atribut css dan nilai atribut adalah yang pertama. huruf bertindih dan kemudian nilai atribut Ini adalah cara saya menulisnya. Atribut yang biasa digunakan disingkatkan. Contohnya,




Salin kod

Kod adalah seperti berikut: P asal ialah padding, dan zen asal ialah pos Ia terlalu menyusahkan, jadi ia dikurangkan kepada pp, dan kemudian nilai atributnya. ppa kedudukan:mutlak;

ppr

kedudukan:relatif;

Ada yang serupa:
fl
float:left; fr
float:kanan;
cb
jelas: kedua-duanya;
db
paparan:sekat; inline-block;
oh
overflow:hidden;


Kelas css lain:




Salin kod


Kodnya adalah seperti berikut:

m
margin:;
mt
margin atas:;
en
margin-kanan:;
ml
margin-kiri:;
mb
margin-bawah:;

padding:;
pt,pr,pb,pl同margin
bg
latar belakang:url() 0 0 tiada ulangan;
bg:n
latar belakang:tiada;
bg:x
latar belakang:url() 0 0 ulang-x;
bg:y
latar belakang:url() 0 0 ulang-y;
bg:iaitu
penapis:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='x.png');

sempadan:1px pepejal #000;
bd:n
sempadan:tiada;
bdc
warna sempadan:#000;
c
warna:#000;
d
paparan:sekat;
f
saiz fon:12px;
h:;
tinggi:;
w
lebar:;
d:i
paparan:sebaris;
d:b
paparan:sekat;
fl
apung:kiri;
fr
float:right;
cl
jelas:keduanya;
c:l
jelas:kiri;
c:r
jelas:kanan;
c:n
jelas:tiada;
t
atas:;
bt
bawah:;
r
kanan:;
l
kiri:;
r
kanan:;
z
z-indeks:;
v
keterlihatan:tersembunyi;
o:h
limpahan:tersembunyi;
zoo
zum:1;
m:a
margin:0 auto;
ol
garis besar:;
q
petikan:;
tc
text-align:center;
tl
text-align:left;
tr
text-align:right;
td
teks-hiasan:tiada;
te
teks-penekanan:;
kepada:n
garis-garis teks:tiada;
whs:n
ruang putih:biasa;
whs:nw
white-space:nowrap;
wob:k
patah kata:simpan-semua;
fz
saiz fon:12px;
fw
berat fon:bold;
ff
fon-keluarga:;
op
kelegapan:;
c:p
kursor:penunjuk;

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:iaitu

cc:noie

aa


pautan:css

a:mel

meta:utf

pautan

gaya

skrip

skrip:src

img

iframe

benamkan

objek

param

peta

kawasan

borang

form:get

form:post

label

input

input:tersembunyi

input:h

input:text

input:t

input:search

input:e-mel

input:url

input:p

input:date

input:datetime

input:month

input:week

input:masa

input:nombor

input:color

input:checkbox

input:c

input:radio

input:r

input:f

input:s

input:i

input:reset

input:butang

input:b

pilih

pilihan

textarea

menu:c

bq

cap

optg

pilih

pertama

kaki

mazhab

tarea

hdr

ol+

ul+

dl+

peta+

meja+





tr+



pilih

optgroup+

optg+

kosong

Kekunci pintasan yang biasa digunakan diubah suai kepada:

Balut dengan Singkatan: alt+x

Togol Ulasan: alt+1

Pasangan padan:alt+D

Pergi ke Padanan Pasangan: alt+s

Selain itu, sebab untuk mengesyorkan alat Aptana adalah seperti berikut:

1 Sokongan kekunci pintasan sangat lengkap.

Sebagai contoh, yang lebih biasa digunakan sedang memadamkan satu baris: ctrl + D;

Pemformatan: ctrl + shift + F;

Menyalin satu baris: ctrl + alt+ pageup

Pindahkan satu baris: alt + pageup

2 Gesaan js agak berkuasa antara alatan yang diterima oleh meja depan. Ciri lain ialah ia digabungkan dengan pepijat dalam Firefox untuk menjejaki pelaksanaan program dengan titik putus Proses, melihat nilai pembolehubah segera adalah sangat bagus.

3. Sebab paling kuat untuk cadangan semasa ialah ia boleh digabungkan dengan pengekodan zen untuk menjadikan kerja anda sepantas kilat.

Kelemahan:

1 Oleh kerana alat ini agak berkuasa, ia memerlukan penggunaan memori yang banyak, tetapi dengan harga perkakasan semasa, memori 2G pada asasnya boleh diterima.

2. Walaupun versi terbaru 2.0.2 adalah versi hijau tulen, anda mesti memasang jdk matahari sebelum pemasangan. Kakitangan meja depan pasti kelihatan keliru.

3. Kaedah penyemakan imbas terbina dalam agak perlahan, halaman statik semata-mata, mengapa ia begitu rumit, semak imbasnya secara tempatan.

Perhatikan hak cipta, sila nyatakan sumber semasa mencetak semula http://www.cnblogs.com/jikey/archive/2009/12/19/1628002.html.