Artikel ini mengedepankan topik yang menarik dan penting yang dikenal sebagai Seleksi dan menindaklanjutinya dengan demonstrasi praktis pendukung. Petunjuk berikut akan dibahas dalam artikel ini,
- Styling Elemen HTML
- Pemilih CSS
- Pemilih Id CSS
- Pemilih Kelas CSS
- Pemilih Universal CSS
- Pemilih Grup CSS
Jadi mari kita mulai,
Styling Elemen HTML
Mari kita pahami apa itu CSS sebelum kita membahas pemilih CSS. Jika HTML dianggap sebagai kerangka, maka CSS (Cascading Style Sheets) seperti otot dan kulit. Otaknya adalah JavaScript. Jadi, untuk halaman web, gaya CSS pada dasarnya adalah tata letak dan desain. Langsung dari pemosisian gambar dan teks hingga ukuran font dan warna latar belakang, CSS mengontrol tampilan elemen HTML di browser.
Anda dapat memahami CSS dengan lebih baik, jika Anda memiliki pemahaman yang baik tentang apa itu pemilih CSS. Pemilih ini memungkinkan Anda menargetkan elemen HTML tertentu sehingga Anda dapat menerapkan gaya yang tepat padanya.
Mari kita pahami bagaimana kita dapat memilih elemen HTML,
Bagaimana Cara Memilih Elemen?
Misalnya, Anda ingin tajuk tertentu diberi gaya berbeda dari konten lainnya di laman web. Sekarang, dengan menggunakan pemilih CSS, Anda dapat menargetkan elemen HTML tersebut dengan gaya yang berbeda. Pemilih CSS membantu dalam menentukan elemen yang menerapkan serangkaian aturan CSS tertentu. Ada berbagai jenis pemilih CSS yang memungkinkan Anda memilih elemen yang ingin Anda gaya dengan tepat. Anda dapat memberi gaya umum pada seluruh halaman web, lalu menyesuaikan gaya Anda dengan elemen halaman lainnya.
Selektor adalah bagian dari aturan CSS, dan penyeleksi ini datang tepat sebelum deklarasi blok CSS. Untuk pemahaman yang lebih baik, Anda bisa merujuk ke gambar di bawah ini.
Pindah dengan artikel CSS Selectors
Pemilih CSS
Pemilih ini memungkinkan Anda memilih elemen HTML berdasarkan namanya.
Perhatikan kode di bawah ini:
p {text-align: center color: magenta}Gaya ini akan diterapkan di setiap paragraf.
Paragraf 1
jenis komentar di java
Paragraf 2
Kode ini akan memberi Anda keluaran berikut:
Gaya ini akan diterapkan di setiap paragraf
Paragraf 1
Paragraf 2
Pada kode di atas, elemen HTML telah rata tengah dan memiliki warna “magenta”.
Pindah dengan artikel CSS Selectors
Pemilih Id CSS
Dengan memilih atribut id dari elemen HTML, Anda dapat memilih elemen spesifik tersebut. Karena id unik untuk sebuah halaman, Anda dapat memilih elemen yang tepat dengan menggunakan atribut id.
Anda dapat memilih elemen HTML menggunakan '#' diikuti dengan id elemen tersebut. Misalnya, '#firstname' memilih elemen di mana id-nya adalah 'firstname'.
Perhatikan kode berikut:
# para1 {text-align: center color: orange}Halo Dunia
Paragraf ini tidak akan terpengaruh.
Output dari kode diatas adalah:
Halo Dunia
Paragraf ini tidak akan terpengaruh.
Seperti yang Anda lihat pada output di atas, dengan memasukkan id = ”para1 ″, kami dapat mengubah warna elemen itu menjadi oranye. Elemen lain yang tidak memiliki ini tetap tidak terpengaruh.
Pindah dengan artikel CSS Selectors
daftar tertaut dalam program c
Pemilih Kelas CSS
Dengan menggunakan pemilih kelas, Anda dapat memilih elemen HTML yang memiliki atribut kelas tertentu. Anda dapat menentukan pemilih menggunakan titik (simbol titik) diikuti dengan nama kelas. Misalnya, .intro memilih elemen dengan kelas 'intro'. Satu hal yang perlu diingat adalah Anda tidak pernah bisa memulai nama kelas dengan nomor.
Perhatikan kode berikut:
.center {text-align: center color: pink}Judul ini berwarna merah muda dan rata tengah.
Paragraf ini berwarna merah muda dan rata tengah.
Output dari kode diatas adalah:
Judul ini berwarna merah muda dan rata tengah.
Paragraf ini berwarna merah muda dan rata tengah.
Anda dapat menggunakan pemilih kelas CSS untuk elemen tertentu. Jika Anda hanya ingin satu elemen tertentu untuk diberi gaya, Anda dapat menggunakan nama elemen bersama dengan pemilih kelas.
Misalnya, perhatikan kode berikut:
p.center {text-align: center color: pink}Judul ini tidak terpengaruh
Paragraf ini berwarna merah muda dan rata tengah.
Output dari kode diatas adalah:
Judul ini tidak terpengaruh
Paragraf ini berwarna merah muda dan rata tengah.
Seperti yang Anda lihat di output, heading h2 tidak terpengaruh oleh style. Karena kami telah menetapkan 'p.center', hanya paragraf yang dipengaruhi oleh gaya.
Pindah dengan artikel Pemilih CSS ini,
Pemilih Universal CSS
Jenis pemilih ini dapat dianggap sebagai karakter wildcard yang memilih semua elemen di halaman. Ini memilih semua elemen di halaman, dan itu ditentukan oleh '*'.
Misalnya, perhatikan kode di bawah ini:
apa itu kopling lepas di jawa
* {color: darkgreen font-size: 30px}Ini adalah tes (font lebih kecil)
Ini adalah sebuah paragraf.
Output dari kode diatas adalah:
Halo Dunia
Ini adalah tes (font lebih kecil)
Ini adalah sebuah paragraf.
Seperti yang Anda lihat pada keluaran, semua elemen yang ditentukan menggunakan pemilih grup memiliki definisi gaya yang sama - mereka rata tengah dan warna font cyan.
Ini membawa kita ke bagian akhir artikel ini.
Lihat kami yang dilengkapi dengan pelatihan langsung yang dipimpin instruktur dan pengalaman proyek kehidupan nyata. Pelatihan ini membuat Anda mahir dalam keterampilan untuk bekerja dengan teknologi web back-end dan front-end. Ini mencakup pelatihan tentang Pengembangan Web, jQuery, Angular, NodeJS, ExpressJS, dan MongoDB.
Ada pertanyaan untuk kami? Harap sebutkan di bagian komentar artikel dan kami akan menghubungi Anda kembali.