Satu lagi koleksi praktikal singkatan CSS dan pertukaran syntax_Experience yang biasa digunakan

Mengapa singkatan CSS?

Apabila mereka bentuk halaman web standard WEB, adalah penting untuk menulis sejumlah besar sintaks CSS Secara umumnya, kami boleh menjana kod CSS yang sepadan secara automatik melalui panel "Gaya CSS" perisian Dreamweaver.

Walau bagaimanapun, walaupun kod CSS yang dijana oleh perisian adalah jelas dan mudah difahami, ia adalah kerana penjelasan CSS yang jelas tentang definisi gaya bar yang menjadikan pembacaan kod CSS kelihatan panjang dan rumit masa, bilangan bait kod CSS juga Bertambah... Ini adalah sukar untuk bertolak ansur bagi orang yang mengejar kecekapan dan kesempurnaan tinggi.

Sebagai contoh, apabila kami menentukan saiz padding untuk elemen, kami menggunakan padding Apabila terdapat keperluan yang berbeza untuk padding atas, kanan, bawah dan kiri, kod yang dijana oleh perisian mungkin kelihatan seperti ini:


.t1 {
padding-top: 3px;
padding-right: 20px;
padding-bottom:
padding-left: 20px; >}



Untuk menulisnya secara ringkas ialah

Salin kod Kod adalah seperti berikut:

.t2 {
pelapik: 3px 20px 3px 20px; ), kanan (kanan), bawah (bawah), kiri (Kiri). Sudah tentu, contoh ini juga boleh dipendekkan sebagai:

Salin kod

Kodnya adalah seperti berikut: .t3 { padding: 3px 20px 3px; }

Apabila kiri (kiri) tidak tersedia, nilai lalai ialah nilai kanan (kanan ), apabila bahagian bawah (bawah) tidak tersedia , nilai lalai ialah nilai atas, jadi yang paling mudah dalam contoh ini ialah:
.t4{
padding: 3px 20px

}
;
(Sudah tentu, jika padding ialah nilai A bermakna bahagian atas, kanan, bawah dan kiri adalah sama)




cnbruce

cnrose<style type="text/css"> <!-- .t1 { padding-top: 3px; padding-right: 20px; padding-bottom: 3px; padding-left: 20px; } .t2 { padding: 3px 20px 3px 20px; } .t3 { padding: 3px 20px 3px; } .t4 { padding: 3px 20px; } span { border: 1px solid #CCCCCC; } --> </style>cnjames<span class="t1"> </span>www.cnbruce.com<span class="t2"> </span><span class="t3"></span> <span class="t4"> </span>[Ctrl+A Pilih semua Nota: Jika anda perlu memperkenalkan Js luaran, anda perlu memuat semula untuk melaksanakan
] Contoh panjang dalam contoh di atas 4 baris kod dipekatkan menjadi satu baris kod pengenalan - ini adalah kelebihan singkatan CSS. Sudah tentu, banyak kali apabila kita mempelajari pengalaman CSS orang lain, kita juga akan melihat banyak singkatan CSS yang serupa. Tetapi jika anda sendiri tidak memahaminya, anda tidak akan memahami cara mempelajari kaedah dan pengalaman CSS ini. Oleh itu, kita mesti memahami dan menguasai beberapa sintaks singkatan CSS yang biasa digunakan.

Sintaks singkatan CSS biasa
1, Latar Belakang Latar Belakang
Atribut latar belakang adalah seperti berikut:
warna latar belakang: #FFCCFF
imej latar belakang: url(/images /2007-6 .jpg);
latar belakang-ulang:
latar belakang-lampiran: tetap;
latar belakang-bawah;
Kod CSS boleh disingkatkan sebagai:


latar belakang:#FCF url(/images/2007-6.jpg) tiada ulangan tetap bahagian bawah

Iaitu Latar Belakang: warna latar belakang, imej latar belakang, ulangan latar belakang, lampiran latar belakang, kedudukan mendatar latar belakang, kedudukan menegak latar belakang
Warna latar belakang "#FFCCFF" juga boleh disingkatkan sebagai "#FCF" , iaitu untuk nilai Warna heksadesimal, jika setiap dua bit (RRGGBB) mempunyai nilai yang sama, boleh disingkatkan separuh (RGB). Pada masa yang sama, imej latar belakang tidak perlu disertakan dalam petikan berganda.