Jazyk popisujúci vzhľad dokumentu CSS sa neustále vyvíja. V priebehu času, nielen jej výkon a funkčnosť rastie, ale tiež zvyšuje flexibilitu a jednoduchosť použitia.

CSS selektory

Začnime pochopiť. Otvorte ľubovoľný tutoriál CSS, aspoň jedna časť v nej bude venovaná typom výberu. To nie je prekvapujúce, pretože sú jedným z najpohodlnejších spôsobov správy obsahu stránky. S ich pomocou môžete komunikovať s absolútne všetkými prvkami HTML. Teraz existuje 7 druhov voličov:

pre tagy;

pre triedy;

pre ID;

univerzálne;

atribúty;

pre interakciu s pseudotriedami;

pre ovládanie pseudo-prvkov.

Syntax je jednoduchý. Ak chcete zistiť, ako používať výbery CSS, stačí prečítať o nich. Ktorá voľba je najlepšia pre kontrolu obsahu vo vašom prípade? Pokúsme sa to prísť na to.

Volič značiek

Toto je najjednoduchšia možnosť, ktorá nevyžaduje špeciálne znalosti pre písanie. Na správu značiek je potrebné použiť ich meno. Predpokladajme, že "záhlavie" vášho webu je zabalené do značky. Ak ho chcete používať v CSS, musíte použiť volič hlavičky {}. Výhody - jednoduchosť použitia, všestrannosť. Nevýhody - úplný nedostatok flexibility. Vo vyššie uvedenom príklade sa budú ihneď vyberať všetky hlavičky. A čo, ak potrebujete spravovať len jednu?

Výber tried

Najbežnejší variant. menovanýna správu značiek s atribútom triedy. Napríklad, vo vašom kóde sú tri bloky, z ktorých každá vyžaduje určitú farbu. Ako to urobiť? Štandardné voliče CSS nie sú vhodné pre tagy, zadávajú parametre pre všetky bloky naraz. Výstup je jednoduchý. Priraďte prvky triedy. Napríklad prvý div dostal class = 'červená', druhá - trieda = 'modrá', tretia - trieda = 'zelená'. Teraz ich môžete vybrať pomocou CSS.


Syntax je: bod bod ("."), Po ktorom napíšeme názov triedy. Ak chcete spravovať prvý blok, používame dizajn .red. Druhá je modrá a tak ďalej. Dôležité! Odporúča sa použiť jasné hodnoty atribútu triedy. Zlý tón je použitie prepisovania (napríklad krasiviy-blok) alebo náhodnej kombinácie písmen /čísel (ojfh834871). V takomto kóde budete musieť byť zmätený, nehovoriac o ťažkostiach, s ktorými budú musieť čeliť tí, ktorí sa po projekte zapojí do projektu. Najlepšou možnosťou je použiť niektoré metodiky, ako napríklad BEM. Výhody - pomerne vysoká flexibilita. Nevýhody - v niekoľkých prvkoch môže existovať jedna a tá istá trieda, čo znamená, že budú editované súčasne. Problém je vyriešený pomocou metodiky, ako aj dedičnosti preprocesorov. Uistite sa, že ovládate menej, sass alebo iný preprocesor, zjednodušia prácu.

Selector podľa ID

Pokiaľ ide o túto možnosť, názory projektantov a programátorov sú nejednoznačné. Niektoré CSS tutoriály vo všeobecnosti nedoporučujú používať ID, pretože nie sú starostlivo používanémôže spôsobiť problémy s dedičstvom. Mnohí špecialisti ich však aktívne umiestňujú počas označovania. Rozhodnite sa pre vás Syntax je: symbol mriežky ("#"), potom názov bloku. Napríklad #red.
Identifikácia sa odlišuje od triedy pre niekoľko parametrov. Po prvé, stránka nemôže mať dve identické ID. Sú im pridelené jedinečné mená. Po druhé, takýto selektor má vyššiu prioritu. To znamená, že ak zadáte triedu do červenej triedy a zadáte červenú farbu pozadia v tabuľkách CSS a potom ju priraďte modrej modrej a zadajte modrú farbu, blok bude modrý. Výhody - Môžete spravovať konkrétnu položku bez toho, aby ste dbali na štýl štítkov a tried. Nevýhody sa ľahko zamieňajú s veľkým počtom ID a tried. Dôležité! Ak používate metódu BEM (alebo jej protějšky), všeobecne nepotrebujete identifikátor. Táto technika rozloženia zahŕňa použitie unikátnych tried, čo je oveľa pohodlnejšie.

Univerzálny selektor

Syntax: hviezdička ("*") a kučeravé zátvorky, tj * {}. Používa sa na priradenie určitých atribútov všetkým prvkom stránky naraz. Kedy to môže byť potrebné? Napríklad, ak chcete nastaviť vlastnosť veľkosti priestoru stránky: okraj-box. Môže sa použiť nielen na správu všetkých komponentov dokumentu, ale aj na riadenie všetkých podradených prvkov bloku, napríklad div * {}. Výhody - Môžete spravovať veľké množstvo prvkov naraz. Nevýhody -nie je dostatočne flexibilný. Okrem toho použitie tohto voliča v niektorých prípadoch spomaľuje prácu stránky.

