Semua Yang Anda Perlu Tahu Mengenai Pemilih CSS



Artikel ini memaparkan topik yang menarik dan penting yang dikenali sebagai Pemilih CSS dan meneruskannya dengan demonstrasi praktikal yang menyokong.

Artikel ini memaparkan topik yang menarik dan penting yang dikenali sebagai Pemilih dan mengikutinya dengan demonstrasi praktikal yang menyokong. Petunjuk berikut akan dibahas dalam artikel ini,

Oleh itu, mari kita mulakan,





Menggayakan Elemen HTML

Mari kita fahami apa itu CSS sebelum kita sampai ke pemilih CSS. Sekiranya HTML dianggap sebagai kerangka, maka CSS (Cascading Style Sheets) adalah seperti otot dan kulit. Otak adalah JavaScript. Jadi, untuk laman web, gaya CSS pada asasnya adalah susun atur dan reka bentuk. Dari kedudukan gambar dan teks hingga ukuran fon dan warna latar, CSS mengawal bagaimana elemen HTML kelihatan dalam penyemak imbas.

Anda boleh memahami CSS dengan lebih baik, jika anda memahami apa yang menjadi pemilih CSS. Pemilih ini membolehkan anda menargetkan elemen HTML tertentu sehingga anda dapat menerapkan gaya yang tepat padanya.



Contoh - Pemilih CSS - EdurekaMari kita fahami bagaimana kita boleh memilih elemen HTML,

Bagaimana Memilih Elemen?

Katakanlah, anda mahu tajuk tertentu digayakan berbeza dengan isi kandungan lain di laman web. Sekarang, dengan menggunakan pemilih CSS, anda dapat menargetkan elemen HTML itu untuk menggayakannya secara berbeza. Pemilih CSS membantu dalam menentukan elemen-elemen yang mana satu set peraturan CSS berlaku. Terdapat pelbagai jenis pemilih CSS yang membolehkan anda memilih elemen yang ingin anda gayakan dengan tepat. Anda boleh memberi keseluruhan laman web gaya umum, dan kemudian berusaha untuk menggayakan elemen halaman yang lain.

cara memasang idea gerhana

Pemilih adalah sebahagian daripada peraturan CSS, dan pemilih ini datang sebelum pengisytiharan blok CSS. Untuk pemahaman yang lebih baik, anda boleh merujuk gambar di bawah.



Teruskan dengan artikel Pemilih CSS

Pemilih CSS

Pemilih ini membolehkan anda memilih elemen HTML dengan namanya.

Pertimbangkan kod di bawah:

p {text-align: warna tengah: magenta}

Gaya ini akan diterapkan pada setiap perenggan.

Perenggan 1

Perenggan 2

Kod ini akan memberi anda output berikut:

Gaya ini akan diterapkan pada setiap perenggan

Perenggan 1

Perenggan 2

Dalam kod di atas, elemen HTML telah sejajar tengah dan memiliki warna 'magenta'.

Teruskan dengan artikel Pemilih CSS

Pemilih Id CSS

Dengan memilih atribut id elemen HTML, anda boleh memilih elemen tertentu itu. Oleh kerana id itu unik untuk halaman, anda boleh memilih elemen yang tepat dengan menggunakan atribut id.

Anda boleh memilih elemen HTML menggunakan '#' diikuti dengan id elemen tersebut. Sebagai contoh, '#firstname' memilih elemen di mana idnya adalah 'nama pertama'.

Pertimbangkan kod berikut:

# para1 {text-align: warna tengah: oren}

Hai dunia

Perenggan ini tidak akan terjejas.

Keluaran untuk kod di atas adalah:

Hai dunia

cara membuat amaran dalam javascript

Perenggan ini tidak akan terjejas.

Seperti yang anda lihat dalam output di atas, dengan memasukkan id = ”para1 ″, kami dapat mengubah warna elemen tersebut menjadi oren. Unsur lain yang tidak mempunyai ini tetap tidak terjejas.

Teruskan dengan artikel Pemilih CSS

Pemilih Kelas CSS

Dengan menggunakan pemilih kelas, anda boleh memilih elemen HTML yang mempunyai atribut kelas tertentu. Anda boleh menentukan pemilih menggunakan titik (simbol berhenti penuh) diikuti dengan nama kelas. Sebagai contoh, .intro memilih elemen di mana kelas adalah 'intro'. Satu perkara yang perlu diingat ialah anda tidak boleh memulakan nama kelas dengan nombor.

Pertimbangkan kod berikut:

.center {text-align: center center: merah jambu}

Tajuk ini berwarna merah jambu dan sejajar tengah.

Perenggan ini berwarna merah jambu dan berpusat di tengah.



Keluaran kod di atas adalah:

Tajuk ini berwarna merah jambu dan sejajar tengah.



Perenggan ini berwarna merah jambu dan berpusat di tengah.

Anda boleh menggunakan pemilih kelas CSS untuk elemen tertentu. Sekiranya anda hanya mahu satu elemen tertentu digayakan, anda boleh menggunakan nama elemen bersama dengan pemilih kelas.



Contohnya, pertimbangkan kod berikut:

p.center {text-align: center center: merah jambu}

Tajuk ini tidak terjejas

Perenggan ini berwarna merah jambu dan berpusat di tengah.



Keluaran kod di atas adalah:



Tajuk ini tidak terjejas



Perenggan ini berwarna merah jambu dan berpusat di tengah.

Seperti yang anda lihat dalam output, h2 tajuk tidak dipengaruhi oleh gaya. Oleh kerana kami telah menentukan 'pusat pusat', hanya perenggan yang dipengaruhi oleh gaya.



Melanjutkan dengan artikel Pemilih CSS ini,

Pemilih Universal CSS

Pemilih jenis ini boleh dianggap sebagai watak wildcard yang memilih semua elemen dalam halaman. Ini memilih semua elemen di halaman, dan ditentukan oleh '*'.

Contohnya, pertimbangkan kod di bawah:

* {color: darkgreen-size font: 30px}

Ini adalah ujian (fon lebih kecil)

Ini adalah perenggan.

Keluaran untuk kod di atas adalah:

Hai dunia

Ini adalah ujian (fon lebih kecil)

Ini adalah perenggan.

Seperti yang anda lihat dalam output, semua elemen yang ditentukan menggunakan pemilih kumpulan mempunyai definisi gaya yang sama - mereka sejajar tengah dan warna font berwarna cyan.

cara memasang hadoop di ubuntu

Ini membawa kita ke akhir artikel ini.

Lihat kami yang dilengkapi dengan latihan langsung yang dipimpin oleh instruktur dan pengalaman projek kehidupan sebenar. Latihan ini menjadikan anda mahir dalam kemahiran bekerja dengan teknologi web back-end dan front-end. Ia merangkumi latihan mengenai Pembangunan Web, jQuery, Angular, NodeJS, ExpressJS, dan MongoDB.

Ada soalan untuk kami? Sila sebutkan di bahagian komen artikel dan kami akan menghubungi anda.