CSS selektory. druhy selektorov

, z ktorých každá chcete nastaviť určitú farbu. Ako na to? Štandardné CSS selektory nie sú vhodné pre značky, ktoré označujú parametre pre všetky bloky naraz. Riešenie je jednoduché. Priradiť členmi triedy. Napríklad, prvý získal div class = 'červené', druhá - class = 'modrá', tretí - class = 'green'. Teraz môžu byť vybrané pomocou CSS tabuľky.

Syntax je nasledovná: Označuje bod ( ""), nasledovaný písať názov triedy. Ak chcete spravovať prvý jednotku, použite konštrukciu .red. Za druhé - .blue a tak ďalej.

Dôležité! Odporúča sa používať zmysluplné hodnoty atribútu class. To je považované za zlú formu používať prepis (napr krasiviy-BLOK) alebo náhodné kombinácie písmen / čísiel (ojfh834871). V tomto kóde, ste povinní sa zmiasť, nehovoriac o problémy, ktoré sa stretávajú tí, ktorí budú zapojení do projektu po vás. Najlepšou voľbou - používať akékoľvek metódy, ako je MHP.

Výhody - relatívne vysoká flexibilita.

Nevýhody - sa viac prvkov, môže byť jeden a ten istý triedy, čo znamená, že sa bude upravovať súčasne. Problém je riešený použitím metodológie, rovnako ako dedičstvo preprocesorov. Uistite sa, že dostať svoje ruky menej, Sass alebo nejaký iný Preprocessor, ktoré výrazne zjednoduší prácu.

volič ID

O tejto verzii mienky kódery a programátori sú nejednoznačné. CSS вообще не рекомендуют использовать ID, поскольку при неаккуратном применении они могут вызвать проблемы с наследованием. Niektoré CSS tutoriály neodporúčajú používanie ID, pretože nepresné žiadosti môžu spôsobiť problémy s dedičstvom. Avšak, mnohí odborníci sú aktívne usporiadať ich v celom pôdoryse. Vy rozhodujete. # »), затем имя блока. Syntax je nasledovná: znak libry ( "#"), potom názov bloku. #red. Napríklad #red.

отличается от класса по нескольким параметрам. ID sa líši od triedy v niekoľkých ohľadoch. ID. Po prvé, strana nemôže byť dva identické ID. Sú priradené jedinečný názov. Po druhé, ako selektor má vyššiu prioritu. red и укажете в таблицах CSS красный цвет фона, а затем назначите ему же id blue и укажете синий цвет, блок станет синим. To znamená, že ak zadáte triedu jednotky červenej a určiť v CSS tabuľkách červenú farbu pozadia, a priradiť k nemu rovnakým ID modrej a určiť farbu modrú, prístroj sa sfarbí do modra.

Výhody - môžete ovládať konkrétne prvok, ignoruje štýly tagov a tried.

ID и class. Nevýhody - ľahké sa stratiť vo veľkom počte ID a triedy.

Dôležité! ID вам, в общем-то, не нужны. Ak používate metodiky BEM (alebo jeho analóg), ID k vám, všeobecne nie sú potrebné. Táto technika zahŕňa použitie rozloženie unikátnych tried, ktoré oveľa pohodlnejšie.

univerzálny selektor

{}. Syntax: hviezdičkou značka ( "*"), a rovnátka, teda {*} ...

Používa pre priradenie určité atribúty raz všetky prvky stránky. Keď to môže byť užitočné? box-sizing: border-box. Napríklad ak chcete nastaviť na stránke vlastností box-sizing: border-box. div *{}. Nemôžu byť použité iba na riadenie všetky zložky dokumentu, ale aj ku kontrole všetky deti zadaného bloku, napríklad div * {}.

Výhody - môžete ovládať veľký počet položiek naraz.

Nevýhody - nie je dostatočne flexibilný možnosť. Okrem toho, použitie tohto voliča, v niektorých prípadoch spomaliť stránky práce.

porovnávaním

Aby bolo možné ovládať prvok s konkrétnym atribútom. Napríklad, máte niekoľko vstupných tagov s iným typom atribútu. Jeden z nich - text, druhý - heslo, tretí - počet. Samozrejme, môžete nastaviť každú triedu alebo ID, ale to nie je vždy pohodlné. CSS selektory atribútov, aby bolo možné určiť hodnoty pre niektoré značky s maximálnou presnosťou. Napríklad takto:

vstup [type = 'Text'] {}

Tento volič vyberie všetky atribúty s typom vstupného textu.

