Apakah Anda mempelajari tata letak CSS? Apakah Anda masih belum bisa sepenuhnya menguasai tata letak CSS murni? Biasanya ada dua situasi yang menghambat pembelajaran Anda:
Kemungkinan pertama adalah Anda belum memahami prinsip pemrosesan CSS halaman. Sebelum mempertimbangkan kinerja laman secara keseluruhan, Anda harus terlebih dahulu mempertimbangkan semantik dan struktur konten, lalu menambahkan CSS untuk semantik dan struktur. Artikel ini akan memberi tahu Anda cara menyusun HTML.
Alasan lainnya adalah Anda bingung dengan properti lapisan presentasi yang sangat familiar (seperti cellpadding, hspace, align=left, dll.) dan tidak tahu pernyataan CSS apa yang akan diubah menjadi properti tersebut. Setelah Anda memecahkan masalah pertama dan mengetahui cara menyusun HTML Anda, saya akan memberi Anda daftar yang merinci CSS apa yang akan digunakan untuk menggantikan atribut presentasi asli.
HTML terstruktur
Saat pertama kali mempelajari produksi halaman web, kami selalu mempertimbangkan cara mendesainnya terlebih dahulu, dengan mempertimbangkan gambar, font, warna, dan rencana tata letak. Kemudian kita menggunakan Photoshop atau Fireworks untuk menggambarnya dan memotongnya menjadi gambar kecil. Terakhir, edit HTML untuk mengembalikan semua desain ke halaman.
Jika Anda ingin halaman HTML Anda ditata dengan CSS (ramah CSS), Anda harus kembali dan memulai dari awal. Jangan memikirkan "penampilan" terlebih dahulu, tetapi pikirkan dulu tentang semantik dan struktur konten halaman Anda.
Penampilan bukanlah hal yang terpenting. Halaman HTML yang terstruktur dengan baik dapat disajikan dalam tampilan apa pun, dan CSS Zen Garden adalah contoh klasiknya. CSS Zen Garden akhirnya membantu kita menyadari kekuatan CSS.
HTML tidak hanya untuk dibaca di layar komputer. Gambar Anda yang dirancang dengan cermat di Photoshop tidak boleh ditampilkan di PDA, ponsel, dan pembaca layar. Namun halaman HTML yang terstruktur dengan baik dapat ditampilkan di mana saja dan di perangkat jaringan apa pun melalui definisi CSS yang berbeda.
mulai berpikir
Mulailah dengan mempelajari apa itu struktur, yang oleh beberapa penulis disebut juga semantik. Maksud dari istilah ini adalah Anda perlu menganalisis blok konten Anda dan tujuan dari setiap konten, lalu membangun struktur HTML yang sesuai berdasarkan tujuan konten tersebut.
Jika Anda duduk dan menganalisis serta merencanakan struktur halaman dengan cermat, Anda mungkin akan mendapatkan hasil seperti ini:
Logo dan nama situs
Konten halaman utama
Navigasi Situs (Menu Utama)
submenu
kotak pencarian
Area fungsional (misalnya keranjang belanja, kasir)
Footer (hak cipta dan pemberitahuan hukum terkait)
Kami biasanya menggunakan elemen DIV untuk mendefinisikan struktur ini, mirip dengan ini:
<iddiv=header></div>
<div id=konten></div>
<div id=globalnav></div>
<iddiv=subnav></div>
<div id=penelusuran></div>
<div id=toko></div>
<div id=footer></div>
Bukan tata letaknya, tapi strukturnya. Ini adalah deskripsi semantik dari blok konten. Ketika Anda memahami struktur Anda, Anda dapat menambahkan ID yang sesuai ke DIV. Blok konten apa pun dapat ditampung dalam wadah DIV, dan DIV lain dapat disarangkan di dalamnya. Blok konten dapat berisi elemen HTML apa pun --- judul, paragraf, gambar, tabel, daftar, dll.
Berdasarkan penjelasan di atas, Anda sudah mengetahui cara menyusun HTML, dan sekarang Anda dapat menentukan tata letak dan gaya. Setiap blok konten dapat ditempatkan di mana saja pada halaman, dan warna, font, batas, latar belakang, properti perataan, dll. dari blok dapat ditentukan.
Menggunakan penyeleksi adalah hal yang luar biasa
Nama id adalah sarana untuk mengontrol blok konten tertentu. Dengan membungkus blok konten ini dengan DIV dan menambahkan id unik, Anda dapat menggunakan pemilih CSS untuk secara tepat menentukan tampilan setiap elemen halaman, termasuk judul, daftar, Gambar , tautan atau paragraf, dll. Misalnya, jika Anda menulis aturan CSS untuk #header, aturan tersebut bisa sangat berbeda dari aturan gambar di #content.
Contoh lain: Anda dapat menggunakan aturan berbeda untuk menentukan gaya tautan di blok konten berbeda. Sesuatu seperti ini: #globalnav a:link atau #subnav a:link atau #content a:link. Anda juga dapat menentukan gaya berbeda untuk elemen yang sama di blok konten berbeda. Misalnya, tentukan gaya p di #content dan #footer masing-masing melalui #content p dan #footer p. Secara struktural, halaman Anda terdiri dari gambar, tautan, daftar, paragraf, dll. Elemen-elemen ini sendiri tidak memengaruhi perangkat jaringan mana elemen tersebut ditampilkan (PDA, ponsel, atau TV Internet).
Halaman HTML yang terstruktur dengan cermat sangat sederhana, dan setiap elemen digunakan untuk tujuan struktural. Saat Anda ingin membuat indentasi paragraf, Anda tidak perlu menggunakan tag blockquote, cukup gunakan tag p dan tambahkan aturan margin CSS ke p untuk mencapai tujuan indentasi. p adalah tag terstruktur dan margin adalah atribut presentasi. (Ini adalah pemisahan struktur dan ekspresi.)
Halaman HTML yang terstruktur dengan baik hampir tidak memiliki tag atribut. Kode ini sangat bersih dan ringkas. Misalnya, kode asli <table width=80% cellpadding=3 border=2 align=left> sekarang hanya dapat menulis <table> dalam HTML, dan semua hal yang mengontrol kinerja ditulis dalam CSS sebuah tabel, bukan yang lainnya (seperti digunakan untuk tata letak dan pemosisian).
Berlatihlah menyusun diri sendiri
Di atas hanyalah struktur paling dasar. Dalam aplikasi sebenarnya, Anda dapat menyesuaikan blok konten sesuai kebutuhan Anda. Penyarangan DIV sering terjadi, dan Anda akan melihat bahwa ada lapisan lain di lapisan penampung, dengan struktur yang mirip dengan ini:
<div id=navcontainer>
<iddiv=nav global>
<ul>daftar</ul>
</div>
<div id=subnav>
<ul>daftar lain</ul>
</div>
</div>
Elemen div bertumpuk memungkinkan Anda menentukan lebih banyak aturan CSS untuk mengontrol presentasi. Misalnya, Anda dapat memberi #navcontainer aturan untuk memusatkan daftar ke kanan, memberi #globalnav aturan untuk memusatkan daftar ke kiri, dan memberi #subnav aturan lain. aturan untuk memusatkan daftar sepenuhnya.
Ganti metode tradisional dengan CSS
Daftar berikut akan membantu Anda mengganti metode tradisional dengan CSS:
Atribut HTML dan metode CSS yang sesuai
Deskripsi metode CSS atribut HTML
rata=kiri
sejajar=kanan melayang: kiri;
float: kanan; Gunakan CSS untuk mengapungkan elemen apa pun: gambar, paragraf, div, judul, tabel, daftar, dll.
Saat Anda menggunakan atribut float, Anda harus menentukan lebar elemen float.
marginwidth=0 leftmargin=0 marginheight=0 topmargin=0 margin: 0; Menggunakan CSS, margin dapat diatur pada elemen apa pun, bukan hanya elemen body. Lebih penting lagi, Anda dapat menentukan elemen atas, kanan, bawah, dan kiri secara terpisah.
vlink=#333399 alink=#000000 tautan=#3333FF a:tautan #3ff;
a:mengunjungi: #339;
a: arahkan kursor: #999;
a:aktif: #00f;
Dalam HTML, warna tautan didefinisikan sebagai nilai atribut isi. Gaya tautannya sama di seluruh halaman. Dengan menggunakan pemilih CSS, gaya tautan bisa berbeda di berbagai bagian laman.
bgcolor=#FFFFFF background-color: #fff; Dalam CSS, warna latar belakang dapat ditentukan untuk elemen apa pun, tidak hanya elemen badan dan tabel.
bordercolor=#FFFFFF border-color: #fff; Setiap elemen dapat mengatur batas (boeder).
perbatasan=3
cellpacing=3 border-width: 3px; Dengan menggunakan CSS, Anda dapat menentukan batas tabel sebagai gaya terpadu, atau Anda dapat menentukan warna, ukuran, dan gaya masing-masing batas atas, kanan, bawah, dan kiri.
Anda dapat menggunakan pemilih tabel, td atau th.
Jika Anda perlu menyetel efek tanpa batas, Anda dapat menggunakan definisi CSS: border-collapse: collaps;
<br jelas=kiri>
<br jelas=kanan>
<br jelas=semua>
jelas: kiri;
jelas: benar;
jelas: keduanya;
Banyak tata letak 2 kolom atau 3 kolom menggunakan atribut float untuk penentuan posisi. Jika Anda menentukan warna latar belakang atau gambar latar belakang di lapisan mengambang, Anda dapat menggunakan atribut clear.
bantalan sel=3
ruangv=3
hspace=3 padding: 3px; Menggunakan CSS, atribut padding dapat disetel pada elemen apa pun. Demikian pula, padding dapat disetel masing-masing di atas, kanan, bawah, dan kiri. bantalannya transparan.
align=tengah text-align: tengah;
margin-kanan: otomatis; margin-kiri: otomatis;
Perataan teks hanya berfungsi dengan teks.
Elemen tingkat blok seperti div dan p dapat dipusatkan secara horizontal menggunakan margin-right: auto; dan margin-left: auto;
Beberapa teknik dan lingkungan kerja yang disesalkan
Karena dukungan CSS yang tidak sempurna oleh browser, terkadang kita harus menerapkan beberapa trik (peretasan) atau membangun lingkungan (Solusi) agar CSS dapat mencapai efek yang sama seperti metode tradisional. Misalnya, elemen tingkat blok terkadang perlu menggunakan teknik pemusatan horizontal, teknik bug model kotak, dll. Semua teknik ini dirinci dalam artikel Molly Holzschlag Desain Web Terintegrasi: Strategi Manajemen Peretasan CSS Jangka Panjang.
Sumber lain tentang teknik CSS adalah "Position is Everything" oleh Big John dan Holly Bergevin.
Memahami perilaku mengambang
"Mengandung Float" Eric Meyer akan membantu Anda menguasai cara menggunakan atribut float untuk tata letak. Elemen float terkadang perlu dibersihkan. Membaca "Cara Menghapus Float Tanpa Markup Struktural" akan sangat membantu.