CSS (kaskádové styly) je jazyk šablon stylů, který umožňuje připojení stylů (jako jsou písma a barvy) ke strukturovaným dokumentům (jako jsou dokumenty HTML a aplikace XML). Styly CSS se obvykle používají k vytváření a změně stylu prvků webové stránky a uživatelská rozhraní zapsáno v HTML jazyky a XHTML, ale lze je také použít na jakýkoli druh dokumentu XML, včetně XML, SVG a XUL. Oddělením stylu prezentace dokumentů od obsahu dokumentů CSS usnadňuje vytváření webových stránek a jejich údržbu.

CSS podporuje šablony stylů pro konkrétní média, takže autoři mohou přizpůsobit prezentaci svých dokumentů vizuální prohlížeče, sluchadla, tiskárny, braillská zařízení, ruční zařízení atd.

Kaskádové styly popisují pravidla pro formátování prvků pomocí vlastností a povolené hodnoty tyto vlastnosti. Pro každý prvek můžete použít omezenou sadu vlastností, ostatní vlastnosti na něj nebudou mít žádný vliv.

Deklarace stylu má dvě části: volič a reklamy. V HTML se v názvech prvků nerozlišují malá a velká písmena, takže "h1" funguje stejně jako "H1". Deklarace se skládá ze dvou částí: názvu vlastnosti (například barva) a hodnoty vlastnosti (šedá). Selektor říká prohlížeči, který prvek má formátovat, a deklarační blok (kód ve složených závorkách) uvádí formátovací příkazy - vlastnosti a jejich hodnoty.


Rýže. 1. Struktura reklamy

Ačkoli se výše uvedený příklad pokouší ovlivnit pouze několik vlastností potřebných k vykreslení dokumentu HTML, sám o sobě se kvalifikuje jako šablona stylů. V kombinaci s jinými styly (jeden základní CSS funkce je, že se styly sloučí), pravidlo určí konečnou prezentaci dokumentu.

Typy kaskádových stylů a jejich specifika

1. Druhy stylů

1.1. Externí šablona stylů

Externí šablona stylů představuje textový soubor s příponou .css, která obsahuje sadu stylů CSS pro prvky. Soubor se vytvoří v editoru kódu, stejně jako stránka HTML. Soubor může obsahovat pouze styly, žádné HTML značky. Externí šablona stylů je připojena k webové stránce pomocí značky umístěné uvnitř sekce . Tyto styly fungují pro všechny stránky webu.

Ke každé webové stránce můžete připojit více šablon stylů přidáním více značek za sebou , určující účel této šablony stylů v atributu media tag. rel="stylesheet" označuje typ odkazu (odkaz na šablonu stylů).

Atribut type="text/css" standard HTML5 nevyžaduje, lze jej tedy vynechat. Pokud atribut chybí, je výchozí typ="text/css" .

1.2. Vnitřní styly

Vnitřní styly vložené do sekce HTML dokumentu a jsou definovány uvnitř značky. Interní styly mají přednost před externími styly, ale přepisují vložené styly (určené pomocí atributu style).

...

1.3. Inline styly

Když píšeme inline styly, zapíšeme kód CSS do souboru HTML přímo do značky prvku pomocí atributu style:

Věnujte pozornost tomuto textu.

Takové styly ovlivňují pouze prvek, pro který jsou nastaveny.

1.4. @import pravidlo

@import pravidlo umožňuje načíst externí šablony stylů. Aby direktiva @import fungovala, musí být umístěna v šabloně stylů (externí nebo interní) před všemi ostatními pravidly:

Pravidlo @import se také používá k zahrnutí webových písem:

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

2. Typy selektorů

Selektory představují strukturu webové stránky. Používají se k vytváření pravidel pro formátování prvků webové stránky. Selektory mohou být prvky, jejich třídy a identifikátory, stejně jako pseudotřídy a pseudoprvky.

2.1. Univerzální volič

Odpovídá jakémukoli prvku HTML. Například * (margin: 0;) obnoví okraje pro všechny prvky webu. Selektor lze také použít v kombinaci s pseudotřídou nebo pseudoprvkem: *:after (CSS styly), *:checked (CSS styly) .

2.2. Selektor prvku

Selektory prvků umožňují formátovat všechny prvky tohoto typu na všech stránkách webu. Například h1 (rodina písem: Humr, kurzíva;) nastaví obecný styl formátování pro všechny nadpisy h1.

2.3. selektor třídy

Selektory tříd vám umožňují stylovat jeden nebo více prvků se stejným názvem třídy různá místa stránce nebo na různé stránky místo. Chcete-li například vytvořit nadpis s třídou nadpisu, musíte přidat atribut třídy s hodnotou nadpisu v úvodní značce

a nastavte styl pro zadanou třídu. Styly vytvořené pomocí třídy lze použít na jiné prvky, ne nutně tohoto typu.

.headline ( text-transform: velká písmena; barva: světle modrá; )

Pokud má prvek více atributů třídy, jejich hodnoty jsou zřetězeny mezerami.

Pokyny pro používání osobního počítače

2.4. Volič ID

Volič ID umožňuje formátování jeden konkrétní prvek. Hodnota id musí být jedinečná, na jedné stránce se může vyskytovat pouze jednou a musí obsahovat alespoň jeden znak. Hodnota nesmí obsahovat mezery.

Neexistují žádná další omezení, jaká forma může mít id, konkrétně identifikátory mohou být pouze číslice, začínat číslicí, začínat podtržítkem, pouze interpunkcí atd.

Jedinečný identifikátor prvku lze použít pro různé účely, včetně způsobu odkazování na konkrétní části dokumentu pomocí identifikátorů fragmentů, jako způsob cílení na prvek ve skriptování a jako způsob stylování konkrétního prvku z CSS. .

#sidebar ( šířka: 300px; plovoucí: vlevo; )

2.5. Selektor potomků

Potomkové selektory aplikují styly na prvky umístěné uvnitř prvku kontejneru. Například ul li (text-transform: velká písmena;) vybere všechny prvky li, které jsou potomky všech prvků ul.

Pokud chcete formátovat potomky určitého prvku, musíte tomuto prvku přiřadit třídu stylu:

p.first a (barva: zelená;) - daný styl bude aplikováno na všechny odkazy, potomky odstavce s třídou jako první ;

p .first a (barva: zelená;) – pokud přidáte mezeru, budou stylizovány odkazy umístěné uvnitř jakékoli značky .first class, která je potomkem prvku

First a (color: green;) – tento styl bude aplikován na jakýkoli odkaz umístěný uvnitř jiného prvku, označeného třídou .first.

2.6. Dětský volič

Podřízený prvek je přímým potomkem svého obsahujícího prvku. Prvek může mít více podřízených prvků a každý prvek může mít pouze jeden nadřazený prvek. Podřízený selektor umožňuje použití stylů pouze v případě, že podřízený prvek následuje bezprostředně za nadřazeným prvkem a mezi nimi nejsou žádné další prvky, tj. podřízený prvek není vnořen do ničeho jiného.
Například p > silný vybere všechny silné prvky, které jsou potomky prvku p.

