CSS selektorji in njihove vrste

Izbirniki CSS so posebna struktura CSS, ki vam omogoča, da izberete določen element v HTML kodi in ga slog. Vsaka od njih ima svojo specifičnost, torej lahko prekriva druge, bolj »šibke« lastnosti.

CSS selektor po oznaki in razredu

Najenostavnejši selektorji so po oznakah in po razredih. Izbirnik oznak je najpogostejši in izbere vse elemente z določeno oznako. V lastnostih lahko na primer zapišete naslednjo kodo CSS: “p {color: blue}”, kjer je “p” oznaka odstavka in lastnost “color: blue” označuje barvo besedila. Zato se bo besedilo v vseh odstavkih obarvalo modro. Izbirniki oznak lahko ločite z vejicami, potem pa ne boste morali dvakrat zapisati lastnosti.

Če je določenim odstavkom dodeljen razred, na primer »modro«, se lahko odziv selektorja CSS konfigurira še natančneje. Toda njegov vnos v lastnostih bo drugačen - pred imenom razreda se bo pojavila pika. To pomeni, da izberete vse odstavke, ki jim je dodeljen »modri« razred in jih obarvate modro, v lastnosti CSS pa zapišite naslednjo kodo: ».blue: {color: blue}«. Ta izbirnik je bolj specifičen od izbirnika CSS z oznako in je močnejši od njega, vendar je eden najpreprostejših. Obstaja bolj zapletena pravila, ki vam omogočajo izbiro manjših skupin elementov.

Značilnosti selektorjev po ID-ju

Izbiralci po id ali po id so bolj specifični kot po razredih in po atributih. To pomeni, da ko se uporabljajo v kaskadi, bodo "odtehtale" druge podobne selektorje. Identifikatorji prav tako pomagajo natančno izbrati določen element v kodi, vendar se njihova uporaba pri oblikovanju strani šteje za slabo prakso med spletnimi oblikovalci. Ta praksa je sprejemljiva le v zelo redkih primerih, na primer pri ustvarjanju drsnika na CSS. Dejstvo je, da je znotraj ene strani lahko samo en element s posebnim id. Zato se zaradi edinstvenosti izbirnika CSS z id lahko uporablja samo za en element. V tem primeru je veliko bolj logično uporabiti razrede, kot pa identifikatorje.

Različna mnenja o izbirniku id

Vendar pa obstaja tudi nasprotno mnenje, da identifikator pomaga identificirati ta del kode na strani, ki mora biti v enem izvodu. Hkrati pa, čeprav ga lahko zamenjajo selektorji razredov, jih je treba uporabiti za večje skupine elementov, v tistih krajih, kjer je potrebna natančnost, je bolje uporabiti id. Vsak pisalni stroj ima pravico razviti svoje osebno mnenje o tej zadevi in ​​napisati kodo v svojem slogu. Pri pisanju izbirnika na id pred njim se uporablja simbol "#". To pomeni, da bo vrstica kode videti takole: "#blue: {color: blue}". S takšnim zapisom bo element z identifikatorjem "#blue" obarvan modro.

Kaskadna uporaba

Če uporabljate CSS selektorje po id-ju v HTML-ju, lahko uporabite tudi kaskadno lastnost. Na primer, če morate v oznaki z identifikatorjem izbrati neko otroško oznako in spremeniti njene lastnosti, morate najprej vnesti ime identifikatorja z mrežo, nato otroško oznako in njene lastnosti. Takšni selektorji se imenujejo ugnezdeni. To pomeni, da bo vrstica kode videti takole: "#id p {color: blue}". Potem se znotraj starševskega elementa s tem identifikatorjem v odstavku podrejenega besedila barva besedila spremeni v modro.

Uporaba selektorjev za otroke

Druga možnost za uporabo kaskade za spremembo lastnosti podrejenih elementov je uporabljena, če morate izbrati samo določen del kode. Imenuje se tudi izbirnik potomcev. Če želite na primer izbrati odstavek v vrstici tabele, uporabite naslednji vnos izbirnika CSS: “ul li> p: {color: blue}”. Pri tem je vredno pozornosti nameniti dejstvu, da dlje kot je zapis, večja je verjetnost, da boste lahko spremenili določeno specifično lastnost elementa, ker postane bolj pomembna za kaskado. Elementi z nekaterimi drugimi lastnostmi izbirnika CSS na razredu, ki je nadrejeni, na primer ne bodo popolnoma spremenili svojih lastnosti. Samo določen del besedila znotraj seznama bo prebarvan.

Izbirnik sestrskih elementov

Še en zanimiv način uporabe kaskadnega so sosednji CSS selektorji. Zabeleženi so kot vsota selektorjev: “span + a {color blue}”. V tem primeru je sosed tisti, pod katerim obstaja še en, ki ustreza potrebnim parametrom. Če torej v kodi obstajajo trije elementi, potem lastnost ne bo uporabljena za prvo od njih, ker nima sosednjega in vseh naslednjih. To je posledica ikone za vsoto, ko so dodani naslednji selektorji, ne prejšnjih. Tak zapis pomaga zmanjšati kodo in ne napisati več CSS selektorjev za različne oznake, pri čemer uporabljajo iste lastnosti. Če je drugi element na seznamu prav tako nastavljen na razred, zapis pa je spremenjen v ".class + a {color blue}", se bo začelo odštevanje in bodo lastnosti spremenjene za naslednje elemente, ki ustrezajo pravilu, prva dva pa ostajata enaka.

