Nástroje na pomoc

Vyberte prvok CSS. Selektor CSS. Pseudotriedy štruktúry a polohy

CSS (Cascading Style Sheets)— šablóna so štýlmi, ktorá vám umožňuje pripojiť štýl (napríklad písma a farby) k štruktúrovaným dokumentom (napríklad dokumenty HTML a doplnky XML). Použite štýly CSS na vytváranie a zmenu štýlu prvkov webových stránok a používateľských rozhraní napísaných v HTML a XHTML a možno ich tiež skompilovať do akéhokoľvek typu dokumentu XML, vrátane XML, SVG a XUL. Posilnením štýlu prezentácie dokumentov namiesto dokumentov CSS uľahčí vytváranie webových stránok a údržbu webových stránok.

CSS podporuje šablóny štýlov špecifické pre médiá, aby autori mohli prispôsobiť prezentáciu svojich dokumentov vizuálnym prehliadačom, sluchovým zariadeniam, tlačiarňam, braillovským zariadeniam, črevným zariadeniam atď.

Kaskádové štýly popisujú pravidlá pre formátovanie prvkov na základe právomocí a prijateľných hodnôt týchto právomocí. Pri kožnom elemente si môžete vybrať medzi súborom autorít, iné autority do nového nebudú prúdiť.

Ohromujúci štýl a dve časti: selektorі v nemom úžase. V názvoch prvkov HTML sa nerozlišujú veľké a malé písmená, takže „h1“ funguje rovnako ako „H1“. Vlhkosť sa skladá z dvoch častí: hodnota jasu (napríklad farba) a hodnota jasu (šedá). Selektor informuje prehliadač, ktorý prvok sa formátuje a v bloku zmätku (kód v kučeravých ramenách) sú zobrazené príkazy, ktoré sa formátujú - autority a ich význam.

Ryža. 1. Štruktúra nevidiacich

Ak je ukazovací nástroj určený na pridanie len niekoľkých ovládacích prvkov potrebných na vykreslenie dokumentu HTML, sám sa kvalifikuje ako šablóna so štýlmi. V kombinácii s inými šablónami štýlov (jedným základným rysom CSS je zlúčenie šablón štýlov) je pravidlo dôležité pre zvyšok prezentácie dokumentu.

Typy kaskádových štýlov a ich špecifiká

1. Pozrite si predlohu

1.1. Externá šablóna štýlov

Externá šablóna štýlovє textový súbor s príponou .css, ktorý obsahuje sadu CSS štýlov prvkov. Súbor sa vytvorí v editore kódu, rovnako ako stránka HTML. Stred súboru nemusí mať žiadny štýl, bez značiek HTML. Externá šablóna štýlov je pripojená k webovej stránke za dodatočnú značku , rozložené v strede sekcie . Takéto štýly sa praktizujú na všetkých stranách stránky.

Na každú webovú stránku môžete pridať šablónu so štýlmi a postupne pridávať niekoľko značiek. , pričom v atribúte media tag určíte hodnotu šablóny štýlov. rel="stylesheet" označuje typ odosielania (uverejňovanie do šablóny štýlov).

Atribút type="text/css" štandard HTML5 nevyžaduje, preto ho možno vynechať. Ak je atribút denný, použije sa hodnota type="text/css".

1.2. Štýly interiéru

Štýly interiéru pripojiť sa k divízii HTML dokumenty sú uvedené v strede značky. Interné štýly majú prednosť pred externými, namiesto toho, aby ustúpili predvoleným štýlom (špecifikovaným prostredníctvom atribútu style).

...

1.3. Inšpirované štýly

Vždy, keď si píšeme inšpirované štýly, zapíšeme kód CSS do súboru HTML priamo do stredu značky prvku za doplnkový atribút štýlu:

Vráťte tomuto textu rešpekt.

Takéto štýly fungujú iba na prvku, pre ktorý je vôňa umiestnená.

1.4. @import pravidlo

@import pravidlo Umožňuje vám prispôsobiť externé predlohy štýlov. Aby smernica @import fungovala, musí byť rozbalená v šablóne štýlov (buď externá alebo interná) pred inými pravidlami:

Pravidlo @import sa používa aj na zahrnutie webových písiem:

@import url(https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,cyrillic);

2. Typy selektorov

Výberové predstavujú štruktúru webovej stránky. S ich pomocou sa vytvárajú pravidlá pre formátovanie prvkov webovej stránky. Selektormi môžu byť prvky, ich triedy a identifikátory, ako aj pseudotriedy a pseudoprvky.

2.1. Univerzálny volič

Podobne ako akýkoľvek prvok HTML. Napríklad * (margin: 0;) obnoví vonkajšie okraje pre všetky prvky na lokalite. Rovnaký selektor možno použiť v kombinácii s pseudotriedou alebo pseudoprvkom: *: after (štýly CSS), *: začiarknuté (štýly CSS).

2.2. Prvok výberu

Selektory prvkov umožňujú formátovať všetky prvky daného typu na všetkých stránkach lokality. Napríklad h1 (rodina písiem: Lobster, kurzíva;) nastavuje formálny štýl formátovania pre všetky nadpisy h1.

2.3. Výber triedy

Selektory tried vám umožňujú nastaviť štýly pre jeden alebo viacero prvkov s rovnakými názvami tried, ktoré sa nachádzajú na rôznych miestach stránky alebo na rôznych stránkach lokality. Ak chcete napríklad vytvoriť hlavičku s nadpisom triedy, musíte k hodnote nadpisu značky, ktorou je krivka, pridať atribút triedy

і nastaviť štýl pre priradenú triedu. Štýly vytvorené pre konkrétnu triedu možno kombinovať s inými prvkami, ktoré nemusia byť nevyhnutne tohto typu.

.headline (transformácia textu: veľké písmená; farba: svetlomodrá; )

Keďže prvok obsahuje množstvo atribútov triedy, význam je kombinovaný s medzerami.

Pokyny na používanie osobného počítača

2.4. volič ID

