pemilih tipe elemen css. Penyeleksi. Selector di CSS
Apa itu pemilih di css adalah deskripsi elemen atau grup elemen tersebut, yang menunjukkan kepada browser elemen mana yang harus dipilih untuk menerapkan gaya padanya. Mari kita lihat penyeleksi CSS dasar.
1) .X
.topic-title (warna latar: kuning; )Pemilih CSS berdasarkan kelas X. Perbedaan antara id dan kelas adalah beberapa elemen pada suatu halaman dapat memiliki kelas yang sama, dan id selalu unik. Kelas harus digunakan untuk menerapkan gaya yang sama ke beberapa elemen.
- Chrome
- Firefox
- safari
- Opera
2) #X
#content ( lebar: 960 piksel; margin: 0 otomatis; )Pemilih CSS berdasarkan id. Tanda pagar di depan pemilih CSS X memilih elemen yang id = X. Saat menata berdasarkan id, Anda harus selalu ingat bahwa itu harus unik - hanya boleh ada satu id seperti itu di halaman. Oleh karena itu, lebih baik menggunakan penyeleksi berdasarkan kelas, kombinasi kelas, atau nama tag. Namun, pemilih id sangat bagus untuk pengujian otomatis karena mereka memungkinkan Anda untuk segera berinteraksi dengan elemen yang tepat dan memastikan bahwa elemen tersebut adalah satu-satunya di halaman.
- Browser apa yang didukung:
- Chrome
- Firefox
- safari
- Opera
3) *
* (margin: 0; bantalan: 0; )Pemilih CSS untuk semua elemen. Simbol asterisk memilih semua elemen yang ada di halaman. Banyak pengembang menggunakannya untuk menghapus (zero out) margin (margin dan padding) dari semua elemen halaman. Namun, dalam praktiknya, lebih baik tidak melakukan ini karena pemilih CSS ini memuat browser cukup banyak dengan melakukan iterasi pada semua elemen pada halaman.
Simbol * juga dapat digunakan untuk memilih semua elemen turunan:
#header * ( batas: 5px abu-abu solid; )
Contoh ini memilih semua turunan (turunan) elemen dengan #header . Namun perlu diingat bahwa pemilih ini cukup berat untuk browser.
- Browser apa yang didukung:
- Chrome
- Firefox
- safari
- Opera
4) X
a ( warna: hijau; ) ol ( margin-kiri: 15px; )Pemilih jenis CSS. Bagaimana cara memilih semua elemen dengan tipe yang sama jika mereka tidak memiliki id atau kelas? Anda harus menggunakan pemilih CSS berdasarkan jenis elemen. Misalnya, untuk memilih semua daftar terurut pada suatu halaman, gunakan ol (...) seperti yang ditunjukkan di atas.
- Browser apa yang didukung:
- Chrome
- Firefox
- safari
- Opera
5) XY
li a ( berat font: tebal; dekorasi teks: tidak ada; )Pemilih anak CSS atau Pemilih anak CSS paling sering digunakan. Ini digunakan ketika diperlukan untuk memilih elemen tipe tertentu dari sekumpulan elemen anak. Misalnya, Anda perlu menyorot semua link yang ada di elemen li. Dalam hal ini, gunakan pemilih ini. Saat menggunakan rangkaian penyeleksi seperti itu, selalu tanyakan pada diri Anda apakah Anda dapat menggunakan rangkaian penyeleksi yang lebih pendek untuk memilih elemen tertentu.
- Browser apa yang didukung:
- Chrome
- Firefox
- safari
- Opera
6) X+Y
div + p ( keluarga font: "Helvetica Neue", Arial, sans-serif; ukuran font: 18 piksel; )Pemilih elemen yang berdekatan memilih hanya elemen bertipe Y yang muncul tepat setelah elemen X. Dalam hal ini, setiap paragraf yang mengikuti tepat setelah setiap elemen div akan menerima jenis dan ukuran font khusus.
- Browser apa yang didukung:
- IE7+
- Firefox
- Chrome
- safari
- Chrome
7) X > Y
#content > ul ( batas: 1px hijau solid; )Pemilih anak CSS. Perbedaan antara selector X Y dan X > Y adalah selector CSS yang dimaksud hanya akan memilih elemen turunan langsung (pilih hanya keturunan langsung). Misalnya:
- Daftar barang
- Keturunan dari elemen pertama daftar
- Daftar barang
- Daftar barang
Pemilih #content > ul CSS hanya akan memilih ul yang merupakan turunan langsung dari div dengan id="container" . Itu tidak akan memilih ul yang merupakan anak dari li pertama. Ini adalah pemilih CSS yang cukup cepat.
- Browser apa yang didukung:
- Chrome
- Firefox
- safari
- Opera
8) X ~ Y
ol ~ p ( margin-kiri: 10px; )Pemilih elemen saudara (sublingual). kurang ketat dari X + Y. Ini akan memilih tidak hanya yang pertama, tetapi juga semua elemen lain dari p setelah ol.
- Browser apa yang didukung:
- Chrome
- Firefox
- safari
- Opera
Kelas semu: tautan digunakan untuk memilih semua link yang belum diklik. Jika Anda perlu menerapkan gaya tertentu pada tautan yang sudah dikunjungi, maka ini digunakan kelas semu: dikunjungi.
- Browser apa yang didukung:
- Chrome
- Firefox
- safari
- Opera
10)X
a (warna: merah; )Pemilih CSS berdasarkan atribut. Dalam contoh ini, hanya link yang memiliki atribut title yang dipilih.
- Browser apa yang didukung:
- Chrome
- Firefox
- safari
- Opera
11) X
a (warna: kuning; )- Browser apa yang didukung:
- Chrome
- Firefox
- safari
- Opera
12)X
a ( warna: #dfc11f; )Tanda bintang berarti nilai yang Anda cari harus berada di suatu tempat di atribut (bagian mana pun dari atribut href). Dengan demikian, tautan dari https://www..stijit.akan dipilih juga.Warna emas akan diterapkan ke semua tautan yang dipilih.
- Browser apa yang didukung:
- Chrome
- Firefox
- safari
- Opera
13) X
a ( latar belakang: url(path/to/external/icon.png) tanpa pengulangan; padding-kiri: 15px; )Beberapa situs memiliki ikon panah kecil di samping tautan ke situs lain untuk menunjukkan bahwa itu adalah tautan eksternal. Karat “^” adalah karakter yang menunjukkan awal suatu baris. Jadi, untuk memilih semua tag yang hrefnya dimulai dengan http, Anda perlu menggunakan pemilih CSS dengan karat, seperti yang ditunjukkan pada contoh di atas.
- Browser apa yang didukung:
- Chrome
- Firefox
- safari
- Opera
14) X
a (warna: hijau; )Ini menggunakan ekspresi reguler dan simbol $ untuk menandai akhir baris. Dalam contoh ini, kami mencari semua tautan yang tertaut ke gambar dengan ekstensi .jpg.
- Browser apa yang didukung:
- Chrome
- Firefox
- safari
- Opera
15)X
a (warna: hijau; )Di sini kami melamar Pemilih CSS berdasarkan atribut khusus. Kami menambahkan atribut data-filetype kami sendiri ke setiap tautan:
tautan
Sekarang, dengan menggunakan pemilih CSS di atas, Anda dapat memilih semua tautan yang mengarah ke gambar dengan ekstensi apa pun.
- Browser apa yang didukung:
- Chrome
- Firefox
- safari
- Opera
16)X
Tanda gelombang (~) memungkinkan Anda memilih atribut tertentu dari daftar atribut yang dipisahkan spasi. Anda dapat menulis atribut data-info kami sendiri, di mana Anda dapat menentukan beberapa kata kunci yang dipisahkan dengan spasi. Dengan cara ini Anda dapat menentukan bahwa tautan tersebut bersifat eksternal dan mengarah ke suatu gambar.
tautan
Dengan menggunakan teknik ini, kita dapat memilih elemen dengan kombinasi atribut yang kita perlukan:
/* Pilih elemen yang atribut data-infonya berisi nilai eksternal */ a ( warna: hijau; ) /* Pilih elemen yang atribut data-infonya berisi nilai image */ a ( batas: 2px putus-putus hitam; )
- Browser apa yang didukung:
- Chrome
- Firefox
- safari
- Opera
17) X: dicentang
masukan: dicentang ( batas: 3px awal hitam; )Kelas semu ini hanya menyorot elemen seperti kotak centang atau tombol radio, dan hanya jika elemen tersebut sudah dalam status dicentang.
- Browser apa yang didukung:
- Chrome
- Firefox
- safari
- Opera
18) X: setelah
Kelas semu :before dan :after sangat berguna - mereka membuat konten sebelum dan sesudah elemen yang dipilih.
Clearfix:setelah ( konten: ""; tampilan: blok; hapus: keduanya; visibilitas: tersembunyi; ukuran font: 0; tinggi: 0; ) .clearfix ( *tampilan: blok sebaris; _tinggi: 1%; )
Di sini, menggunakan kelas semu :after, string kosong dibuat setelah blok dengan kelas .clearfix, setelah itu dihapus. Pendekatan ini digunakan ketika tidak mungkin menerapkan properti overflow: tersembunyi.
- Browser apa yang didukung:
- Chrome
- Firefox
- safari
- Opera
19) X: arahkan kursor
div:hover (warna latar: rgba(11,77,130,0.5); )Menerapkan gaya tertentu ke elemen saat kursor mouse diarahkan ke elemen tersebut. Versi Internet Explorer yang lebih lama hanya berlaku :hover ke tautan.
A:hover ( batas bawah: 1 piksel bertitik biru; )
- Browser apa yang didukung:
- IE6+ (Hanya berlaku untuk tautan di IE6)
- Chrome
- Firefox
- safari
- Opera
20) X:tidak(pemilih)
div:not(#content) ( warna: abu-abu; )Kelas semu bukan (negasi) berguna ketika, misalnya, semua div harus dipilih, kecuali yang memiliki id="content" .
Dengan prinsip yang sama, Anda dapat memilih semua elemen kecuali p:
*:tidak(p) ( warna: biru; )
- Browser apa yang didukung:
- Chrome
- Firefox
- safari
- Opera
21) X::pseudoElement
p::baris pertama ( font-weight: bold; font-size: 24px; )Elemen semu dapat digunakan untuk menerapkan gaya pada sub-elemen, seperti baris pertama paragraf atau huruf pertama dalam sebuah kata. Berlaku untuk elemen blok saja.
Memilih huruf pertama paragraf:
P::huruf pertama ( font-family: kursif; ukuran font: 30px; font-weight: bold; padding-right: 1px; )
Memilih baris pertama dalam sebuah paragraf:
P:baris pertama ( ukuran font: 28 piksel; berat font: tebal; )
- Browser apa yang didukung:
- Chrome
- Firefox
- safari
- Opera
22) X: anak pertama
ul li:anak pertama ( perbatasan-atas: tidak ada; )Anak pertama kelas semu hanya memilih anak pertama dari elemen induk. Sering digunakan untuk menghapus batas dari elemen pertama daftar. Kelas semu ini telah ada sejak saat itu css 1.
- Browser apa yang didukung:
- Chrome
- Firefox
- safari
- Opera 3.5+
- Android
23) X: anak terakhir
ul > li:anak terakhir ( batas bawah: tidak ada; )Anak terakhir kelas semu memilih anak terakhir dari elemen induk. Itu hanya muncul dari CSS 3.
- Browser apa yang didukung:
- IE9+ (IE8 mendukung anak pertama tetapi tidak mendukung anak terakhir. Microsoft (c))
- Chrome
- Firefox
- safari
- Opera 9.6+
- Android
24) X: anak tunggal
div p:anak tunggal ( warna: hijau; )Anak tunggal kelas semu memungkinkan Anda memilih elemen-elemen yang merupakan satu-satunya anak dari orang tuanya.
- Browser apa yang didukung:
- Chrome
- Firefox
- Safari 3.0+
- Opera 9.6+
- Android
25) X: anak ke-n (n)
li:anak ke-n(3) ( warna: hitam; )Memilih elemen anak dengan nomor yang ditentukan dalam parameter. pemilih anak ke-n mengambil bilangan bulat sebagai parameter, tetapi dihitung dari 1, mis. jika Anda ingin memilih item kedua dalam daftar, gunakan li:nth-child(2) . Semua kelas semu yang menggunakan anak ke-n hanya muncul dimulai dengan CSS 3.
- Browser apa yang didukung:
- Chrome
- Firefox 3.6+
- Safari 3.1+
- Opera 9.6+
- Android 2.1+
- iOS 2.0+
26) X: anak terakhir ke-n (n)
li: anak terakhir ke-n (2) ( warna: merah; )Jika Anda memiliki daftar elemen yang banyak di ul dan perlu memilih elemen ketiga dari akhir? Daripada menulis li:nth-child(109) , seseorang dapat menggunakan pemilih anak terakhir anak terakhir ke-n. Cara ini sama dengan cara sebelumnya, namun hitungan mundurnya dari akhir.
- Browser apa yang didukung:
- Chrome
- Firefox 3.6+
- Safari 3.1+
- Opera 9.6+
- Android 2.1+
- iOS 2.0+
27) X: tipe ke-n (n)
ul: tipe ke-n (3) ( batas: 1 piksel bertitik hitam; )Jika ada empat daftar tak berurutan pada halaman dan Anda hanya ingin memberi gaya pada daftar ketiga yang tidak memiliki id unik, Anda harus menggunakan tipe ke-n.
- Browser apa yang didukung:
- Chrome
- Firefox 3.6+
- Safari 3.1+
- Opera 9.6+
- Android 2.1+
- iOS 2.0+
28) X: tipe terakhir ke-n (n)
ul: tipe terakhir ke-n (3) ( batas: 2 piksel punggungan biru; )Kelas semu n-tipe terakhir(n) dirancang untuk memilih elemen ke-n dari tipe tertentu dari akhir.
- Browser apa yang didukung:
- Chrome
- Firefox 3.6+
- Safari 3.1+
- Opera 9.6+
- Android 2.1+
- iOS 2.0+
29) X: hanya tipe saja
li:hanya tipe ( font-weight: bold; )Hanya tipe kelas semu memilih elemen yang tidak memiliki tetangga dalam elemen induk. Misalnya, Anda dapat memilih semua ul yang hanya berisi satu li.
- Browser apa yang didukung:
- Chrome
- Firefox 3.5+
- Safari 3.1+
- Opera 9.6+
- Android 2.1+
- iOS 2.0+
30) X: tipe pertama
ul: tipe pertama > li: anak ke-n (3) ( gaya font: miring; )Tipe pertama kelas semu memilih elemen pertama dari tipe tertentu.
- Browser apa yang didukung:
- Chrome
- Firefox 3.5+
- Safari 3.1+
- Opera 9.5+
- Android 2.1+
- iOS 2.0+
Seperangkat aturan desain (yang pada gilirannya terdiri dari penyeleksi dengan blok iklan) diterapkan pada tag html tertentu, yang membentuk tampilan situs.
pemilih CSS- ini merupakan bagian integral dari aturan CSS yang bertanggung jawab untuk menentukan tag html tertentu yang akan diterapkan gaya desain yang ditentukan dalam aturan ini.
Jadi, berkat penyeleksi, browser memahami elemen kode halaman mana yang perlu menerapkan gaya desain tertentu.
Alat pemilihan elemen di CSS sangat fleksibel dan nyaman untuk memilih elemen kode individual dan seluruh kelompok elemen yang ditentukan oleh fitur tertentu.
Jenis penyeleksi css
Seperti kalimat dalam teks, penyeleksi CSS hadir dalam bentuk sederhana dan kompleks. Perbedaan di antara keduanya adalah bahwa yang kompleks diperoleh dengan menggabungkan beberapa yang sederhana dan digunakan untuk menyempurnakan desain akhir sumber daya.
Hanya tidak seperti teks biasa dalam cascading style sheet, urutan dan penyeleksi apa yang kita gunakan menjadi penting. Selain itu, tidak hanya elemen apa dan atas dasar apa yang kita pilih, tetapi juga kecepatan pemrosesan kode kita secara keseluruhan akan bergantung pada hal ini, tetapi kita akan membicarakan seluk-beluknya di artikel mendatang.
Penyeleksi sederhana
- Pemilih universal bertanggung jawab untuk memilih secara umum semua elemen dalam dokumen. Ditentukan oleh tanda bintang. Biasanya digunakan untuk mengatur ulang gaya browser yang diinstal di dalamnya secara default, sehingga setiap orang yang mengunjungi situs tidak kehilangan desainnya jika menggunakan beberapa pengaturan browser mereka sendiri atau berbagai plugin ...
* (beberapa gaya; )
- Type Selector - Memilih semua tag yang cocok dengan tipe tertentu. Ditentukan oleh nama tag. Digunakan untuk menetapkan aturan umum untuk desain dokumen, misalnya, mengatur font berbeda untuk judul dan teks biasa dokumen.
h1 ( beberapa gaya; )
- – akan menerapkan aturan css ke semua tag dengan nama kelas tertentu. Ditandai dengan titik dan nama kelas ditulis tepat setelahnya. Mungkin pemilih tata letak yang paling umum. Biasanya digunakan untuk mengatur gaya berbeda untuk tag dengan jenis yang sama tetapi fungsinya berbeda.
Kolom Kiri (beberapa gaya;)
- Pemilih ID digunakan untuk memberi gaya pada elemen unik pada halaman. Ditetapkan oleh hash diikuti dengan nama id. Ini digunakan jika Anda perlu menata gaya satu elemen halaman tertentu.
#alertButton ( beberapa gaya; )
- – memilih tag yang memiliki atribut tersebut. Ditentukan oleh nama atribut dalam tanda kurung siku. Ini dapat digunakan baik untuk merancang sekelompok tag yang hanya berisi atribut tertentu, dan untuk sekelompok tag yang berisi atribut tertentu dengan nilai tertentu.
[ mengetik] ( beberapa gaya; ) [ type= "kirim" ] ( beberapa gaya; ) masukan[ type= "kirim" ] ( beberapa gaya; )
Penyeleksi yang kompleks
- Pemilih keturunan – pemilihan elemen turunan (tag di dalam tag lain). Ditentukan dengan spasi (induk - spasi - anak).
div p ( beberapa gaya; )
- Pemilih anak - memilih elemen yang secara langsung bersarang di dalam elemen lain. Ditentukan dengan simbol “>” (parent-check-child). Elemen anak berbeda dari elemen anak karena elemen tersebut muncul langsung setelah induknya (tingkat sarang pertama). Sementara tag apa pun di dalam tag lain dianggap sebagai turunan, terlepas dari tingkat sarangnya.
Bilah Samping> ul ( beberapa gaya; )
- Pemilih elemen saudara - memilih tag yang muncul tepat setelah tag lain (tidak diapit di dalamnya, tetapi mengikuti). Ditetapkan oleh plus (elemen pertama - plus - elemen saudara). Jarang digunakan dalam praktik. Prasyarat untuk penerapannya adalah adanya induk yang sama untuk semua elemen dengan gabungan tanda "+".
h1+ p ( beberapa gaya; )
Kelas semu dan elemen semu
Klasifikasi pemilih CSS di atas hanya bergantung pada markup dokumen. Jika kita ingin mengubah tampilan elemen bergantung pada perubahan statusnya di halaman (misalnya, mengubah warna tombol saat mengarahkan kursor), maka kita dapat menggunakan pemilih kelas semu dan elemen semu.
- Ingatlah bahwa tidak seperti html, CSS peka huruf besar-kecil. Artinya, kelas .active dan .Active bukanlah hal yang sama! Mereka akan diterapkan ke elemen berbeda, jika ada, dalam dokumen.
- Beri nama penyeleksi untuk dekorasi sedemikian rupa sehingga Anda tidak bingung nanti: .leftColumn adalah nama yang bagus, .left tergantung situasi, tetapi tidak terlalu bagus, .llll adalah semacam sampah, Anda sendiri akan mengatakannya tanpa melihat kode dari mana kelas ini berasal?
- Izinkan saya mengingatkan Anda sekali lagi - jika hanya ada satu elemen di halaman, jadi semuanya unik, maka kami menggunakan id untuk itu, tetapi jika ada kemungkinan akan ada elemen lain yang serupa atau serupa di halaman, maka gunakan kelas untuk dekorasi.
Menyimpulkan
Selector di CSS- ini adalah alat yang ampuh untuk mengidentifikasi elemen tertentu dari suatu halaman atau sekelompok elemen yang disatukan oleh fitur tertentu untuk menerapkan gaya lebih lanjut pada elemen tersebut dari blok iklan yang terkait dengan pemilih ini.
Setelah menguasai prinsip umum interaksi dan membuat penyeleksi, Anda akan melupakan masalah desain dokumen web. Pengetahuan yang baik tentang penyeleksi dapat secara signifikan mengurangi waktu tata letak halaman html.
Topiknya, meskipun sekilas tampak sangat membingungkan, menjadi sederhana dan mudah dipahami setelah beberapa waktu praktik, didukung oleh teori kualitatif.
Bahasa tampilan dokumen CSS terus berkembang. Tidak hanya kekuatan dan fungsinya yang berkembang seiring berjalannya waktu, namun fleksibilitas dan kemudahan penggunaannya juga meningkat.
Mari kita mulai mencari tahu. Buka tutorial CSS apa pun, setidaknya satu bagian akan didedikasikan untuk jenis penyeleksi. Hal ini tidak mengherankan, karena ini adalah salah satu cara paling nyaman untuk mengelola konten halaman. Dengan bantuan mereka, Anda benar-benar dapat berinteraksi dengan elemen HTML apa pun. Sekarang ada 7 jenis penyeleksi:
- untuk tag;
- untuk kelas;
- untuk tanda pengenal;
- universal;
- atribut;
- untuk berinteraksi dengan kelas semu;
- untuk mengelola elemen semu.
Sintaksnya sederhana. Untuk mempelajari cara menggunakannya, cukup membaca tentangnya. Opsi mana yang lebih baik untuk dipilih untuk kontrol konten dalam kasus Anda? Mari kita coba mencari tahu.
Pemilih tag
Ini adalah opsi paling sederhana yang tidak memerlukan pengetahuan khusus untuk merekam. Untuk mengelola tag, Anda perlu menggunakan namanya. Anggaplah "header" situs Anda dibungkus dengan tag
Keuntungan - kemudahan penggunaan, keserbagunaan.
Kekurangan - kurangnya fleksibilitas. Pada contoh di atas, semua tag header akan dipilih sekaligus. Namun bagaimana jika Anda hanya perlu mengelola satu saja?
Pemilih kelas
Opsi paling umum. Dirancang untuk mengelola tag dengan atribut kelas. Misalkan Anda memiliki tiga blok dalam kode Anda
Sintaksnya adalah sebagai berikut: tentukan titik (“.”), setelah itu kita tuliskan nama kelasnya. Untuk mengelola blok pertama, kami menggunakan konstruksi .red. Yang kedua adalah .blue dan seterusnya.
Penting! Disarankan untuk menggunakan nilai yang bermakna untuk atribut kelas. Penggunaan transliterasi (misalnya krasiviy-blok) atau kombinasi huruf/angka acak (ojfh834871) dianggap tidak sopan. Dalam kode seperti itu, Anda pasti akan bingung, belum lagi kesulitan apa yang harus dihadapi oleh mereka yang akan menangani proyek setelah Anda. Pilihan terbaik adalah menggunakan beberapa jenis metodologi, seperti BEM.
Kelebihannya - fleksibilitas yang cukup tinggi.
Kekurangan - beberapa elemen dapat memiliki kelas yang sama, yang berarti akan diedit pada waktu yang sama. Masalahnya diselesaikan dengan menggunakan metodologi, serta pewarisan praprosesor. Pastikan untuk mempelajari lebih sedikit, sass atau preprocessor lainnya, mereka akan sangat menyederhanakan pekerjaan.
Pemilih berdasarkan ID
Mengenai opsi ini, pendapat perancang tata letak dan pemrogram tidak jelas. Beberapa buku tekscsstidak direkomendasikan sama sekalipengenal,karena dapat menimbulkan masalah pada warisan jika digunakan sembarangan. Namun, banyak ahli yang secara aktif menempatkannya di seluruh markup. Kamu putuskan. Sintaksnya adalah: simbol hash ("# ”), lalu nama bloknya. Misalnya,#merah.
PENGENALberbeda dari kelas dalam beberapa hal. Pertama, tidak ada dua hal yang sama dalam satu halaman.PENGENAL.Mereka diberi nama unik. Kedua, pemilih seperti itu memiliki prioritas lebih tinggi. Ini berarti jika Anda memberi blok itu sebuah kelasmerahdan tunjukkan dalam tabelcssmerah dan kemudian tetapkan ke hal yang samaidentitas birudan tentukan warna biru, blok akan berubah menjadi biru.
Keuntungan - Anda dapat mengontrol elemen tertentu tanpa memperhatikan gaya tag dan kelas.
Kekurangan - mudah bingung dalam jumlah banyakPENGENALDankelas.
Penting! Jika Anda menggunakan metodologi BEM (atau yang setara),PENGENALAnda biasanya tidak membutuhkannya. Teknik tata letak ini melibatkan penggunaan kelas unik, yang jauh lebih nyaman.
Pemilih universal
Sintaks: tanda asterisk (“*”) dan tanda kurung kurawal, yaitu *{}.
Digunakan untuk menetapkan atribut tertentu ke semua elemen halaman sekaligus. Kapan hal ini berguna? Misalnya, jika Anda ingin mengatur properti halamanukuran kotak: kotak perbatasan.Dapat digunakan tidak hanya untuk mengontrol semua komponen dokumen, tetapi juga untuk mengontrol semua elemen anak dari blok tertentu, misalnya,div*().
Keuntungannya - Anda dapat mengelola sejumlah besar elemen secara bersamaan.
Kekurangan - pilihan yang kurang fleksibel. Selain itu, penggunaan pemilih ini memperlambat halaman dalam beberapa kasus.
Berdasarkan atribut
Memberikan kemampuan untuk mengontrol elemen dengan atribut tertentu. Misalnya, Anda memiliki beberapa tag masukan dengan atribut tipe berbeda. Salah satunya adalah teks, yang kedua adalah kata sandi, yang ketiga adalah angka. Tentu saja, Anda dapat mengatur kelas atau ID untuk masing-masing kelas, tetapi hal ini tidak selalu nyaman. Pemilih CSS berdasarkan atribut memungkinkan Anda menentukan nilai untuk tag tertentu dengan presisi maksimum. Misalnya, seperti ini:
memasukkan()
Pemilih atribut ini akan memilih semua input dengan tipe teks.
Alat ini cukup fleksibel, dapat digunakan dengan tag apa pun yang memiliki atribut. Tapi itu belum semuanya! Spesifikasi CSS memiliki kemampuan untuk memanipulasi elemen dengan lebih nyaman!
Bayangkan laman Anda memiliki masukan dengan atribut placeholder = "Masukkan nama" dan masukan placeholder = "Masukkan kata sandi". Mereka juga dapat dipilih dengan pemilih! Untuk ini, konstruksi berikut digunakan:
masukan() atau masukan
Pekerjaan yang lebih fleksibel dengan atribut dimungkinkan. Katakanlah Anda memiliki beberapa tag dengan atribut judul serupa (misalnya "Caspian" dan "Caspian"). Untuk memilih keduanya, gunakan pemilih berikut:
CSS akan memilih semua elemen yang memiliki karakter "Caspian" di judulnya, yaitu "Caspian" dan "Caspian".
Anda juga dapat memilih tag yang atributnya dimulai dengan karakter tertentu:
atau diakhiri dengan:
{}.
Keuntungan - fleksibilitas maksimum. Anda dapat memilih elemen halaman apa pun yang ada tanpa mengutak-atik kelas.
Kekurangan - jarang digunakan, hanya dalam kasus tertentu. Banyak juru ketik lebih memilih metodologi, karena menentukan kelas bisa lebih mudah daripada menyusun tanda kelipatan dan sama dengan. Selain itu, penyeleksi ini tidak berfungsi di Internet Explorer versi 7 dan di bawahnya. Namun, siapa yang membutuhkan Internet Explorer lama sekarang?
Penyeleksi kelas semu
Kelas semu menunjukkan keadaan suatu elemen. Misalnya, :hover adalah apa yang terjadi pada bagian halaman ketika kursor diarahkan, :visited adalah link yang dikunjungi. Ini juga mencakup elemen seperti :anak pertama dan :anak terakhir.
Jenis pemilih ini aktif digunakan dalam tata letak modern, karena berkat itu Anda dapat membuat halaman "hidup" tanpa menggunakan JavaScript. Misalnya, Anda ingin membuatnya sehingga ketika Anda mengarahkan kursor ke tombol dengan kelas btn, warnanya berubah. Untuk melakukan ini, kami menggunakan konstruksi berikut:
Btn: arahkan (
Warna latar belakang: merah
Untuk kecantikan, Anda dapat menentukan properti transisi di properti utama tombol ini, misalnya, dalam 0,5 detik - dalam hal ini, tombol tidak akan langsung berubah menjadi merah, tetapi selama setengah detik.
Keuntungan - secara aktif digunakan untuk "merevitalisasi" halaman. Mudah digunakan.
Kekurangan - tidak ada. Ini benar-benar alat yang berguna. Namun, juru ketik yang tidak berpengalaman bisa menjadi bingung dengan banyaknya kelas semu. Masalahnya diselesaikan dengan belajar dan berlatih.
Pemilih elemen semu
"Elemen semu" adalah bagian halaman yang tidak ada dalam HTML, namun masih dapat dimanipulasi. Tidak mengerti apa-apa? Semuanya lebih mudah dari kelihatannya. Misalnya, Anda ingin membuat huruf pertama dari string menjadi besar dan berwarna merah, sedangkan teks lainnya dibiarkan kecil dan hitam. Tentu saja, surat ini bisa saja dilampirkan dalam rentang kelas tertentu, tetapi ini panjang dan membosankan. Jauh lebih mudah untuk memilih seluruh paragraf dan menggunakan elemen semu :: huruf pertama. Ini memungkinkan Anda mengontrol tampilan huruf pertama.
Ada beberapa elemen semu. Kecil kemungkinannya untuk mencantumkannya dalam kerangka satu artikel. Anda dapat menemukan informasi yang relevan di mesin pencari favorit Anda.
Keuntungannya - memungkinkan penyesuaian tampilan halaman secara fleksibel.
Kekurangan - pemula sering bingung melakukannya. Banyak penyeleksi jenis ini hanya berfungsi di browser tertentu.
Meringkaskan
Selector adalah alat yang ampuh untuk mengontrol aliran dokumen. Berkat itu, Anda benar-benar dapat memilih setiap komponen halaman (bahkan yang hanya ada secara kondisional). Pastikan untuk mempelajari semua pilihan yang tersedia, atau setidaknya menuliskannya. Hal ini sangat penting jika Anda membuat halaman kompleks dengan desain modern dan banyak elemen interaktif.
Cascading Style Sheets CSS (Cascading Style Sheets) adalah standar gaya yang dideklarasikan oleh konsorsium W3C. Ketentuan mengalir menunjukkan kemungkinan menggabungkan berbagai jenis gaya dan pewarisan gaya dengan tag dalam dari tag luar.
CSS adalah bahasa yang berisi sekumpulan properti untuk menentukan tampilan suatu dokumen. Spesifikasi CSS mendefinisikan properti dan bahasa deskriptif untuk berhubungan dengan elemen HTML.
CSS adalah sebuah abstraksi di mana tampilan dokumen Web ditentukan secara terpisah dari kontennya.
Beberapa gaya tidak didukung oleh semua browser. Namun, Anda dapat menetapkan gaya apa pun, karena gaya yang tidak didukung akan diabaikan begitu saja.
Anda mungkin juga memerlukan:
Ada tiga jenis gaya untuk menambahkan gaya ke dokumen.
Gaya dalaman
Gaya internal ditentukan oleh atribut gaya tag tertentu. Gaya internal hanya memengaruhi elemen yang ditentukan oleh tag tersebut. Metode ini sedikit berbeda dari HTML tradisional.
Contoh
Paragraf dengan teks biru
HASIL:
Paragraf dengan teks biru
Paragraf dengan teks merah
Anda tidak boleh menggunakan gaya internal terlalu sering, karena dokumen Web akan dipenuhi dengan kode dan tampilannya sulit diubah.
Gaya Global
Gaya CSS global ditempatkan dalam sebuah wadah , terletak bergantian di dalam wadah ... .
Atribut ketik = "teks/css", yang sebelumnya diperlukan untuk tag .........
Warna teks abu-abu di semua paragraf halaman web