2.7. Sestra volič

Sourozenecké vztahy se vyskytují mezi prvky, které mají společného rodiče. Selektory sourozeneckých prvků umožňují vybrat prvky ze skupiny sourozeneckých prvků.

h1 + p - vybere všechny první odstavce bezprostředně za libovolnou značkou

aniž by to ovlivnilo zbytek odstavců;

h1 ~ p vybere všechny odstavce, které jsou sourozenci jakéhokoli nadpisu h1 a bezprostředně za ním.

2.8. Volič atributů

Selektory atributů vybírají prvky na základě názvu atributu nebo hodnoty atributu:

[attribute] - všechny prvky obsahující zadaný atribut, - všechny prvky, pro které je nastaven atribut alt;

selector[attribute] - prvky tohoto typu, které obsahují zadaný atribut, img - pouze obrázky, pro které je nastaven atribut alt;

selector[attribute="value"] — prvky tohoto typu, které obsahují zadaný atribut s konkrétní hodnotou, img — všechny obrázky, jejichž názvy obsahují slovo květina ;

selector[attribute~="value"] - prvky částečně obsahující danou hodnotu, například pokud má prvek několik tříd oddělených mezerou, p - odstavce, jejichž název třídy obsahuje feature ;

selector[attribute|="value"] - prvky, jejichž seznam hodnot atributů začíná zadaným slovem, p - odstavce, jejichž název třídy feature nebo začíná feature ;

selector[attribute^="value"] - prvky, jejichž hodnota atributu začíná zadanou hodnotou, a - všechny odkazy začínající http:// ;

selector[attribute$="value"] - prvky, jejichž hodnota atributu končí zadanou hodnotou, img - všechny obrázky ve formátu png;

selector[attribute*="value"] - prvky, jejichž hodnota atributu obsahuje zadané slovo kdekoli, a - všechny odkazy, jejichž název obsahuje knihu .

2.9. Selektor pseudotřídy

Pseudotřídy jsou třídy, které ve skutečnosti nejsou připojeny ke značkám HTML. Umožňují vám aplikovat pravidla CSS na prvky, když dojde k události nebo se podřídí určitému pravidlu. Pseudotřídy charakterizují prvky s následujícími vlastnostmi:

:hover - jakýkoli prvek, nad kterým je umístěn kurzor myši;

:focus - interaktivní prvek, na který bylo navigováno pomocí klávesnice nebo aktivováno pomocí myši;

:active - prvek, který byl aktivován uživatelem;

:valid - pole formuláře, jejichž obsah byl v prohlížeči ověřen z hlediska souladu se zadaným datovým typem;

:invalid - pole formuláře, jejichž obsah neodpovídá zadanému datovému typu;

:enabled - všechna aktivní pole formuláře;

:disabled - vypnutá pole formuláře, tj. v neaktivním stavu;

:in-range - pole formuláře, jejichž hodnoty jsou v určeném rozsahu;

:out-of-range - pole formuláře, jejichž hodnoty nejsou zahrnuty v nastaveném rozsahu;

:lang() - prvky s textem v určeném jazyce;

:not(selektor) - prvky, které neobsahují zadaný selektor - třída, identifikátor, název nebo typ pole formuláře - :not() ;

:target je prvek #, na který se v dokumentu odkazuje;

:checked - vybrané (uživatelem vybrané) prvky formuláře.

2.10. Strukturální volič pseudotřídy

Výběr strukturálních pseudotříd podřízené prvky podle parametru uvedeného v závorce:

:nth-child(liché) - liché podřízené prvky;

:n-té dítě(sudé) - sudé podřízené prvky;

:nth-child(3n) - každý třetí prvek mezi dětmi;

:nth-child(3n+2) - vybere každý třetí prvek, počínaje druhým potomkem (+2) ;

:nth-child(n+2) - vybere všechny prvky, počínaje druhým;

:nth-child(3) - vybere třetí podřízený prvek;

:nth-last-child() - v seznamu podřízených prvků vybere prvek s zadané místo, podobně jako :nth-child() , ale zpětně od posledního;

:first-child - umožňuje stylizovat pouze úplně první podřízený prvek značky;

:last-child - umožňuje formátovat poslední podřízený prvek značky;

:only-child - vybere prvek, který je jediným potomkem;

:empty - vybere prvky, které nemají žádné potomky;

:root - vybere prvek, který je kořenem dokumentu - prvek html.

2.11. Selektor pseudotříd strukturního typu

Ukažte na konkrétní typ podřízené značky:

:nth-of-type() - vybírá prvky analogicky s :nth-child() , přičemž bere v úvahu pouze typ prvku;

:first-of-type - vybere prvního potomka daného typu;

:last-of-type - vybere poslední prvek daného typu;

:nth-last-of-type() - vybere prvek daného typu v seznamu prvků podle zadaného umístění, počínaje od konce;

:only-of-type - vybere jediný prvek zadaného typu mezi potomky nadřazeného prvku.

2.12. Selektor pseudoprvků

Pseudoprvky se používají k přidání obsahu, který je vygenerován pomocí vlastnosti content:

:first-letter - vybere první písmeno každého odstavce, platí pouze pro prvky bloku;

:first-line - vybere první řádek textu prvku, platí pouze pro prvky bloku;

:before - vloží vygenerovaný obsah před prvek;

:after - Přidá vygenerovaný obsah za prvek.

3. Kombinace selektorů

Pro přesnější výběr prvků pro formátování můžete použít kombinace selektorů:

img:nth-of-type(even) - vybere všechny sudé obrázky, jejichž alternativní text obsahuje slovo css .

4. Selektory seskupení

Stejný styl lze použít na více prvků současně. Chcete-li to provést, na levé straně deklarace uveďte potřebné selektory oddělené čárkami:

H1, h2, p, span ( barva: rajče; pozadí: bílá; )

5. Dědičnost a kaskáda

Dědičnost a kaskádování jsou dva základní pojmy v CSS, které spolu úzce souvisí. Dědičnost znamená, že prvky dědí vlastnosti od svého rodiče (prvku, který je obsahuje). Kaskáda se projevuje v tom, jak jsou na dokument aplikovány různé druhy šablon stylů a jak se navzájem konfliktní pravidla přepisují.

5.1. Dědictví

Dědictví je mechanismus, kterým se určité vlastnosti předávají z předka na jeho potomky. Specifikace CSS poskytuje dědění vlastností souvisejících s textovým obsahem stránky, jako je barva , písmo , řádkování , výška řádku , styl seznamu , zarovnání textu , odsazení textu , transformace textu , viditelnost, mezery a mezery mezi slovy. V mnoha případech je to výhodné, protože nemusíte nastavovat velikost písma a rodinu písem pro každý prvek na webové stránce.