Volič identifikátora umožňuje formátovanie jedenšpecifický prvok. Hodnoty ID môžu byť jedinečné, na jednej stránke sa môžu objaviť viackrát a môžu obsahovať aspoň jeden znak. Dôležité je pomstiť sa za porušenie.

Existuje mnoho ďalších rozdielov v tých formách, ktoré môžu byť tvorené id, symboly, identifikátory, ktoré môžu byť zložené iba z čísel, počnúc číslami, počnúc stoličkami, pridávaním iba deliacich znakov atď.

Jedinečný identifikátor prvku možno použiť na rôzne účely, ako je metóda zacielenia na konkrétne časti dokumentu s rôznymi identifikátormi fragmentov alebo metóda zacielenia na prvok počas konkrétneho scenára. Je to tiež spôsob, ako upraviť štýl CSS prvok.

#sidebar (šírka: 300px; float: left; )

2.5. Podložka na výber

Selektor panelov nastavuje štýly pre prvky, ktoré sú umiestnené v strede prvku kontajnera. Napríklad ul li (transformácia textu: veľké písmená;) - vyberte všetky prvky li, ktoré potom vyberú všetky prvky ul.

Ak potrebujete naformátovať pady prvku skladby, ktorého triedu štýlu je potrebné špecifikovať:

p.first a (farba: zelená;) - tento štýl je priradený ku všetkým odsekom s prvou triedou;

p .first a (farba: zelená;) - ak pridáte medzeru, štylizované slová sa umiestnia do stredu každej značky triedy.first , ktorá je na boku prvku

Najprv a (farba: zelená;) - tento štýl stagnuje, kým sa nevyskytne nejaký druh správy, ktorý sa šíri uprostred iného prvku, určeného triedou.

2.6. Detský volič

Podradený prvok je umiestnený priamo na druhom prvku. Jeden element môže byť matkou viacerých dcérskych elementov a otcov element pleťového elementu môže byť len jeden. Podradený selektor umožňuje nastaviť štýly len v prípade, ak je podradený prvok bezprostredne za nadradeným prvkom a medzi nimi nie sú žiadne ďalšie prvky, takže podradený prvok už nie je vnorený.
Napríklad p > silný - vyberte všetky silné prvky, ktoré sú potomkami prvku p.

2.7. Sestra volič

Sestrine bránice ležia medzi živlami, ktoré čakajú na spiaceho otca. Selektory sesterských prvkov vám umožňujú vybrať prvky zo skupiny prvkov rovnakej úrovne.

h1 + p - vyberte všetky prvé odseky, ktoré idú priamo za ktorúkoľvek značku

, bez zasahovania do iných paragrafov;

h1 ~ p - vyberte všetky odseky, ktoré sú sesterské s ktorýmkoľvek nadpisom h1 a ktoré budú bezprostredne za ním.

2.8. Selektor atribútov

Selektor atribútov vyberá prvky na základe názvu atribútu alebo hodnoty atribútu:

[atribút] - všetky prvky, pre ktoré je zadaný atribút - všetky prvky, pre ktoré je zadaný atribút alt;

selector[atribút] - prvky tohto typu, ktoré možno použiť ako atribút, img - iba obrázky, pre ktoré je zadaný atribút alt;

selektor [attribute="value"] - prvky tohto typu, ktoré označujú atribút s konkrétnymi hodnotami, img - všetky obrázky, ktorých názvy obsahujú slovo kvet;

selector [attribute~="value"] - prvky, ktoré často obsahujú dané hodnoty, napríklad ak má prvok niekoľko tried oddelených medzerou, p - odseky, ktoré majú triedu obsahujúcu vlastnosť ;

selector[attribute|="value"] - prvky, zoznam hodnôt atribútov, ktoré začínajú priradeným slovom, p - odseky, pomenované podľa triedy vlastnosti alebo ktoré začínajú vlastnosťou ;

selektor [attribute^="value"] - prvky, ktorých hodnoty atribútov začínajú priradenou hodnotou, a - všetky správy, ktoré začínajú http://;

selector[attribute$="value"] - prvky, ktorých hodnoty atribútov končia zadanými hodnotami, img - všetky obrázky vo formáte png;

selektor [attribute*="value"] - prvky, hodnota atribútu, na ktorom mieste je slovo, a - všetky správy, názov tej ktorej knihy.

2.9. Selektor pseudotried

Pseudotriedy nie sú elegantné, prakticky nie sú pripojené k značke HTML. Umožňujú aplikovať pravidlá CSS na prvky súčasne, alebo podliehajú jedinému pravidlu. Pseudotriedy charakterizujú prvky s nasledujúcimi právomocami:

:hover - akýkoľvek prvok, ktorý použijete na pohyb kurzora myši;

:focus - interaktívny prvok, kým neprepnete na prídavnú klávesnicu alebo neaktivujete prídavnú myš;

:aktívny - prvok aktivovaný koristuvach;

:valid — polia formulára, namiesto ktorých musí prehliadač kontrolovať súlad so špecifikovaným typom údajov;

:invalid — polia formulára, ktoré namiesto toho označujú špecifikovaný typ údajov;

: povolené - všetky aktívne polia formulára;

:disabled - polia formulára sú zablokované, takže sa stanú neaktívnymi;

: v rozsahu - polia formulára, ktorých hodnoty sú v určenom rozsahu;

:mimo rozsah - polia formulára, ktorých hodnoty nie sú zahrnuté v určenom rozsahu;

:lang() - prvky z textu v priloženom filme;

:not (selektor) - prvky, ktoré nenahrádzajú priradený selektor - trieda, identifikátor, názov alebo typ poľa formulára - :not();

:target - prvok so symbolom #, ktorý je použitý v dokumente;

:zaškrtnuté - viditeľné (používateľom vybrané) prvky formulára.

2.10. Štrukturálny selektor pseudotried

Štrukturálne pseudotriedy vyberajú podradené prvky podľa parametra uvedeného v okrúhlych ramenách:

:n-té dieťa(nepárne) - nepárové deti;

