V této kapitole si povíme, jak implementovat CSS do HTML dokumentu, tedy propojit popis stylu prvku přímo s prvkem samotným, nějakou HTML značkou.
Nářadí tento úkol možné třemi způsoby:
- Napište popis stylu přímo do samotného prvku. Tato metoda je dobrá pouze v případě, že existuje pouze jeden takový prvek HTML dokument e, který vyžaduje samostatný popis stylu.
- Napište popis stylu pro všechny identické prvky dokumentu HTML. Tento způsob má své opodstatnění, pokud se styl stránky zásadně liší od celkového designu webu (skupina vzájemně propojených stránek).
- Extrahujte popis stylu prvků HTML do samostatného souboru CSS. To vám umožní spravovat design celého webu, každé stránky webu, na které je uveden odkaz na soubor CSS. Tato metoda je nejúčinnějším využitím kaskádových stylů.
Pojďme se na jednotlivé možnosti podívat blíže a zároveň se seznámit s pravidly syntaxe psaní CSS.
Atribut stylu.
Téměř každý HTML tag má atribut styl, což znamená, že na tuto značku je použit určitý popis stylu.
Píše se to takto:
style="">
Vše, co bude napsáno mezi uvozovkami atributu styl a bude popisem stylu pro tento prvek, in v tomto případěživel
No, například:
style="color: #ff0000; font-size:12px"> toto je odstavec s osobním stylem
V tomto případě jsme určili, že tento odstavec by měl být zobrazen červeně a měl by mít velikost písma 12 pixelů. V následujících kapitolách budu hovořit podrobně o tom, co je napsáno v uvozovkách, ale nyní mluvíme o tom, jak aplikovat CSS na jakýkoli HTML tag.
Pomocí stejného principu můžete určit individuální styl pro téměř každý prvek HTML.
style="background-color: #c5ffa0">
style="color: #0000ff; font-size:18px"> Vše o slonech
Kupte si slona
style="color: #ff0000; font-size:14px">
style="color: #0000ff; font-size:16px">Půjčte si slona
style="color: #ff0000; font-size:14px">
Ale ještě jednou, tento způsob zavedení CSS je dobrý pouze v případě, že potřebujete nastavit určitý styl pro malý počet HTML prvků.
Štítek (neplést se stejnojmenným atributem), ve kterém jsou popsány prvky, které potřebujeme.
Podívejte se na příklad, níže budou komentáře.
Vše o slonech
Na této stránce najdete veškeré informace o slonech.
Kupte si slona
S námi můžete příznivé ceny kupte si ty nejlepší slony!!
Půjčte si slona
Pouze zde si můžete pronajmout jakékoliv slony!!
Jak je vidět z příkladu, dosáhli jsme úplně stejného výsledku jako v prvním případě, jen nyní nepřiřazujeme styl každému prvku jednotlivě, ale umísťujeme jej do „hlavy“ dokumentu, čímž dáváme najevo, že všechny nadpisy ,
- odstavce budou modré
- Červené. Představte si, o kolik snazší by byla naše práce, kdyby na stránce bylo sto takových odstavců a asi patnáct nadpisů a samotný dokument by vážil méně tím, že by „odstranil“ všechny opakující se popisy stylů pro každý jednotlivý prvek.
Nyní slíbené komentáře:
Štítek styly určitých prvků HTML jsou přímo deklarovány podle následující syntaxe:
Pokud je v bloku deklarace stylu uvedeno několik vlastností prvku, jsou odděleny středníkem.
CSS v samostatném externím souboru.
Jak dlouho trvá, než se zkrátí, se dostáváme k hlavní, dle mého názoru, výhodě CSS, a to možnosti dát všechny informace související s designem webu do samostatného externího souboru.
Otevřete tedy poznámkový blok (nebo jiný editor) a napište do něj následující text:
Tělo (barva pozadí: #c5ffa0)
a (barva:#000060; váha písma: tučné;)
a:hover (barva:#ff0000; váha písma: tučné; zdobení textu:žádné)
h1 (barva: #0000ff; velikost písma: 18px)
h2 (barva: #ff00ff; velikost písma: 16px)
p (barva: #600000; velikost písma:14px)
Pokusím se vám podrobně popsat, co jsme o této podivné věci napsali v následujících kapitolách této učebnice.
Všechno! Soubor popisu stylu byl vytvořen! Teď už zbývá jen trochu, totiž donutit požadované stránky naše webové stránky k získání informací z tohoto souboru.
To se provádí pomocí značky (spojení). Štítek víceúčelový a slouží k „propojení“ HTML dokumentu s dalšími externími soubory, které zajišťují jeho správnou funkci. Štítek je druh odkazu, určený pouze ne pro uživatele, ale pro programy prohlížeče (prohlížeče). Protože nese výhradně servisní informace, nachází se v hlavičce HTML dokumentu mezi tagy a prohlížeče jej nezobrazují na obrazovce.
Štítek má atributy:
href- Cesta k souboru.rel- Definuje vztah mezi aktuálním dokumentem a odkazovaným souborem.
- ikona zástupce – Určuje, že zahrnutý soubor je .
- šablona stylů- Určuje, že zahrnutý soubor obsahuje šablonu stylů.
- application/rss+xml - Soubor v XML formát k popisu zpravodajského kanálu.
Vzhledem k tomu, že jako externí soubor zahrnujeme šablonu kaskádových stylů, má náš odkaz na službu následující podobu:
Opakuji, abych jistě rozptýlil možná nedorozumění. Atribut rel přiřadit hodnotu šablona stylů Protože připojujeme kaskádový styl jako externí soubor, uvedeme cestu k souboru css (v tomto příkladu se soubor nazývá mystyle.css a leží vedle dokumentu HTML, ve kterém je tento odkaz zapsán), to také označujeme tento soubor text a obsahuje popis stylu type="text/css"
Nyní vložíme tento řádek do záhlaví stránek našeho webu a užijeme si výsledek..
soubor mystyle.css
tělo (barva pozadí: #c5ffa0)
a (barva:#000060; váha písma: tučné;)
a:hover (barva:#ff0000; váha písma: tučné; zdobení textu:žádné)
h1 (barva: #0000ff; velikost písma: 18px)
h2 (barva: #ff00ff; velikost písma: 16px)
p (barva: #600000; velikost písma:14px)
soubor index.html
Jídelní lístek:
Vše o slonech.
Kupte si slona.
Půjčte si slona.
Vše o slonech
Na této stránce najdete veškeré informace o slonech.
Soubor elephant.html
Jídelní lístek:
Vše o slonech.
Kupte si slona.
Půjčte si slona.
Kupte si slona
U nás si můžete koupit ty nejlepší slony za konkurenční ceny!!
Soubor elephant1.html
Jídelní lístek:
Vše o slonech.
Kupte si slona.
Půjčte si slona.
Půjčte si slona
Pouze zde si můžete pronajmout jakékoliv slony!!
Ve výše uvedeném příkladu „stránky o slonech“ na tento moment, má tři stránky, z nichž každá je spojena s jedním singlem externí css soubor - mystyle.css. Výrazně jsme to tedy „odložili“ a design celého webu udělali „mobile-friendly“. Představte si, kolik kilobajtů bychom vyhráli, kdyby tento web měl sto plnohodnotných stránek!? A také, kolik času bychom ušetřili, kdybychom potřebovali cokoliv změnit v jeho designu!?
V této kapitole jsme se podívali na tři způsoby, jak vložit CSS do dokumentu HTML. Který je lepší použít?
- Použít atribut styl pro jakýkoli prvek, pokud je tento prvek s odlišným stylem od ostatních prvků jediný na celém webu.
- Použijte značku . Interní styly mají přednost před externími, ale jsou horší než vložené styly (určené pomocí atributu style).
...
1.3. Vestavěné 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í se objevit 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. Pomáhají vytvářet pravidla 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í celkový styl formátování pro všechny nadpisy h1.
2.3. Výběr třídy
Selektory tříd umožňují nastavit styly pro jeden nebo více prvků se stejným názvem třídy, které jsou umístěny na různých místech na stránce nebo na různých stránkách webu. Chcete-li například vytvořit nadpis s třídou nadpisu, musíte do úvodní značky přidat atribut třídy s nadpisem hodnoty
a nastavte styl pro zadanou třídu. Styly vytvořené pomocí třídy lze aplikovat 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á, může se na jedné stránce objevit pouze jednou a musí obsahovat alespoň jeden znak. Hodnota nesmí obsahovat mezery.
Neexistují žádná další omezení ohledně toho, jakou formu může mít id; identifikátory mohou být zejména všechna čísla, začínat číslem, začínat podtržítkem, mít pouze interpunkční znaménka atd.
Jedinečné ID prvku lze použít pro různé účely, například jako způsob odkazování na konkrétní části dokumentu pomocí ID fragmentů, jako způsob cílení na prvek při 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 v 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á;) — tento styl bude platit pro 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 class.first .
2.6. Dětský volič
Podřízený prvek je přímým potomkem svého obsahujícího prvku. Jeden prvek může mít několik podřízených prvků, ale každý prvek může mít pouze jeden nadřazený prvek. Podřízený selektor umožňuje použít styly pouze v případě, že podřízený prvek následuje bezprostředně za nadřazeným prvkem a mezi nimi nejsou žádné další prvky, to znamená, že 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č
K sesterství dochází mezi prvky, které sdílejí společného rodiče. Sourozenecké selektory umožňují vybrat prvky ze skupiny prvků stejné úrovně.
h1 + p - vybere všechny první odstavce bezprostředně za libovolnou značkou
aniž by byly dotčeny zbývající odstavce;
h1 ~ p - vybere všechny odstavce, které jsou sesterské k jakémukoli 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 zadán atribut alt;
selector[attribute] - prvky tohoto typu obsahující zadaný atribut, img - pouze obrázky, pro které je zadán atribut alt;
selector[attribute="value"] - prvky tohoto typu obsahující zadaný atribut s konkrétní hodnotou, img - všechny obrázky, jejichž název obsahuje slovo květina;
selector[attribute~="value"] - prvky částečně obsahující danou hodnotu, například pokud je pro prvek specifikováno 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 je 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í konkrétní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, ke kterému 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 zkontrolován, zda odpovídá zadanému datovému typu;
:invalid — pole formuláře, jejichž obsah neodpovídá zadanému datovému typu;
:enabled - všechna aktivní pole formuláře;
:disabled — blokovaná 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 v určené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 se symbolem #, na který se v dokumentu odkazuje;
:checked — vybrané (uživatelem vybrané) prvky formuláře.
2.10. Strukturální selektor pseudotříd
Strukturální pseudotřídy vybírají podřízené prvky podle parametru uvedeného v závorkách:
: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 se zadaným umístěním, podobně jako :nth-child() , ale začíná od posledního v opačném směru;
: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 podřízeným prvkem;
:empty - vybere prvky, které nemají žádné potomky;
:root - vybere prvek, který je kořenem v dokumentu - html prvek.
2.11. Selektor pseudotříd strukturního typu
Označuje konkrétní typ podřízené značky:
:nth-of-type() - vybírá prvky podobné :nth-child() , ale bere v úvahu pouze typ prvku;
:first-of-type - vybere prvního potomka daného typu;
:last-of-type - vybere poslední prvek tohoto 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 podřízenými prvky nadřazeného prvku.
2.12. Selektor pseudoprvků
Pseudoelementy se používají k přidávání obsahu, který je generová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, vztahuje se pouze na prvky bloku;
:before - vloží vygenerovaný obsah před prvek;
:after - přidá vygenerovaný obsah za prvek.
3. Kombinace voličů
Chcete-li přesněji vybrat prvky 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, musíte na levé straně deklarace uvést požadované 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áda jsou dva základní pojmy v CSS, které spolu úzce souvisí. Dědičnost je místo, kde prvky dědí vlastnosti od svého rodiče (prvku, který je obsahuje). Kaskáda se projevuje v tom, jak odlišné typyšablony stylů se aplikují na dokument a jak se vzájemně přepisují konfliktní pravidla.
5.1. Dědictví
Dědictví je mechanismus, kterým se určité vlastnosti přenášejí z předka na jeho potomky. Specifikace CSS umožňuje dědit vlastnosti související s textovým obsahem stránky, jako je barva, písmo, mezery mezi písmeny, výška řádku, styl seznamu, zarovnání textu, odsazení textu, transformace textu, viditelnost, bílá -mezera a mezera 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 související s formátováním bloku se nedědí. Jsou to pozadí , ohraničení , zobrazení , plovoucí a jasné , 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 umístěné v tabulce stylů níže přepisují styly umístěné v tabulce výše;
3) Na jeden prvek lze použít styly z různých zdrojů. V režimu vývojáře prohlížeče můžete zkontrolovat, které styly jsou použity. 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 na tomto prvku nebo zděděny z nadřazeného prvku, spolu se soubory stylů, ve kterých jsou specifikovány, a pořadovým číslem řádku 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 (border: 1px solid #eee;) #wrap (width: 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 určit 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é oznámení 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 neexistuje 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, které má největší specifičnost. Hodnota specificity má čtyři části: 0, 0, 0, 0. Specifičnost selektoru je definována takto:
pro id se přidá 0, 1, 0, 0;
pro třídu 0 se přidává 0, 1, 0;
pro každý prvek a pseudoprvek se přidá 0, 0, 0, 1;
pro inline styl přidaný přímo k prvku - 1, 0, 0, 0 ;
Univerzální volič nemá žádné specifikum.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, která jsou konkrétnější. 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 připojit je k jedné webové stránce. Pokud jsou v různých tabulkách nalezeny různé hodnoty vlastností pro jeden prvek, bude v důsledku toho na prvek použito pravidlo z níže uvedeného seznamu stylů.
Existuje několik způsobů, jak přidat styly na webovou stránku, které se liší svými schopnostmi a účelem. Podívejme se na ně dále podrobněji.
Externí šablona stylů
Styly jsou umístěny v samostatném souboru s příponou css; prvek slouží k propojení dokumentu HTML se souborem CSS . Nachází se uvnitř
, jak je ukázáno v příkladu 1.Příklad 1. Připojení externích stylů
Styly Nadpis
Hodnota atributu rel vždy bude existovat šablona stylů a zůstane nezměněna. Hodnota href je cesta k souboru CSS; cestu lze zadat buď relativní nebo absolutní. Všimněte si, že tímto způsobem můžete připojit šablonu stylů, která je umístěna na jiném webu. Ve výše uvedeném příkladu propojíme azbuku Lobster z webu Google Fonts.
Obsah souboru style.css je uveden v příkladu 2.
Příklad 2: Obsah souboru style.css
H1 (rodina písem: "Hor", kurzíva; barva: zelená; )
Jak můžete vidět z tohoto příkladu, soubor stylu je normální textový soubor a obsahuje pouze syntaxi CSS. HTML dokument zase obsahuje pouze ukazatel na soubor se stylem, tímto způsobem je plně implementován princip oddělení kódu a designu webu. Proto je použití externí šablony stylů nejuniverzálnější a nejpohodlnější metodou přidání stylu na web. To vám umožní nezávisle upravovat soubory HTML a CSS.
Interní šablona stylů
Styly jsou zapsány v samotném HTML dokumentu, uvnitř prvku.
Nadpis