CSS (Cascading Style Sheets) je jazyk šablóny so štýlmi, ktorý umožňuje pripojiť štýly (ako sú fonty a farby) k štruktúrovaným dokumentom (ako sú dokumenty HTML a aplikácie XML). Štýly CSS sa zvyčajne používajú na vytváranie a zmenu štýlu prvkov webovej stránky a používateľské rozhrania napísané v HTML jazyky a XHTML, ale dá sa použiť aj na akýkoľvek druh dokumentu XML vrátane XML, SVG a XUL. Oddelením štýlu prezentácie dokumentov od obsahu dokumentov CSS uľahčuje vytváranie webových stránok a údržbu stránok.

CSS podporuje šablóny štýlov špecifické pre médiá, takže autori môžu prispôsobiť prezentáciu svojich dokumentov vizuálne prehliadače, načúvacie prístroje, tlačiarne, Braillovo písmo, ručné zariadenia atď.

Kaskádové štýly popisujú pravidlá formátovania prvkov pomocou vlastností a povolené hodnoty tieto vlastnosti. Pre každý prvok môžete použiť obmedzený súbor vlastností, ostatné vlastnosti naň nebudú mať žiadny vplyv.

Vyhlásenie štýlu má dve časti: selektor a reklamy. V HTML sa v názvoch prvkov nerozlišujú veľké a malé písmená, takže „h1“ funguje rovnako ako „H1“. Vyhlásenie pozostáva z dvoch častí: z názvu vlastnosti (napríklad farba) a hodnoty vlastnosti (sivá). Selektor informuje prehliadač, ktorý prvok má formátovať, a deklaračný blok (kód v zložených zátvorkách) uvádza formátovacie príkazy - vlastnosti a ich hodnoty.

Ryža. 1. Štruktúra reklamy

Hoci sa vyššie uvedený príklad pokúša ovplyvniť iba niekoľko vlastností potrebných na vykreslenie dokumentu HTML, sám osebe sa kvalifikuje ako šablóna štýlov. V kombinácii s inými štýlmi (jeden základný Funkcia CSS je, že štýly sú zlúčené), pravidlo určí konečnú prezentáciu dokumentu.

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

1. Druhy štýlov

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

Externá šablóna štýlov predstavuje textový súbor s príponou .css, ktorá obsahuje sadu CSS štýlov pre prvky. Súbor sa vytvorí v editore kódu, rovnako ako stránka HTML. Súbor môže obsahovať iba štýly, žiadne značky HTML. Externá šablóna so štýlmi je pripojená k webovej stránke pomocou značky umiestnený vo vnútri sekcie . Tieto štýly fungujú pre všetky stránky lokality.

Ku každej webovej stránke môžete pripojiť viacero hárkov štýlov pridaním viacerých značiek za sebou , ktorá špecifikuje účel tejto šablóny štýlov v atribúte media tag. rel="stylesheet" označuje typ odkazu (odkaz na šablónu so štýlmi).

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

1.2. Vnútorné štýly

Vnútorné štýly vložené do sekcie HTML dokument a sú definované vo vnútri značky. Interné štýly majú prednosť pred externými štýlmi, ale prepisujú vložené štýly (špecifikované prostredníctvom atribútu style).

...

1.3. Vložené štýly

Keď píšeme inline štýly, zapíšeme kód CSS do súboru HTML priamo do značky prvku pomocou atribútu style:

Venujte pozornosť tomuto textu.

Takéto štýly ovplyvňujú iba prvok, pre ktorý sú nastavené.

1.4. @import pravidlo

@import pravidlo umožňuje načítať externé predlohy štýlov. Aby smernica @import fungovala, musí byť umiestnená v šablóne štýlov (externej alebo internej) pred všetkými ostatný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

Selektory predstavujú štruktúru webovej stránky. Používajú sa na vytváranie pravidiel 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č

Zhoduje sa s akýmkoľvek prvkom HTML. Napríklad * (margin: 0;) obnoví okraje pre všetky prvky lokality. Selektor možno použiť aj v kombinácii s pseudotriedou alebo pseudoprvkom: *:after (štýly CSS) , *:checked (štýly CSS) .

2.2. Selektor prvkov

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

2.3. selektor triedy

Selektory triedy vám umožňujú naštylizovať jeden alebo viacero prvkov s rovnakým názvom triedy rôzne miesta stránke alebo na rôzne stránky stránky. Napríklad, ak chcete vytvoriť nadpis s triedou nadpisu, musíte pridať atribút triedy s hodnotou nadpisu v úvodnej značke

a nastavte štýl pre zadanú triedu. Štýly vytvorené pomocou triedy možno použiť na iné prvky, nie nevyhnutne tohto typu.

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

Ak má prvok viacero atribútov triedy, ich hodnoty sú spojené s medzerami.

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

2.4. volič ID

ID volič umožňuje formátovanie jedenšpecifický prvok. Hodnota id musí byť jedinečná, na jednej stránke sa môže vyskytovať iba raz a musí obsahovať aspoň jeden znak. Hodnota nesmie obsahovať medzery.

Neexistujú žiadne ďalšie obmedzenia, akú formu môže mať id, konkrétne identifikátory môžu byť iba číslice, začínať číslicou, začínať podčiarkovníkom, iba interpunkcia atď.

Jedinečný identifikátor prvku možno použiť na rôzne účely, vrátane spôsobu odkazovania na konkrétne časti dokumentu pomocou identifikátorov fragmentov, ako spôsob zacielenia na prvok v skriptovaní a ako spôsob úpravy konkrétneho prvku z CSS. .

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

2.5. Volič potomkov

Zostupné selektory aplikujú štýly na prvky umiestnené vo vnútri kontajnerového prvku. Napríklad ul li (transformácia textu: veľké písmená;) vyberie všetky prvky li, ktoré sú potomkami všetkých prvkov ul.

Ak chcete formátovať potomkov konkrétneho prvku, musíte tomuto prvku priradiť triedu štýlu:

p.first a (farba: zelená;) - daný štýl použije sa na všetky odkazy, potomkov odseku s triedou ako prvý ;

p .first a (farba: zelená;) – ak pridáte medzeru, budú štylizované odkazy umiestnené vo vnútri akejkoľvek značky .first class, ktorá je potomkom prvku

Najprv a (farba: zelená;) – tento štýl sa použije na akýkoľvek odkaz nachádzajúci sa vo vnútri iného prvku, ktorý je označený triedou .first.

2.6. Detský volič

Podradený prvok je priamym potomkom svojho obsahujúceho prvku. Prvok môže mať viacero podradených prvkov a každý prvok môže mať iba jeden nadradený prvok. Podradený selektor umožňuje použiť štýly iba vtedy, ak podriadený prvok nasleduje bezprostredne za nadradeným prvkom a medzi nimi nie sú žiadne ďalšie prvky, t. j. podradený prvok nie je vnorený do ničoho iného.
Napríklad p > silný vyberie všetky silné prvky, ktoré sú potomkami prvku p.

2.7. Sestra volič

Súrodenecké vzťahy vznikajú medzi prvkami, ktoré majú spoločného rodiča. Selektory súrodeneckých prvkov vám umožňujú vybrať prvky zo skupiny súrodeneckých prvkov.