Podľa atribútov

Umožňuje ovládať položku s určitým atribútom. Napríklad máte niekoľko vstupných značiek s iným atribútom typu. Jeden z nich - text, druhé - heslo, tretie - číslo. Samozrejme, môžete dať každú triedu alebo ID, ale to nie je vždy výhodné. CSS voliči dávajú atribúty možnosť určiť hodnoty pre špecifické značky s maximálnou presnosťou. Napríklad, postupujte nasledovne: vstup [type = 'text'] {} Tento výber atribútov vyberie všetky typy textu. Nástroj je veľmi flexibilný, môže byť použitý s ľubovoľnými značkami, ktoré môžu mať atribúty. Ale to nie je všetko! Špecifikácia CSS má schopnosť riadiť prvky aj s veľkým komfortom!
Predstavte si, že vaša stránka má vstup s atribútom placeholder = "Zadajte meno" a zadajte zástupný symbol = "Zadajte heslo". Môžu byť tiež vybrané pomocou voliča! Pre tento účel sa používa nasledujúci návrh: vstup [placeholder = "Zadajte meno"] {} alebo zadajte [placeholder = "Zadajte heslo"] Flexibilnejšia práca s atribútmi. Predpokladajme napríklad, že máte viacero značiek s podobnými názvami atribútov (povedzme "Caspian" a "Caspian"). Ak chcete vybrať obe, použijeme nasledujúce voľby: [title * = "kaspiisk"] CSS vyberie všetky položky v názve obsahujúce "Kaspické" znaky, to znamená "Kaspické" a "Kaspické". Môžete tiež vybrať značky, ktorých atribúty začínajú určitými znakmi: [title ^ = "znak, ktorý chcete"] {} alebo končiť s nimi:[title $ = "požadovaný znak"] {}. Výhody - maximálna flexibilita. Môžete si vybrať ľubovoľné existujúce prvky stránky bez toho, aby ste s týmito triedami mali nejaké problémy. Nevýhody - používajú sa relatívne zriedka len v špecifických prípadoch. Mnohí plánovači dávajú prednosť metodológii, pretože je jednoduchšie špecifikovať triedu než usporiadať niekoľko hranatých zátvoriek a znamienok "jeden". Okrem toho tieto voliče nefungujú v programe Internet Explorer 7 a nižšie. Kto však teraz potrebuje starý program Internet Explorer?

Pseudotriedy

Pseudotrieda označuje stav prvku. Napríklad: vznášanie myši - čo sa stane s časťou stránky pri podržaní kurzora ,: navštívil - navštívil odkaz. Patria sem napríklad: prvé dieťa: posledné dieťa. Tento typ selektorov sa aktívne používa v aktuálnom rozložení, pretože umožňuje vytvárať stránku "naživo" bez použitia javascriptu. Napríklad sa chcete uistiť, že keď kliknete na tlačidlo s triedou btn, jeho farba sa zmení. Použite tento konštrukčný postup: .btn: Hover {background-color: red; } Pre krásu môžete špecifikovať v hlavných vlastnostiach tohto tlačidla vlastnosť prechodu, napríklad v 05 s - v tomto prípade tlačidlo nebude blikať okamžite, ale na pol sekundy. Výhody - sú aktívne používané na "oživenie" stránok. Jednoduché použitie. Nevýhody - nie sú. Je to naozaj šikovný nástroj. Avšak neskúsení spracovatelia môžu byť zamenení s veľkým počtom pseudotried. Problém je vyriešený tréningom a praxou.

Pseudoelementové selektory

"Pseudoelementy" sú takéČasti stránky, ktoré nie sú v jazyku HTML, ale môžete ich spravovať. Nič nerozumiete? Všetko je jednoduchšie, ako sa zdá. Napríklad chcete, aby prvé písmeno v riadku bolo veľké a červené, pričom druhý text malý a čierny. Samozrejme, môžete tento list zaradiť do určitej triedy, ale je to dlhé a nudné. Je oveľa jednoduchšie vybrať celý odsek a použiť pseudoelement :: prvé písmeno. Umožňuje ovládať vzhľad prvého písmena. Existuje pomerne veľký počet pseudo buniek. Vypísať ich ako jeden článok sa pravdepodobne neukáže. Relevantné informácie nájdete vo vašom obľúbenom vyhľadávacom nástroji. Výhody - umožňujú flexibilne upravovať vzhľad stránky. Nevýhody - nováčikovia sú často s nimi zmätení. Mnoho selektorov tohto typu funguje iba v určitých prehliadačoch.

Zhrňujme

Volič je mocný nástroj na riadenie toku dokumentu. Vďaka nemu si môžete vybrať úplne všetky komponenty stránky (dokonca aj existujúce len podmienene). Nezabudnite študovať všetky existujúce možnosti alebo aspoň ich napísať. Toto je obzvlášť dôležité, ak vytvárate komplexné stránky s moderným dizajnom a veľkým počtom interaktívnych prvkov.