Pengoptimuman CSS 2-(Ringkasan sintaks singkatan CSS biasa)_Pertukaran pengalaman

Menggunakan singkatan boleh membantu mengurangkan saiz fail CSS anda dan menjadikannya lebih mudah dibaca. Peraturan utama untuk singkatan CSS adalah seperti berikut:

Warna
Nilai warna heksadesimal, jika nilai setiap dua digit adalah sama, ia boleh disingkatkan separuh, contohnya:
#000000 boleh disingkatkan kepada #000;# 336699 boleh disingkatkan sebagai #369;

Saiz kotak
biasanya mempunyai empat kaedah penulisan berikut:

property:value1; nilai nilai1;
harta: nilai1 nilai2; bermakna nilai atas dan bawah ialah nilai1, nilai kanan dan kiri ialah nilai2
nilai2 nilai3; kanan dan kiri ialah nilai2, dan nilai bahagian bawah ialah nilai3
harta:nilai1 nilai2 nilai3 nilai4; kanan, bawah, kiri. Contoh aplikasi khusus dalam margin dan padding adalah seperti berikut:
margin:1em 0 2em 0.5em;

Border (sempadan)
Sifat-sifat sempadan adalah seperti berikut:

border-width:1px ;
border-style:solid;
border-color:#000;
boleh disingkatkan kepada satu ayat: border:1px solid #000; sintaks ialah warna gaya sempadan:lebar;

Latar Belakang
Sifat latar belakang adalah seperti berikut:

warna latar belakang:#f00;
gambar latar belakang:url. gif);
background-repeat :no-repeat;
background-attachment:fixed;
background-position:0 0; .gif) no-repeat tetap 0 0;

Sintaks ialah latar belakang: kedudukan lampiran ulangan imej

Anda boleh meninggalkan satu atau lebih nilai atribut, nilai atribut akan digunakan nilai lalai penyemak imbas. Nilai lalai ialah:

warna: lutsinar
imej: tiada
ulang: ulang
lampiran: tatal
kedudukan: 0% 0%
Fon (font)
Atribut fon adalah seperti berikut:

font-style:italic;
font-variant: small-caps; font-size:1em;
line-height:140% ;
font-family:"Lucida Grande",sans-serif; /140% "Lucida Grande",sans-serif;

Perhatikan bahawa jika anda meringkaskan definisi fon, anda mesti mentakrifkan sekurang-kurangnya dua nilai: saiz fon dan keluarga fon.

Senarai
Untuk membatalkan titik lalai dan nombor siri, anda boleh menulis list-style:none;,

atribut senarai adalah seperti berikut:

list-style -type:square;
list-style-position:inside;
list-style-image:url(image.gif);boleh disingkatkan kepada satu ayat: list-style:square inside url( imej. gif);