Klik di sini untuk kembali ke kolom tutorial Wulin.com HTML. Jika Anda ingin menelusuri tutorial CSS, silakan klik di sini.
Atas: Bahasa Markup - Tag Lite . Bab 10 Menerapkan CSS
Pada bagian pertama, fokus utama adalah pada contoh sintaks tag, dan kami juga mengeksplorasi cara menerapkan CSS pada tag untuk desain dan menentukan detail gaya. Di bab kedua, kita akan membahas beberapa cara untuk menerapkan CSS ke dokumen, situs web, atau bahkan satu tag. Selain itu, kami juga akan membahas cara menyembunyikan konten CSS dari versi browser sebelumnya sehingga kami dapat menggunakan teknik canggih tanpa mempengaruhi struktur tag yang dapat dibaca oleh semua browser dan perangkat.
Di unit ekstensi tip terakhir bab ini, kami akan memperkenalkan praktik beralih font, warna dan membuat banyak tema tanpa harus menulis skrip - mengganti lembar gaya. Bagaimana cara menerapkan CSS ke file?
Sekarang kita akan membahas empat cara berbeda untuk menerapkan CSS ke dokumen. Setiap metode memiliki kelebihan dan kekurangannya sendiri. Tergantung pada situasinya, keempat metode mungkin menjadi pilihan terbaik. Setiap metode yang ditunjukkan di sini menggunakan struktur Sintaks Transisi XHTML 1.0 Legal, tag <html> dan konfigurasi <head>.
Mari Mulailah Dengan Metode A. Metode A: Tag <tyle>
<! Doctype html public -// w3c // dtd xhtml 1.0 transisi // en
http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd>
<html xmlns = http: //www.w3.org/1999/xhtml xml: lang = en lang = en>
<head>
<meta http-equiv = konten-tipe konten = teks/html; Charset = UTF-8 />
<title> Menerapkan CSS </iteme>
<Tipe Gaya = Teks/CSS> <! [CDATA [... Pernyataan CSS diletakkan di sini ...
]]> </tyle></head>
Pendekatan ini juga menjadi stylesheet tertanam, memungkinkan Anda untuk menulis semua deklarasi CSS secara langsung ke dalam (x) file html, dan tag <yaya> terletak di halaman <head> dan dapat ditempatkan dalam gaya apa pun yang Anda butuhkan.
Teks/CSS yang ditentukan untuk atribut Type memastikan bahwa browser memahami bahasa gaya yang kita gunakan dan tidak dapat dihilangkan. Kami juga menggunakan sintaks anotasi CDATA yang direkomendasikan oleh W3C untuk menyembunyikan konten ini dari browser yang tidak dapat menangani aturan gaya (http://www.w3.org/tr/xhtml1/#h-4.8).
Salah satu kerugian utama dari menggunakan metode A adalah bahwa beberapa browser lama (terutama Internet Explorer 4.x dan Netscape 4.x) akan melakukan yang terbaik untuk menampilkan efek CSS yang ditentukan dalam tag <tyle>. Jika Anda menggunakan aturan tata letak dan penentuan posisi CSS canggih yang hanya mendukung browser terbaru, itu dapat menyebabkan masalah. Jika Anda menempatkan aturan CSS yang kompleks di tag <tyle>, itu dapat menyebabkan hasil yang membingungkan dan sulit membaca hasil untuk pengguna browser lama. Itu tidak bisa di -cache.
Kerugian lain dari lembar gaya tertanam adalah: jika ditempatkan di halaman, Anda harus mengunduhnya bersama setiap kali Anda membaca halaman. Sebaliknya, metode lain yang diberikan kemudian dapat memungkinkan lembar gaya diunduh hanya sekali, dan kemudian menggunakan cache browser secara langsung. Memodifikasinya beberapa kali.
Karena lembar gaya tertanam disimpan di halaman XHTML, jika gaya yang sama digunakan pada banyak halaman situs web, itu berarti gaya ini akan memiliki banyak salinan yang identik. Jika Anda perlu mengubah gaya ini, Anda harus memodifikasi semua halaman yang menggunakan gaya yang sama. Ingat! Memodifikasi banyak dokumen sekaligus akan menjadi tugas. Lebih mudah untuk berkembang
Berbicara tentang manfaatnya, saya menemukan bahwa ketika saya pertama kali mulai menulis dan menguji CSS, sangat nyaman untuk menulis semua aturan pada halaman yang saya gunakan untuk pengujian menggunakan Metode A. Ini memungkinkan saya untuk menempatkan tanda dan gaya dalam dokumen yang sama, yang nyaman untuk sering modifikasi. Setelah tes selesai, saya akan menerapkan CSS ke versi publik dengan cara yang berbeda. Mari kita lihat beberapa metode. Metode B: Lembar Gaya Eksternal
<! Doctype html public -// w3c // dtd xhtml 1.0 transisi // en
http://www.w3.org/tr/2000/rec-xhtml1-20000126/dtd/xhtml1-transitional.dtd>
<html xmlns = http: //www.w3.org/1999/xhtml xml: lang = en lang = en>
<head>
<meta http-equiv = konten-tipe konten = teks/html; Charset = UTF-8 />
<title> Menerapkan CSS </iteme>
<tautan rel = stylesheet type = text /css href = styles.css _fcksavedUrl = styles.css /></head>
Metode B menunjukkan praktik menghubungkan lembaran gaya eksternal: Letakkan semua konten deklarasi CSS dalam dokumen terpisah, dan kemudian merujuk kontennya menggunakan tag <nink> di (x) html <head>.
Kami menggunakan atribut HREF untuk menentukan lokasi dokumen. Atribut ini dapat berupa jalur relatif (seperti contoh di atas), atau jalur absolut (diisi dalam posisi http: // lengkap dari lembar gaya). Pada saat yang sama, perhatikan bahwa <link> adalah tag tunggal atau tag kosong, dan harus ditutup di / di akhir. Memisahkan dokumen = nyaman untuk pemeliharaan
Ada keuntungan yang jelas dari menempatkan semua aturan CSS dalam dokumen yang berbeda dari konten yang ditandai: yaitu, perubahan gaya apa pun yang dibuat untuk seluruh situs web dapat dimodifikasi untuk melengkapi file tanpa harus berulang kali memodifikasi pernyataan CSS untuk setiap halaman web seperti saat menggunakan metode A.
Tentu saja, ini sangat penting untuk situs web skala besar. Ratusan atau bahkan ribuan halaman dapat berbagi gaya yang sama dalam satu dokumen. Unduh sekali
Salah satu keuntungan tambahan dari menghubungkan lembar gaya eksternal adalah bahwa dokumen ini biasanya diunduh hanya sekali, dan browser akan menggunakan cache, yang dapat menghemat waktu pengunduhan yang diperlukan ketika berulang kali menjelajahi halaman yang sama atau halaman lain yang merujuk pada lembar gaya yang sama. Itu masih tidak bisa sepenuhnya disembunyikan.
Seperti Metode A, Metode B masih bisa tua dan hanya mendukung beberapa fungsi CSS untuk menafsirkan browser. Gaya apa pun yang dirancang untuk browser terbaru dapat menyebabkan kebingungan besar di browser yang tidak didukung.
Nah ... Ini adalah kedua kalinya saya menyebutkan masalah ini, metode selanjutnya harus menyelesaikannya, kan? Metode C: @import
<! Doctype html public -// w3c // dtd xhtml 1.0 transisi // en
http://www.w3.org/tr/2000/rec-xhtml1-20000126/dtd/xhtml1-transitional.dtd>
<html xmlns = http: //www.w3.org/1999/xhtml xml: lang = en lang = en>
<head>
<meta http-equiv = konten-tipe konten = teks/html; Charset = UTF-8 />
<title> Menerapkan CSS </iteme>
<Tipe Gaya = Teks/CSS> <! [CDATA [ @Import styles.css; ]]> </tyle></head>
Mirip dengan Metode B, menggunakan @import dapat mengimpor definisi CSS dari file eksternal dengan jalur relatif (seperti contoh di atas) atau jalur absolut.
Metode C memiliki keunggulan yang sama dengan menggunakan tag <nink>. Karena style sheet ditempatkan dalam dokumen eksternal, memodifikasi dan memperbarui satu dokumen dapat mengubah seluruh situs web dan dapat diselesaikan dengan mudah dan cepat. Lembar gaya eksternal akan di -cache oleh browser, menghemat waktu pengunduhan untuk mengimpor semua halaman dari lembar gaya yang sama.
Manfaat utama menggunakan Metode C adalah bahwa versi berikut dari Netscape 4.x tidak mendukung sintaks @import, sehingga akan menyembunyikan konten CSS yang direferensikan. Ini jelas merupakan trik yang berguna, karena kita dapat menulis sintaks CSS canggih untuk menangani detail desain seperti tata letak, sehingga browser terbaru yang dapat menangani menampilkannya, dan juga membuat browser lama mengabaikan sintaksis ini.
Masalah dengan Netscape 4.x adalah bahwa ia berpikir kemampuan dukungan CSS -nya sama baiknya dengan yang benar -benar didukung. Oleh karena itu, kecuali untuk Netscape 4.x, kita dapat membiarkan browser memutuskan apakah akan menampilkan efek yang benar sendiri.
Ini adalah poin utama saat merancang situs web berdasarkan desain standar. Cobalah untuk memisahkan kode tag terstruktur dari mode tampilan, dan berikan detail tata letak dan gaya lainnya untuk browser yang didukung. Browser lama menggunakan konten terstruktur yang dapat dengan mudah dibaca dan ditampilkan, tetapi tidak akan berurusan dengan aturan CSS canggih yang tersembunyi untuk mereka. Gaya terbuka dan gaya dekat.
Lihatlah Gambar 10-1 dan 10-2, dan bandingkan. Ini adalah situs web pribadi saya menggunakan CSS lengkap, dan kemudian matikan efek tampilan CSS (harus sangat dekat dengan efek tampilan browser lama). Struktur ketika tidak menggunakan CSS masih sangat jelas, dan masih mudah bagi semua orang untuk membaca dan menggunakan. Jika kami tidak menyembunyikan CSS yang diperlukan untuk tata letak tampilan, pengguna browser lama mungkin mendapatkan banyak konten yang sulit dibaca.
Gambar 10-1 Situs web pribadi saya, menggunakan CSS
Gambar 10-2: Hapus CSS pada halaman yang sama, dan browser lama dapat menampilkannya sebagai kombinasi metode B dan Metode C untuk menerapkan lembar gaya berganda.
Kadang -kadang dapat bermanfaat untuk memperkenalkan banyak lembar gaya ke dalam satu dokumen, misalnya, Anda dapat memasukkan semua aturan tata letak ke dalam satu dokumen dan pengaturan font ke dalam dokumen lain, yang dapat membuat pekerjaan mempertahankan sejumlah besar aturan lebih mudah untuk desain besar dan kompleks. Efek bunglon
Ketika saya membuat situs web untuk majalah Fast Company, saya ingin mengubah skema warna situs web setiap bulan sehingga dapat cocok dengan gambar sampul majalah saat ini. Untuk menyederhanakan pekerjaan modifikasi reguler, saya memasukkan semua aturan CSS terkait warna ke dalam satu dokumen dan memasukkan aturan lain yang tidak akan dimodifikasi setiap bulan ke dalam dokumen lain.
Bisa lebih mudah dan cepat untuk menutupi semua warna setiap bulan, tanpa harus perlahan menemukan konten yang perlu diubah dalam ratusan aturan lain yang membentuk desain. Selama dokumen ini dimodifikasi, warna seluruh situs web akan segera diubah. Bagaimana melakukannya
Untuk memperkenalkan beberapa lembar gaya dalam kombinasi dengan Metode B dan Metode C, metode ini adalah menggunakan tag <link> di halaman untuk merujuk dokumen utama CSS, sama seperti demonstrasi metode B, dan tautan ke styles.css.
Konten Styles.CSS hanya berisi beberapa aturan @import dan memperkenalkan file CSS lainnya yang diperlukan.
Misalnya, jika Anda ingin memperkenalkan tiga lembar gaya, satu untuk memproses tata letak, satu untuk mendefinisikan font, dan satu untuk mendefinisikan warna, maka konten gaya.css mungkin terlihat seperti ini:
/*Browser lama tidak akan menafsirkan aturan impor ini*/
@Import URL (Layout.css);
@Import URL (fonts.css);
@Import URL (Colors.css);
Dengan cara ini, tag <link> yang sama dapat digunakan di seluruh situs web, dan hanya file styles.css yang dirujuk. Dokumen ini dapat terus mengimpor lembar gaya lain dengan aturan @Import. Selama lembar gaya baru ditambahkan ke dokumen ini, ia dapat memainkan peran di seluruh situs web.
Ini membuatnya sangat mudah untuk memperbarui dan mengganti CSS. Misalnya, jika Anda tiba-tiba ingin memotong CSS menjadi 4 file di jalan, Anda hanya perlu mengubah aturan @import dari dokumen ini tanpa memodifikasi semua kode sumber tag XHTML.LO-FI dan gaya hi-fi
Ada trik lain untuk menyembunyikan CSS dari browser lama menggunakan aturan @Import metode C. Artinya, gunakan efek cascading CSS, dan gunakan metode A atau metode B untuk menyediakan browser lama dan terbaru untuk mendukung efek LO-FI, dan kemudian menggunakan @import untuk memberikan efek canggih untuk browser lainnya yang didukung.
Browser yang lebih lama hanya akan mendapatkan konten yang dapat mereka dukung, sementara browser yang lebih baru akan mendapatkan semua gaya yang ingin mereka gunakan.
Mari kita lihat seperti apa kode teknik ini:
<! Doctype html public -// w3c // dtd xhtml 1.0 transisi // en
http://www.w3.org/tr/2000/rec-xhtml1-20000126/dtd/xhtml1-transitional.dtd>
<html xmlns = http: //www.w3.org/1999/xhtml xml: lang = en lang = en>
<head>
<meta http-equiv = konten-tipe konten = teks/html; Charset = UTF-8 />
<title> Menerapkan CSS </iteme>
<tautan rel = stylesheet type = text /css href = lofi.css _fcksavedUrl = lofi.css /> <Tipe Gaya = Teks/CSS> @Import hifi.css; </tyle></head>
Di sini lofi.css harus berisi aturan CSS dasar, seperti warna tautan dan ukuran font; Sementara HiFi.CSS berisi aturan lanjutan, seperti tata letak, penentuan posisi, gambar latar belakang, dll.
Kami dapat mengirimkan gaya versi lo-fi dan hi-fi tanpa harus menulis skrip atau mengidentifikasi versi browser dengan cara apa pun di sisi server. Pesanan itu penting
Penting untuk menentukan urutan tag <link> dan <tyle> dalam kode sumber tag. Kaskade CSS mengacu pada prioritas aturan, yang ditentukan berdasarkan urutan kejadian.
Misalnya, karena sebagian besar browser terbaru mendukung kedua metode, semua lembar gaya akan diunduh dan semua gaya di dalamnya akan diterapkan. Pada saat ini, aturan gaya di HiFi.CSS akan mengesampingkan gaya yang ditentukan oleh lofi.css untuk tag yang sama. Apa alasannya? Karena dalam kode sumber tag, hifi.css muncul setelah lofi.css.
Browser yang lebih tua mengabaikan hifi.css karena aturan @import tidak didukung, sehingga mereka hanya menggunakan gaya yang ditentukan oleh lofi.css. Merangkul fitur kaskade
Manfaat cascadedity CSS dibawa dengan berbagai cara. Misalnya, misalkan seluruh situs web Anda berbagi CSS eksternal untuk tata letak, penentuan posisi, pengaturan font, warna, dll., Maka Anda harus menggunakan lembar gaya @import pada setiap halaman untuk menyembunyikan aturan ini untuk browser lama.
Jika ada halaman di situs web yang ingin berbagi pengaturan tata letak dan penentuan posisi, tetapi perlu menyesuaikan font atau warna. Di halaman ini (berbeda dari halaman lain di situs web), dokumen utama CSS masih dapat diperkenalkan. Setelah menyelesaikan referensi, kami akan merujuk ke dokumen CSS kedua yang mendefinisikan gaya khusus untuk halaman ini. Setiap aturan dalam file CSS kedua akan lebih disukai, menimpa aturan gaya yang ditentukan oleh file CSS pertama untuk label yang sama.
Mari kita lihat contohnya. Master.CSS berisi seluruh struktur situs web, font, dan aturan CSS lainnya, sedangkan di Custom.css, hanya dirujuk pada halaman tertentu, yang mencakup pengaturan gaya beberapa tag khusus.
<! Doctype html public -// w3c // dtd xhtml 1.0 transisi // en
http://www.w3.org/tr/2000/rec-xhtml1-20000126/dtd/xhtml1-transitional.dtd>
<html xmlns = http: //www.w3.org/1999/xhtml xml: lang = en lang = en>
<head>
<meta http-equiv = konten-tipe konten = teks/html; Charset = UTF-8 />
<title> Menerapkan CSS </iteme>
<Tipe Gaya = Teks/CSS> @Import Master.CSS; @Import custom.css; </tyle></head>
Karena Custom.CSS adalah yang kedua dalam kode sumber tag, gaya yang ditentukan untuk tag yang sama akan mengesampingkan apa yang diformulasikan dalam master.css.
Misalnya, misalkan di dalam main.css kita memerlukan tag <h1> untuk menggunakan font serif merah, dan <h2> untuk menggunakan font serif biru.
h1 {
Font-Family: Georgia, Serif;
Warna: Merah;
}
h2 {
Font-Family: Georgia, Serif;
Warna: Biru;
}
Pada halaman tertentu, kami hanya ingin mengubah pengaturan gaya tag <h1> dan ikuti gaya <h2>. Kemudian di Custom.css, kita hanya perlu mendeklarasikan gaya baru untuk <h1>.
h1 {
Font-Family: Verdana, Sans-Serif;
Warna: oranye;
}
Deklarasi ini akan mengesampingkan deklarasi di Master.CSS (karena Custom.CSS diperkenalkan nanti). Jika halaman pertama kali memperkenalkan master.css dan kemudian custom.css, tag <h1> akan menggunakan font oranye verdana, sedangkan <h2> masih font serif biru. Karena deklarasi selanjutnya di Master.CSS tidak ditimpa oleh Custom.css.
Fungsi cascading CSS adalah alat yang hebat untuk berbagi gaya umum, memungkinkan Anda untuk hanya mencakup aturan yang perlu dimodifikasi.
<h1 style = font-family: georgia, serif; Warna: Orange;> Ini adalah judul </h1>
Ini adalah metode aplikasi CSS keempat yang telah kami hubungi - Inline Styles. Hampir semua tag dapat ditambahkan dengan atribut gaya, memungkinkan Anda untuk secara langsung menerapkan aturan gaya CSS untuk tag, seperti contoh di atas.
Karena gaya inline adalah lapisan tertumpuk terendah, mereka mengesampingkan semua deklarasi dan aturan gaya eksternal yang dinyatakan dalam tag <tyle> dari <head>.
Ini adalah cara sederhana untuk menambahkan gaya di seluruh halaman, tetapi harus dibayar untuk menggunakannya. Gayanya terikat pada label
Jika Anda terlalu mengandalkan metode D saat membuat gaya untuk halaman, maka Anda tidak akan memisahkan konten dan menampilkan metode. Saat Anda kembali dan memodifikasi, Anda harus menandai kode sumber secara mendalam dan memasukkan CSS ke dalam file terpisah, yang akan lebih mudah dipertahankan.
Metode penyalahgunaan D tidak berbeda dengan menggunakan label efek tampilan seperti <font> untuk mencemari kode sumber. Detail desain ini harus selalu ditempatkan di tempat lain. Berhati -hatilah untuk digunakan
Pada kenyataannya, tentu saja, kadang -kadang kesempatan untuk menggunakan gaya inline adalah menyelamatkan hidup Anda ketika Anda perlu menambahkan gaya ke halaman, tetapi Anda tidak dapat mengakses file eksternal, atau Anda tidak dapat memodifikasi <head>, atau Anda dapat menggunakan gaya sementara dan Anda juga akan menggunakannya ketika Anda tidak bermaksud membaginya dengan tag lain.
Misalnya, jika ada halaman di situs web yang mempratinjau penjualan amal yang akan dihapus nanti dan Anda ingin merancang gaya unik untuk halaman ini, maka mungkin menanamkan aturan gaya ini ke dalam tag tanpa menambahkannya ke lembar gaya permanen.
Mari kita lakukan sekarang, tetapi ketahuilah bahwa gaya -gaya ini tidak dapat diubah dengan mudah, atau digunakan di seluruh halaman untuk seluruh situs web.
Sebelumnya Halaman 1 2 3 Halaman Berikutnya Baca teks lengkapnya