Komputer, Programming
CSS, pseudo, pseudo: hover, anak, target
Ku ngagabungkeun HTML jeung CSS, anjeun tiasa ngontrol pancen sakabeh elemen kaca Wéb. Kalawan gaya anjeun bisa kalayan gampang ngarobah tampilan naon blok atawa garis. Mindeng coder kudu nedunan tugas leuwih kompleks - ngarobah tampilan ti unsur éta sorangan henteu, salaku bagian misah atawa kaayaan nu tangtu. Dina hal ieu, kana bantuan ti pseudo CSS.
Pseudo-beroperasi dina prinsipna sarua salaku kelas biasa di aksara, tapi fisik maranéhna teu nampilkeun dieu. Éta bisa dipilih dina dasar elemen teu kaasup kana informasi dokumen, nu moal pilih pamilihan biasa. Di dieu téh conto basajan: anjeun gaduh tombol beureum, sarta rék mun anjeun hover eta janten bulao. Téoritis, éta bisa dilaksanakeun dina JavaScript, tapi naha éta jadi susah? Leuwih merenah pikeun ngagunakeun : hover CSS. Kalayan pitulung na anjeun bisa masihan Unit sagala parameter anu bakal micu ukur nalika kursor mouse.
Daptar CSS pseudo-kelas anu rutin diropéa. Sugan, bari maca bahan ieu, sababaraha mucunghul anyar. Pikeun ngawitan, mertimbangkeun leuwih anu mecenghul dina spésifikasi CSS3.
: Nth-of-tipe
Anggap anjeun gaduh daftar nu Anjeun hoyong pake alik kelir, nyaéta garis kahiji nyaeta, contona, ditulis dina hurup beureum, sarta kadua - .. Bulao, beureum deui katilu, kaopat deui bulao. Saméméhna, anjeun kungsi nyieun kelas anyar. Perenah kaliwat ditambahkeun kana unggal unsur dina daptar kelas, lajeng robah penampilan maranéhanana di stylesheet nu. Teu teuing nyaman jeung cecemar perenah.
Kiwari sagalana geus gampang. Paké CSS pseudo-kelas: nth-of-jenis. Ieu bakal masihan kasempetan jang nampa epek visual nu dipikahoyong, tanpa ngarobah nanaon di aksara nu. prinsipna nyaeta basajan: maneh asupkeun pamilihan hiji, sarta dina kurung sanggeus nami nulis rumus atawa keyword anu bakal manggihan elemen nu diperlukeun. Contona ,: nth-of-jenis (malah) bakal sadayana malah elemen, sarta: nth-of-jenis (ganjil) - nu ganjil. Aya angka nu gede ngarupakeun rumus nu dipaké pikeun persis ngadalikeun. Kurung nunjukkeun jumlah mungkin - dina hal ieu gaya bisa dilarapkeun kana unsur anu indéks sarua jeung jumlah ieu.
: Nth-anak
Ieu CSS pseudo-kelas dina prinsip Peta téh sarupa jeung hiji saméméhna, tapi kawas gawéna éksklusif kalawan barudak tina item nu dipilih. Contona, upami anjeun hoyong make ka ngaropea penampilan nyaeta indungna
Pikeun ngadalikeun tepat rumus bisa dipaké. Aranjeunna cukup hésé pikeun pemula, tapi sia nu saeutik deeper kana rumpaka kumaha sagalana janten gampang. Rumusna nyaéta kieu: hiji b +, dimana a - mangrupakeun faktor, sarta b - offset. Contona, upami di parenthesis nunjukkeun n, anu pseudo-milih sakabeh elemen anak (sabab teu dieusian istilah tambahan dina bentuk a jeung b). Lamun tangtukeun n nu + 2, sakabeh elemen iwal kahiji (kusabab dina offset sarua jeung dua) bakal dipilih. Pangalusna sadaya, waktos ieu diajar dina kaperluan praktis. Ékspérimén jeung komponén anak na Rumusna béda.
: Tukang-anak
Sagalana geus basajan. anak CSS pseudo-kelas anu dipaké pikeun milih item nu tangtu. Ieu milih anak tukang sahiji komponén indungna. Ieu dipake rada mindeng, contona, pikeun milih baris panungtungan meja atawa cabut indentation ti blok panungtungan ulah mindahkeun -na pikeun garis hareup.
: Nth-tukang-anak
Ku prinsip operasi téh sarupa jeung nth-anak disebutkeun saméméhna, tapi tindakan dina arah nu lalawanan, nyaéta. E. Nalika migunakeun elemen baris mindahkeun ka luhur. Ieu mangpaat lamun kudu manggihan sababaraha item panungtungan.
Anjeun bisa mikir yén ieu pseudo-kelas na pseudo-elemen CSS gunana, saprak anjeun bisa neangan hirup dipigawé ogé ku kelas konvensional. Ieu teu jadi. : Nth-anak ,: nth- panungtungan-anak na analogs maranéhna pisan merenah lamun dipake dina proyék ageung - contona, dina kasus dimana block ngabogaan jumlah badag barudak. Sacara manual ngatur kelas panjang tur teuas.
kontrol pseudo nangtang
Naon lamun kudu ngarobah penampilan unsur dina kaayaan nu tangtu? hal ieu nyadiakeun CSS pseudo-klik, ngarah na meta lianna. Hayu urang nalungtik éta di jéntré.
: link
Ieu rujukan pseudo CSS, teu kabeh, tapi ngan maranéhanana anu henteu acan dibuka. Dina eta bisa nangtukeun gaya pikeun elemen , nu pamaké geus henteu acan lulus.
: dilongok
Hiji analog tina perwujudan saméméhna, nu ngan saukur ngatur Tumbu geus dilongok. Ngagabungkeun dua pseudo-kelas ieu, Anjeun bisa ngaluyukeun pintonan tag persis saperti nu peryogi. Catetan kitu, eta nagara anu diitung keur panyungsi husus sarta discharged sanggeus sajarah perlakuan.
The pseudo-kelas: target CSS
Salah sahiji pseudo-kelas paling narik, nu lamun dipaké pikeun extent sababaraha ngagantikeun pamakéan JavaScript. Éta nyandak kadali nu identifier nu kaasup dina alamat sakaligus kaca. Sumuhun, kahiji waktos hese ngarti. Coba mun parse conto.
Hayu urang nyebutkeun kami dina blok div kaca 3 kalawan id tangtu: id1, id2, id3. Urang ogé boga tilu Tumbu ka nilai saluyu href: # id1, # id2, # id3. Lamun anjeun klik link munggaran di alamat sakaligus kaca sanggeus link ka saluyu id bakal kaca sorangan.
The CSS pikeun sakabéh blok div dieusian tampilan sipat: taya, nyaeta, maranehna teu ditémbongkeun sacara standar. Kami nganggo target: div sareng masihan hiji tampilan sipat: block. Ayeuna, mun anjeun klik dina Tumbu kalawan tangtu href kana, blok jeung saluyu id bakal ditugaskeun pikeun tampilan: block, sarta ku kituna, aranjeunna bakal mimiti muncul dina kaca! Lamun anjeun klik link ka href = http: // loka / artikel / 319683 /% E2% 80% 9D # id1% E2% 80% 9D bakal meungpeuk jeung id1, jeung saterusna ..
Masih teu ngarti nanaon? Coba mun ékspérimén. Jieun perenah halaman sarta gaya ditétélakeun di luhur. Sababaraha menit engké anjeun gaduh inohong hébat sagalana kaluar.
Pseudo nu bisa dilarapkeun pikeun unsur naon
Kalolobaan pseudo-Tumbu luhur-digambarkeun diperlukeun pikeun pakasaban. Sanajan kitu, teu sakabeh elemen kedah . Sababaraha embodiments bisa dilarapkeun ka sagala bagian tina kaca tos rengse.
- : Aktip anu dipaké pikeun elemen gaya on mana pamaké clicks tombol kenca mouse;
- : Hover - CSS pikeun elemen nu pamaké hovers leuwih;
- : Fokus - pikeun maranéhanana bagéan kaca nu kiwari di fokus. pseudo-kelas ieu mindeng dipaké pikeun digawekeun ku bentuk. Contona, upami anjeun hoyong pilih pamaké Ngaran ajakan, nalika nganjang ka susunan nu kursor leuwih dinya tur dimimitian ku cara mencet karakter.
Inget yen: aktip wungkul valid dina waktu mencet. Langsung saatos nu terminasi sahiji tombol kenca mouse diatur kalayan bantuan gaya bakal ngaleungit na item bakal némbongan saolah eta dipintonkeun sacara standar. Dina kalolobaan kasus, ieu pseudo-kelas anu dipaké pikeun gawé bareng tombol. Anjeun tiasa nyetel poto eta pikeun angka nu gede ngarupakeun nagara. Contona, tombol standar téh bulao, hover - héjo, mencét - beureum, jsb ...
Tangtu, ngan pseudo-kelas anu pinuh dirojong ku panyungsi modérn. Contona, dina IE6 sarta 7 moal bisa migunakeun fokus, jeung hover tur aktif ukur pikeun digawé rujukan dina IE6. Muga, anjeun moal boga gawe nu ngabogaan panjalajah ieu, tapi lamun tetep kudu jengkar, nganggo komentar kondisional.
pseudo tambahan
Pilihan nu didaptarkeun di luhur daptar teu eureun di dinya. elemen Ngan kaasup bisa pulih berkat CSS modern (: sangkan) atawa ngan motong kaluar (: ditumpurkeun), ngan pindah ditandaan centang na radio (: dipariksa). Sakeudeung ngajelaskeun hiji pilihan deui sababaraha nu bisa Anjeun pake pikeun control langkung teleb penampilan eusi.
- : Ngan-anak - flushes mungkin panawaran gaya ka unsur nu hijina unsur anak;
- : Lang - digawekeun ku elemen anu dibikeun basa ngagunakeun atribut lang;
- : Akar - dipaké pikeun milih unsur root. Sasuai, hiji tag HTML misalna mangrupa ;
- : Moal - alat anu pohara kuat. Eta ngidinan Anjeun pikeun ngawatesan pamakéan gaya tangtu selectors. Di handap ieu conto: .blue-warna: henteu (bentang ). A pamilihan panawaran gaya ka sadaya elemen jeung kelas biru-warna, upami aranjeunna teu
.
Daptar lengkep tina pseudo-kelas teu bisa stretched on hiji kaca. Paling web désainer dipaké dina prakna, ngan sawatara di antarana, preferring ngokolakeun kaayaan kalawan JavaScript. Sumuhun, éta merenah, tapi aya sababaraha moments dimana hasilna leuwih éféktif baris dihontal gampang, ngagunakeun pseudo luyu.
Similar articles
Trending Now