Vlastnosti formátování bloku se nedědí. Jsou to pozadí , ohraničení , zobrazení , plovoucí a čisté , výška a šířka , okraj , min-max-výška a -šířka , obrys , přetečení , odsazení , pozice , zdobení textu , svislé zarovnání a z-index.

Nucené dědictví

Používáním klíčové slovo dědit může donutit prvek, aby zdědil jakoukoli hodnotu vlastnosti svého nadřazeného prvku. To funguje i pro vlastnosti, které se ve výchozím nastavení nedědí.

Jak se nastavují a fungují styly CSS

1) Styly lze zdědit z nadřazeného prvku (zděděné vlastnosti nebo pomocí dědičné hodnoty);

2) Styly v šabloně stylů níže přepíší styly v šabloně stylů výše;

3) Na jeden prvek lze použít styly z různých zdrojů. Ve vývojářském režimu prohlížeče můžete zkontrolovat, které styly se používají. Chcete-li to provést, klikněte na prvek. klikněte pravým tlačítkem myši myši a vyberte "Zobrazit kód" (nebo něco podobného). V pravém sloupci budou uvedeny všechny vlastnosti, které jsou nastaveny pro tento prvek nebo zděděny z nadřazeného prvku, a také soubory stylů, ve kterých jsou specifikovány, a sériové číslořádky kódu.


Rýže. 2. Režim vývojáře v Prohlížeč Google Chrome

4) Při definování stylu můžete použít libovolnou kombinaci selektorů – selektor prvku, pseudotřídu prvku, třídu nebo identifikátor prvku.