h1 + p - vyberie všetky prvé odseky bezprostredne nasledujúce po akejkoľvek značke

bez toho, aby to ovplyvnilo ostatné odseky;

h1 ~ p vyberie všetky odseky, ktoré sú súrodencami ktoréhokoľvek nadpisu h1 a hneď 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 obsahujúce špecifikovaný atribút, - všetky prvky, pre ktoré je nastavený atribút alt;

selector[atribút] - prvky tohto typu, ktoré obsahujú zadaný atribút, img - iba obrázky, pre ktoré je nastavený atribút alt;

selector[attribute="value"] — prvky tohto typu, ktoré obsahujú zadaný atribút s konkrétnou hodnotou, img — všetky obrázky, ktorých názvy obsahujú slovo kvet ;

selector[attribute~="value"] - prvky čiastočne obsahujúce danú hodnotu, napríklad ak má prvok niekoľko tried oddelených medzerou, p - odseky, ktorých názov triedy obsahuje vlastnosť ;

selector[attribute|="value"] - prvky, ktorých zoznam hodnôt atribútov sa začína zadaným slovom, p - odseky, ktorých názov triedy alebo začína vlastnosťou;

selector[attribute^="value"] - prvky, ktorých hodnota atribútu začína zadanou hodnotou, a - všetky odkazy začínajúce http:// ;

selector[attribute$="value"] - prvky, ktorých hodnota atribútu končí zadanou hodnotou, img - všetky obrázky vo formáte png;

selector[attribute*="value"] - prvky, ktorých hodnota atribútu obsahuje zadané slovo kdekoľvek, a - všetky odkazy, ktorých názov obsahuje knihu .

2.9. Selektor pseudotried

Pseudotriedy sú triedy, ktoré v skutočnosti nie sú pripojené k značkám HTML. Umožňujú vám aplikovať pravidlá CSS na prvky, keď nastane udalosť alebo sa podriadi určitému pravidlu. Pseudotriedy charakterizujú prvky s nasledujúcimi vlastnosťami:

:hover - akýkoľvek prvok, nad ktorým je kurzor myši;

:focus - interaktívny prvok, na ktorý sa navigovalo pomocou klávesnice alebo sa aktivovalo myšou;

:active - prvok, ktorý bol aktivovaný používateľom;

:valid - polia formulára, ktorých obsah bol v prehliadači overený z hľadiska súladu so zadaným typom údajov;

:invalid - polia formulára, ktorých obsah nezodpovedá zadanému typu údajov;

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

:disabled - vypnuté polia formulára, t.j. v neaktívnom stave;

: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 nastavenom rozsahu;

:lang() - prvky s textom v zadanom jazyku;

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

:target je prvok #, na ktorý sa odkazuje v dokumente;

:checked - vybrané (užívateľom vybrané) prvky formulára.

2.10. Štrukturálny volič pseudotriedy

Štrukturálne Pseudotriedy Select detské prvky podľa parametra uvedeného v zátvorkách:

:nth-child(nepárne) - nepárne podradené prvky;

:n-té dieťa(párne) - párne podradené prvky;

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

:nth-child(3n+2) - vyberie každý tretí prvok, počnúc druhým potomkom (+2) ;

:n-té dieťa (n+2) - vyberie všetky prvky, počnúc druhým;

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

:nth-last-child() - v zozname podriadených prvkov vyberie prvok s určené miesto, podobne ako :nth-child() , ale spätne od posledného;

:first-child - umožňuje naštylizovať iba úplne prvý podradený prvok značky;

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

:only-child - vyberie prvok, ktorý je jediným potomkom;

:empty - vyberie prvky, ktoré nemajú potomkov;

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

2.11. Selektor pseudotriedy štruktúrneho typu

Ukážte na konkrétny typ podradenej značky:

:nth-of-type() - vyberá prvky analogicky s :nth-child() , pričom berie do úvahy iba typ prvku;

:first-of-type - vyberie prvé dieťa daného typu;

:last-of-type - vyberie posledný prvok daného typu;

:nth-last-of-type() - vyberie prvok daného typu v zozname prvkov podľa zadaného umiestnenia, počnúc od konca;

:only-of-type - vyberie jediný prvok zadaného typu spomedzi potomkov nadradeného prvku.

2.12. Selektor pseudoprvkov

Pseudoprvky sa používajú na pridávanie obsahu, ktorý sa generuje pomocou vlastnosti content:

:first-letter - vyberie prvé písmeno každého odseku, vzťahuje sa len na prvky bloku;

:first-line - vyberie prvý riadok textu prvku, vzťahuje sa len na prvky bloku;

:before - vloží vygenerovaný obsah pred prvok;

:after - Pridá vygenerovaný obsah za prvok.

3. Kombinácia voličov

Pre presnejší výber prvkov na formátovanie môžete použiť kombinácie selektorov:

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

4. Selektory zoskupovania

Rovnaký štýl možno použiť na viacero prvkov súčasne. Ak to chcete urobiť, na ľavej strane deklarácie uveďte potrebné selektory oddelené čiarkami:

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

5. Dedičnosť a kaskáda

Dedičnosť a kaskádovanie sú dva základné pojmy v CSS, ktoré spolu úzko súvisia. Dedičnosť znamená, že prvky dedia vlastnosti od svojho rodiča (prvku, ktorý ich obsahuje). Kaskáda sa prejavuje v tom, ako sa na dokument aplikujú rôzne druhy šablón štýlov a ako sa navzájom prevažujú konfliktné pravidlá.

5.1. Dedičnosť

Dedičnosť je mechanizmus, ktorým sa určité vlastnosti prenášajú z predka na jeho potomkov. Špecifikácia CSS poskytuje dedenie vlastností súvisiacich s textovým obsahom stránky, ako je farba , písmo , medzery medzi písmenami , výška riadku , štýl zoznamu , zarovnanie textu , odsadenie textu , transformácia textu , viditeľnosť, medzery a medzery medzi slovami. V mnohých prípadoch je to výhodné, pretože nemusíte nastavovať veľkosť písma a rodinu písma pre každý prvok na webovej stránke.

Vlastnosti formátovania bloku sa nededia. Sú to pozadie , orámovanie , zobrazenie , float a clear , výška a šírka , okraj , min-max-výška a -šírka , obrys , pretečenie , výplň , poloha , dekorácia textu , vertikálne zarovnanie a z-index .

Nútené dedičstvo

Používaním kľúčové slovo inherit môže prinútiť prvok, aby zdedil akúkoľvek hodnotu vlastnosti svojho nadradeného prvku. Toto funguje aj pre vlastnosti, ktoré sa predvolene nededia.

Ako sa nastavujú a fungujú štýly CSS

1) Štýly možno zdediť z nadradeného prvku (zdedené vlastnosti alebo pomocou zdediť hodnotu);

2) Štýly v šablóne štýlov nižšie prepíšu štýly v šablóne štýlov vyššie;

3) Na jeden prvok možno použiť štýly z rôznych zdrojov. V režime vývojára prehliadača môžete skontrolovať, ktoré štýly sa používajú. Ak to chcete urobiť, kliknite na prvok. kliknite pravým tlačidlom myši myšou a zvoľte "Zobraziť kód" (alebo niečo podobné). V pravom stĺpci sa zobrazia všetky vlastnosti, ktoré sú nastavené pre tento prvok alebo sú zdedené z nadradeného prvku, ako aj súbory štýlov, v ktorých sú špecifikované, a sériové číslo riadky kódu.