:n-té dieťa(párne) - párové deti;

:n-té dieťa (3n) - Koža tretí prvok medzi deťmi;

:nth-child(3n+2) - vyberie tretí prvok počnúc iným potomkom (+2);

:n-té dieťa(n+2) - vyberie všetky prvky začínajúce od iného;

:nth-child(3) - vyberie tretí podradený prvok;

:nth-last-child() — zo zoznamu podradených prvkov vyberie prvok z určeného miesta rozšírenia, podobne ako:nth-child() , ale začína od zvyšku, na bráne;

:first-child - umožňuje formátovať iba prvý podradený prvok značky;

:last-child – umožňuje formátovať posledný podradený prvok značky;

:only-child - vyberie prvok, ktorý je jedným podriadeným prvkom;

:empty - vyberie prvky, ktoré neobsahujú podradené prvky;

:root - vyberie prvok, ktorý je koreňom dokumentu - prvok HTML.

2.11. Selektor štruktúrnych pseudotried typu

Označte konkrétny typ podradenej značky:

:nth-of-type() - vyberie prvky podobné ako:nth-child() , pričom zohľadní typ prvku;

:first-of-type - vyberie prvý podradený prvok tohto typu;

:last-of-type - vyberie posledný prvok tohto typu;

:nth-last-of-type() — vyberie prvok daného typu zo zoznamu prvkov až po zadanú rotáciu, počnúc od konca;

:only-of-type – vyberie jeden prvok priradený k typu stredu podradených prvkov nadradeného prvku

2.12. Selektor pseudoprvkov

Namiesto toho sa používajú pseudoprvky, ktoré sa generujú dodatočným obsahom:

:first-letter - vyberie prvé písmeno každého odseku, bude obmedzené na blokové prvky;

:first-line - vyberie prvý riadok textu prvku, pričom sa rozšíri iba na prvky bloku;

:before — vloží to, čo sa vygeneruje pred prvok;

:after — pridá to, čo sa vygeneruje za prvkom.

3. Kombinácia voličov

Pre presnejší výber prvkov formátovania môžete vybrať kombinácie selektorov:

img:nth-of-type(párne) - vyberte všetky obrázky, alternatívny text, ktorý obsahuje slovo css.

4. Selektory zoskupovania

Jeden a ten istý štýl možno zredukovať na niekoľko prvkov naraz. Na tento účel je potrebné prejsť cez požadované selektory v ľavej časti výpisu:

H1, h2, p, span (farba: paradajka; pozadie: biela; )

5. Spadkuvannya a kaskáda

Jeseň a kaskáda sú dva základné pojmy v CSS, ktoré spolu úzko súvisia. Úpadok spočíva v tom, že prvky moci sú na ústupe od svojho otca (živel, ktorý sa im pomstí). Kaskáda je spôsob, akým sa rôzne predlohy štýlov zlúčia do dokumentu a ako sa navzájom priradia konfliktné pravidlá.

5.1. upokojenie

upokojenie Toto je mechanizmus, ktorým sa piesne moci prenášajú z jedného predka na druhého. Špecifikácia CSS poskytuje redukciu ovládacích prvkov, ktoré sa aplikujú na stranu textu, ako je farba, písmo, medzery medzi písmenami, výška riadku, štýl zoznamu, zarovnanie textu, odsadenie textu, transformácia textu, viditeľnosť, biela -medzera a slovo - medzera. Vo väčšine prípadov je to jednoduché, pretože pre prvok webovej stránky nemusíte nastavovať veľkosť písma a rodinu písma.

Úrady, ktoré sa boria s formátovaním blokov, neutíchajú. Sú to pozadie, okraj, zobrazenie, plávajúce a čisté, výška a šírka, okraj, minimálna-maximálna výška a šírka, obrys, pretečenie, výplň, pozícia, dekorácia textu, vertikálne zarovnanie a z-index.

Primusov Spadkuvannya

Pomocou kľúčového slova zdediť môžete prvok komprimovať a znížiť hodnotu prvku Father. Je to cenné pre tieto autority, ktoré sú v úžase zo svojej mysle.

Ako nastaviť a pracovať so štýlmi CSS

1) Štýly môžu klesať v dôsledku Otcovho prvku (úpadok moci alebo, s ďalším významom, dediť);

2) Štýly, rozšírené v tabuľke štýlov nižšie, škálujú štýly, rozšírené v tabuľke vyššie;

3) Až do jedného prvku je možné kombinovať štýly z rôznych prvkov. Môžete skontrolovať, ktoré štýly sú podporované v režime prieskumníka prehliadača. Ak to chcete urobiť, musíte kliknúť pravým tlačidlom myši nad prvkom a vybrať položku „Zobraziť kód“ (alebo niečo podobné). Pravý stĺpec bude obsahovať všetky nastavenia, ktoré sú pre tento prvok priradené alebo odčítané od nadradeného prvku, ako aj súbory štýlov, v ktorých sú špecifikované, a sériové číslo kódu.


Ryža. 2. Režim Prieskumník v prehliadači Google Chrome

4) Zadaným štýlom môžete vybrať ľubovoľnú kombináciu selektorov – selektor prvku, pseudotriedu prvku, triedu alebo identifikátor prvku.