div (ohraničení: 1px solid #eee;) #wrap (šířka: 500px;) .box (float: left;) .clear (clear: both;)

5.2. Kaskáda

Kaskádové je mechanismus, který řídí konečný výsledek v situaci, kdy jsou na stejný prvek aplikována různá pravidla CSS. Existují tři kritéria, která určují pořadí, ve kterém jsou vlastnosti aplikovány - !důležité pravidlo, specifičnost a pořadí, ve kterém jsou zahrnuty šablony stylů.

Pravidlo! důležité

Váhu pravidla lze nastavit pomocí klíčového slova !important, které se přidá bezprostředně za hodnotu vlastnosti, například span (váha písma: bold!important;) . Pravidlo musí být umístěno na konec deklarace před uzavírací závorku, bez mezery. Takové prohlášení bude mít přednost před všemi ostatními pravidly. Toto pravidlo umožňuje zrušit hodnotu vlastnosti a nastavit novou pro prvek ze skupiny prvků v případě, že není přímý přístup k souboru stylu.

Specifičnost

Pro každé pravidlo prohlížeč vypočítá specifičnost selektoru a pokud má prvek konfliktní deklarace vlastností, vezme se v úvahu pravidlo s nejvyšší specifičností. Hodnota specificity má čtyři části: 0, 0, 0, 0 . Specifičnost selektoru je definována takto:

0, 1, 0, 0 je přidáno pro id;
pro třídu 0 se přidává 0, 1, 0;
0, 0, 0, 1 se přidá pro každý prvek a pseudoprvek;
pro inline styl přidaný přímo k prvku 1, 0, 0, 0 ;
univerzální volič nemá žádnou specifičnost.

H1 (barva: světle modrá;) /*specifičnost 0, 0, 0, 1*/ em (barva: stříbrná;) /*specifičnost 0, 0, 0, 1*/ h1 em (barva: zlatá;) /*specifičnost: 0, 0, 0, 1 + 0, 0, 0, 1 = 0, 0, 0, 2*/ div#main p.about (barva: modrá;) /*specifičnost: 0, 0, 0, 1 + 0 , 1, 0, 0 + 0, 0, 0, 1 + 0, 0, 1, 0 = 0, 1, 1, 2*/ .sidebar (barva: šedá;) /*specifičnost 0, 0, 1, 0 */ #sidebar (barva: oranžová;) /*specifičnost 0, 1, 0, 0*/ li#sidebar (color: aqua;) /*specifičnost: 0, 0, 0, 1 + 0, 1, 0, 0 = 0, 1, 0, 1*/

V důsledku toho budou na prvek aplikována ta pravidla, jejichž specifičnost je větší. Pokud má například prvek dvě specifika s hodnotami 0, 0, 0, 2 a 0, 1, 0, 1, vyhraje druhé pravidlo.

Pořadí spojených tabulek

Můžete vytvořit více externích šablon stylů a propojit je se stejnou webovou stránkou. Pokud různé tabulky obsahují různé hodnoty vlastností jednoho prvku, pak se v důsledku toho pravidlo použije na prvek, který je v seznamu stylů v seznamu níže.

CSS (Cascading Style Sheets) je kód, který používáte ke stylování své webové stránky. Základy CSS vám pomohou pochopit, co potřebujete, abyste mohli začít. Odpovíme na otázky jako: Jak udělám svůj text černým nebo červeným? Jak zajistit, aby se obsah zobrazoval na určitém místě na obrazovce? Jak ozdobit svou webovou stránku obrázky na pozadí a květiny?

Co je tedy CSS?

Stejně jako HTML, ani CSS není ve skutečnosti programovací jazyk. Není to značkovací jazyk, ano jazyk stylů. To znamená, že umožňuje selektivní aplikaci stylů na prvky v dokumentech HTML. Například pro výběr Všechno odstavcové prvky na stránce HTML a změnit text v nich z černé na červenou, musíte napsat tento CSS:

P (barva: červená; )

Zkusme: vložte tyto tři css řetězce v nový soubor ve vašem textový editor a poté soubor uložte jako style.css do složky stylů.

Stále však musíme použít CSS na náš HTML dokument. Jinak styl CSS neovlivní způsob, jakým váš prohlížeč vykresluje dokument HTML. (Pokud jste náš projekt nesledovali, přečtěte si Základy práce se soubory a HTML, abyste zjistili, co musíte udělat jako první.)

  1. Otevřete svůj soubor index.html a vložte následující řádek někam do záhlaví a značky:
  2. Uložte index.html a načtěte jej do prohlížeče. Měli byste vidět něco takového:

Pokud je nyní text vašeho odstavce červený, gratulujeme! Napsali jste svůj první úspěšný CSS!

Anatomie sady pravidel CSS

Pojďme se na výše uvedené CSS podívat trochu podrobněji:

Celá struktura se nazývá seznam pravidel(ale často zkráceně „vládnou“). Všimněte si také názvů jednotlivých dílů:

Selektor Název prvku HTML na začátku sady pravidel. Vybere prvky, na které se má styl použít (v tomto případě prvky p). Chcete-li stylizovat další prvek, stačí změnit volič. Deklarace Jednotné pravidlo, např. barva: červená; označuje který z vlastnosti prvek, který chcete stylizovat. Vlastnosti Způsoby, kterými můžete upravit styl určitého prvku HTML (v tomto případě je barva vlastností prvků, které definují odstavec textu.">

). V CSS si vyberete, které vlastnosti chcete v pravidle ovlivnit. Hodnota nemovitosti Napravo od nemovitosti za dvojtečkou máme hodnota majetku, který si vybere jednu ze sady možné hodnoty pro tuto vlastnost (existuje mnoho barevných hodnot kromě červené).

Všimněte si důležitých částí syntaxe:

  • Každá sada pravidel (kromě selektoru) musí být zabalena do složených závorek (()).
  • V každé deklaraci musíte použít dvojtečku (:), abyste oddělili vlastnost od jejích hodnot.
  • V každé sadě pravidel musíte použít středník (;) k oddělení každé deklarace od následující.

Chcete-li tedy změnit více hodnot vlastností najednou, stačí je napsat oddělené středníky, například:

P ( barva: červená; šířka: 500px; ohraničení: 1px plná černá; )

Výběr více položek

Můžete také vybrat více prvků různých typů a na všechny použít stejnou sadu pravidel. Přidejte více selektorů oddělených čárkami. Například:

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

Různé typy selektorů

Je jich mnoho různé typy volič. Výše jsme pouze uvažovali selektor prvku, který vybere všechny prvky určitého typu v HTML dokument. Výběr ale můžeme upřesnit. Zde jsou některé z nejběžnějších typů selektorů:

Název selektoru Co si vybere Příklad
Selektor prvku (někdy nazývaný selektor značek nebo typů) Všechny prvky HTML zadaného typu. p
vybírá

Volič ID Prvek na stránce se zadaným ID (na jedné stránce HTML může být pouze jeden prvek s libovolným ID). #můj průkaz
vybírá

Nebo

selektor třídy Element(y) na stránce se zadanou třídou (na stránce lze deklarovat více instancí třídy). .moje třída
vybírá

A

Volič atributů Prvek (prvky) na stránce se zadaným atributem. img
vybírá ale ne
Pseudo volič třídy Zadaný prvek (prvky), ale pouze v případě, že nastane určitý stav, jako je například přechod. a: vznášet se
vybírá , ale pouze když je ukazatel myši nad odkazem.

Písma a text

Nyní, když jsme probrali některé základy CSS, přidejte do souboru style.css další pravidla a informace, aby náš příklad vypadal dobře. Za prvé, pojďme trochu vylepšit naše písma a text.

  1. Nejprve se vraťte a najděte ten, který jste již někde uložili. Přidejte prvek někde v záhlaví vašeho index.html (opět kdekoli mezi značkami a). Bude to vypadat nějak takto:
  2. Dále odstraňte existující pravidlo v souboru style.css. Toto bylo dobrý test, ale červený text opravdu nevypadá dobře.
  3. Přidejte následující řádky do Správné místo, nahraďte zástupný řetězec skutečným řetězcem rodiny písem, který jste získali z Google Fonts. (font-family jednoduše znamená, které písmo (fonty) chcete použít pro svůj text). Toto pravidlo nastavuje globální základní písmo a velikost písma pro celou stránku (protože je rodič celé stránky a všechny prvky v ní dědí stejnou velikost písma a rodinu písem): html ( velikost písma: 10px; /* px znamená „pixely“: základní písmo bude vysoké 10 pixelů * / font -family: zástupný symbol: toto by měl být název písma z písem Google )

    Poznámka: Vše v dokumentu CSS mezi /* a */ je CSS komentář , který prohlížeč při provádění kódu ignoruje. Toto je místo, kde si můžete psát užitečné poznámky o tom, co děláte.

  4. Nyní nastavíme velikost písma pro prvky obsahující text uvnitř těla HTML (

    a definuje odstavec textu.">

    ). Text nadpisu také vycentrujeme a v těle dokumentu nastavíme určitou výšku řádků a mezery mezi písmeny, aby byl o něco čitelnější: h1 (velikost písma: 60px; zarovnání textu: na střed; ) p, li (velikost písma: 16px; výška řádku: 2; mezera mezi písmeny: 1px; )

Hodnoty px můžete upravit jakkoli, aby váš návrh vypadal tak, jak chcete, ale obecně by váš návrh měl vypadat takto:

Bloky, bloky a další bloky

Jedna věc, které si všimnete při psaní CSS, je, že hodně z toho je o blocích – přizpůsobení jejich velikosti, barvy, pozice a tak dále. Většinu prvků HTML na stránce si lze představit jako bloky naskládané na sobě.

Není divu, že rozložení CSS je založeno především na krabicový model. Každý z bloků, které zabírají místo na vaší stránce, má vlastnosti jako:

  • výplň , mezera pouze kolem obsahu (například kolem odstavce textu)
  • border , plná čára, která se nachází vedle výplně
  • margin , prostor kolem vnější strany prvku

V této sekci také používáme:

  • šířka (šířka prvku)
  • background-color , barva za obsahem a prvky výplně
  • barva , barva obsahu prvku (obvykle text)
  • text-shadow: nastaví stín na textu uvnitř prvku
  • display: nastavuje režim zobrazení prvku (prozatím si s tím nedělejte starosti)

Pojďme tedy začít a přidat na naši stránku další CSS! Pokračujte v přidávání těchto nových pravidel na konec stránky a nebojte se experimentovat se změnami hodnot, abyste viděli, jak to funguje.

Změnit barvu stránky

html (barva pozadí: #00539F; )

Toto pravidlo nastavuje barvu pozadí pro celou stránku. Změňte kód barvy nahoře na barvu, která je .

Zacházení s tělem

tělo ( šířka: 600px; okraj: 0 auto; barva pozadí: #FF9500; výplň: 0 20px 20px 20px; okraj: 5px plná černá; )

Nyní pro živel. Je zde poměrně dost prohlášení, pojďme si je tedy postupně všechny projít:

  • šířka: 600px - vynutí, aby tělo bylo vždy široké 600 pixelů.
  • okraj: 0 auto; - když nastavíte dvě hodnoty pro vlastnosti, jako je margin nebo padding, první hodnota prvku ovlivní horní a spodní strana (v tomto případě z nich dělá 0) a druhá hodnota vlevo a pravá strana (zde auto je speciální hodnota, která rozděluje dostupný prostor vodorovně rovnoměrně vlevo a vpravo). Můžete také použít jednu, tři nebo čtyři hodnoty, jak je popsáno.
  • barva pozadí: #FF9500; - jako dříve nastaví barvu pozadí prvku. Na tělo jsem použil červenooranžovou, na rozdíl od tmavě modré pro ). Všechny ostatní prvky musí být potomky tohoto prvku."> prvek, ale klidně experimentujte.
  • padding: 0 20px 20px 20px; - máme nastaveny čtyři hodnoty odsazení, abychom kolem našeho obsahu poskytli určitý prostor. Tentokrát nenastavujeme odsazení na horní straně těla, ale 20px vlevo, dole a vpravo. Hodnoty jsou nastaveny nahoře, vpravo, dole, vlevo v tomto pořadí.
  • ohraničení: 5px plná černá; - jednoduše nastaví 5px široký plný černý okraj na všech stranách těla.

Umístění a styling záhlaví naší domovské stránky

h1 ( okraj: 0; odsazení: 20px 0; barva: #00539F; stín textu: 3px 3px 1px černá; )

Možná jste si všimli, že v horní části těla je hrozná trhlina. To se děje proto, že prohlížeče některé používají výchozí styl pro prvek

(ve srovnání s ostatními), i když jste nepoužili vůbec žádné CSS! Může to znít jako špatný nápad, ale my chceme, aby webová stránka bez stylů měla základní čitelnost. Abychom se zbavili mezery, přepíšeme výchozí styl nastavením margin: 0; .

Poté jsme nastavili horní a spodní odsazení záhlaví na 20 pixelů a text záhlaví jsme upravili na stejnou barvu jako barva pozadí html.

Zde jsme použili jednu docela zajímavou vlastnost, kterou je text-shadow , která aplikuje stín na textový obsahživel. Má následující čtyři významy:

  • Hodnota prvního pixelu určuje horizontální odsazení stín textu – jak daleko se pohybuje: záporná hodnota by jej měla posunout doleva.
  • Hodnota druhého pixelu určuje vertikální odsazení stín textu - jak daleko se pohybuje dolů, v tomto příkladu: záporná hodnota by jej měla posunout nahoru.
  • Hodnota třetího pixelu určuje poloměr rozostření stíny - větší hodnota bude znamenat více rozmazaný stín.
  • Čtvrtá hodnota určuje základní barvu stínu.

Znovu zkuste experimentovat s různými hodnotami, abyste viděli, na co můžete přijít.

Poslední aktualizace: 21.04.2016

Jakýkoli html dokument, bez ohledu na to, kolik prvků obsahuje, bude bez použití stylů v podstatě „mrtvý“. Styly nebo lépe řečeno kaskádové styly (Cascading Style Sheets) nebo jednoduše CSS definují prezentaci dokumentu, jeho vzhled. Pojďme se rychle podívat na použití stylů v kontextu HTML5.

Styl v CSS je pravidlo, které říká webovému prohlížeči, jak formátovat prvek. Formátování může zahrnovat nastavení barvy pozadí prvku, nastavení barvy a typu písma a tak dále.

Definice stylu má dvě části: selektor, který ukazuje na prvek, a blok deklarace stylu- sada příkazů, které nastavují pravidla formátování. Například:

Div( background-color:red; width: 100px; height: 60px; )

V tomto případě je selektor div . Tento selektor určuje, že tento styl bude aplikován na všechny prvky div.

Po selektoru ve složených závorkách následuje blok deklarace stylu. Mezi otevíracími a zavíracími složenými závorkami jsou definovány příkazy, které označují způsob formátování prvku.

Každý příkaz se skládá z vlastnosti a hodnoty. Tedy v následujícím výrazu:

barva pozadí:červená;

background-color představuje vlastnost a červená představuje hodnotu. Vlastnost definuje konkrétní styl. Existuje mnoho vlastností CSS. Například barva pozadí určuje barvu pozadí. Za dvojtečkou následuje hodnota dané vlastnosti. Například výše uvedený příkaz nastaví vlastnost background-color na červenou . Jinými slovy, barva pozadí prvku je nastavena na „červenou“, tedy červenou.

Za každým příkazem následuje středník, který daný příkaz odděluje od ostatních.

Sady takových stylů se často nazývají šablony stylů nebo CSS (Cascading Style Sheets nebo kaskádové styly). Existovat různé cesty definice stylu.

atribut stylu

Prvním způsobem je vložení stylů přímo do prvku pomocí atributu style:

Styly

Styly

Jsou zde definovány dva prvky – nadpis h2 a blok div. Nadpis má modrou barvu textu definovanou pomocí vlastnosti color. Blok div má vlastnosti width (width), height (height) a background-color (background-color).

Druhým způsobem je použití prvku style v html dokumentu. Tento prvek sděluje prohlížeči, že data uvnitř jsou css kód, ne html:

Styly

Styly

Výsledek v tomto případě bude úplně stejný jako v předchozím případě.

Prvek stylu je často definován v prvku head, ale lze jej použít i v jiných částech dokumentu HTML. Element style obsahuje sady stylů. Každý styl má nejprve selektor, za nímž následují stejné definice vlastností css a jejich hodnoty ve složených závorkách, jaké byly použity v předchozím příkladu.

Druhý způsob ano html kódčistší vložením stylů do prvku stylu. Existuje ale i třetí způsob, kterým je vložení stylů do externího souboru.

Vytvoříme ve stejné složce s html stránku textový soubor, na který přejmenujeme styly.css a definovat v něm následující obsah:

H2( barva:modrá; ) div( šířka: 100px; výška: 100px; barva pozadí: červená; )

Jedná se o stejné styly, které byly uvnitř prvku stylu. A také změnit kód html stránky:

Styly

Styly

Již zde není prvek stylu, ale existuje prvek odkazu, který obsahuje soubor styles.css vytvořený výše:

Tím, že definujeme styly v externím souboru, uděláme html kód čistším, struktura stránky je oddělena od jejího stylingu. Když jsou styly definovány tímto způsobem, je mnohem snazší je upravit, než kdyby byly definovány uvnitř prvků nebo na prvku stylu, a to je preferovaný způsob v HTML5.

Použití stylů v externích souborech umožňuje snížit zatížení webového serveru pomocí mechanismu ukládání do mezipaměti. Protože webový prohlížeč může soubor css uložit do mezipaměti a při příštím přístupu na webovou stránku načíst požadovaný soubor css z mezipaměti.

Je také možné, že se všechny tyto přístupy kombinují a pro jeden prvek jsou některé vlastnosti css definovány uvnitř prvku samotného, ​​jiné vlastnosti css jsou definovány uvnitř prvku stylu a další jsou v externím zahrnutém souboru. Například:

A v souboru styl.css je definován následující styl:

Div( šířka:50px; výška:50px; barva pozadí:červená; )

V tomto případě má prvek div vlastnost width definovanou na třech místech, with jiný význam. Jaká hodnota bude na prvek nakonec použita? Zde máme následující prioritní systém:

    Pokud má prvek definovány inline styly, pak mají nejvyšší prioritu, to znamená, že ve výše uvedeném příkladu bude celková šířka 120 pixelů

    Nejnižší prioritou jsou styly definované v externím souboru.

html atributy a css styly

Mnoho html prvky umožňují nastavit styly zobrazení pomocí atributů. Například u řady prvků můžeme pomocí atributů width a height nastavit šířku a výšku prvku, resp. Tomuto přístupu je však třeba se vyhnout a namísto vložených atributů používat styly CSS. Je důležité jasně pochopit, že HTML značky by měly poskytovat pouze strukturu html dokumentu a celý jeho vzhled, styling by měl být určen CSS styly.

Ověření kódu CSS

V procesu psaní CSS stylů mohou vyvstat otázky, zda je správné definovat styly tímto způsobem, zda jsou správné. A v tomto případě můžeme použít validátor css, který je dostupný na

Technika css používají především designéři, protože vytvářejí design webu. Je však chybou předpokládat, že webmasteři css není nutné vědět. Stačí si připomenout alespoň příklad z popisu části na. Kromě přenositelnosti vašeho webu vám styly umožňují vytvářet různá klasická designová řešení (například rozbalovací nabídku). A spolu s vám umožní vytvářet dynamiku HTML stránky (DHTML), jehož krása a pohodlí jsou občas prostě úžasné.

Samozřejmě, abyste mohli takové věci vytvořit, musíte se s nimi seznámit Základy CSS. A tato kategorie stránek vám to pomůže udělat co nejrychleji a nejefektivněji.

Celý kurz dál HTML, CSS a rozvržení webových stránek:

Po přečtení článků o základech CSS se naučíte:

1) Syntaxe css.

2) Metody a jejich pracovní priority styl css.

3) Volič zadá css.

4) css hacky prohlížeče.

5) Pravidla psaní css.