Ryža. 2. Režim vývojára v Prehliadač Google Chrome

4) Pri definovaní štýlu môžete použiť ľ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

Kaskádové je mechanizmus, ktorý riadi konečný výsledok v situácii, keď sa na rovnaký prvok aplikujú rôzne pravidlá CSS. Existujú tri kritériá, ktoré určujú poradie, v ktorom sa vlastnosti použijú – dôležité pravidlo, špecifickosť a poradie, v ktorom sú zahrnuté predlohy štýlov.

Pravidlo! dôležité

Váhu pravidla je možné určiť pomocou kľúčového slova !important, ktoré sa pridá hneď za hodnotu vlastnosti, napríklad span (váha písma: bold!important;) . Pravidlo musí byť umiestnené na konci deklarácie pred uzatváracou zátvorkou bez medzery. Takéto vyhlásenie bude mať prednosť pred všetkými ostatnými pravidlami. Toto pravidlo vám umožňuje zrušiť hodnotu vlastnosti a nastaviť novú pre prvok zo skupiny prvkov v prípade, že neexistuje priamy prístup k súboru štýlu.

Špecifickosť

Prehliadač vypočíta pre každé pravidlo špecifickosť selektora a ak má prvok protichodné vyhlásenia o vlastnostiach, berie sa do úvahy pravidlo s najvyššou špecifickosťou. Hodnota špecifickosti má štyri časti: 0, 0, 0, 0 . Špecifickosť selektora je definovaná takto:

0, 1, 0, 0 sa pridáva ako id;
pre triedu 0 sa pridáva 0, 1, 0;
0, 0, 0, 1 sa pridáva pre každý prvok a pseudoprvok;
pre vložený štýl pridaný priamo do prvku 1, 0, 0, 0 ;
univerzálny volič nemá žiadnu špecifickosť.

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 dôsledku toho sa na prvok použijú tie 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á druhé pravidlo.

Poradie spojených tabuliek

Môžete vytvoriť viacero externých šablón štýlov a prepojiť ich s rovnakou webovou stránkou. Ak rôzne tabuľky obsahujú rôzne hodnoty vlastností jedného prvku, v dôsledku toho sa pravidlo použije na prvok, ktorý je v šablóne štýlov v zozname nižšie.

CSS (Cascading Style Sheets) je kód, ktorý používate na úpravu štýlu svojej webovej stránky. Základy CSS vám pomôžu pochopiť, čo potrebujete, aby ste mohli začať. Odpovieme na otázky ako: Ako spravím svoj text čiernym alebo červeným? Ako dosiahnuť, aby sa obsah zobrazoval na určitom mieste na obrazovke? Ako ozdobiť moju webovú stránku obrázky na pozadí a kvety?

Čo je teda CSS?

Podobne ako HTML, ani CSS nie je v skutočnosti programovací jazyk. Nie je to značkovací jazyk, ale áno jazyk štýlov. To znamená, že umožňuje selektívne použitie štýlov na prvky v dokumentoch HTML. Napríklad na výber všetky prvky odseku na stránke HTML a zmeniť text v nich z čierneho na červený, musíte napísať tento CSS:

P (farba: červená; )

Skúsme: vložte tieto tri css reťazce v nový súbor v tvojom textový editor a potom súbor uložte ako style.css do priečinka so štýlmi.

Stále však musíme použiť CSS na náš HTML dokument. V opačnom prípade štýl CSS neovplyvní spôsob, akým váš prehliadač vykresľuje dokument HTML. (Ak ste náš projekt nesledovali, prečítajte si Základy práce so súbormi a HTML, aby ste zistili, čo musíte urobiť ako prvé.)

1. Otvorte svoj súbor index.html a vložte nasledujúci riadok niekam do hlavičky medzi a značky:
2. Uložte index.html a načítajte ho do prehliadača. Mali by ste vidieť niečo takéto:

Ak je teraz text vášho odseku červený, gratulujeme! Napísali ste svoj prvý úspešný CSS!

Anatómia súboru pravidiel CSS

Pozrime sa na vyššie uvedený CSS trochu podrobnejšie:

Celá štruktúra je tzv súbor pravidiel(ale často skrátene „vládne“). Všimnite si aj názvy jednotlivých častí:

Selektor Názov prvku HTML na začiatku sady pravidiel. Vyberie prvky, na ktoré sa má štýl použiť (v tomto prípade prvky p). Ak chcete upraviť iný prvok, stačí zmeniť volič. Vyhlásenie Jedno pravidlo, ako napríklad farba: červená; označuje ktorý z vlastnosti prvok, ktorý chcete upraviť. Vlastnosti Spôsoby, ktorými môžete upraviť štýl konkrétneho prvku HTML (v tomto prípade je farba vlastnosťou prvkov, ktoré definujú odsek textu.">

). V CSS si vyberiete, ktoré vlastnosti chcete vo svojom pravidle ovplyvniť. Hodnota nehnuteľnosti Napravo od nehnuteľnosti za dvojbodkou máme hodnotu nehnuteľnosti, ktorý si vyberie jednu zo sady možné hodnoty pre túto vlastnosť (existuje veľa farebných hodnôt okrem červenej).

Všimnite si dôležité časti syntaxe:

• Každá skupina pravidiel (okrem selektora) musí byť zabalená do zložených zátvoriek (()).
• V každej deklarácii musíte použiť dvojbodku (:), aby ste oddelili vlastnosť od jej hodnôt.
• V každej skupine pravidiel musíte použiť bodkočiarku (;) na oddelenie každej deklarácie od nasledujúcej.

Ak teda chcete zmeniť viacero hodnôt vlastností naraz, stačí ich napísať oddelené bodkočiarkami, napríklad:

P ( farba: červená; šírka: 500px; orámovanie: 1px plná čierna; )

Výber viacerých položiek

Môžete tiež vybrať viacero prvkov rôznych typov a na všetky použiť rovnakú sadu pravidiel. Pridajte viacero selektorov oddelených čiarkami. Napríklad:

P,li,h1 ( farba: červená; )

Rôzne typy selektorov

Je ich veľa rôzne druhy selektor. Vyššie sme len zvážili selektor prvkov, ktorý vyberie všetky prvky konkrétneho typu v HTML dokument. Výber však môžeme spresniť. Tu sú niektoré z najbežnejších typov selektorov:

Názov selektora	Čo si vyberie	Príklad
Selektor prvkov (niekedy nazývaný aj selektor značiek alebo typov)	Všetky prvky HTML zadaného typu.	p vyberá
volič ID	Prvok na stránke so zadaným ID (na jednej HTML stránke môže byť iba jeden prvok s ľubovoľným ID).	#moje-id vyberá Alebo
selektor triedy	Element(y) na stránke so zadanou triedou (na stránke je možné deklarovať viacero inštancií triedy).	.moja trieda vyberá A
Selektor atribútov	Element(y) na stránke so zadaným atribútom.	img vyberá ale nie
Pseudo selektor triedy	Zadaný prvok (prvky), ale iba v prípade, že nastane určitý stav, napríklad vznášanie sa.	a: vznášať sa vyberá , ale iba vtedy, keď je ukazovateľ myši nad odkazom.

