1.Tentukan DIV
Analisis contoh div definisi umum:
#sampel{ MARGIN: 10px 10px 10px 10px;
PADDING:20px 10px 10px 20px;
BORDER-TOP: #CCC 2px padat;
BORDER-KANAN: #CCC 2px solid;
BORDER-BOTTOM: #CCC 2px padat;
BORDER-LEFT: #CCC 2px padat;
LATAR BELAKANG: url(images/bg_poem.jpg) #FEFEFE tidak ada pengulangan di kanan bawah;
WARNA: #666;
TEKS-SEJARAH: tengah;
TINGGI GARIS: 150%; LEBAR: 60% }
Petunjuknya adalah sebagai berikut:
Nama layernya adalah sampel. Anda dapat memanggil gaya ini dengan menggunakan <div id="sample"> pada halaman.
MARGIN mengacu pada ruang kosong yang tersisa di luar batas lapisan, digunakan untuk margin halaman atau untuk membuat celah dengan lapisan lain. "10px 10px 10px 10px" masing-masing mewakili empat margin "atas, kanan, bawah dan kiri" (searah jarum jam). Jika semuanya sama, dapat disingkat menjadi "MARGIN: 10px;". Jika marginnya nol, tulis "MARGIN: 0px;". Catatan : Apabila nilainya nol, kecuali nilai warna RGB 0% yang harus diikuti tanda persen, pada kasus lain satuan “px” tidak perlu diikuti. MARGIN adalah elemen transparan dan tidak dapat menentukan warna.
PADDING mengacu pada ruang antara batas lapisan dan konten lapisan. Seperti margin, tentukan jarak masing-masing dari batas atas, kanan, bawah, dan kiri ke konten. Jika semuanya sama, Anda dapat menyingkatnya menjadi "PADDING:0px". Untuk menentukan sisi kiri satu per satu, Anda dapat menulis "PADDING-LEFT: 0px;". PADDING adalah elemen transparan dan tidak dapat menentukan warna.
BORDER mengacu pada batas lapisan. "BORDER-RIGHT: #CCC 2px solid;" mendefinisikan warna batas kanan lapisan sebagai "#CCC", lebarnya sebagai "2px", dan gayanya sebagai garis lurus "solid". .
Jika Anda menginginkan gaya garis putus-putus, Anda bisa menggunakan "putus-putus".
LATAR BELAKANG mendefinisikan latar belakang lapisan. Ini didefinisikan dalam dua tingkat. Pertama tentukan latar belakang gambar dan gunakan "url(../images/bg_logo.gif)" untuk menentukan jalur gambar latar belakang; kedua tentukan warna latar belakang "#FEFEFE". "no-repeat" berarti gambar latar belakang tidak perlu diulang secara horizontal, gunakan "repeat-x", untuk mengulanginya secara vertikal, gunakan "repeat-y", dan untuk mengulanginya hingga menutupi. seluruh latar belakang, gunakan "ulangi". Kata "kanan bawah;" berikutnya berarti gambar latar dimulai dari pojok kanan bawah. Jika tidak ada gambar background, Anda hanya dapat menentukan warna background BACKGROUND: #FEFEFE
COLOR digunakan untuk menentukan warna font, yang telah diperkenalkan di bagian sebelumnya.
TEXT-ALIGN digunakan untuk menentukan susunan konten pada layer, tengah di tengah, kiri di kiri, dan kanan di kanan.
LINE-HEIGHT mendefinisikan tinggi garis. 150% berarti tingginya 150% dari tinggi standar.
WIDTH adalah lebar lapisan yang ditentukan, yang dapat berupa nilai tetap, seperti 500 piksel, atau persentase, seperti "60%" di sini. Perlu dicatat bahwa lebar ini hanya mengacu pada lebar konten Anda, dan tidak termasuk margin, border, dan padding. Namun hal ini tidak didefinisikan dengan cara ini di beberapa browser, jadi Anda perlu mencoba lebih banyak lagi.
2.Model kotak CSS2
Sejak peluncuran CSS1 pada tahun 1996, organisasi W3C telah merekomendasikan agar semua objek pada halaman web ditempatkan dalam sebuah kotak. Desainer dapat mengontrol properti kotak ini dengan membuat definisi. Objek ini mencakup paragraf, daftar, dan judul, gambar dan lapisan <div>. Model kotak pada dasarnya mendefinisikan empat area: konten, padding, batas, dan margin. Contoh lapisan yang kita bicarakan di atas adalah kotak biasa. Bagi pemula, mereka sering bingung mengenai level, hubungan, dan saling mempengaruhi antara margin, background-color, background-image, padding, content, dan border. Berikut adalah diagram skema 3D model kotak, semoga memudahkan anda memahami dan mengingatnya.
Saat menggunakan tata letak XHTML+CSS, ada teknologi yang mungkin tidak biasa Anda gunakan pada awalnya. Harus dikatakan bahwa ini adalah cara berpikir yang berbeda dari tata letak tabel tradisional, yaitu: semua gambar tambahan diimplementasikan dengan. latar belakang. Sesuatu seperti ini:
LATAR BELAKANG: url(images/bg_poem.jpg) #FEFEFE tidak ada pengulangan di kanan bawah;
Meskipun dimungkinkan untuk menyisipkan <img> langsung ke dalam konten, hal ini tidak disarankan. Yang dimaksud dengan "gambar tambahan" di sini adalah gambar-gambar yang bukan merupakan bagian dari isi yang ingin diungkapkan pada halaman, tetapi hanya digunakan sebagai hiasan, interval, dan pengingat. Misal: gambar di album foto, gambar di gambar berita, dan gambar model kotak 3D di atas semuanya merupakan bagian dari konten, bisa langsung disisipkan ke dalam halaman dengan menggunakan elemen <img>, sedangkan yang lain mirip dengan logo, judul gambar, dan gambar awalan daftar. Semua harus ditampilkan menggunakan mode latar belakang atau metode CSS lainnya.
Ada 2 alasan untuk ini:
Pisahkan sepenuhnya kinerja dari struktur (lihat membaca artikel lain: "Memahami Pemisahan Kinerja dari Struktur"), dan gunakan CSS untuk mengontrol semua tampilan dan kinerja agar mudah direvisi.
Jadikan halaman lebih berguna dan ramah. Misalnya, jika penyandang tunanetra menggunakan pembaca layar, gambar yang diimplementasikan menggunakan teknologi latar belakang tidak akan dibacakan.