6) Jak vytvořit tooltip na css.

7) Jak změnit vzhled prvního písmene přes css.

8) Jak nastavit typ kurzoru css.

9) Jak změnit vzhled kurzoru při najetí myší css.

10) Jak vytvořit podnabídku na css.

11) O výměně majetku min-šířka v IE6.

12) O platnosti css.

13) Jak nastavit barvu navštívených odkazů.

14) Jak nastavit odsazení odstavce pomocí css.

15) Jak udělat zaoblené rohy skrz css.

16) Jak umístit svůj obrázek namísto značky seznamu css.

17) Jak udělat z pozadí obrázek.

18) Jak ztmavit pozadí css.

19) V čem jsou dětské selektory css.

20) V jakých měrných jednotkách jsou k dispozici css.

21) Jak vytvořit vyskakovací okno se zatemněním.

22) Jak udělat animované pozadí.

23) Jak udělat krásné textové pole.

24) Jak změnit obrázek, když na něj najedete kurzorem myši.

25) V čem jsou pseudo prvky css.

26) Co je CSS skřítci.

27) Jak protlačit patku (suterén) dolů skrz css.

28) Jak zabránit změně velikosti textarea přes css.

29) Jak nakreslit trojúhelník napříč css.

30) Jak zvládnout akci klikněte přes css.