Písma a text

Teraz, keď sme prebrali niektoré základy CSS, pridajme do súboru style.css ďalšie pravidlá a informácie, aby náš príklad vyzeral dobre. Po prvé, poďme trochu vylepšiť naše písma a text.

1. Najprv sa vráťte a nájdite ten, ktorý ste už niekde uložili. Pridajte prvok niekde v hlavičke vášho index.html (opäť kdekoľvek medzi značkami a). Bude to vyzerať asi takto:
2. Potom odstráňte existujúce pravidlo v súbore style.css. Toto bolo dobrý test, ale červený text naozaj nevyzerá dobre.
3. Pridajte nasledujúce riadky do Správne miesto, nahradenie zástupného reťazca skutočným reťazcom rodiny fontov, ktorý ste získali z Google Fonts. (rodina fontov jednoducho znamená, ktoré fonty chcete použiť pre svoj text). Toto pravidlo nastavuje globálne základné písmo a veľkosť písma pre celú stránku (pretože je rodičom celej stránky a všetky prvky v nej zdedia rovnakú veľkosť písma a rodinu písiem): html ( veľkosť písma: 10px; /* px znamená "pixely": základné písmo bude vysoké 10 pixelov * / font -family: zástupný symbol: toto by mal byť názov písma z Google fonts )

   Poznámka: Všetko v dokumente CSS medzi /* a */ je CSS komentár , ktorý prehliadač pri vykonávaní kódu ignoruje. Toto je miesto, kde si môžete písať užitočné poznámky o tom, čo robíte.

4. Teraz nastavíme veľkosť písma pre prvky obsahujúce text v tele HTML (

   a definuje odsek textu.">

   ). Text nadpisu tiež vycentrujeme a v tele dokumentu nastavíme určitú výšku riadku a medzier medzi písmenami, aby bol o niečo čitateľnejší: h1 (veľkosť písma: 60px; zarovnanie textu: na stred; ) p, li (veľkosť písma: 16px; výška riadku: 2; medzera medzi písmenami: 1px; )

Hodnoty px môžete upraviť, akokoľvek chcete, aby váš návrh vyzeral tak, ako chcete, ale vo všeobecnosti by mal váš návrh vyzerať takto:

Bloky, bloky a ďalšie bloky

Jedna vec, ktorú si pri písaní CSS všimnete, je, že veľa z toho je o blokoch – prispôsobení ich veľkosti, farby, polohy atď. Väčšinu prvkov HTML na stránke si možno predstaviť ako bloky naukladané jeden na druhom.

Nie je prekvapením, že rozloženie CSS je založené predovšetkým na krabicový model. Každý z blokov, ktoré zaberajú miesto na vašej stránke, má vlastnosti, ako napríklad:

• odsadenie , medzera len okolo obsahu (napríklad okolo odseku textu)
• border , plná čiara, ktorá sa nachádza vedľa výplne
• margin , priestor okolo vonkajšej strany prvku

V tejto časti tiež používame:

• šírka (šírka prvku)
• background-color , farba za obsahom a prvkami výplne
• farba , farba obsahu prvku (zvyčajne textu)
• text-shadow: nastaví tieň na text vnútri prvku
• displej: nastavuje režim zobrazenia prvku (zatiaľ sa o to nestarajte)

Takže začnime a pridajte na našu stránku viac CSS! Pokračujte v pridávaní týchto nových pravidiel do spodnej časti stránky a nebojte sa experimentovať so zmenou hodnôt, aby ste videli, ako to funguje.

Zmeňte farbu stránky

html ( farba pozadia: #00539F; )

Toto pravidlo nastavuje farbu pozadia pre celú stránku. Zmeňte kód farby v hornej časti na farbu, ktorá je .

Zaobchádzanie s telom

telo ( šírka: 600px; okraj: 0 automaticky; farba pozadia: #FF9500; výplň: 0 20px 20px 20px; orámovanie: 5px plná čierna; )

Teraz pre prvok. Vyhlásení je tu pomerne veľa, tak si ich poďme prejsť všetky jeden po druhom:

• šírka: 600px - núti telo mať vždy šírku 600 pixelov.
• okraj: 0 auto; - keď nastavíte dve hodnoty pre vlastnosti, ako je okraj alebo výplň, prvá hodnota prvku ovplyvňuje vrch a spodná strana (v tomto prípade ich robí 0) a druhú hodnotu vľavo a pravej strane (tu je auto špeciálna hodnota, ktorá rozdeľuje dostupný priestor horizontálne rovnako naľavo a napravo). Môžete tiež použiť jednu, tri alebo štyri hodnoty, ako je opísané.
• farba pozadia: #FF9500; - ako predtým, nastaví farbu pozadia prvku. Na telo som použil červenkasto oranžovú, na rozdiel od tmavo modrej pre ). Všetky ostatné prvky musia byť potomkami tohto prvku."> prvok, ale neváhajte experimentovať.
• padding: 0 20px 20px 20px; - máme nastavené štyri hodnoty výplne, aby sme dali priestor okolo nášho obsahu. Tentoraz nenastavujeme padding na vrchu tela, ale 20px vľavo, dole a vpravo. Hodnoty sú nastavené hore, vpravo, dole, vľavo v tomto poradí.
• orámovanie: 5px plná čierna; - jednoducho nastaví 5px široký plný čierny okraj na všetkých stranách tela.

Umiestnenie a štýl hlavičky našej domovskej stránky

h1 ( okraj: 0; výplň: 20 pixelov 0; farba: #00539F; tieň textu: 3 pixely 3 pixely 1 pixel čierna; )

Možno ste si všimli, že v hornej časti tela je strašná trhlina. Stáva sa to preto, že prehliadače používajú niektoré predvolený štýl pre prvok

(v porovnaní s ostatnými), aj keď ste nepoužili vôbec žiadne CSS! Môže to znieť ako zlý nápad, ale chceme, aby webová stránka bez štýlov mala základnú čitateľnosť. Aby sme sa zbavili medzery, prepíšeme predvolený štýl nastavením margin: 0; .

Potom sme nastavili hornú a spodnú výplň hlavičky na 20 pixelov a text hlavičky sme urobili tak, aby mal rovnakú farbu ako farba pozadia html.

Tu sme použili jednu pomerne zaujímavú vlastnosť, ktorou je text-shadow , na ktorý sa aplikuje tieň textový obsah prvok. Má tieto štyri významy:

• Hodnota prvého pixelu určuje horizontálne odsadenie tieň textu - ako ďaleko sa pohybuje: záporná hodnota by ho mala posunúť doľava.
• Hodnota druhého pixelu určuje vertikálny posun tieň textu - ako ďaleko sa posunie nadol, v tomto príklade: záporná hodnota by ho mala posunúť nahor.
• Hodnota tretieho pixelu určuje polomer rozostrenia tiene – väčšia hodnota bude znamenať viac rozmazaný tieň.
• Štvrtá hodnota určuje základnú farbu tieňa.

Opäť skúste experimentovať s rôznymi hodnotami, aby ste zistili, na čo môžete prísť.

Posledná aktualizácia: 21.04.2016

Akýkoľvek html dokument, bez ohľadu na to, koľko prvkov obsahuje, bude bez použitia štýlov v podstate „mŕtvy“. Štýly alebo lepšie povedané kaskádové štýly (Cascading Style Sheets) alebo jednoducho CSS definujú prezentáciu dokumentu, jeho vzhľad. Poďme sa rýchlo pozrieť na aplikáciu štýlov v kontexte HTML5.

Štýl v CSS je pravidlo, ktoré hovorí webovému prehliadaču, ako formátovať prvok. Formátovanie môže zahŕňať nastavenie farby pozadia prvku, nastavenie farby a typu písma atď.

Definícia štýlu má dve časti: selektor, ktorý ukazuje na prvok, a blok deklarácie štýlu- súbor príkazov, ktoré nastavujú pravidlá formátovania. Napríklad:

Div( farba pozadia:červená; šírka: 100px; výška: 60px; )

V tomto prípade je selektor div . Tento selektor určuje, že tento štýl sa použije na všetky prvky div.

Za voličom v zložených zátvorkách prichádza blok deklarácie štýlu. Medzi otváracími a zatváracími zloženými zátvorkami sú definované príkazy, ktoré označujú spôsob formátovania prvku.

Každý príkaz pozostáva z vlastnosti a hodnoty. Takže v nasledujúcom výraze:

farba pozadia:červená;

background-color predstavuje vlastnosť a červená predstavuje hodnotu. Vlastnosť definuje špecifický štýl. Existuje veľa vlastností CSS. Napríklad farba pozadia určuje farbu pozadia. Po dvojbodke nasleduje hodnota danej vlastnosti. Napríklad vyššie uvedený príkaz nastaví vlastnosť background-color na červenú . Inými slovami, farba pozadia prvku je nastavená na „červenú“, teda červenú.

Za každým príkazom nasleduje bodkočiarka, ktorá oddeľuje daný príkaz od ostatných.

Množiny takýchto štýlov sa často nazývajú šablóny štýlov alebo CSS (Cascading Style Sheets alebo kaskádové štýly). Existovať rôznymi spôsobmi definície štýlu.

atribút štýlu

Prvým spôsobom je vložiť štýly priamo do prvku pomocou atribútu style:

Štýly

Sú tu definované dva prvky – hlavička h2 a blok div. Nadpis má modrú farbu textu definovanú pomocou vlastnosti color. Blok div má vlastnosti width (width), height (height) a background-color (background-color).

Druhým spôsobom je použitie prvku style v html dokumente. Tento prvok informuje prehliadač, že údaje sú vo vnútri css kód, nie html:

Štýly

Výsledok v tomto prípade bude úplne rovnaký ako v predchádzajúcom prípade.

Prvok štýlu je často definovaný v prvku head, ale možno ho použiť aj v iných častiach dokumentu HTML. Prvok štýlu obsahuje sady štýlov. Každý štýl má najprv selektor, za ktorým nasledujú rovnaké definície vlastností css a ich hodnoty v zložených zátvorkách, aké boli použité v predchádzajúcom príklade.

Druhý spôsob áno html kódčistejšie umiestnením štýlov do prvku štýlu. Existuje však aj tretí spôsob, ktorým je vloženie štýlov do externého súboru.

Vytvorme v rovnakom priečinku s html stránku textový súbor, na ktorý premenujeme styles.css a definujte v ňom nasledujúci obsah:

H2( farba:modrá; ) div( šírka: 100px; výška: 100px; farba pozadia: červená; )

Sú to rovnaké štýly, ktoré boli vo vnútri prvku štýlu. A tiež zmeniť kód html stránky:

Štýly

Už tu nie je prvok štýlu, ale existuje prvok odkazu, ktorý obsahuje súbor styles.css vytvorený vyššie:

Tým, že definujeme štýly v externom súbore, robíme html kód čistejším, štruktúra stránky je oddelená od jej stylingu. Keď sú štýly definované týmto spôsobom, je oveľa jednoduchšie upraviť ich, ako keby boli definované vo vnútri prvkov alebo na prvku štýlu, a toto je preferovaný spôsob v HTML5.

Používanie štýlov v externých súboroch vám umožňuje znížiť zaťaženie webového servera pomocou mechanizmu ukladania do vyrovnávacej pamäte. Pretože webový prehliadač môže uložiť súbor css do vyrovnávacej pamäte a získať požadovaný súbor css z vyrovnávacej pamäte pri ďalšom prístupe na webovú stránku.

Je tiež možné, že sa všetky tieto prístupy kombinujú a pre jeden prvok sú niektoré vlastnosti css definované vo vnútri samotného prvku, iné vlastnosti css sú definované vo vnútri prvku štýlu a ďalšie sú v externom priloženom súbore. Napríklad:

A v súbore style.css je definovaný nasledujúci štýl:

Div( šírka:50px; výška:50px; farba pozadia:červená; )

V tomto prípade má prvok div vlastnosť width definovanú na troch miestach s iný význam. Aká hodnota sa nakoniec použije na prvok? Tu máme nasledujúci prioritný systém:

Ak má prvok definované vložené štýly, potom majú najvyššiu prioritu, to znamená, že v príklade vyššie bude celková šírka 120 pixelov

Najmenej prioritné štýly sú tie, ktoré sú definované v externom súbore.

html atribúty a css štýly

veľa html prvky umožňujú nastaviť štýly zobrazenia pomocou atribútov. Napríklad na viacerých prvkoch môžeme pomocou atribútov width a height nastaviť šírku a výšku prvku, resp. Tomuto prístupu sa však treba vyhnúť a namiesto vložených atribútov by sa mali používať štýly CSS. Je dôležité jasne pochopiť, že značenie HTML by malo poskytovať iba štruktúru html dokumentu a celý jeho vzhľad, štýl by mal byť určený štýlmi CSS.

Validácia kódu CSS

V procese písania CSS štýlov môžu vzniknúť otázky, či je správne definovať štýly týmto spôsobom, či sú správne. A v tomto prípade môžeme použiť validátor css, ktorý je dostupný na

Technológia css používajú predovšetkým dizajnéri, pretože vytvárajú dizajn stránky. Je však chybou predpokladať, že správcovia webu css nie je potrebné vedieť. Stačí pripomenúť aspoň príklad z popisu časti o. Okrem prenosnosti vašich stránok vám štýly umožňujú vytvárať rôzne klasické dizajnové riešenia (napríklad rozbaľovacie menu). A spolu s vám umožňujú vytvárať dynamiku HTML stránky (DHTML), ktorých krása a pohodlie sú niekedy jednoducho úžasné.

Samozrejme, aby ste takéto veci vytvorili, musíte sa s nimi zoznámiť Základy CSS. A táto kategória stránok vám pomôže urobiť to čo najrýchlejšie a najefektívnejšie.

Celý kurz ďalej HTML, CSS a rozloženie webových stránok:

Po prečítaní článkov o základoch CSS sa naučíte:

1) Syntax css.

2) Metódy a ich pracovné priority css štýl.

3) Zadá selektor css.

4) css hacky prehliadača.

