Klik di sini untuk kembali ke kolom tutorial Wulin.com HTML.
Atas: Bahasa Markup - Bicara Tentang Daftar Lagi
Sumber Asli Bab 9 Tag Lite
Sebelumnya, kami terus menyebutkan bahwa konten terstruktur dapat mengklasifikasikan detail struktur dan desain dan merampingkan tag. Apa yang harus kita lakukan? Kita dapat menggunakan XHTML dan CSS yang memenuhi standar alih -alih tabel dan gambar untuk membuat tata letak yang kita butuhkan.
Saat menggunakan teknologi standar untuk membuat situs web (terutama situs web yang sangat bergantung pada CSS), kita sering mengembangkan kebiasaan buruk, yaitu menambahkan tag tambahan dan atribut kelas, dan teknologi tidak membutuhkannya sama sekali.
Dengan menggunakan pemilih keturunan di CSS, kita dapat menghilangkan properti yang tidak perlu <SEV>, <Pan> dan klasifikasi. Tag yang disederhanakan berarti bahwa halaman akan dibaca lebih cepat dan lebih mudah dipelihara. Dalam bab ini, kita akan membahas beberapa cara sederhana untuk menyelesaikan tugas ini. Bagaimana cara merampingkan tag saat membuat situs web dengan teknologi standar?
Tag yang disederhanakan adalah topik penting yang layak dibahas. Saat membuat situs web, salah satu manfaat besar yang dapat diperoleh dengan menulis dalam XHTML yang sah dan mengatur efek tampilan dengan CSS adalah ramping tag. Kode pendek mewakili kecepatan unduhan yang lebih cepat, yang jelas merupakan kunci bagi pengguna yang menggunakan dial-up 56k untuk mengakses internet. Kode pendek juga mewakili persyaratan ruang server dan mengurangi konsumsi bandwidth, yang dapat membuat Boss dan System Manager senang.
Masalahnya adalah bahwa hanya mengkonfirmasi bahwa halaman tersebut mematuhi spesifikasi standar W3C tidak berarti bahwa kode yang digunakan dalam konten akan dipersingkat. Tentu saja, Anda dapat menambahkan berbagai tag yang tidak diinginkan ke konten tag yang memenuhi standar. Ya, itu memang memenuhi standar, tetapi mungkin telah menambahkan banyak kode yang tidak perlu untuk membuatnya lebih mudah untuk merancang CSS.
Jangan takut! Ada beberapa tip di sini yang memungkinkan Anda merancang ringkas dan memiliki konten tag standar, tetapi juga mempertahankan kemampuan kontrol gaya CSS yang cukup. Lalu mari kita pelajari beberapa tips sederhana untuk merampingkan tag. Pemilih warisan
Di sini kita akan melihat dua cara untuk menandai bilah samping (termasuk informasi, tautan, dan hal -hal lain) di situs web pribadi. Stuff semua barang bagus ke dalam <div> dengan ID adalah sidebar sehingga dapat ditempatkan di jendela browser nanti (bagian kedua akan membahas tata letak CSS/tipe fungsionalitas). Metode A: Klasifikasi bahagia
<Div id = sidebar>
<H3 class = sideHeading> Tentang situs ini </h3>
<p> Ini adalah situs saya. </p>
<H3 class = sideHeading> Tautan saya </h3>
<ul class = sidelinks>
<li class = link> <a href = archives.html> arsip </a> </li>
<li class = link> <a href = about.html> tentang saya </a> </li>
</ul>
</div>
Saya telah melihat konten yang ditandai mirip dengan metode A di banyak situs web. Ketika perancang pertama kali menemukan kekuatan CSS, mudah untuk kewalahan dan menentukan kelas untuk setiap tag yang ingin membuat gaya khusus.
Dalam contoh sebelumnya, mungkin kami berpikir bahwa <H3> menentukan kelas = sideHeading untuk membantu mereka menentukan gaya yang berbeda dari judul lain dalam halaman; Menentukan kelas untuk <ul> dan <li> juga untuk alasan yang sama. Klasifikasi CSS
Saat menentukan gaya, misalkan kita ingin judul berubah oranye, gunakan font serif, dengan tepi abu -abu muda di bagian bawah, dan daftar sidelink yang tidak dipesan perlu menghapus simbol titik kecil dan mengubah item daftar menjadi tebal.
Konten CSS yang diperlukan dengan metode A akan terlihat seperti ini:
.sideHeading {
Font-Family: Georgia, Serif;
Warna: #C63;
Border-Bottom: 1px solid #CCC;
}
.sidelinks {
Daftar-gaya-tipe: tidak ada;
}
.link {
font-weight: tebal;
}
Kami dapat merujuk pada nama kelas (kelas) yang ditetapkan dalam tag untuk menentukan gaya khusus untuk tag ini, dan Anda bahkan dapat membayangkan bahwa bagian lain dari halaman ini diatur dengan cara ini: bilah navigasi, akhir halaman dan area konten, setiap tag berantakan untuk memiliki kontrol penuh atasnya.
Ya, itu berhasil, tetapi ada cara sederhana untuk menyimpan atribut kelas ini, sambil membuat CSS Anda lebih mudah dibaca dan lebih terorganisir. Kemudian lihat metode B. Metode B: Pilihan Alami
<Div id = sidebar>
<h3> tentang situs ini </h3>
<p> Ini adalah situs saya. </p>
<h3> Tautan saya </h3>
<ul>
<li> <a href = archives.html> arsip </a> </li>
<li> <a href = tentang.html> tentang saya </a> </li>
</ul>
</div>
Metode B pendek dan ringkas! Tapi tunggu, kemana kategorinya? Nah ... Anda akan segera menemukan bahwa kami tidak benar -benar membutuhkannya, terutama karena kami memasukkan tag -tag ini ke dalam hubungan <div> dengan nama yang unik (dalam hal ini, bilah sisi).
Di sinilah pemilih warisan digunakan. Kami hanya perlu secara langsung menentukan tag yang terletak di dalam bilah samping dengan nama label untuk menghapus properti klasifikasi yang tidak perlu ini. Tentukan CSS dengan konten sebelum dan sesudah hubungan.
Mari kita lihat gaya yang sama dengan metode A, tetapi kali ini kami menggunakan pemilih warisan untuk menentukan tag yang terletak di bilah samping.
#sideebar h3 {Font-Family: Georgia, Serif;
Warna: #C63;
Border-Bottom: 1px solid #CCC;
}
#sideebar ul {Daftar-gaya-tipe: tidak ada;
}
#sideebar li {font-weight: tebal;
}
Dengan mengacu pada ID #SideBar, Anda dapat menentukan gaya khusus untuk tag yang terkandung di dalamnya. Misalnya, hanya tag <h3> yang terletak di dalam <v ID = sidebar> yang akan mengatur aturan CSS di atas.
Metode menentukan gaya berdasarkan hubungan antara konten sebelum dan sesudah adalah kunci untuk memperpendek konten. Biasanya, setelah merancang struktur semantik untuk konten, tidak perlu menambahkan atribut klasifikasi ke label. Itu tidak hanya digunakan di bilah sisi
Kami hanya menampilkan satu paragraf halaman (yaitu, sidebar), tetapi pendekatan ini dapat diterapkan pada seluruh struktur halaman. Cukup membagi konten tag menjadi beberapa paragraf sesuai dengan logika (mungkin #nav, #content, #sideebar, #Footer), dan kemudian menggunakan pemilih warisan untuk membuat gaya khusus untuk tag dalam paragraf ini.
Misalnya, misalkan paragraf #Content dan #sideBar di dalam halaman menggunakan tag <h3>, dan Anda ingin mereka menggunakan font serif, namun, Anda ingin <h3> satu paragraf ditampilkan dalam warna ungu dan yang lainnya menjadi oranye.
Ini tidak memerlukan modifikasi tag apa pun, plus properti klasifikasi. Kami dapat menentukan aturan untuk semua tag <h3> untuk dibagikan dengan gaya global, dan kemudian menggunakan pemilih warisan untuk mengatur warna sesuai dengan posisi tag.
h3 {
Font-Family: Georgia, Serif; / * Semua h3s menjadi serif */
}
#content h3 {
Warna: ungu;
}
#sideebar h3 {
Warna: oranye;
}
Tentukan bahwa semua tag <h3> menggunakan font SENIF, dan warna harus dipilih untuk menggunakan ungu atau oranye sesuai dengan konteks konten. Pada saat ini, kita tidak perlu mengulangi aturan berbagi (dalam contoh ini, keluarga font), sehingga konten CSS dapat dipersingkat dan aturan duplikat dapat dicegah dari terjadi dalam berbagai pernyataan.
Kita tidak hanya dapat mengurangi ruang penandaan ekstra yang dibutuhkan oleh atribut kelas, tetapi struktur CSS juga menjadi lebih bermakna, membuatnya lebih mudah bagi kita untuk membaca kontennya dan mengaturnya sesuai dengan segmen halaman. Juga menjadi sangat sederhana untuk memodifikasi aturan tertentu, yang sangat jelas untuk pengaturan huruf besar dan kompleks, karena pada saat ini Anda mungkin memiliki ratusan aturan CSS pada saat yang sama.
Misalnya, dalam contoh ini, jika Anda menambahkan aturan berbagi untuk setiap deklarasi dan ingin mengganti semua <h3> dengan font sans serif nanti, Anda harus memodifikasi tiga tempat, dan tidak ada cara untuk melakukannya sekaligus. Semakin sedikit klasifikasi, pemeliharaan yang lebih baik
Selain mengurangi ruang kode sumber yang perlu digunakan, mengganti kategori yang berlebihan dengan pemilih warisan juga mewakili kemudahan penandaan di masa depan untuk diperluas.
Misalnya, mari kita asumsikan bahwa Anda ingin tautan di dalam sidebar menjadi merah alih -alih menggunakan biru seperti sisa halaman, jadi Anda membuat kelas merah yang menambah tag jangkar seperti ini:
<Div id = sidebar>
<h3> tentang situs ini </h3>
<p> Ini adalah situs saya. </p>
<h3> Tautan saya </h3>
<ul>
<li> <a href = archives.html class = red> arsip </a> </li>
<li> <a href = sekitar.html class = red> tentang saya </a> </li>
</ul>
</div>
Untuk mengubah tautan ini menjadi merah (dengan asumsi warna tautan preset tidak merah) membutuhkan CSS seperti ini:
A: link.red {
Warna: Merah;
}
Tindakan ini baik -baik saja dan dapat bekerja secara normal. Tetapi bagaimana jika Anda berubah pikiran di masa depan dan ingin mengubah tautan ini menjadi hijau? Atau lebih praktis, bos Anda sesekali mengatakan bahwa merah tahun ini sudah ketinggalan zaman, jadi ubah tautan sidebar ini menjadi hijau! Tidak masalah, Anda hanya perlu memodifikasi kelas merah di CSS dan menyelesaikannya, tetapi atribut kelas dalam konten penandaan masih merah. Jelas, ini tidak sepenuhnya sejalan dengan semantik, seperti menggunakan warna lain sebagai nama klasifikasi.
Ini bukan tempat yang baik untuk menggunakan efek tampilan sebagai nama klasifikasi, tetapi jika kami tidak menentukan klasifikasi sama sekali, kami dapat menyimpan banyak upaya (dan kode) dalam menangani klasifikasi, dan membuat semantik konten lebih masuk akal. Kami mungkin juga memilih tautan ke bilah samping ini dengan pemilih warisan dan menentukan gaya sesuai kebutuhan.
Konten tag persis sama dengan metode B, dan CSS yang diperlukan untuk mengatur tautan di bilah samping akan seperti ini:
#sideebar li A: link {Warna: Merah;
}
Pada dasarnya, ini berarti bahwa hanya tag jangkar yang menggunakan atribut HREF di tag <li> di dalam <v id = sidebar> juga harus ditampilkan dengan warna merah.
Sekarang, kami mempertahankan konten penandaan yang pendek dan fleksibel, dan pembaruan di masa depan hanya memerlukan CSS, tidak peduli apakah kami ingin tautan menjadi merah, hijau, berani, atau huruf miring.
Selanjutnya, mari kita lihat cara lain untuk merampingkan tag: Hilangkan tag <div> yang tidak perlu dan secara langsung menggunakan tag tingkat blok yang ada.
Sebelumnya Halaman 1 2 3 Halaman Berikutnya Baca teks lengkapnya