31) Jak nastavit kurzor přes css.

32) Jak zapnout horizontální rozbalovací nabídku css.

33) Jak používat nestandardní písmo na webu.

34) Jak změnit pozadí přepínače css.

35) Mohu použít CSS3.

36) Jak udělat stín na css.

37) Jak nastavit atributy polstrování buněk a rozmístění buněk na css.

38) Jak na to div se 100% výškou.

39) O kompatibilitě z-index a hráč Youtube.

40) Proč je špatné používat -moz, -slečna, - webkit a další vlastnosti.

41) Mám použít Resetování CSS.

42) Jak svisle zarovnat značku seznamu.

43) Jak vytvořit verzi pro tisk.

44) Jak zapnout průhlednost napříč prohlížeči css.

45) Co je clearfix.

46) Jak částečně vrátit zpět plovák.

47) Jak vytvořit dvousloupcový layout se stejnou výškou sloupců.

48) Co je adaptivní rozvržení.

49) V čem jsou dotazy na média css.

50) Co je méně.

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

52) Jak na to responzivní „lepící“ zápatí webu.

53) Jak používat Google Fonts API.

54) Jak službu používat Živé nástroje.

55) Jak povolit nebo zakázat výběr textu na css.

56) Jak změnit vzhled prvku na výchozí pomocí vlastnosti vzhled v css.

57) Proč potřebuješ vlastnost page-break-inside v css.

58) Jak zarovnat na střed pole s proměnnou šířkou na css.

59) Jak na to čisté trojúhelníky CSS.

60) Servis od generování CSS trojúhelníků.

61) Jak přesunout zápatí na konec stránky(polohování).

62) Jak přesunout zápatí na konec stránky(tabulková metoda).

63) Učení Sass. Instalace a nastavení.

64) Jak skrýt prvek na stránce na css.

65) učení Sass. Základy.

66) Kdy použít reset.css a normalizovat.css.

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

68) Jak na to css efekt zoomu.

69) Koala- rychlá kompilace sass soubory.

70) Jak přidat CSS fotografické filtry.

71) učení Sass. Mixins.

72) učení Sass. Matematické operace.

73) Animovaný ikona nabídky v Sass.

74) učení Sass. Funkce.

75) Co je PostCSS.

76) Jak nainstalovat a nakonfigurovat PostCSS.

77) Jak na to schopnost hodnotit na CSS.

78) učení Sass. Styl psaní kódu.

79) učení Sass. Rozšíření rodičovského voliče.

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

81) Jak na to Úvod ve stylu Star Wars s CSS.

82) Bootstrap 4. Úvod.

83) Bootstrap 4. Instalace.

84) Bootstrap 4. Restartujte.

85) Bootstrap 4. Kontejnery a klíčové body.

86) Bootstrap 4. Mřížkový systém.

87) Bootstrap 4. Pružné vlastnosti mřížky.

88) V jakých 5 novinkách se objeví CSS4.

89) Bootstrap 4. Co je Jumbotrons.

90) Bootstrap 4. Utility a typografie.

91) Bootstrap 4. Komponenta Karty.

92) Rozdíl mezi třída a id příklad značky div.

93) Špatné prvky webový design který by se neměl používat.

94) Bootstrap 4. modální okna.

95) Oh přednost a dědictví v css na praxi

96) Jak sázet PSD rozložení na Bootstrap mřížka. Část 1.

97) Jak vytvořit rozložení PSD podle Bootstrap mřížka. Část 2.

98) Jak používat pseudoprvky po a před v CSS.

99) O funkcích šířka a výška bloku v css.

100) Pseudoprvky po a pseudotřídní poslední dítě.

101) Jak zobrazit stránky na různých zařízeních.

102) Rozložení mřížky Bootstrap(část 1)

103) Rozložení mřížky Bootstrap(část 2)

104) Rozložení mřížky Bootstrap(část 3)

105) Rozložení mřížky Bootstrap(část 4)

Zdravím vás drazí přátelé! V této lekci se naučíte, co je css k čemu slouží a jak jej správně používat. Toto je základní poučka ze série "Pro nejmenší", ve které se pokusím vysvětlit nejvíce prostý jazyk základy stylování dokumentů pomocí CSS – kaskádové styly ( C stoupající S styl S klobouky).

chladný

Připnout

Část 1: Základy CSS

Tato lekce je logickým pokračováním lekce „Základy HTML pro začátečníky“, ve které jsem podrobně vysvětlil, co je to značkovací jazyk HTML, jak funguje a funguje, základní značky a pravidla rozvržení. V této lekci se dotkneme stylizace dokumentu vytvořeného pomocí značkovacího jazyka, tzn. dávat určitý tvar, určitou barvu, sekvenci, velikost různé prvky a text na stránce, pojďme se podívat na osvědčené postupy pro práci s kaskádovými styly. Jakmile pochopíte základy, budete schopni správně a efektivně stylizovat HTML dokumenty sami.