div (okraj: 1px pevný #eee;) #wrap (šírka: 500px;).box (float: left;).clear (clear: both;)

5.2. Cascade

Cascade— toto je mechanizmus, ktorý zaisťuje konečný výsledok v situácii, ak až do jedného prvku existujú rôzne pravidlá CSS. Existujú tri kritériá, ktoré určujú poradie, v ktorom sú orgány ustanovené - pravidlo! dôležité, špecifickosť a poradie, v ktorom je zoznam štýlov pripojený.

Pravidlo!

Vaše pravidlá je možné nastaviť pomocou kľúčového slova!important, ktoré nasleduje hneď za hodnotou mocniny, napríklad span (váha písma: tučné!important;) . Pravidlo musí byť umiestnené na konci hlasu pred zatvorením úklonu, bez medzery. Táto dohoda má prednosť pred ostatnými pravidlami. Toto pravidlo vám umožňuje nastaviť hodnoty výkonu a nainštalovať nové prvky zo skupín prvkov naraz, ak nie je priamy prístup k súboru so štýlmi.

Špecifiká

Pre pravidlo vzhľadu prehliadač vypočíta špecifickosť selektora, a keďže prvkom konfliktu je šok úradov, berieme do úvahy pravidlo, ktoré má najväčšie špecifikum. Hodnota špecifickosti sa skladá zo štyroch častí: 0, 0, 0, 0. Špecifickosť selektora je označená takto:

pre id 0 sa pridajú 1, 0, 0;
pre triedu 0 sa pridávajú 0, 1, 0;
pre prvok kože a pseudoprvok pridajte 0, 0, 0, 1;
pre štýl pridaný priamo do prvku - 1, 0, 0, 0;
Univerzálny volič nie je špecifický.

H1 (farba: svetlomodrá;) /*špecifickosť 0, 0, 0, 1*/ em (farba: strieborná;) /*špecifickosť 0, 0, 0, 1*/ h1 em (farba: zlatá;) /*špecifickosť: 0, 0, 0, 1 + 0, 0, 0, 1 = 0, 0, 0, 2*/ div#main p.about (farba: modrá;) /*špecifickosť: 0, 0, 0, 1 + 0 , 1, 0, 0 + 0, 0, 0, 1 + 0, 0, 1, 0 = 0, 1, 1, 2*/ .sidebar (farba: šedá;) /*špecifickosť 0, 0, 1, 0 */ #sidebar (farba: oranžová;) /*špecifickosť 0, 1, 0, 0*/ li#sidebar (color: aqua;) /*špecifickosť: 0, 0, 0, 1 + 0, 1, 0, 0 = 0, 1, 0, 1*/

Výsledok prvku bude mať rovnaké pravidlá, ktorých špecifickosť je väčšia. Napríklad, ak má prvok dve špecifiká s hodnotami 0, 0, 0, 2 a 0, 1, 0, 1, vyhráva druhé pravidlo.

Poradie spojených tabuliek

Môžete vytvoriť niekoľko nových šablón štýlov a pripojiť ich k jednej webovej stránke. Ak v rôznych tabuľkách budú rôzne hodnoty síl jedného prvku, potom sa v dôsledku prvku vytvorí pravidlo, ktoré je v šablóne štýlov, ktorá je v zozname nižšie.

Posledná aktualizácia: 21.04.2016

Priradenie štýlu začína selektorom. Napríklad:

Div( šírka:50px; /* šírka */ výška:50px; /* výška */ farba pozadia:červená; /* farba pozadia */ okraj: 10px; /* prístup k ďalším prvkom */ )

V tomto prípade je selektor div. Množstvo selektorov definuje názvy prvkov, ktoré sú naformátované, napríklad div, p, h2 atď. Keď je vybratý takýto selektor, štýl bude obmedzený na všetky prvky podobné tomuto selektoru. Potom sa viac spevácky štýl skonsoliduje do všetkých prvkov

na webovej stránke:

Selektor CSS

Selektor CSS

Na stránke sú 3 prvky div a všetky budú mať štýl:

Klasi

Samotné tieto prvky však vyžadujú rôznu štylizáciu. A tu môžeme vikorystuvat triedu.

Ak chcete triede CSS priradiť selektor, pred názov triedy vložte bodku:

Červený blok (farba pozadia: červená; )

Názov triedy môže stačiť. Napríklad názov triedy je „redBlock“. V názve triedy je však dovolené používať písmená, číslice, pomlčky a diakritické znamienka, pričom začiatok názvu triedy je povinný písmenami.

Pozorne upravte aj register mien: názvy „článok“ a „ČLÁNOK“ predstavujú rôzne triedy.

Po priradení triedy môžeme element priradiť k atribútu class. Napríklad:

Dôležitý je počet tried:

Elegantné CSS

Elegantné CSS

Identifikátory

Na identifikáciu jedinečných prvkov na webovej stránke sa identifikujú identifikátory, ktoré sú priradené k ďalším atribútom id. Napríklad na stránke môžete mať blok hlavy alebo hlavičku:

Priradenie štýlov pre identifikátory je podobné ako priradenie tried s tým rozdielom, že namiesto bodky sa používa symbol hash #:

ID CSS

Hlavné miesto

Treba však poznamenať, že identifikátory sa vo veľkej miere týkajú štruktúry webovej stránky a menej štylizácie. Pre štylizáciu je dôležité definovať triedy pod identifikátorom.

Univerzálny volič

Takto sa nazýva aj počet selektorov značiek, tried a identifikátorov v CSS univerzálny volič, ktorý je reprezentovaný znakom hviezdičky (*). Aplikuje štýly na všetky prvky na stránke html:

*( farba pozadia: červená; )

Štylizácia skupiny selektorov

Niektoré štýly skladieb sú obmedzené na celý rad selektorov. Chceme napríklad zakryť všetky nadpisy pod kreslom. V tomto prípade môžeme previesť selektory všetkých prvkov cez kómu:

Selektor CSS

CSS3

Výberové

Skupina voličov

Aktuálny text...

Skupina selektorov môže zahŕňať selektory značiek aj selektory tried a identifikátorov, napríklad:

H1, #header, .redBlock( farba: červená; )

Súbor pravidiel dizajnu (ktoré sú svojim spôsobom tvorené selektormi s blokom slov) až po tie najjednoduchšie HTML tagy, ktoré tvoria základ nového vzhľadu stránky.

Selektor CSS- ide o skladovú časť pravidla CSS, ktorá označuje označenie konkrétnych HTML tagov, pred ktorými budú nastavené štýly dizajnu špecifikované v tomto pravidle.

Samotný prehliadač teda chápe, že samotné prvky kódu stránky musia definovať špecifické štýly dizajnu.

Nástroj na výber prvkov CSS je mimoriadne flexibilný a ľahko sa dajú vybrať jednotlivé prvky kódu aj celé skupiny prvkov s významom za týmito alebo inými znakmi.

Typy selektorov CSS

Podobne ako návrhy v texte, aj selektory CSS môžu byť jednoduché alebo zložité. Rozdiel medzi nimi spočíva v tom, že je ťažšie vymaniť sa z kombinácie niekoľkých jednoduchých a použiť ich na doladenie konečného dizajnu zdroja.

Iba na základe základných textov v kaskádových štýloch možno použiť hodnoty v poradí a ktoré selektory budú použité. Okrem toho je dôležité, aby sme nás nepripravili o to, aké prvky a za akými znakmi vyberáme, ale aj o jednoduchosť spracovania nášho kódu pomocou kódu, ale o jemnostiach budeme hovoriť v ďalších článkoch.

Jednoduché selektory

  • Univerzálny selektor – označuje výber všetkých prvkov v dokumente. Určené hviezdičkou. Uistite sa, že ste resetovali štýly prehliadačov, ktoré majú nainštalované, aby každý, kto navštívi stránku, nestratil svoje nastavenia v dôsledku zmien v prehliadači alebo iných zásuvných moduloch.

    * (aký štýl ;)

  • Výber typu – vyberie všetky značky, ktoré zodpovedajú typu skladby. Určené názvom značky. Vikorist sa používa na nastavenie tajných pravidiel pre dizajn dokumentu, napríklad na nastavenie rôznych typov písma pre nadpisy a obyčajný text dokumentu.

    h1 (aký štýl; )

  • - Pravidlo css platí pre všetky značky s konkrétnym názvom triedy. Pýta sa to v čmáranici s napísaným názvom triedy. Možno, že selektor je to, čo je najčastejšie vidieť v rozložení. Pomocou nástroja môžete nastaviť rôzne štýly značiek v závislosti od typu a rôznych funkčných účelov.

    Ľavý stĺpec (aký štýl;)

  • Selektor identifikátora – používa sa na navrhovanie jedinečných prvkov na stránke. Určené znakom hash za názvom ID. Je potrebné navrhnúť jeden špecifický prvok bočnej stránky.

    #alertButton (aký štýl; )

  • - Vyberá značky z akéhokoľvek prítomného atribútu. Určuje názov atribútu pre hranaté ramená. Dá sa použiť na návrh skupiny značiek, z ktorých niektoré majú jednoducho atribút, ako aj na skupinu značiek, z ktorých niektoré majú atribút s predchádzajúcimi hodnotami.

    [ typ] ( aký štýl; ) [ typ= "odoslať" ] ( aký štýl; ) vstup[ typ= "odoslať" ] ( aký štýl; )

Sklopné voliče

  • Selektor značiek – vyberte prvky značiek (značky, ktoré sú v strede inej značky). Špecifikuje sa cez medzeru (otec - medzera - podložka).

    div p (aký štýl; )

  • Selektor podriadeného prvku – vyberie prvok priamo vnorený do iného prvku. Určené symbolom ">" (prvok otec-tick-dieťa). V dôsledku toho sa vytvára vedľajší prvok, ktorý nasleduje priamo po otcovi (prvá úroveň vloženia). Preto je každý tag v strede niečoho starostlivo rešpektovaný, bez ohľadu na úroveň príspevku.

    Bočný panel>ul (aký štýl;)

  • Selektor sesterského prvku – vyberie značku, ktorá nasleduje hneď za inou značkou (nie tá v strede, ale tá, ktorá je ďalej). Určené plusom (prvý prvok – plus – sesterský prvok). V skutočnosti je zriedkavé vyhrať. Zjavným mentálnym preťažením je prítomnosť spánkového vzoru pre všetky prvky so znamienkom „+“.

    h1+ p (ľubovoľný štýl; )

Pseudotriedy a pseudoprvky

Najdôležitejšia klasifikácia selektorov CSS spočíva v rozložení dokumentu. Ak chceme zmeniť aktuálny vzhľad prvkov zmenou ich vzhľadu na stránke (napríklad zmenou farby tlačidla pri prechode myšou), potom môžeme zmeniť selektory pseudotried a pseudoprvkov.

  • Pamätajte, že keď pridáte html do CSS, registračný list je dôležitý. Tobto class.active i.Active nie je to isté! Zápach bude stagnovať až po rôzne prvky, ako napríklad tie v dokumente.
  • Pomenujte selektory pre dizajn, aby ste sa v nich neskôr nestratili: .leftColumn - správny názov, .left - zostať v situácii, ale už nie, .llll - kecy, sám hovoríš, nie byť prekvapený kódom hviezd tejto triedy?
  • Ešte raz pripomeniem - ak je na stránke len jeden prvok a je to všetko jedinečné, tak pre toto vikoryst id, ak je isté, že sa na stránke objaví ďalší z týchto alebo len podobných prvkov, tak ho použite vyzdobiť triedami.

Polstrované vrecká

Selektory v CSS- Toto je užitočný nástroj na identifikáciu prvých prvkov stránky alebo skupín prvkov so špecifickým znakom, aby ste im mohli ďalej priradiť štýly dizajnu z bloku, ktorý je pripojený k tomuto selektoru.

Keď si osvojíte základné princípy interakcie a tvorby selektorov, zabudnete na problémy s dizajnom webových dokumentov. Dobrá znalosť selektorov umožňuje výrazne urýchliť hodinu rozloženia HTML stránok.

Téma, aj keď na prvý pohľad pôsobí mimoriadne mätúco, sa po dlhšom období praxe stáva jednoduchou a rozumnou, podporenou jasnou teóriou.

Čo je to selektor CSS?- Toto je popis prvku alebo skupiny prvkov, ktorý ukazuje prehliadaču, ktorý prvok má vybrať na nastavenie nového štýlu. Poďme sa pozrieť na základné CSS selektory.

1) .X

