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