Kelas dan ID Membantu Mengembangkan CSS anda
Laman web bangunan di web hari ini memerlukan pemahaman yang mendalam tentang CSS (Cascading Style Sheets). Ini adalah arahan yang anda berikan sebuah laman web untuk menentukan bagaimana susun aturnya dalam tetingkap penyemak imbas. Anda menggunakan siri "gaya" pada dokumen HTML anda yang akan mewujudkan rupa dan nuansa laman web anda.
Terdapat banyak cara untuk menggunakan gaya-gaya tersebut di atas dokumen, tetapi seringkali anda mahu menggunakan gaya pada hanya beberapa elemen dalam dokumen, tetapi tidak semua contoh elemen itu.
Anda juga mungkin ingin mencipta gaya yang anda boleh memohon kepada beberapa elemen dalam dokumen, tanpa perlu mengulangi peraturan gaya untuk setiap contoh individu. Untuk mencapai gaya yang dikehendaki, anda akan menggunakan atribut kelas dan ID HTML. Atribut-atribut ini adalah sifat global yang boleh digunakan untuk hampir setiap tag HTML. Ini bermakna bahawa sama ada anda adalah bahagian, perenggan, pautan, senarai atau mana-mana potongan HTML lain dalam dokumen anda, anda boleh menghidupkan atribut kelas dan ID untuk membantu anda menyelesaikan tugas ini!
Pemilih Kelas
Pemilih kelas membolehkan anda menetapkan pelbagai gaya ke elemen atau tag yang sama dalam dokumen. Sebagai contoh, anda mungkin ingin mempunyai bahagian tertentu teks anda dipanggil dalam warna yang berbeza dari seluruh teks dalam dokumen itu. Bahagian-bahagian yang diketengahkan ini boleh menjadi "amaran" yang anda tetapkan pada halaman. Anda boleh menetapkan perenggan anda dengan kelas seperti ini:
p {color: # 0000ff; }
p.alert {color: # ff0000; }
Gaya ini akan menetapkan warna semua perenggan kepada biru (# 0000ff), tetapi mana-mana perenggan dengan atribut kelas "berjaga-jaga" akan sebaliknya dengan gaya merah (# ff0000). Ini kerana sifat kelas mempunyai kekhususan yang lebih tinggi daripada peraturan CSS yang pertama, yang hanya menggunakan pemilih tag.
Apabila bekerja dengan CSS, peraturan yang lebih spesifik akan mengatasi yang kurang spesifik. Jadi dalam contoh ini, peraturan yang lebih umum menetapkan warna semua perenggan, tetapi peraturan kedua yang lebih spesifik daripada mengesahkan tetapan itu hanya pada beberapa perenggan.
Berikut ialah cara ini boleh digunakan dalam beberapa markup HTML:
Perenggan ini akan dipaparkan dalam warna biru, yang merupakan lalai untuk halaman tersebut.
Perenggan ini juga akan berwarna biru.
Dan perenggan ini akan dipaparkan dengan warna merah kerana atribut kelas akan menimpa warna biru standard dari styling pemilih unsur.
Dalam contoh itu, gaya "p.alert" hanya akan digunakan pada elemen perenggan yang menggunakan kelas "peringatan" itu. Sekiranya anda mahu menggunakan kelas itu merentasi beberapa elemen HTML, anda hanya akan mengeluarkan elemen HTML dari awal panggilan gaya (hanya pastikan untuk meninggalkan tempoh (.) di tempat), seperti ini:
.alert {background-color: # ff0000;}
Kelas ini kini boleh didapati untuk mana-mana elemen yang memerlukannya. Mana-mana sekeping HTML anda yang mempunyai nilai atribut kelas "berjaga-jaga" kini akan mendapat gaya ini. Dalam HTML di bawah, kami mempunyai kedua-dua perenggan dan tahap tajuk 2 yang menggunakan kelas "waspada". Kedua-dua ini akan mempunyai warna latar belakang merah berdasarkan CSS yang baru kita tunjukkan.
Perenggan ini akan ditulis dalam warna merah.
Dan h2 ini juga akan menjadi merah.
Pada laman web hari ini, atribut kelas sering digunakan pada kebanyakan unsur kerana mereka lebih mudah untuk bekerja dari perspektif khusus yang ID. Anda akan mendapati halaman HTML paling terkini untuk diisi dengan atribut kelas, beberapa diulangi beberapa kali dalam dokumen dan yang lain yang hanya boleh muncul sekali.
Pemilih ID
Pemilih ID membolehkan anda memberi nama kepada gaya tertentu tanpa mengaitkannya dengan tag atau elemen HTML yang lain. Katakan anda mempunyai pembahagian dalam markup HTML anda yang mengandungi maklumat mengenai peristiwa.
Anda boleh memberi bahagian ini sebagai atribut ID "acara", dan kemudian jika anda ingin menggariskan pembahagian itu dengan sempadan hitam lebar 1-pixel anda menuliskan kod ID seperti ini:
#event {border: 1px solid # 000; }
Cabaran dengan pemilih ID adalah bahawa mereka tidak boleh diulang dalam dokumen HTML. Mereka mesti unik (anda boleh menggunakan ID yang sama pada berbilang halaman laman web anda, tetapi hanya sekali dalam setiap dokumen HTML individu). Jadi, jika anda mempunyai 3 peristiwa yang memerlukan semua sempadan ini, anda perlu memberi mereka atribut ID "event1", "event2" dan "event3" dan gaya masing-masing. Oleh itu, lebih mudah untuk menggunakan atribut kelas yang disebutkan di atas "peristiwa" dan gaya mereka sekaligus.
Cabaran lain dengan atribut ID ialah mereka mempunyai kekhususan yang lebih tinggi daripada sifat kelas. Ini bermakna bahawa jika anda perlu mempunyai CSS yang mengatasi gaya yang telah ditetapkan sebelum ini, sukar untuk melakukannya jika anda terlalu bergantung pada ID. Oleh sebab itu, banyak pemaju web telah berpindah dari menggunakan ID dalam markup mereka, walaupun mereka hanya berhasrat menggunakan nilai itu sekali, dan sebaliknya beralih kepada sifat kelas kurang khusus untuk hampir semua gaya.
Satu kawasan di mana atribut ID dimainkan adalah apabila anda ingin membuat halaman yang mempunyai pautan jangkau di halaman. Sebagai contoh, jika anda mempunyai laman web gaya parallax yang mengandungi semua kandungan pada satu halaman dengan pautan yang "melompat" ke pelbagai bahagian halaman tersebut. Ini dilakukan dengan menggunakan atribut ID dan pautan teks yang menggunakan pautan utama ini.
Anda hanya akan menambah nilai atribut tersebut, didahului oleh simbol #, ke atribut href pautan, seperti ini:
Ini adalah pautan
Apabila diklik atau disentuh, pautan ini akan melompat ke bahagian halaman yang mempunyai atribut ID ini. Jika tiada unsur pada halaman yang menggunakan nilai ID ini, pautan itu tidak akan dilakukan.
Ingat, jika anda ingin membuat pautan di halaman di tapak, penggunaan atribut ID diperlukan, tetapi anda masih boleh beralih ke kelas untuk tujuan gaya CSS umum. Inilah cara saya menandai halaman hari ini - saya menggunakan pemilih kelas sebanyak mungkin dan hanya berpaling kepada ID apabila saya memerlukan atribut untuk bertindak bukan sahaja sebagai cangkuk untuk CSS tetapi juga sebagai pautan dalam halaman.
Artikel asal oleh Jennifer Krynin. Disunting oleh Jeremy Girard pada 8/9/17