Selectors CSS. rupa selectors

, nu masing-masing rék nangtukeun hiji warna husus. Kumaha atuh eta? Baku CSS selectors henteu cocog pikeun tag, aranjeunna nunjukkeun parameter pikeun sakabéh blok sakaligus. Leyuran téh basajan. Napelkeun anggota kelas. Contona, kahiji narima kelas div = 'beureum', kadua - kelas = 'biru', katilu - kelas = 'héjo'. Ayeuna aranjeunna bisa dipilih maké tabel CSS.

sintaksis nyaéta saperti kieu: Nuduhkeun hiji titik ( "."), Disusul ku nulis nami kelas. Pikeun ngokolakeun Unit heula, nganggo konstruksi .red. Kadua - .blue jeung saterusna.

Penting! Disarankeun pikeun ngagunakeun nilai bermakna tina atribut kelas. Hal ieu dianggap formulir goréng ngagunakeun transliterasi (misalna krasiviy-blok) atawa kombinasi acak tina hurup / angka (ojfh834871). Dina kode ieu, anjeun dijilid mun meunang bingung, teu nyabit kasusah nu bakal nyanghareupan jelema nu bakal aktipitas proyék sanggeus anjeun. Pilihan pangalusna - ngagunakeun metodologi sagala, kayaning BEM.

Kaunggulan - kalenturan rélatif.

Kalemahan - nu sababaraha elemen bisa jadi salah jeung kelas anu sarua, nu hartina maranéhna bakal diédit sakaligus. masalah ieu direngsekeun ngagunakeun metodologi ogé pusaka preprocessors. Pastikeun pikeun meunang leungeun Anjeun kirang, sass atanapi sabagian preprocessor sejen, aranjeunna greatly simplify karya.

ID pamilihan

Ngeunaan versi ieu coders pamadegan jeung programer nu ambigu. CSS вообще не рекомендуют использовать ID, поскольку при неаккуратном применении они могут вызвать проблемы с наследованием. Sababaraha tutorials CSS ulah nyarankeun pamakéan ID, sabab dina aplikasi taliti aranjeunna bisa ngabalukarkeun masalah kalayan pusaka. Sanajan kitu, loba ahli anu aktip ngatur éta sapanjang perenah di. Mutuskeun. # »), затем имя блока. sintaksis nyaéta saperti kieu: tanda pound ( "#"), teras nami blok. #red. Contona, #red.

отличается от класса по нескольким параметрам. ID mah béda ti kelas di sababaraha cara. ID. Kahiji, kaca teu kaci dua idéntik ID. Éta nu ditugaskeun ngaran unik. Bréh, pamilihan kitu boga prioritas leuwih luhur. red и укажете в таблицах CSS красный цвет фона, а затем назначите ему же id blue и укажете синий цвет, блок станет синим. Ieu ngandung harti yén lamun tangtukeun kelas Unit beureum sarta tangtukeun dina tabel CSS beureum warna latar, lajeng napelkeun ka dinya teh id sarua biru sarta tangtukeun warna biru, Unit bakal ngahurungkeun bulao.

Kaunggulan - anjeun tiasa ngontrol unsur husus, ignoring gaya sahiji tags na kelas.

ID и class. Kalemahan - gampang musna di angka nu gede ngarupakeun ID na kelas.

Penting! ID вам, в общем-то, не нужны. Upami Anjeun keur make BEM metodologi (atawa analogues na), ID ka anjeun, sacara umum, teu diperlukeun. Téhnik ieu ngalibatkeun kelas unik perenah nu leuwih merenah.

pamilihan universal

{}. Rumpaka: Starlets tanda ( "*") sarta braces, nyaéta {*} ...

Dipaké pikeun napelkeun atribut tangtu sakali sakabeh elemen kaca. Nalika ieu tiasa mangpaat? box-sizing: border-box. Contona, upami anjeun hoyong pikeun ngeset sipat kaca kotak-sizing: wates-kotak. div *{}. teu ngan bisa dipaké pikeun ngatur sakabéh komponen dokumen, tapi ogé pikeun ngadalikeun sagala barudak tina blok dieusian, contona, div * {}.

Kaunggulan - anjeun tiasa ngontrol angka nu gede ngarupakeun barang dina hiji waktu.

Kontra - teu cukup pilihan fléksibel. Sajaba ti éta, pamakéan pamilihan ieu, dina sababaraha kasus ngalambatkeun turun kaca karya.

ku atribut

Jieun mungkin ngadalikeun unsur ku atribut husus. Contona, anjeun gaduh sababaraha tag input sareng jenis atribut béda. Salah sahijina - téks, kadua - sandi, nu katilu - jumlahna. Tangtu, Anjeun tiasa nyetel unggal kelas atawa ID, tapi teu salawasna merenah. selectors CSS tina atribut nyieun mungkin mun nangtukeun nilai keur tag tangtu kalawan precision maksimum. Contona, saperti kieu:

input [ 'téks' tipe =] {}

pamilihan ieu bakal milih sagala atribut jeung tipe téks input.

alat nu geus rada fléksibel tur bisa dipaké kalawan salah sahiji tags, nu meureun aya atribut. Tapi éta teu kabéh! Spesifikasi CSS mibanda kamampuhan pikeun ngadalikeun elemen kalawan genah malah langkung!

Ngabayangkeun eta kaca anjeun boga input jeung placeholder atribut = "Asupkeun ngaran" na input placeholder = "Asupkeun sandi". Éta ogé bisa dipilih maké pamilihan teh! Jang ngalampahkeun ieu, migunakeun struktur handap:

input [placeholder = "Asupkeun nami"] {} atanapi input [placeholder = "Asupkeun sandi éta"]

Sugan gawé leuwih fleksibel jeung atribut. Hayu urang nyebutkeun anjeun gaduh sababaraha tag jeung atribut sarupa judul (contona, "Kaspia" jeung "Kaspia"). Pikeun milih duanana, nganggo selections handap:

[Judul * = "Kaspiysk"]

CSS bakal milih sakabeh aitem dina judulna ngeunaan nu aya lambang "Kaspia", nyaéta. E., Jeung "Kaspia" jeung "Kaspia".

Anjeun oge bisa milih tag nu dimimitian ku atribut karakter tangtu:

[Judulna ^ = "karakter rék"] {}

atanapi nungtungan aranjeunna:

[Judul $ = "karakter katuhu"] {}.

Kaunggulan - kalenturan maksimum. Anjeun tiasa milih mana wae elemen halaman aya tanpa messing jeung kelas.

Kalemahan - dipaké rélatif jarang, ngan dina kasus husus. Loba web désainer resep kana metodologi, saprak kelas titik anu gampang ti ngatur sababaraha kurung pasagi sarta tanda "sarua". Sajaba ti éta, selectors ieu ulah dianggo di Explorer versi Internet 7 sarta handap. Sanajan kitu, anu ayeuna kudu di Internet Explorer heubeul?

selectors pseudo-kelas

Ngalambangkeun unsur pseudo-status. Contona ,: hover - naon kajadian ka bagéan kaca mun anjeun hover ,: dilongok - link dilongok. Ogé kaasup elemen kayaning: kahiji-anak na: tukang-anak.

jenis ieu pamilihan ieu aktip dipake dina perenah modern, sabab berkat dinya anjeun bisa nyieun kaca "hirup" tanpa pamakéan JavaScript. Contona, rék mastikeun yén mun anjeun hover leuwih tombol jeung kelas BTN warna na robah. Jang ngalampahkeun ieu, urang make struktur handap:

.btn: hover {

tukang-warna: beureum;

}

Beauty bisa dieusian dina sipat dasar tina tombol, harta transisi, contona, 0.5s - dina hal ieu, tombol moal Blush instan, sarta dina satengah detik.

Virtues - anu loba dipaké pikeun "revival" kaca. Gampang ngagunakeun.

Kalemahan - aranjeunna henteu. Ieu alat bener gunana. Sanajan kitu, inexperienced web désainer bisa musna dina kelimpahan pseudo-kelas. masalah ieu direngsekeun ulikan sarta praktek.

pseudo-selectors

"Pseudo" - ieu bagian tina kaca nu teu di HTML, tapi aranjeunna tetep bisa junun. Anjeun teu ngartos? Ieu loba gampang ti sigana. Contona, rék nyieun hurup kahiji dina senar éta badag tur beureum, ninggalkeun téks leutik tur hideung lianna. Tangtu, bisa disimpulkan yén hurup dina bentang ku kelas nu tangtu, tapi lila na pikaboseneun. Éta loba gampang pikeun milih sakabéh ayat na make pseudo :: mimitina-huruf. Méré kasempetan pikeun ngadalikeun penampilan hurup munggaran.

Aya rada angka nu gede ngarupakeun pseudo-elemen. Daptar aranjeunna dina artikel tunggal masih aya kacangcayaan sukses. Anjeun tiasa milarian informasi relevan di search engine favorit Anjeun.

Kaunggulan - nyadiakeun kalenturan kana ngaropea katingal kaca.

Kalemahan - anyar pikeun aranjeunna mindeng bingung. Loba selections tina tipe ieu karya ukur dina panyungsi tangtu.

pikeun nyimpulkeun

Pamilihan - alat anu kuat pikeun control aliran dokumen. Hatur nuhun ka anjeunna, anjeun tiasa milih unggal komponén tunggal kaca (aya malah ukur sawaréh). Pastikeun pikeun neuleuman sagala pilihan sadia, atawa malah nulis éta ka handap. Ieu hal penting lamun nyieun kaca kompléks nu mibanda desain modern jeung kavling elemen interaktif.