1. Manfaatkan singkatan CSS dengan baik dapat mengurangi ukuran file halaman, meningkatkan kecepatan unduhan, dan cukup baca kode. Bisa ditulis sebagai Contoh lain: Dapat ditulis ulang sebagai: (Untuk detailnya, silakan merujuk ke: Manual Referensi CSS2, Ringkasan Singkatan CSS yang biasa digunakan) 2. Ini dapat menetapkan beberapa aturan untuk atribut kelas dari elemen HTML secara bersamaan (beberapa definisi kelas). Elemen ini juga termasuk gaya yang diatur dalam A dan B 3. Klarifikasi unit, kecuali nilainya 0 Catatan: Jangan menambahkan kisi -kisi kosong antara numerik dan unit. 4. Naskah yang dibedakan dalam XHTML. Tidak dapat menunjukkan 1 garis tepi piksel 5. Prinsip Prioritas CSS Terbaru Jika Anda mendefinisikan banyak gaya pada elemen, gaya tingkat pertama tingkat pertama akan ditentukan oleh gaya lain. Ini menunjukkan merah di sini Ini menunjukkan biru di sini Ini menunjukkan hijau di sini Ini kuning Ini juga ditampilkan sebagai kuning karena .yllow ada di belakang .blue. 6. Definisi menggunakan sub -selektor untuk mengurangi ID dan kelas, misalnya: Dapat diubah menjadi: 7. Jangan menambahkan jalur gambar latar belakang untuk mengubah latar belakang: url ("xxx.gif") ke latar belakang: url (xxx.gif) 8. Jalur gambar latar belakang relatif terhadap halaman CSS saat ini. Misalnya: 9. Penggunaan elemen yang berbeda untuk menerapkan gaya yang sama seperti H1, H2, H3, Div {font-size: 16px; 10. Tulis gaya tautan yang benar. 11. Perubahan konten terlarang dan perubahan konten wajib dalam tabel atau lapisan kami mungkin berharap bahwa konten tidak akan diubah atau dipaksa untuk mengubah jalur. 12. Perbedaan Relatif, tulisan di CSS adalah: Posisi: Relative; Seperti padding di tingkat induk, level saat ini dari level saat ini terletak dengan mengacu pada titik asli area konten induk. 13. Diferensial Div dan Span 14. Tampilan dan visibilitas diferensial
menyukai:
Div {
Border-Top: 1px solid #CCCCCCC;
Border-left: 1px solid #ccccccc;
Border-Right: 1px Soli #CCCCCCC;
Border-Bottom: 1px solid #CCCCCCC;
}
p {border: 1px solid #ccccccc}
Div {
margin-top: 10px;
Margin-kanan: 20px;
Margin-bottom: 30px;
margin-heft: 40px;
}
/*Perhatikan urutan penulisan, kanan, bawah, dan kiri*/
Div {margin: 10px 20px 30px 40px}
/*Perhatikan bahwa nilai dan unit tidak dapat memiliki ruang, dan ruang dipisahkan oleh ruang antara setiap nilai*/
Biasanya kami menulis:
Bahkan, kita dapat menentukan beberapa aturan untuk elemen P, seperti:
CSS:
.A {...}
.B {….}
Html:
Catatan: Pisahkan dengan spasi antara beberapa aturan.
Lupa mendefinisikan ukuran adalah masalah umum pada pemula CSS. Kita dapat menulis lebar = "100" dalam HTML, tetapi unit yang akurat harus diberikan dalam CSS. Seperti: Lebar: 100px; Ukuran nilai 0 sama.
Seperti #AAA, yang berbeda dari #AAA.
Jika #AAA didefinisikan dalam CSS, penggunaan AAA dalam elemen HTML untuk menerapkannya tidak akan dapat memperoleh gaya yang ditentukan dalam #AAA.
Contoh kode:
CSS:
#Aaa {border: 1px solid #ccc}
Html:
menyukai:
CSS:
P {Color: Red}
.blue {color: blue}
.yllow {color: yellow}
Html:
Melihat:
(1) Perhatikan beberapa urutan prioritas gaya (prioritas berkurang dari atas ke bawah):
-Pengaturan gaya nele
-Pengaturan Area Kepala
-Dalam Referensi Eksternal File CSS (2) Prioritas tidak diatur dalam urutan akses, tetapi urutan pesanan di CSS diatur.
Seperti yang ditunjukkan pada contoh di atas, itu menunjukkan kuning
#Berisi {..}
#Contain_ul {...}
.contail_li {...}
#Berisi {..}
#Contain ul {...}
.contain ul li {...}
Karena menambahkan kutipan untuk beberapa browser dapat menyebabkan kesalahan.
Ini adalah gambar struktur direktori berikut
-xxx.gif
-CSS
--xx.css
--Ddex.html
Konten Kode
Index.html Referensi file xx.css.
Xx.css ingin mengutip gambar xxx.gif.
Kemudian elemen H1, H2, H3, Div semuanya adalah 16 piksel, font tebal
Jika Anda tidak menulis dalam urutan ini, Anda mungkin tidak dapat mencapai efek harapan Anda. Untuk mengingat urutan ini, kami mengekstrak huruf pertama dari setiap kata: lvha, Anda dapat mengingat ordo dengan cinta ingatan, pahlawan, dua kata.
Terlarang Mengubah: SPACE PUTIH: Nowrap
Perubahan Wajib: Word-Wrap: Break-Word;
Absolute, tulisan di CSS adalah: Posisi: Absolute; Titik tawaran orang tua -tingkat sebagai titik aslinya. Jika TRBL diatur dan level induk tidak mengatur atribut posisi, maka absolut saat ini diposisikan dengan titik asli di sudut kiri atas browser, dan posisi akan ditentukan oleh TRBL.
Div adalah elemen tingkat blok yang dapat berisi paragraf, tabel, dan konten lainnya untuk menempatkan konten yang berbeda. Secara umum, kami meletakkan setiap blok di halaman web untuk meletakkan setiap blok di halaman web.
Span adalah elemen terkait internal, tanpa signifikansi praktis.
Tampilan: Tidak Ada dan Visibilitas: Tersembunyi dapat menyembunyikan elemen tetapi visibilitas: Tersembunyi hanya menyembunyikan konten elemen, tetapi ruang lokasi yang digunakan masih dipertahankan.
Tampilan: Tidak ada yang cukup dihapus dari halaman, dan posisi pekerjaannya juga akan dihapus.