5) Pravidlá písania css.

6) Ako vytvoriť popis na css.

7) Ako zmeniť vzhľad prvého písmena cez css.

8) Ako nastaviť typ kurzora cez css.

9) Ako zmeniť vzhľad kurzora pri prejdení myšou css.

10) Ako vytvoriť podmenu css.

11) O výmene majetku min-šírka v IE6.

12) O platnosti css.

13) Ako nastaviť farbu navštívených odkazov.

14) Ako nastaviť odsadenie odseku pomocou css.

15) Ako urobiť zaoblené rohy css.

16) Ako umiestniť svoj obrázok namiesto značky zoznamu css.

17) Ako urobiť z pozadia obrázok.

18) Ako stmaviť pozadie css.

19) V čom sú detské selektory css.

20) V akých jednotkách merania sú dostupné css.

21) Ako vytvoriť vyskakovacie okno so zatemnením.

22) Ako urobiť animované pozadie.

23) Ako urobiť krásne textové pole.

24) Ako zmeniť obrázok, keď nad ním prejdete kurzorom myši.

25) V čom sú pseudo prvky css.

26) Čo je CSS škriatkovia.

27) Ako pretlačiť pätu (suterén) dnu css.

28) Ako zabrániť zmene veľkosti textarea cez css.

29) Ako nakresliť trojuholník css.