.topic-title (farba pozadia: žltá; )

CSS selektor triedy X. Rozdiel medzi id a class je v tom, že rovnaká trieda môže byť prítomná vo viacerých prvkoch na stránke a id je vždy jedinečné. Klasi varto vikoristovat pre ostosuvannya rovnaký štýl až do mnohých prvkov.

  • Chrome
  • Firefox
  • Safari
  • Opera

2) #X

#content (šírka: 960px; okraj: 0 auto; )

Selektor CSS pre ID. Znak pred CSS selektorom X vyberá prvok s id = X. Väčšina štýlov podľa id si musí vždy pamätať, že je jedinečný – stránke je priradené iba jedno takéto id. Pre triedy, kombinácie tried alebo názvy značiek je lepšie použiť selektory. Tim, nie menej, selektory podľa ID sú vítané na použitie pri automatizovanom testovaní, pretože Umožnite zariadeniu priamo interagovať s požadovaným prvkom a pamätajte, že na stránke je len jeden svojho druhu.

    Ktoré prehliadače sú podporované:
  • Chrome
  • Firefox
  • Safari
  • Opera

3) *

* ( okraj: 0; výplň: 0; )

Selektor CSS pre všetky prvky. Symbol hviezdičky označuje všetky prvky, ktoré sú na stránke. Existuje veľa špecialistov, ktorí túto metódu používajú na resetovanie (nulovanie) hodnôt okraja a výplne všetkých prvkov stránky. Tim nie je o nič menej, v praxi je lepšie takto nefungovať, pretože tento CSS selektor môže značne prekážať prehliadaču pri prehľadávaní všetkých prvkov na stránke.