Tento nástroj je veľmi flexibilný a môže byť použitý s niektorou z tagov, v ktorých môžu byť atribúty. Ale to nie je všetko! The špecifikácia CSS má schopnosť kontrolovať prvky s ešte väčšie pohodlie!

Predstavte si, že vaša stránka má vstup s atribútom zástupný symbol = "Zadajte názov" a vstupný symbol = "Zadajte heslo". Môžu byť tiež vyberané na základe voliča! Ak to chcete urobiť, použite nasledujúcu štruktúru:

vstup [symbol = "Enter názov"] {} alebo vstup [symbol = "Zadať heslo"]

Snáď ešte flexibilnejšie práce s atribútmi. Povedzme, že máte celý rad značiek s podobnými atribúty názvu (napríklad "kaspickej" a "Caspian"). Ak chcete vybrať obidva, použite nasledujúce voľby:

[Názov * = "Kaspijsk"]

CSS vyberie všetky položky v názve, ktorá tam sú symboly "Kaspian", tj. E., a "Kaspian" a "Kaspian".

Môžete si tiež vybrať značky, ktoré začínajú s atribútmi určitý znak:

[Názov ^ = "znak, ktorý chcete"] {}

alebo ukončiť im:

[$ Title = "vpravo znak"] {}.

Výhody - maximálnu flexibilitu. Môžete si vybrať všetky existujúce prvky stránky, bez preberať s triedami.

Nevýhody - použité pomerne zriedka, iba v osobitných prípadoch. Mnoho webové dizajnérmi radšej metodiky, pretože trieda bod je jednoduchšie, ako usporiadať rad hranaté zátvorky a znaky "rovné". Navyše, tieto voliča nefungujú v programe Internet Explorer verzie 7 a pod. Avšak, ktorí sú teraz potrebujeme starý Internet Explorer?

pseudo-triedy selektory

Označuje pseudo-status elementu. Napríklad,: vise - čo sa stane s časti stránky, keď podržíte,: navštívil - navštívenú odkaz. To tiež zahŕňa prvky, ako sú: prvé dieťa a posledného dieťaťom.

Tento typ voliča je aktívne používa v modernom dispozičným riešením, pretože vďaka nej si môžete urobiť stránku "živý" bez použitia JavaScriptu. Napríklad chcete, aby sa ubezpečil, že keď nabehnete tlačidlom s triedou btn jeho farba zmenila. Ak to chcete, budeme používať nasledujúce štruktúru:

.btn: hover {

background-color: red;

}

Krása môže byť špecifikované v základných vlastností tlačidla prechod majetku, napríklad 0,5 s - v tomto prípade tlačidlo nebude červenať okamžite, a počas pol sekundy.

Cnosti - sú široko používané pre "oživenie" stránok. Jednoduché použitie.

Nevýhody - nie sú. To je naozaj šikovný nástroj. Avšak, neskúsených webové dizajnérmi môže stratiť v hojnosti pseudotried. Problém je vyriešený štúdium a prax.

pseudo-selektory

"Pseudo" - jedná sa o časti stránky, ktoré nie sú v HTML, ale napriek tomu môžu byť riadené. Ste nerozumeli? Je to oveľa jednoduchšie, než sa zdá. Napríklad chcete, aby prvé písmeno v reťazci veľké a červené, takže druhý malý a čierny text. Samozrejme, možno dospieť k záveru, že list v rozpätí s určitou triedou, ale je to dlhá a nudná. Je to oveľa jednoduchšie vybrať celý odsek a použiť pseudo :: first-letter. To dáva možnosť ovládať vzhľad prvého listu.

Existuje pomerne veľké množstvo pseudo-prvkov. Zoznam je do jedného článku nemá nádej na úspech. Môžete nájsť relevantné informácie vo vašom obľúbenom vyhľadávači.

Výhody - poskytujú flexibilitu prispôsobiť vzhľad stránky.

Nevýhody - nové pre nich sú často zamieňané. Mnoho výbery tento typ práce iba v niektorých prehliadačoch.

Aby sme to zhrnuli

Volič - výkonný nástroj pre riadenie toku dokumentov. Vďaka nemu si môžete vybrať každý jednotlivý komponent stránky (tam sú i len čiastočne). Uistite sa, že naučiť sa všetky dostupné možnosti, alebo dokonca je zapísať. To je obzvlášť dôležité, ak si vytvárať zložité stránky s moderným dizajnom a množstvom interaktívnych prvkov.