Predpostavimo, da v naši kodi obstajajo tri enake oznake z različnimi razredi in morate izbrati vse elemente po določenem. V tem primeru uporaba samo selektorjev oznak CSS ne bo pomagala. V ta namen uporabite naslednji izbirnik: ".class ~ div". To izbere elemente z oznako div, ki sledi podanemu razredu. Če ne želimo izbrati samo elementov z oznako div, temveč vse poznejše, namesto oznake za znak tilde, moramo postaviti zvezdico - »*«. Takšen zapis pomeni, da morate izbrati vse, kar sledi po danem razredu. Na splošno lahko izberete vse elemente na strani, če kot izbirnik pustite le zvezdico.

Izbirniki atributov CSS

Recimo, da v naši kodi obstajajo elementi z nekaterimi atributi, vendar se vsi med seboj razlikujejo in so napisani z vezajem, zato moramo izbrati vse tiste, katerih ime razreda se začne z določeno besedo, na primer »selektor« in razredi so ločeni. znak "-". Kaj storiti v tem primeru? Izbirni vnos se začne s oglatimi oklepaji, kjer je ime atributa prvič zapisano, nato navpična poševnica, znaki “=” in “selektor”: “data- | = selektor”. Nato napišite želeno lastnost, ki jo želite spremeniti. Zato je izbran element s podanimi parametri. S spreminjanjem razredov lahko spremenite lastnosti določenih delov kode. Če imena razredov ne pišemo z vezajem, ampak z eno besedo, jih lahko tudi izbiramo, vendar z rahlo drugačnim vnosom. V tem primeru se navpična poševnica nadomesti s simbolom "^": "podatki ^ = izbirnik". Ta izbirnik izbere podniz z začetkom imena razreda.

Kako izbrati element z določenim koncem imena razreda

Zdaj bomo delovali drugače in izbrali dele kode ne na začetku opisa razreda, temveč z zadnjimi črkami v njegovem imenu. Za to potrebujemo ikono dolarja. Postavimo ga namesto potrditvenega polja in po znaku enakosti zapišemo konec imena razreda: “data $ = ctor”. Elementi s to kombinacijo črk bodo zdaj izbrali določene lastnosti in jih uporabili. Izberete lahko kateri koli atribut. Analizirajmo, kaj storiti, če moramo sredi besede najti element z nekaj kombinacijami črk. V tem primeru spreminjamo znak za dolar na zvezdico in za znakom enakosti zapišemo potrebne črke: »data * = ct«.

Psevdo-razredi - posebni selektorji

Za povezave se običajno uporabljajo posebni selektorji slogov CSS, ki prikazujejo njihove različne stanja: mirno, osredotočeno, aktivno, opravljeno - ti se imenujejo psevdo-razredi. Psevdo-razred za aktivno povezavo, na kateri kaže kazalec, je napisana takole: "a: aktivno". Poleg tega obstajajo nekatere lastnosti, najpogosteje se spremeni ozadje ali doda senca. Če dodate lastnost za povezavo in jo kliknete, spremeni barvo na določeno. Še en psevdo-razred - hover kaže, da je povezava že posredovana. Napisano je takole: "a: hover".

Značilnosti aktivnih in fokusnih stanj

Aktivno se pogosto zamenjuje z drugim stanjem - žariščem. Snema se takole: "a: fokus" in označuje aktivno stanje gumba pri delu s tipkovnico. Če uporabite tipko TAB, bo aktivna povezava poudarjena v posebni barvi. To lastnost je treba uporabiti, saj vsi uporabniki ne morejo uporabljati miške za krmarjenje po mestu. Nekateri imajo lahko slab vid ali druge zdravstvene omejitve, zato se premikajo po strani s pomočjo ključev ali posebnih naprav. Neupoštevanje stanja gumba v ospredju je velika pomanjkljivost takega parametra pri oblikovanju spletne strani kot dostopnosti in ima velik vpliv na njegovo prisotnost določene kategorije uporabnikov. Pri navadni navigaciji z miško postane povezava aktivna in v fokusu. Zato je pri oblikovanju elementov pomembno paziti na to.

Psevdoelementi

Psevdo-elementi vam omogočajo, da določite določene sloge, ne da bi jih definirali v sami strukturi HTML. Zapisani so takole: ime izbirnika, znak »::«, ime psevdoelementa. Najpogostejši elementi so "pred" in "po". Imajo lastnost "vsebino", ne morejo se uporabljati za notranje sloge. Za dodajanje vsebine po vsebini določenega elementa je potreben “After”. Kaj točno je treba vstaviti, je zapisano v lastnost "vsebina". Podobno psevdoelement »pred« doda vsebino pred vsebino elementa. Uporaba teh posebnih selektorjev vam omogoča, da zmanjšate kodo in ne pišete nove strukture za vsak del, če želite dodati določeno podrobnost na določeno mesto v vsebniku. Zelo pogosto se uporabljajo pri oblikovanju strani in dodajanju neke vrste dekorativnih elementov. Kombinacije vseh teh možnosti pomagajo ustvariti nenavadne učinke na strani in v veliki meri pomagajo oblikovalcu postavitve.