Symbol * možno tiež upraviť tak, aby zobrazoval všetky podradené prvky:

#header * ( orámovanie: 5px plná sivá farba; )

V tomto príklade sú viditeľné všetky podradené prvky (podložky) prvku #header. Ale zavzhdi varto spomienka, takže tento selektor je pre prehliadač ťažký.

    Ktoré prehliadače sú podporované:
  • Chrome
  • Firefox
  • Safari
  • Opera

4) X

a ( farba: zelená; ) ol ( ľavý okraj: 15px; )

Selektor typu CSS. Ako vybrať všetky prvky rovnakého typu, pretože nezapáchajú ani id, ani trieda? Varto vikorystuvati CSS selektor za typom prvku. Ak chcete napríklad vybrať všetky zoradené zoznamy na stránke, vyberte možnosť ol (...), ako je uvedené vyššie.

    Ktoré prehliadače sú podporované:
  • Chrome
  • Firefox
  • Safari
  • Opera

5) X Y

li a (hmotnosť písma: tučné; výzdoba textu: žiadna; )

CSS pad selector alebo iný Selektor podradených prvkov CSS Najčastejšie sú týraní vikoristi. Na víťazstvo je potrebné vybrať prvky speváckeho typu z mnohých dcérskych prvkov. Napríklad musíte vidieť všetky správy, ktoré sú v prvku li. V tomto prípade použite tento volič. Vikory a šnúrky takýchto selektorov, najprv sa spýtajte sami seba, a aby ste videli tento prvok, môžete vikorizovať ešte kratšiu sekvenciu selektorov.

    Ktoré prehliadače sú podporované:
  • Chrome
  • Firefox
  • Safari
  • Opera

6) X + Y

div + p ( rodina písma: "Helvetica Neue", Arial, bezpätkové; veľkosť písma: 18px; )

Selektor zložených prvkov vyberá iba prvok typu Y, ktorý nasleduje hneď za prvkom X. Pri tomto type vzhľadu nasleduje odsek hneď za prvkom vzhľadu div, vyberte špeciálny typ a veľkosť písma.

    Ktoré prehliadače sú podporované:
  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Chrome

7) X > Y

#content > ul ( orámovanie: 1px plná zelená; )

CSS pad selector. Rozdiel medzi selektormi X Y a X > Y je v tom, že selektor je viditeľný pri výbere iba stredných podradených prvkov (výber iba priamych podložiek). Napríklad:

  • Položka zoznamu
    • Prvá položka v zozname
  • Položka zoznamu
  • Položka zoznamu

CSS selektor #content > ul vyberte ul, ktorý je umiestnený priamo na bloku div s id="container" . Nevyberajte ul, čo je prvá li. Toto je výkonný selektor CSS.

    Ktoré prehliadače sú podporované:
  • Chrome
  • Firefox
  • Safari
  • Opera

8) X ~ Y

ol ~ p ( ľavý okraj: 10px; )

Selektor sesterských (podradených) prvkov Mensh suvoriy nizh X + Y. Vіn vibér yak prvý, a іnshі prvky p, scho ísť na ol.

    Ktoré prehliadače sú podporované:
  • Chrome
  • Firefox
  • Safari
  • Opera
a:link ( farba: zelená; ) a:navštívené ( farba: šedá; )

Pseudotrieda: odkaz Vikorist vybrať všetky správy, na ktoré ešte nikto neklikol. Ak je potrebné zachovať štýl spevu pred odoslaním, tak pre koho je vikoria pseudotrieda:navštívená.

    Ktoré prehliadače sú podporované:
  • Chrome
  • Firefox
  • Safari
  • Opera

10) X

a(farba:červená ;)

Selektor CSS za atribútom. Z ktorej aplikácie vyberáte správy, ktoré zobrazujú atribút title.

    Ktoré prehliadače sú podporované:
  • Chrome
  • Firefox
  • Safari
  • Opera

11) X

a (farba: žltá; )
    Ktoré prehliadače sú podporované:
  • Chrome
  • Firefox
  • Safari
  • Opera

12) X

a ( farba: #dfc11f; )

Hviezda znamená, že hodnota môže byť v atribúte (v ktorejkoľvek časti atribútu href). Týmto spôsobom budú vybrané správy z https://www..stijit.. Do všetkých vybratých správ bude zlatá farba.

    Ktoré prehliadače sú podporované:
  • Chrome
  • Firefox
  • Safari
  • Opera

13) X

a ( pozadie: url(cesta/k/externej/ikona.png) bez opakovania; padding-left: 15px; )