Upozorňuji na to tento manuál CSS budeme uvažovat pouze v kontextu použití s ​​HTML dokumenty ve webovém prohlížeči. Z pomocí CSS můžete stylovat další dokumenty, které používají různé značkovací jazyky. Například styl XML v aplikace pro Android, SVG nebo různá desktopová prostředí na operačních systémech podobných Unixu.

Obecně je CSS poměrně základní formální jazyk, který byl vynalezen k popisu vzhled dokumenty. To naznačuje, že je docela jednoduchý a skládá se z původních primitivních struktur, které není tak těžké se naučit. Nejtěžší není syntaxe, ne pravidla pro psaní konstrukcí, ale velké množství Vlastnosti CSS pro memorování, které plní různé úkoly. Naštěstí jsou všechna pravidla v angličtině s odpovídající sémantickou zátěží. Jednoduchý překlad do našeho jazyka dává představu o tom, co toto pravidlo dělá a naopak – při překladu toho, čeho chceme dosáhnout určitou vlastnost na anglický jazyk, je vysoká pravděpodobnost, že získáme správnou vlastnost. To výrazně zjednodušuje zapamatování pravidel CSS na intuitivní úrovni. Pokud například potřebujete nastavit barva pozadí stačí přeložit do angličtiny, v důsledku čehož dostaneme barva pozadí(Jednotlivá slova v CSS se píší s pomlčkou).

1.1 Použití CSS v HTML dokumentech

CSS se v HTML dokumentech používá celkem snadno. To může být:


Jak jsem řekl dříve, CSS má docela jednoduchou syntaxi. Pojďme to rozebrat.


Pravidla reklamy jsou tak jednoduchá, že je lze popsat jednou větou. První hláskovaná volič, který vybere konkrétní prvek na stránce, po složené závorky jsou napsány vlastnosti co hodnoty za dvojtečkou a samotné vlastnosti jsou od sebe odděleny středník. To je všechno.

Jednoduché, že?

Nejtěžší věcí na deklaraci CSS je selektor. Více o tom, jak se tvoří a používají selektory, se dozvíte v lekci Všechny selektory CSS v jedné lekci - to je velmi důležité téma, protože se zde odhaluje veškerá kouzla výběru prvků na stránce, doporučuji tuto lekci bezpodmínečně sledovat všichni začátečníci.

Krátce Selektor CSS- (od slova vybrat- select) je konstrukce, kterou začíná každý reklamní blok a která slouží k výběru prvku nebo prvků stejného typu na stránce pro další styling. Nejčastěji se jako selektor používá určitý. Třída tag, například:

//HTML:

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

Zde je selektorem třída my-class tagu div, která získá potřebný styl v souboru CSS. V tomto případě je barva pozadí šedá. Pokud tedy stránka obsahuje několik značek (nejen divs) s třídou moje třída, všechny tyto prvky získají stejný vzhled - šedé pozadí barvy #999.

1.3 Kaskádování, dědičnost a priorita

Pochopení principu kaskádování je snadné. Podívejme se na příklad:

//HTML

Daleko, daleko za slovesnými horami v zemi.
Daleko, daleko za verbální hory.
//CSS .parent .children ( barva: #666; ) .parent ( padding: 10px; color: #999; )

Z příkladu vidíme, že v CSS je napsána kaskáda, ve které je tř .rodič stojí na prvním místě, za ním je dětská třída označena mezerou .děti, který je zodpovědný za styling pouze podřízeného prvku. Podřízená značka musí být vnořena do značky s třídou .rodič. Pokud v dokumentu HTML odstraníme značku .děti ze značky div s třídou .rodič, ztratí svůj design, protože kaskáda již nebude fungovat, struktura je rozbitá.

Co získáme jako výsledek našeho příkladu. Tag .children bude mít barvu textu #666, protože má delší kaskádu, a tag .parent bude mít barvu #999. Nadřazená třída bude mít odsazení 10px, zatímco podřízená třída nikoli, protože vlastnost padding se nevztahuje na podřízené prvky. Pokud však odstraníme barva: #666; u voliče .rodič .děti, pak bude jeho text vybarven v barvě rodiče barva: #999;


