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 seberang dokumen, tetapi seringkali anda ingin menggunakan gaya pada hanya sesetengah unsur-unsur 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 ini adalah atribut global yang boleh digunakan untuk hampir setiap tag HTML. Ini bermakna sama ada anda adalah bahagian, perenggan, pautan, senarai atau mana-mana bahagian 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 dalam 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 "berjaga-jaga" itu. Sekiranya anda mahu menggunakan kelas itu merentasi pelbagai elemen HTML, anda hanya akan mengeluarkan elemen HTML dari permulaan panggilan gaya (pastikan anda meninggalkan tempoh ( .) di tempatnya), 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.
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 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 itu, didahului oleh simbol "#", ke atribut "href" pada 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 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 kita menandai halaman hari ini - kita menggunakan pemilihan kelas sebanyak mungkin dan hanya berpaling kepada ID apabila kita memerlukan atribut untuk bertindak bukan sahaja sebagai cangkuk untuk CSS tetapi juga sebagai pautan dalam halaman.Dan h2 ini juga akan menjadi merah.
Pemilih ID
Komplikasi Sifat ID