Na niektorých stránkach majú správy, ktoré odkazujú na iné stránky, malé ikony so šípkami, ktoré ukazujú, aké správy sa odosielajú. Karát „^“ je symbol ucha radu. Preto na výber všetkých značiek, ktorých href začína http, musíte použiť selektor CSS s karat, ako je znázornené v aplikácii.

    Ktoré prehliadače sú podporované:
  • Chrome
  • Firefox
  • Safari
  • Opera

14) X

a(farba:zelená;)

Tu sa na označenie konca riadku používa regulárny výraz a symbol $. V ktorej aplikácii nájdeme všetky správy, ktoré sa posielajú na obrázky s príponami.jpg.

    Ktoré prehliadače sú podporované:
  • Chrome
  • Firefox
  • Safari
  • Opera

15) X

a(farba:zelená;)

Tu stagnujeme CSS selektor za atribútom koristuvach. K vzhľadu pridávame náš výkonný atribút data-filetype:

posilannya

Teraz pomocou selektora CSS môžete vybrať všetky možnosti, ktoré vedú k obrázkom s ľubovoľnými rozšíreniami.

    Ktoré prehliadače sú podporované:
  • Chrome
  • Firefox
  • Safari
  • Opera

16) X

Vlnovka (~) vám umožňuje vidieť jeden atribút v zozname atribútov oddelený medzerou. Môžete zaregistrovať atribút data-info, ktorý obsahuje niekoľko kľúčových slov oddelených medzerami. Týmto spôsobom môžete naznačiť, že správa bola odoslaná do vonkajšieho sveta a do obrázka.

posilannya

Okrem toho môžeme vybrať prvky s požadovanými kombináciami atribútov:

/* Vyberte prvok, atribút data-info akejkoľvek hodnoty external */ a ( farba: zelená; ) /* Vyberte prvok, atribút data-info ľubovoľnej hodnoty image */ a ( orámovanie: 2px prerušovaná čierna; )

    Ktoré prehliadače sú podporované:
  • Chrome
  • Firefox
  • Safari
  • Opera

17) X: začiarknuté

input:checked ( orámovanie: 3px začiatok čierne; )

Táto pseudotrieda vidí iba prvky, ako je začiarkavacie políčko alebo prepínač, a to aj vtedy, ak sú už na určenej pozícii.

    Ktoré prehliadače sú podporované:
  • Chrome
  • Firefox
  • Safari
  • Opera

18) X: po

Pseudotriedy: pred a po: ešte horšie – tvoria obsah pred a za vybraným prvkom.

Clearfix:after ( content: ""; display: block; clear: both; viditeľnosť: skryté; font-size: 0; height: 0; ) .clearfix ( *display: inline-block; _height: 1%; )

Tu pre pomoc pseudotriede: po bloku s triedou. clearfix vytvorí prázdny riadok a potom ho vymaže. Tento prístup sa zneužíva, pretože nie je možné zastaviť silu pretečenia: skryté .

    Ktoré prehliadače sú podporované:
  • Chrome
  • Firefox
  • Safari
  • Opera

19) X: vznášať sa

div:hover ( farba pozadia: rgba(11,77,130,0,5); )

Prvok zastosov spieva štýlovo, keď naň umiestnite kurzor myši. Staršie verzie programu Internet Explorer sú zaseknuté: prejdite myšou iba do konca.

A:hover ( border-bottom: 1px bodkovaná modrá; )

    Ktoré prehliadače sú podporované:
  • IE6+ (v IE6 bude len stagnovať až do konca)
  • Chrome
  • Firefox
  • Safari
  • Opera

20) X: nie (selektor)

div:not(#content) ( farba: šedá; )

Pseudotrieda nie (skrížené) Toto sa stane, ak napríklad potrebujete vybrať všetky divy okrem toho s id="content" .

Rovnakým princípom môžete vybrať všetky prvky okrem p:

*:not(p) (farba: modrá; )

    Ktoré prehliadače sú podporované:
  • Chrome
  • Firefox
  • Safari
  • Opera

21) X::pseudoprvok

p::first-line ( font-weight: bold; font-size: 24px; )

Pseudoprvky je možné upraviť tak, aby sa štýly konsolidovali až na fragmenty prvkov – napríklad až po prvý riadok odseku alebo prvé písmeno slova. Zasekne sa iba po blokové prvky.

Vyberte prvý odsek:

P::first-letter ( font-family: cursive; font-size: 30px; font-weight: bold; padding-right: 1px; )

Vyberte prvý riadok odseku:

P:prvý riadok (veľkosť písma: 28px; váha písma: tučné; )

    Ktoré prehliadače sú podporované:
  • Chrome
  • Firefox
  • Safari
  • Opera

22) X:prvé dieťa

ul li:first-child ( border-top: none; )

Pseudotriedne prvé dieťa vyberá prvú časť Otcovho prvku. Často existuje wiki na odstránenie okraja z prvého prvku v zozname. Táto pseudotrieda je doslova CSS 1.

    Ktoré prehliadače sú podporované:
  • Chrome
  • Firefox
  • Safari
  • Opera 3.5+
  • Android

23) X: posledné dieťa

ul > li:last-child ( border-bottom: none; )

Pseudotriedne posledné dieťa vyberie zostávajúcu časť Otcovho prvku Vіn, ktorý sa objavil iba z CSS 3.

    Ktoré prehliadače sú podporované:
  • IE9+ (IE8 podporuje prvé dieťa, nie posledné dieťa. Microsoft (c))
  • Chrome
  • Firefox
  • Safari
  • Opera 9.6+
  • Android

24) X: jediné dieťa

div p:len-dieťa ( farba: zelená; )

Jedine-dieťa pseudotriedy Umožňuje vám vybrať tie prvky, ktoré sú rovnakými časťami vašich otcov.

    Ktoré prehliadače sú podporované:
  • Chrome
  • Firefox
  • Safari 3.0+
  • Opera 9.6+
  • Android

25) X:n-té dieťa(n)

