Struktur Div+CSS
Apakah Anda belajar tata letak CSS? Tidak bisakah Anda sepenuhnya menguasai tata letak CSS murni? Biasanya ada dua situasi yang menghalangi studi Anda:
Kemungkinan pertama adalah bahwa Anda belum memahami prinsip halaman pemrosesan CSS. Sebelum Anda mempertimbangkan kinerja keseluruhan halaman Anda, Anda harus terlebih dahulu mempertimbangkan semantik dan struktur konten, dan kemudian menambahkan CSS untuk semantik dan struktur. Artikel ini akan memberi tahu Anda cara menyusun html.
Alasan lain adalah bahwa Anda tidak berdaya tentang atribut lapisan presentasi yang sangat akrab (seperti cellpadding, hspace, align = kiri, dll.) Dan tidak tahu apa pernyataan CSS yang harus dikonversi. Saat Anda memecahkan masalah pertama dan tahu cara menyusun HTML Anda, saya akan memberikan daftar atribut kinerja asli secara rinci mana yang digunakan CSS.
HTML terstruktur
Ketika kami pertama kali mempelajari produksi halaman web, kami selalu mempertimbangkan cara merancang dan mempertimbangkan gambar, font, warna, dan rencana tata letak. Kemudian kami menggunakan Photoshop atau kembang api untuk menggambar dan memotong gambar kecil. Akhirnya, semua desain dipulihkan dan ditampilkan pada halaman dengan mengedit HTML.
Jika Anda ingin halaman HTML Anda ditata dengan CSS (yang ramah CSS), Anda harus memulai lagi, tidak mempertimbangkan penampilan terlebih dahulu, dan pertama-tama pikirkan tentang semantik dan struktur konten halaman Anda.
Penampilan bukanlah hal yang paling penting. Halaman HTML yang terstruktur dengan baik dapat diekspresikan dalam penampilan apa pun, CSS Zen Garden adalah contoh klasik. CSS Zen Garden membantu kita akhirnya mengenali kekuatan CSS.
HTML tidak hanya dibaca di layar komputer. Gambar yang Anda rancang dengan hati -hati dengan Photoshop mungkin tidak ditampilkan pada PDA, ponsel, dan pembaca layar. Tetapi halaman HTML yang terstruktur dengan baik dapat ditampilkan di mana saja, pada perangkat jaringan apa pun melalui berbagai definisi CSS.
Mulai berpikir
Pertama -tama, kita perlu mempelajari struktur apa itu, yang juga disebut oleh beberapa penulis. Istilah ini berarti bahwa Anda perlu menganalisis blok konten Anda dan tujuan setiap layanan konten, dan kemudian menetapkan struktur HTML yang sesuai berdasarkan tujuan konten ini.
Jika Anda duduk dan menganalisis dan merencanakan struktur halaman Anda dengan cermat, Anda mungkin mendapatkan beberapa bagian seperti ini:
Logo dan Nama Situs
Konten halaman utama
Navigasi Situs (Menu Utama)
Submenu
Kotak pencarian
Area fungsional (seperti keranjang belanja, kasir)
Footer (hak cipta dan pernyataan hukum yang relevan)
Kami biasanya menggunakan elemen div untuk mendefinisikan struktur ini, seperti ini:
＜ Div id = header ＞＜/div ＞
＜ Div id = konten ＞＜/div ＞
＜ Div id = GlobalNav ＞＜/Div ＞
＜ Div ID = Subnav ＞＜/Div ＞
＜ Div ID = Cari ＞＜/Div ＞
＜ Div id = shop ＞＜/div ＞
＜ Div id = footer ＞＜/div ＞
Ini bukan tata letak, ini adalah struktur. Ini adalah deskripsi semantik dari blok konten. Saat Anda memahami struktur Anda, Anda dapat menambahkan ID yang sesuai ke div. Wadah div dapat berisi blok konten atau sarang div lain. Blok konten dapat berisi elemen HTML - judul, paragraf, gambar, tabel, daftar, dll.
Menurut apa yang diceritakan di atas, Anda sudah tahu cara menyusun HTML, dan sekarang Anda dapat melakukan tata letak dan definisi gaya. Setiap blok konten dapat ditempatkan di mana saja di halaman, dan kemudian warna, font, perbatasan, latar belakang, atribut penyelarasan, dll. Dari blok ditentukan.
Menggunakan pemilih adalah hal yang luar biasa
Nama ID adalah sarana untuk mengontrol blok konten tertentu. Dengan meletakkan div pada blok konten ini dan menambahkan ID unik, Anda dapat menggunakan pemilih CSS untuk secara akurat menentukan penampilan setiap elemen halaman, termasuk judul, daftar, gambar, tautan atau paragraf, dll. Misalnya, jika Anda menulis aturan CSS untuk #Header, itu bisa sangat berbeda dari aturan gambar di #Content.
Contoh lain adalah: Anda dapat mendefinisikan gaya tautan di blok konten yang berbeda melalui aturan yang berbeda. Mirip dengan ini: #globalnav A: tautan atau #subnava: tautan atau #content A: tautan. Anda juga dapat mendefinisikan elemen yang sama di blok konten yang berbeda dengan gaya yang berbeda. Misalnya, gaya P di #Content dan #Footer masing -masing ditentukan oleh #Content P dan #FooterP. Secara struktural, halaman Anda terdiri dari gambar, tautan, daftar, paragraf, dll. Elemen -elemen ini sendiri tidak berpengaruh pada perangkat jaringan apa (PDA atau ponsel atau TV jaringan) ditampilkan. Mereka dapat didefinisikan sebagai penampilan apa pun.
Halaman HTML yang terstruktur dengan cermat sangat sederhana, dan setiap elemen digunakan untuk tujuan struktural. Saat Anda ingin mengindir paragraf, Anda tidak perlu menggunakan tag BlockQuote. Cukup gunakan t tag dan tambahkan aturan margin CSS ke P untuk mencapai tujuan lekukan. P adalah tag terstruktur, margin adalah atribut representasi, yang pertama milik HTML, dan yang terakhir milik CSS. (Ini adalah pemisahan fase struktur dan ekspresi.)
Hampir tidak ada tag yang mewakili atribut di halaman HTML yang terstruktur dengan baik. Kode ini sangat bersih dan ringkas. Misalnya, kode asli <tableWidth = 80% cellpadding = 3 border = 2align = left> sekarang hanya dapat menulis <able> di html, dan semua hal yang mengontrol kinerja ditulis ke dalam CSS. Dalam HTML terstruktur, tabel adalah tabel, bukan sesuatu yang lain (seperti yang digunakan untuk tata letak dan penentuan posisi).
Berlatihlah struktur diri Anda sendiri
Apa yang disebutkan di atas hanyalah struktur paling mendasar. Dalam aplikasi yang sebenarnya, Anda dapat menyesuaikan blok konten sesuai kebutuhan. Sering ada situasi div sarang, dan Anda akan melihat bahwa ada lapisan lain di lapisan wadah, dengan struktur yang mirip dengan ini:
＜ Div id = navcontainer ＞
＜ Div ID = GlobalNav ＞
＜ Ul ＞ Daftar ＜/ul ＞
＜/Div ＞
＜ Div ID = Subnav ＞
＜ UL ＞ DAFTAR LAIN ＜/UL ＞
＜/Div ＞
＜/Div ＞
Elemen Div Nested memungkinkan Anda untuk mendefinisikan lebih banyak aturan CSS untuk mengontrol kinerja, misalnya: Anda dapat memberikan aturan #NAVContainer untuk membuat daftar dengan benar, kemudian memberikan aturan #GlobalNav untuk membuat daftar itu tertinggal, dan memberi #Subnav daftar kinerja lain yang sama sekali berbeda.
Ganti metode tradisional dengan CSS
Daftar berikut akan membantu Anda mengganti metode tradisional dengan CSS:
Atribut HTML dan metode CSS yang sesuai
Atribut HTML
Deskripsi metode CSS
align = kiri
align = float kanan: kiri;
float: benar; Gunakan CSS untuk mengapung elemen apa pun: gambar, paragraf, div, judul, tabel, daftar, dll.
Saat Anda menggunakan atribut float, Anda harus menentukan lebar untuk elemen mengambang.
marginwidth = 0Leftmargin = 0 marginheight = 0 Topmargin = 0 margin: 0; Gunakan CSS, margin dapat diatur pada elemen apa pun, bukan hanya elemen tubuh, tetapi yang lebih penting, Anda dapat menentukan nilai margin masing -masing elemen atas, kanan, bawah dan kiri.
vlink =#333399 Link =#000000 Link =#3333ff A: Tautan#3FF;
A: Dikunjungi: #339;
A: Hover: #999;
A: Aktif: #00F;
Dalam HTML, warna tautan didefinisikan sebagai nilai atribut tubuh. Gaya tautan seluruh halaman adalah sama. Menggunakan pemilih CSS, gaya tautan dari berbagai bagian halaman bisa berbeda.
bgcolor = #ffffff latar belakang-warna: #fff; Di CSS, elemen apa pun dapat menentukan warna latar belakang, bukan hanya elemen tubuh dan meja.
BorderColor = #ffffff Border-color: #fff; Elemen apa pun dapat mengatur batas (boeder). Anda dapat mendefinisikan masing -masing, kanan, bawah, dan kiri.
Border = 3Cellspacing = 3 Batas-lebar: 3px; Menggunakan CSS, Anda dapat mendefinisikan perbatasan meja sebagai gaya terpadu, atau Anda dapat menentukan warna, ukuran dan gaya perbatasan atas, kanan, bawah dan kiri masing -masing.
Anda dapat menggunakan pemilih tabel, TD atau TH.
Jika Anda perlu menetapkan efek tanpa batas, Anda dapat menggunakan definisi CSS: border-collapse: runtuh;
＜ BR CLEAR = Kiri ＞
＜ BR CLEAR = kanan ＞
＜ BR CLEAR = semua ＞
Jelas: Kiri;
jelas: benar;
jelas: keduanya;
Banyak tata letak 2 kolom atau 3-kolom menggunakan atribut float untuk ditemukan. Jika Anda mendefinisikan warna latar belakang atau gambar latar belakang di lapisan mengambang, Anda dapat menggunakan atribut yang jelas.
Cellpadding = 3
VSpace = 3
hspace = 3 padding: 3px; Dengan CSS, elemen apa pun dapat mengatur atribut padding. Demikian pula, bantalan dapat mengatur masing -masing, kanan, bawah, dan kiri. padding transparan.
Align = Teks-Align Pusat: tengah;
margin-kanan: otomatis; margin-kiri: otomatis;
Teks-selaras hanya berlaku untuk teks.
Level blok seperti div dan p dapat dipusatkan secara horizontal melalui margin-kanan: otomatis; dan margin-kiri: otomatis;
Beberapa tips dan lingkungan kerja yang disesalkan
Karena dukungan CSS yang tidak lengkap oleh browser, kami kadang -kadang harus mengambil beberapa peretasan atau menciptakan lingkungan (solusi) untuk memungkinkan CSS mencapai efek yang sama dengan metode tradisional. Sebagai contoh, elemen-elemen tingkat blok terkadang membutuhkan penggunaan teknik pemusatan horizontal, teknik bug model kotak, dll. Semua tips ini dirinci dalam artikel Mollyholzschlag "Desain Web Terpadu: Strategi untuk CSS Hackmanagement CSS Jangka Panjang".
Situs sumber daya lain untuk trik CSS adalah posisi Big John dan Holly Bergevin adalah segalanya.
Memahami perilaku mengambang
"Berisi pelampung" Eric Meyer akan membantu Anda menguasai cara menggunakan tata letak atribut float. Elemen float terkadang perlu dibersihkan, dan membaca "Cara membersihkan pelampung tanpa markup struktural" akan sangat membantu.