30) Ako zvládnuť udalosť kliknite cez css.

31) Ako nastaviť kurzor cez css.

32) Ako zapnúť horizontálne rozbaľovacie menu css.

33) Ako používať neštandardné písmo na stránke.

34) Ako zmeniť pozadie prepínača css.

35) Môžem použiť CSS3.

36) Ako urobiť tieň css.

37) Ako nastaviť atribúty čalúnenie buniek a rozmiestnenie buniek na css.

38) Ako na to div so 100% výškou.

39) O kompatibilite z-index a hráč YouTube.

40) Prečo je zlé používať -moz, -pani, - webkit a iné vlastnosti.

41) Mám použiť Obnoviť CSS.

42) Ako vertikálne zarovnať značku zoznamu.

43) Ako vytvoriť verziu pre tlač.

44) Ako zapnúť transparentnosť medzi prehliadačmi css.

45) Čo je clearfix.

46) Ako čiastočne vrátiť späť plavák.

47) Ako vytvoriť rozloženie v dvoch stĺpcoch s rovnakou výškou stĺpca.

48) Čo je adaptívne rozloženie.

49) V čom sú mediálne dopyty css.

50) Čo je menej.

51) Ako na to css efekt stočeného rohu.

52) Ako na to responzívna „lepkavá“ päta webu.

53) Ako používať Google Fonts API.

54) Ako používať službu Livetools.

55) Ako povoliť alebo zakázať výber textu na css.

56) Ako zmeniť vzhľad prvku na predvolený pomocou vlastnosti vzhľad v css.

57) Prečo potrebujete vlastnosť page-break-inside v css.

58) Ako zarovnanie na stred rámček s premenlivou šírkou na css.

59) Ako na to čisté trojuholníky CSS.

60) Servis od generovanie CSS trojuholníkov.

61) Ako stlačiť pätu na koniec stránky(polohovanie).

62) Ako stlačiť pätu na koniec stránky(tabuľková metóda).

63) Učenie Sass. Inštalácia a nastavenie.

64) Ako skryť prvok na stránke na css.

65) učenie Sass. Základy.

66) Kedy použiť reset.css a normalizovať.css.

67) Obrazová služba s mocným API.

68) Ako na to css efekt priblíženia.

69) Koala- rýchla kompilácia sass súbory.

70) Ako pridať CSS fotografické filtre.

71) učenie Sass. Mixins.

72) učenie Sass. Matematické operácie.

73) Animované ikonu ponuky v Sass.

74) učenie Sass. Funkcie.

75) Čo je PostCSS.

76) Ako nainštalovať a nakonfigurovať PostCSS.

77) Ako postupovať schopnosť hodnotiť na CSS.

78) učenie Sass. Štýl písania kódu.

79) učenie Sass. Rozšírenie rodičovského výberu.

80) 10 užitočných Mixiny SASS.

81) Ako postupovať Úvod v štýle Star Wars s CSS.

82) Bootstrap 4. Úvod.

83) Bootstrap 4. Inštalácia.

84) Bootstrap 4. Reštartovať.

85) Bootstrap 4. Nádoby a kľúčové body.

86) Bootstrap 4. Mriežkový systém.

87) Bootstrap 4. Vlastnosti ohybu mriežky.

88) V akých 5 novinkách sa objaví CSS4.

89) Bootstrap 4. Čo je Jumbotrons.

90) Bootstrap 4. Pomôcky a typografia.

91) Bootstrap 4. Komponent Karty.

92) Rozdiel medzi trieda a id príklad značky div.

93) Zlé prvky vzhľad stránky ktorý by sa nemal používať.

94) Bootstrap 4. modálne okná.

95) Oh prioritou a dedičstvo v css na praxi

96) Ako vysádzať Rozloženie PSD na Bootstrap mriežka. Časť 1.

97) Ako vytvoriť rozloženie PSD podľa Bootstrap mriežka. Časť 2.

98) Ako používať pseudoprvky po a pred v CSS.

99) O funkciách šírka a výška bloku v css.

100) Pseudoprvky po a pseudotriedne posledné dieťa.

101) Ako zobraziť stránku na rôznych zariadeniach.

102) Rozloženie mriežky Bootstrap(časť 1)

103) Rozloženie mriežky Bootstrap(časť 2)

104) Rozloženie mriežky Bootstrap(časť 3)

105) Rozloženie mriežky Bootstrap(časť 4)

Zdravím vás milí priatelia! V tejto lekcii sa dozviete, čo je css na čo slúži a ako ho správne používať. Toto je základná lekcia zo série „Pre najmenších“, v ktorej sa pokúsim vysvetliť najviac jednoduchý jazyk základy úpravy dokumentov pomocou CSS – kaskádové štýly ( C vzostupne Sštýl S klobúky).

v pohode

Pripnúť

Časť 1: Základy CSS

Táto lekcia je logickým pokračovaním lekcie „Základy HTML pre začiatočníkov“, v ktorej som podrobne vysvetlil, čo je značkovací jazyk HTML, ako funguje a funguje, základné značky a pravidlá rozloženia. V tejto lekcii sa dotkneme štylizácie dokumentu vytvoreného pomocou značkovacieho jazyka, t.j. dávať určitý tvar, určitú farbu, postupnosť, veľkosť rôzne prvky a text na stránke, poďme sa pozrieť na osvedčené postupy pre prácu s kaskádovými štýlmi. Keď pochopíte základy, budete môcť sami správne a efektívne štylizovať dokumenty HTML.

Upozorňujem na skutočnosť, že túto príručku CSS budeme uvažovať len v kontexte použitia s HTML dokumentmi vo webovom prehliadači. OD pomocou CSS môžete upraviť štýl iných dokumentov, ktoré používajú rôzne značkovacie jazyky. Napríklad štýl XML v aplikácie pre Android, SVG alebo rôzne desktopové prostredia na operačných systémoch podobných Unixu.