Kaskádování a dědičnost vám umožňují stylovat konkrétní prvky na stránce a upřednostňovat, které styly se použijí. Podívejme se na hierarchii priorit.

  1. Nejvyšší prioritu mají vlastnosti s konstrukcí uvedenou na konci jejich prohlášení. !Důležité. Nezáleží na tom, jak je selektor vnořený, jak se používají styly - vložené nebo zahrnutím externího souboru, budou mít nejvyšší prioritu. Vřele doporučuji nepoužívat !Důležité při stylingu, protože v procesu podpory nebo dokonce v procesu vývoje v budoucnu nevyhnutelně vznikne zmatek, který zachrání pouze refaktoring stylů. Jak ukazuje praxe, vždy existuje způsob, jak nepoužít !important.
    Příklad použití!important: .my-class ( background-color: #999!important; )
  2. Další nejdůležitější prioritou jsou inline styly, které se zapisují do samotné značky prostřednictvím atributu styl které jsme probrali dříve:
  3. Styly nastavené ve značce stylu v dokumentu samotném mají přednost;
  4. Styly připojené k dokumentu jako externí soubor CSS prostřednictvím značky mají ještě nižší prioritu.
  5. Nejnižší prioritu, kromě standardních stylů prohlížeče, mají nadřazené selektorové styly před podřízenými, například:
    //HTML

    Daleko, daleko za verbální hory.

    //CSS .my-class ( margin: 10px; ) bude mít u potomka nižší prioritu p než: .my-class p ( margin: 15px; ) Výsledný tag

    .my-class ve značce class získá hodnotu vlastnosti margin: 15px.

Za zmínku také stojí, že počet tříd nebo identifikátorů a také přítomnost dalších pseudotříd a konstrukcí v selektoru zvyšují prioritu stylování:

My-class.class-2 ( margin: 10px; ) bude mít přednost před: .my-class ( margin: 15px; )

Atd. v logickém řetězci.

Jako poslední poznámku k prioritám je důležité poznamenat, že styly, které se objevují v následujících deklaracích dále v dokumentu, mají také nejvyšší prioritu. Například:

Moje-třída ( margin: 10px; ) bude mít přednost před přesně stejným selektorem, který za ním následuje: .my-class ( margin: 15px; )

Výsledkem je, že poslední selektor v toku dokumentu získá hodnotu vlastnosti margin: 15px, protože má nejvyšší prioritu. Pokud by však byl selektor první deklarace delší, určitě by měly přednost hodnoty jeho vlastností.

Co se týče dědičnosti, zde je vše jednoduché. Všechny podřízené prvky dědí některé vlastnosti rodiče. Jaké vlastnosti se dědí, musíte zjistit v procesu studia různé vlastnosti a jejich aplikace v praxi. Například barvu textu potomci vždy zdědí, zatímco odsazení nikoli.

Část 2. Vlastnosti CSS

Myslím, že nemá smysl vypisovat všechny vlastnosti CSS, protože jich je hodně a je praktičtější odkazovat na odkaz na všechny vlastnosti CSS. Doporučuji prostudovat vlastnosti CSS v referenci HTMLBook.

Pojďme se však podívat na 10 nejpoužívanějších vlastností CSS v layoutu. Vzal jsem 10 velké CSS soubory z mých projektů a seřadil vlastnosti podle frekvence používání.

Vlastnost CSS

Frekvence používání

Popis
barva 960krát Barva textu prvku:
barva pozadí 755krát Barva pozadí prvku:
velikost písma 524krát Velikost písma:
neprůhlednost 435krát Úroveň průhlednosti prvku:
vycpávka 372krát Velikost okrajů uvnitř prvku:
šířka 356krát Šířka prvku bloku, bez okrajů a okrajů:
okraj 311krát Okraje prvku:
výška 305krát Výška prvku bloku bez okrajů a okrajů:
tloušťka písma 280krát Tloušťka písma:
zarovnání textu 245krát Vodorovné zarovnání textu:

Část 3. Mediální dotazy

Dotazy na média CSS je základem pro vytvoření responzivního rozvržení, které umožňuje stylizovat prvky v závislosti na velikosti obrazovky nebo zařízení, na kterém se web zobrazuje. Technicky mediální dotaz je jednoduchý booleovský výraz, který může být pravdivý nebo nepravdivý. Podmínkou takového vyjádření jsou buď parametry zařízení, na kterém se webová stránka zobrazuje, nebo velikost obrazovky v pixelech.

V tomto tutoriálu se budeme zabývat základními funkcemi mediálních dotazů, které jsou nezbytné pro adaptivní rozložení stránky a jsou prakticky užitečné.

Mediální dotaz se zapisuje do samotného souboru stylu nebo do těla dokumentu (značka stylu) a začíná deklarací pravidla @media. Struktura dotazu na média je poměrně jednoduchá:


Podmínkou může být buď zařízení - všechna (všechna zařízení), obrazovka, tisk, tv atd., nebo funkce médií, které nastavují parametry zařízení nebo rozlišení obrazovky, na které se dokument zobrazuje.

Nejčastěji používané funkce médií přesně určují maximální a minimální rozlišení obrazovky zařízení:


Zde zařízení s maximálním rozlišením obrazovky 480px nebo minimální rozlišení 320px vykreslí text značky s třídou .my-class šedě. Tato podmínka Uvedl jsem příklad, je prakticky k ničemu. Nejčastěji je potřeba zadat buď pouze maximální rozlišení, nebo pouze minimum, v rámci kterého se vlastnost uplatní.

Mimo jiné, jak vidíme z příkladu, funkce mohou obsahovat podmínky a (a), ne (NE) a (pouze pro starší prohlížeče, které nepodporují dotazy na média). Ne logický operátor nebo (NEBO), její roli hraje čárka. Mediální funkce, jak vidíme, jsou uzavřeny v pravidelných závorkách.

Umístění vlastností do dotazu na média nedává žádnou přednost, takže je smysluplnější umístit dotazy na média konec css dokument nebo nahrát pomocí značky odkaz externí soubor CSS s dotazy na média po načtení hlavních stylů webu, aby je správně přepsal v různých rozlišeních nebo na různých zařízeních.

  1. Zkuste použít pouze externí zahrnuté soubory CSS. Interní styling používejte pouze v případě, že je to nezbytné pro správné fungování webu;
  2. Zkuste stylizovat pouze třídy. Nestylujte identifikátory (nastavené pomocí id="hash" a zapsané pomocí #hash). Zkuste stylizovat značky bez tříd méně. Pokud například upravíte styl značky h3 a poté později SEO specialista rozhodne, že název je zde nevhodný, běžný div by měl mít stejné vlastnosti jako třída názvu a měl by být také vykreslen. Případně můžete duplikovat HTML tagy do tříd např. .h1, .h2, .h3, .footer, .header, .aside a podle toho je stylizujte;
  3. Pokuste se stylovat prvky co nejautonomněji, zredukujte kaskádový řetězec na jeden blok, aby bylo méně závislostí na nadřazených prvcích. To je nezbytné pro co nejefektivnější opětovné použití bloků na stránce a jejich úpravu na jiných místech layoutu. Ale bez fanatismu. Neměli byste přidělovat samostatné třídy každé značce v bloku, pokud to není určeno. offline použití. Pokud přesunete blok na jiné místo na stránce, měl by být také zobrazen a neměl by záviset na rodiči. To vám pomůže použít nějaký druh metodologie pojmenování tříd. Nezáleží na tom, zda je to BEM, metodika nebo vyvinutá na základě vaší osobní zkušenost nebo jednoduchá pravidla, mnou navržený, je lepší než svévolně pojmenovávat třídy a budovat nelogické a dlouhé řetězce tříd;
  4. Pokuste se pojmenovat třídy značek podle funkce bloku, a ne podle toho, jaký bude obsah v něm. Pokud máte například sekci karuselu recenzí, nepojmenujte své selektory pomocí slov recenze, otzivy atd. lepší jméno kolotoč-jednou, pokud se plánuje zobrazení jedné položky karuselu na stránku. V budoucnu možná tento karusel využijete nejen k vytváření recenzí, ale tento kód využijete například k zobrazení seznamu firemních kolegů. V tomto případě název třídy recenze by bylo poněkud nevhodné;
  5. Použijte CSS preprocesory, není to tak těžké. Moje volba na poměrně dlouhou dobu padla na preprocesor Sass a doporučuji jej použít. Máme pěkný tutoriál, ve kterém vám řeknu, jak snadné je používat preprocesor a jak usnadňuje život: ;
  6. Použijte reset výchozích stylů prohlížeče nebo normalizaci, která přivede výchozí styly ke společnému jmenovateli ve všech prohlížečích. Používám ve svých projektech normalizovat.css, který je součástí Bootstrap CSS frameworku;
  7. Když máte pocit, že v procesu rozvržení děláte příliš mnoho opakující se práce – přejděte k používání nějakého CSS frameworku nebo si vyviňte svůj vlastní s nejčastěji používanými prvky, urychlí to vaši práci. Používám pouze v práci Bootstrap mřížka bez stylistického designu tlačítek, panelů a dalších prvků. To je docela dost pro efektivní práci. Dobrá je také odezva výchozí mřížky Bootstrap;
  8. Experimentujte s vlastnostmi sami. Otevřete odkaz CSS a vyzkoušejte. Jedině tak získáte zkušenosti, zapamatujete si, která vlastnost co dělá, a přivedete psaní stylů dokumentů k automatizaci.