li:nth-child(3) ( farba: čierna; )

Vyberie podradený prvok s číslom uvedeným v parametri. selektor n-tého dieťaťa akceptuje celé číslo ako parameter, takže ho treba brať ako 1. Ak potrebujete vybrať inú položku zo zoznamu, pozrite si li:nth-child(2) . Všetky pseudotriedy z vikoristannyho n-tého dieťaťa sa objavili iba od CSS 3.

    Ktoré prehliadače sú podporované:
  • Chrome
  • Firefox 3.6+
  • Safari 3.1+
  • Opera 9.6+
  • Android 2.1+
  • iOS 2.0+

26) X:n-té-posledné-dieťa(n)

li:nth-last-child(2) ( farba: červená; )

Čo ak máte veľký zoznam prvkov v ul a potrebujete vybrať tretí prvok od konca? Namiesto písania li:nth-child(109) môžete použiť vikory selektor zostávajúcich podložiek n-té-posledné-dieťa. Táto metóda je rovnaká ako prvá, ale pokračuje od konca do konca.

    Ktoré prehliadače sú podporované:
  • Chrome
  • Firefox 3.6+
  • Safari 3.1+
  • Opera 9.6+
  • Android 2.1+
  • iOS 2.0+

27) X:n-tý typ(n)

ul:nth-of-type(3) ( orámovanie: 1px bodkovaná čierna; )

Keďže na stránke je veľa neusporiadaných zoznamov, na použitie n-tého typu je potrebné nastaviť štýl len na tretí z nich, ktorý nemá jedinečné ID.

    Ktoré prehliadače sú podporované:
  • Chrome
  • Firefox 3.6+
  • Safari 3.1+
  • Opera 9.6+
  • Android 2.1+
  • iOS 2.0+

28) X:n-tý-posledný-typ(n)

ul:nth-last-of-type(3) ( orámovanie: 2px hrebeňová modrá; )

Pseudotrieda n-tého posledného typu (n) pokyny na výber n-tého prvku typu piesne z kintsya.

    Ktoré prehliadače sú podporované:
  • Chrome
  • Firefox 3.6+
  • Safari 3.1+
  • Opera 9.6+
  • Android 2.1+
  • iOS 2.0+

29) X: iba typu

li:only-of-type ( font-weight: bold; )

Pseudotrieda iba typu vyberá prvky, ktoré ležia medzi stenami otcovho prvku. Môžete napríklad vybrať všetky ul, ktoré budú zodpovedať iba tým istým.

    Ktoré prehliadače sú podporované:
  • Chrome
  • Firefox 3.5+
  • Safari 3.1+
  • Opera 9.6+
  • Android 2.1+
  • iOS 2.0+

30) X: prvý typ

ul:first-of-type > li:nth-child(3) ( štýl písma: kurzíva; )

Pseudotriedne prvotriedne vyberie prvý prvok daného typu

    Ktoré prehliadače sú podporované:
  • Chrome
  • Firefox 3.5+
  • Safari 3.1+
  • Opera 9.5+
  • Android 2.1+
  • iOS 2.0+

Selektor CSS definovať prvky, na ktoré sa vzťahuje súbor pravidiel CSS.

Základné selektory

Univerzálny volič Vyberie všetky prvky. Voliteľne môže byť obmedzený na konkrétny menný priestor alebo na všetky menné priestory.
Syntax:* ns |* *|*
Príklad:* bude zodpovedať všetkým prvkom dokumentu. Selektor typu Vyberie všetky prvky, ktoré majú daný názov uzla.
Syntax: názov prvku
Príklad: vstup sa bude zhodovať s akýmkoľvek prvkom, ktorý sa používa na vytváranie interaktívnych ovládacích prvkov pre webové formuláre s cieľom prijať údaje od používateľa; Na základe rôznych typov zadávania údajov a počtu dostupných miniaplikácií to závisí od vášho zariadenia a používateľského účtu. "> element. Selektor triedy Vyberie všetky prvky, ktoré majú daný atribút triedy.
Syntax:. meno triedy
Príklad:.index bude zodpovedať akémukoľvek prvku, ktorý má triedu "index". Selektor ID Vyberie prvok na základe hodnoty atribútu ID. Vinníkom je len jeden prvok daného ID v dokumente.
Syntax:#idname
Príklad:#toc sa bude zhodovať s prvkom, ktorý má ID "toc". Selektor atribútov Vyberie všetky prvky, ktoré majú daný atribút.
Syntax:[ attr ] [ attr = hodnota ] [ attr ~= hodnota ] [ attr |= hodnota ] [ attr ^= hodnota ] [ attr $= hodnota ] [ attr *= hodnota ]
Príklad: bude zodpovedať všetkým prvkom, ktoré majú nastavený atribút automatického prehrávania (na akúkoľvek hodnotu).

Selektory zoskupovania

Výberový zoznam Metóda zoskupovania , є vyberá všetky zodpovedajúce uzly.
Syntax: A, B
Príklad: div, span sa bude zhodovať s oboma a ) – hlavný kontajner pre obsah toku. Toto nie je na mieste, ale formulár nemusí byť nevyhnutne štylizovaný pomocou CSS.">
prvkov.

Kombinátory

Potomkový kombinátor (medzera) kombinátor vyberá uzly є potomkov prvého prvku.
Syntax: A B
Príklad: div span sa zhoduje so všetkými prvkami, ktoré sú vo vnútri a ) je všeobecný kontajner pre obsah toku. Toto nie je na mieste, ale formulár nemusí byť nevyhnutne štylizovaný pomocou CSS.">
element. Podradený kombinátor Kombinátor > vyberá uzly, ktoré sú priamymi potomkami prvého prvku.
Syntax: A>B
Príklad: ul > li sa zhoduje so všetkým prvkom, ktorý sa používa na reprezentáciu položky v zozname.">
  • prvky, ktoré sú nepriamo umiestnené v prvku, reprezentované neohraničeným zoznamom prvkov, zvyčajne reprezentovaným ako zoznam s odrážkami.">