Vo všeobecnosti je CSS pomerne elementárny formálny jazyk, ktorý bol vynájdený na opis vzhľad Dokumenty. To naznačuje, že je celkom jednoduchý a pozostáva z pôvodných primitívnych štruktúr, ktoré nie je také ťažké sa naučiť. Najťažšia vec nie je syntax, nie pravidlá pre písanie konštrukcií, ale veľké množstvo CSS vlastnosti na zapamätanie, ktoré plnia rôzne úlohy. Našťastie sú všetky pravidlá v angličtine so zodpovedajúcim sémantickým zaťažením. Jednoduchý preklad do nášho jazyka dáva predstavu o tom, čo toto pravidlo robí a naopak – pri preklade toho, čo chceme dosiahnuť určitú vlastnosť na anglický jazyk, je vysoká pravdepodobnosť, že dostaneme správnu vlastnosť. To výrazne zjednodušuje zapamätanie pravidiel CSS na intuitívnej úrovni. Napríklad, ak potrebujete nastaviť farba pozadia stačí preložiť do angličtiny, v dôsledku čoho dostaneme farba pozadia(Jednotlivé slová v CSS sa píšu so spojovníkom).

1.1 Používanie CSS v HTML dokumentoch

CSS sa v dokumentoch HTML používa pomerne jednoducho. To môže byť:

Ako som už povedal, CSS má celkom jednoduchú syntax. Poďme si to rozobrať.

Pravidlá reklamy sú také jednoduché, že sa dajú opísať jednou vetou. Najprv hláskované selektor, ktorý vyberie konkrétny prvok na stránke, po kučeravé zátvorky sú napísané vlastnosti spol hodnoty za dvojbodkou a samotné vlastnosti sú od seba oddelené bodkočiarka. To je všetko.

Jednoduché, však?

Najťažšia vec na deklarácii CSS je selektor. Viac o tom, ako sa tvoria a používajú selektory, sa dozviete v lekcii Všetky selektory CSS v jednej lekcii - je to veľmi dôležitá téma, keďže sa tu odhaľuje všetko čaro výberu prvkov na stránke, odporúčam si túto lekciu bez problémov pozrieť všetci začiatočníci.

Stručne Selektor CSS- (od slova vyberte- select) je konštrukcia, ktorou začína každý reklamný blok a ktorá slúži na výber prvku alebo prvkov rovnakého typu na stránke pre ďalšie úpravy. Najčastejšie sa ako selektor používa určitý. Trieda tag, napríklad:

//HTML:

//CSS: .my-class ( background-color: #999; )

Tu je selektorom trieda my-class značky div, ktorá získa potrebný štýl v súbore CSS. V tomto prípade je farba pozadia šedá. V súlade s tým, ak má stránka niekoľko značiek (nielen divs) s triedou moja trieda, všetky tieto prvky získajú rovnaký vzhľad - sivé pozadie farby #999.

1.3 Kaskádovanie, dedenie a prednosť

Pochopenie princípu kaskádovania je jednoduché. Pozrime sa na príklad:

//HTML

//CSS .parent .children ( farba: #666; ) .parent ( padding: 10px; color: #999; )

Z príkladu vidíme, že v CSS je napísaná kaskáda, v ktorej je trieda .rodič stojí na prvom mieste, za ním je trieda dieťaťa označená medzerou .deti, ktorá je zodpovedná za štylizáciu iba detského prvku. Podradená značka musí byť vnorená do značky s triedou .rodič. Ak v dokumente HTML odstránime značku .deti zo značky div s triedou .rodič, stratí svoj dizajn, pretože kaskáda už nebude fungovať, štruktúra je rozbitá.

Čo dostaneme ako výsledok nášho príkladu. Značka .children bude mať farbu textu #666, pretože má dlhšiu kaskádu, a značka .parent bude mať farbu #999. Nadradená trieda bude mať 10px výplň, zatiaľ čo podradená trieda nie, pretože vlastnosť výplne sa nevzťahuje na podradené prvky. Ak však odstránime farba: #666; pri voliči .rodič .deti, potom bude jeho text vymaľovaný vo farbe rodiča farba: #999;

Kaskádovanie a dedičnosť vám umožňujú štýlovať špecifické prvky na stránke a uprednostňovať, ktoré štýly sa použijú. Pozrime sa na hierarchiu priorít.

1. Najvyššiu prioritu majú nehnuteľnosti s konštrukciou uvedenou na konci ich priznania. !dôležité. Nezáleží na tom, ako vnorený je selektor, ako sa používajú štýly - vložené alebo zahrnutím externého súboru, budú mať najvyššiu prioritu. Vrelo odporúčam nepoužívať !dôležité pri stylingu, pretože v procese podpory alebo dokonca v procese vývoja v budúcnosti nevyhnutne vznikne zmätok, ktorý zachráni iba refaktoring štýlov. Ako ukazuje prax, vždy existuje spôsob, ako nepoužiť !dôležité.
   Príklad použitia!important: .my-class ( background-color: #999!important; )
2. Ďalšou najdôležitejšou prioritou sú inline štýly, ktoré sa zapisujú do samotnej značky prostredníctvom atribútu štýl ktorým sme sa už venovali:
3. Štýly nastavené v značke štýlu v samotnom dokumente majú prednosť;
4. Štýly pripojené k dokumentu ako externý súbor CSS prostredníctvom značky majú ešte nižšiu prioritu.
5. Najnižšiu prioritu, okrem štandardných štýlov prehliadača, majú nadradené štýly selektora pred podriadenými, napríklad:
   //HTML

   Ďaleko, ďaleko za verbálnymi horami.

   //CSS .my-class ( margin: 10px; ) bude mať nižšiu prioritu pre potomka p než: .my-class p ( margin: 15px; ) Výsledná značka

   .my-class v značke class získa hodnotu vlastnosti margin: 15px.

Za zmienku tiež stojí, že počet tried alebo identifikátorov, ako aj prítomnosť ďalších pseudotried a konštruktov v selektore, zvyšujú prioritu pre štýl:

My-class.class-2 ( margin: 10px; ) bude mať prednosť pred: .my-class ( margin: 15px; )

Atď. v logickom reťazci.

Nakoniec, pokiaľ ide o priority, je dôležité poznamenať, že štýly, ktoré sa objavia v nasledujúcich deklaráciách ďalej v dokumente, majú tiež najvyššiu prioritu. Napríklad:

Moja-trieda ( margin: 10px; ) bude mať prednosť pred presne tým istým selektorom, ktorý za ním nasleduje: .my-class ( margin: 15px; )

Výsledkom je, že posledný selektor v toku dokumentu získa hodnotu vlastnosti margin: 15px, pretože má najvyššiu prioritu. Ak by však bol selektor prvej deklarácie dlhší, určite by mali prednosť hodnoty jeho vlastností.

Čo sa týka dedenia, tu je všetko jednoduché. Všetky podradené prvky zdedia niektoré vlastnosti rodiča. Aké vlastnosti sa dedia, musíte zistiť v procese štúdia rôzne vlastnosti a ich uplatnenie v praxi. Napríklad farbu textu potomkovia vždy zdedia, zatiaľ čo odsadenie nie.

Časť 2. Vlastnosti CSS

Myslím si, že nemá zmysel uvádzať všetky vlastnosti CSS, pretože ich je veľa a je praktickejšie odkázať na odkaz na všetky vlastnosti CSS. Odporúčam preštudovať si vlastnosti CSS v referencii HTMLBook.

Poďme sa však pozrieť na 10 najpoužívanejších vlastností CSS v rozložení. Vzal som si 10 veľké CSS súbory z mojich projektov a triedené vlastnosti podľa frekvencie používania.

Vlastníctvo CSS	Frekvencia používania	Popis
farba	960-krát	Farba textu prvku:
farba pozadia	755-krát	Farba pozadia prvku:
veľkosť písma	524-krát	Veľkosť písma:
nepriehľadnosť	435-krát	Úroveň priehľadnosti prvku:
vypchávka	372-krát	Veľkosť okrajov vo vnútri prvku:
šírka	356-krát	Šírka prvku bloku bez okrajov a okrajov:
marža	311-krát	Okraje prvkov:
výška	305-krát	Výška prvku bloku bez okrajov a okrajov:
font-weight	280 krát	Hmotnosť písma:
zarovnanie textu	245-krát	Vodorovné zarovnanie textu:

Časť 3. Mediálne otázky

CSS Media Queries je základom pre vytvorenie responzívneho rozloženia, ktoré vám umožňuje štýlovať prvky v závislosti od veľkosti obrazovky alebo zariadenia, na ktorom sa webová stránka zobrazuje. Technicky mediálny dopyt je jednoduchý booleovský výraz, ktorý môže byť pravdivý alebo nepravdivý. Podmienkou takéhoto vyjadrenia sú buď parametre zariadenia, na ktorom sa webová stránka zobrazuje, alebo veľkosť obrazovky v pixeloch.

V tomto návode sa budeme zaoberať základnými funkciami mediálnych dopytov, ktoré sú potrebné pre adaptívne rozloženie a sú prakticky užitočné.

Mediálny dotaz je napísaný v samotnom súbore štýlu alebo v tele dokumentu (značka štýlu) a začína deklaráciou pravidla @media. Štruktúra mediálneho dopytu je pomerne jednoduchá:

Podmienkou môže byť buď zariadenie – všetky (všetky zariadenia), obrazovka, tlač, tv atď., alebo mediálne funkcie, ktoré nastavujú parametre zariadenia alebo rozlíšenie obrazovky, na ktorej sa dokument zobrazuje.

Najčastejšie používané funkcie médií presne určujú maximálne a minimálne rozlíšenie obrazovky zariadenia:

Tu zariadenia s maximálnym rozlíšením obrazovky 480px alebo minimálne rozlíšenie 320px vykreslí text značky s triedou .my-class sivou. Táto podmienka Uviedol som príklad, je prakticky zbytočný. Najčastejšie je potrebné zadať buď len maximálne rozlíšenie, alebo len minimum, v rámci ktorého sa vlastnosť uplatní.

Okrem iného, ​​ako vidíme z príkladu, funkcie môžu obsahovať podmienky a (a), nie (NIE) a (len pre staršie prehliadače, ktoré nepodporujú mediálne dopyty). nie logický operátor alebo (ALEBO), jeho úlohu zohráva čiarka. Ako vidíme, mediálne funkcie sú uzavreté v pravidelných zátvorkách.

Umiestnenie vlastností do mediálneho dotazu nedáva žiadnu prednosť, takže je zmysluplnejšie umiestniť mediálne dotazy koniec css dokument alebo odovzdať podľa značky odkaz externý súbor CSS s mediálnymi dopytmi po načítaní hlavných štýlov stránky, aby sa správne prepísali tieto štýly v rôznych rozlíšeniach alebo na rôznych zariadeniach.

1. Skúste použiť iba externé zahrnuté súbory CSS. Interný styling používajte len vtedy, ak je to nevyhnutné pre správne fungovanie webu;
2. Skúste sa štylizovať iba triedy. Neštýlujte identifikátory (nastavené s id="hash" a napísané s #hash). Pokúste sa upraviť značky bez tried menej. Napríklad, ak upravíte štýl značky h3 a potom neskôr SEO špecialista rozhodne, že názov je tu nevhodný, bežný div by mal mať rovnaké vlastnosti s triedou názvu a mal by byť tiež vykreslený. Prípadne môžete duplikovať HTML tagy do tried napr. .h1, .h2, .h3, .päta, .hlavička, .aside a podľa toho ich štylizujte;
3. Pokúste sa štýlovať prvky čo najautonómnejšie, zredukujte kaskádový reťazec na jeden blok, aby bolo menej závislostí na nadradených prvkoch. Je to potrebné pre čo najefektívnejšie opätovné použitie blokov na stránke a ich úpravu na iných miestach rozloženia. Ale bez fanatizmu. Každej značke v bloku by ste nemali prideľovať samostatné triedy, ak sa to nemá. offline použitie. Ak presuniete blok na iné miesto na stránke, mal by sa tiež zobraziť a nemal by závisieť od rodiča. To vám pomôže použiť nejaký druh metodológie pomenovania tried. Nezáleží na tom, či je to BEM, metodológia alebo vyvinutá na základe vašej osobná skúsenosť alebo jednoduché pravidlá mnou navrhovaný je lepší ako svojvoľné pomenovanie tried a vytváranie nelogických a dlhých reťazcov tried;
4. Pokúste sa pomenovať triedy značiek podľa funkcie bloku, nie podľa toho, aký bude obsah v ňom. Ak máte napríklad sekciu karuselu recenzií, nepomenúvajte selektory pomocou slov recenzie, otzivy atď. lepšie meno kolotoč-raz, ak sa plánuje zobrazenie jednej položky karuselu na stránku. V budúcnosti možno tento kolotoč využijete nielen na vytváranie recenzií, ale tento kód využijete napríklad aj na zobrazenie zoznamu firemných kolegov. V tomto prípade názov triedy recenzie by bolo trochu nevhodné;
5. Použite CSS preprocesory, nie je to také ťažké. Moja voľba padla na preprocesor Sass na pomerne dlhú dobu a odporúčam ho používať. Máme pekný tutoriál, v ktorom vám poviem, aké ľahké je používať preprocesor a ako uľahčuje život: ;
6. Použite resetovanie predvolených štýlov prehliadača alebo normalizáciu, čím sa predvolené štýly dostanú do spoločného menovateľa vo všetkých prehliadačoch. Používam vo svojich projektoch normalizovať.css, ktorý je súčasťou Bootstrap CSS frameworku;
7. Keď máte pocit, že vo svojom procese rozloženia robíte príliš veľa opakovanej práce, prejdite na používanie frameworku CSS alebo si vytvorte vlastný s najčastejšie používanými prvkami, urýchli to vašu prácu. Používam len v práci Bootstrap mriežka bez štylistického dizajnu tlačidiel, panelov a iných prvkov. To je dosť na efektívnu prácu. Dobrá odozva predvolenej mriežky Bootstrap je tiež príjemná;
8. Experimentujte s vlastnosťami sami. Otvorte referenciu CSS a skúste. Len tak získate skúsenosti, zapamätáte si, ktorá vlastnosť čo robí a privediete písanie štýlov dokumentov k automatizácii.