Připojení externího css. Soubory šablon stylů CSS lze k webové stránce připojit dvěma způsoby. Včetně samostatného souboru CSS

Dobrý den všem.

V jednom z předchozích článků jsme se tedy seznámili.

Ale neřešili jsme jeden velmi důležitý problém. jmenovitě - jak svázat CSS styly s HTML kódem stránky našeho webu.

Tato otázka je ve skutečnosti velmi důležitá. Po všem pokud nesprávně svážeme styly css na stránky našeho webu, pak nebudeme moci tyto styly používat. Prohlížeč je bude jednoduše ignorovat a my neuvidíme výsledek, který použití určitých stylů dává.

Existují různé způsoby, jak svázat CSS styly s kódem stránky a dnes se na ně všechny zkusíme podívat.

Začněme.

Na základě povahy připojení kaskádových stylů CSS k dokumentu HTML existují: externí a interní styly.

1. Interní šablony stylů CSS.

Interní šablony stylů jsou umístěny přímo na naší webové stránce. Ano, ano... Přímo v HTML kódu každé jednotlivé stránky.

To je samozřejmě trochu nepohodlné, ale přesto taková možnost existuje a nemohu si pomoct, abych o ní neřekl.

Takže první způsob, jak propojit styly CSS s kódem stránky, je použít značku, platí pro celý obsah dokumentu HTML. Může jich být tolik, kolik chcete, dokonce všechny styly pro celý web. Ale tohle je trochu špatně. Budu o tom mluvit o něco později, když se podívám na externí šablony stylů.

Někdy musíte psát CSS styly do HTML kódu.

Když například umístíte na svůj web nějaký reklamní banner, vložíte kód tohoto banneru do kódu stránky.

Aby se tento banner zobrazoval správně (nepřekračoval hranice, které mu jsou přiděleny, možná potřebuje rámeček atd.), je někdy potřeba k němu připojit několik CSS instrukcí.

Nemá však smysl provádět změny v obecné šabloně stylů. Banner je dočasný jev. Dnes jeden, zítra druhý. Proto je jednodušší pro něj psát styly přímo do kódu tohoto banneru.

To znamená, že potřebujeme propojit styly CSS pouze s konkrétním prvkem stránky. To se provádí velmi jednoduše – pomocí atributu style.

Takto zapsané styly ovlivňují pouze prvek, v jehož tagu jsou umístěny. V tomto případě pouze pro tento odstavec (tag

). A žádný jiný!

2. Externí styly.

Název externí šablony stylů CSS znamená, že se nezapisují do těla HTML dokumentu, ale do samostatného speciálního souboru. Tyto soubory mají příponu .css

Takže, jak jsem slíbil, řeknu vám, proč je lepší používat externí šablony stylů.

Faktem je, že to umožňuje, aby se stránky vašeho webu načítaly o něco rychleji. Možná na zlomek vteřiny, ale rychleji. Tento snižuje zatížení vašeho webu a pohodlnější pro vaše návštěvníky – musí méně čekat na načtení stránek.

Proč se tohle děje.

Pokud jsou styly CSS pro váš web v samostatném souboru, pak prohlížeč uživatele nemusí tyto styly načítat při každém načtení nové stránky. Stáhne je jednou, umístí je do mezipaměti (oblast paměti v počítači návštěvníka) a když se načte další stránka, styly si odtud vezme.

Soubory šablon stylů CSS lze k webové stránce připojit dvěma způsoby.

První metoda, nejběžnější, je použití značky s atributy: rel = "stylesheet" type = "text/css" href = "style file.css" uvnitř kódu záhlaví stránky (tag ).

Například:

1 2 3 4

<hlava > ..... <link rel = "stylesheet" type = "text/css" href = "style.css" > </hlava>

Tento příklad připojí ke stránce styly CSS zapsané v souboru style.css. Jsou platné v celém dokumentu.

Existuje i jiný způsob připojit externí šablony stylů k HTML dokument. Toto používá direktivu @import. Umožňuje importovat obsah souboru CSS do aktuální šablony stylů.

Můžete jej použít jak k přidání některých šablon stylů k jiným, tak k připojení souboru šablony stylů k dokumentu HTML. Chcete-li to provést, musíte jej napsat do značky (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

U nás si můžete koupit ty nejlepší slony za konkurenční ceny!!

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 málo, totiž donutit potřebné stránky našeho webu čerpat informace 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, je umístěna 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 souborem, na který se odkazuje.

• ikona zástupce – Určuje, že zahrnutý soubor je .
• šablona stylů- Určuje, že zahrnutý soubor obsahuje šablonu stylů.
• application/rss+xml – Soubor ve formátu XML pro popis zpravodajského kanálu.

typ- Typ dat MIME připojeného souboru.

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 určitě 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), také označujeme, že tento soubor je textový 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“ jsou aktuálně tři stránky, z nichž každá je spojena s jedním externím souborem css – mystyle.css. Výrazně jsme jej tedy „vylož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 HTML kód v těle značky webové stránky. Příklad:

  Žlutý text s fontem Verdana

  
  
  

  Může to být tak:

  Mezi tagy jsou předepsána nezbytná pravidla CSS pro webovou stránku.
  Nevýhodou této metody je, že tyto styly budou pouze pro jednu stránku, kde se tyto styly nacházejí.

  Nadpis H2

  
  
  

  Výsledek:

  

  Ve výše uvedeném příkladu jsem změnil velikost a barvu záhlaví H2 pomocí šablony stylů CSS.

  ○ Metoda č. 3 – „Interní styly“

  Metodu #3 používám ve vzácných případech, například ke změně jednoho tagu na webové stránce. Chcete-li připojit styl k libovolné značce, musíte zadat parametr stylu.

  Style="zde budou pravidla CSS"

  Nadpis H2

  
  
  

  Výsledek:

  

  Ve výše uvedeném příkladu jsem změnil velikost a barvu záhlaví H2 pomocí stylů CSS.

  ○ Způsob připojení kombinovaného stylu

  Všechny tyto tři metody lze kombinovat.

  Nadpis

  Nadpis

  
  
  

  To je pro dnešek vše! Těším se na vás v dalších lekcích.
  Přihlaste se k odběru aktualizací blogu!

  Předchozí příspěvek
  Další záznam

  V první kapitole jste se dozvěděli, že design webových stránek se vytváří pomocí CSS. Pro lepší pochopení toho, co je potřeba použít a proč, se podívejme na jeden názorný příklad. Představte si HTML jako černobílý strukturovaný rám domu bez jakýchkoli dekorací a CSS je to, co používáme k vytvoření jedinečného vzhledu.

  Jak můžete vidět, dům vpravo má nyní barvy, materiály a další dekorace. Totéž se děje na webové stránce: pomocí pravidel CSS se na ní objevují barvy a odsazení, mění se styl písma a velikosti prvků a vzniká celý ucelený styl.

  Jednoduchý stylový list

  Pojďme se podívat na to, jak vypadá nejzákladnější stylový list a z jakých prvků se skládá. Toto je příklad stylů CSS pro všechny značky

  Které jsou na webové stránce:

  Jak bude text nyní vypadat?

  V prohlížeči a co znamenají jednotlivé řádky? Je to velmi jednoduché: písmo bude mít tučný styl a barvu #1E824C (hexadecimální kód barvy) a bude zobrazeno na 1 em (relativní jednotka rovna výchozí velikosti písma v prohlížeči).

  
  

  Výše popsaný styl, stejně jako každý jiný, obsahuje sadu prvků, které mají své vlastní názvy. Zapamatujte si je, abyste při čtení následujících kapitol pochopili, oč jde.

  Selektor Jeho zadáním sdělíme prohlížeči, na co přesně chceme styl použít. V našem případě je selektorem p. Blok deklarace Toto je název veškerého obsahu umístěného mezi složenými závorkami () za selektorem. Vlastnost stylu Toto je příkaz, který určuje požadovanou možnost formátování (například chcete změnit styl písma font-weight , color color , velikost písma font-size atd.). Za názvem vlastnosti musí být umístěna dvojtečka. Více o vlastnostech CSS se dozvíte později. Hodnota vlastnosti Za dvojtečkou se píše samotná hodnota vlastnosti, kterou si sami definujete, čímž si vytvoříte svůj vlastní styl. V závislosti na vlastnosti musíte zadat příslušnou hodnotu.

  Například styl písma je určen klíčovými slovy tučné , tučné atd., barva je určena hexadecimální hodnotou, RGB(A), HSL(A) nebo klíčová slova červená , oranžová , bílá atd., velikost písma je určena CSS jednotky (procenta) % , pixelů px, body pt, výška písma em) nebo konstanty small , medium , large , atd. Po zadání hodnoty vlastnosti se umístí středník.
  
  

  Protože CSS není citlivé na zalomení řádků, mezery, tabulátory a velká a malá písmena, můžete kód naformátovat tak, aby se dal snadno číst a upravovat později. Například bychom mohli napsat výše uvedený kód na jeden řádek:

  P (váha-fontu:tučné;barva:#1E824C;velikost písma:1em;)

  Funguje to také, ale je to snadné pochopit? Zvlášť když je kód CSS docela dlouhý. Samozřejmě by neškodilo oddělit to alespoň mezerami. Existuje několik pravidel slušného chování, a pokud se je hned naučíte, řeknete si v budoucnu „děkuji“.

  Velmi často se při popisu stylu používá kompaktní forma notace, ve které jsou všechny vlastnosti pro jeden selektor uvedeny v jednom bloku:

  P ( váha písma: tučné; barva: #1E824C; velikost písma: 1em; )

  A tato forma zápisu je velmi těžkopádná, i když funguje:

  P (váha písma: tučné;) p (barva: #1E824C;) p (velikost písma: 1em;)

  Pro snazší orientaci v kódu se doporučuje psát každou vlastnost na nový řádek a při výpisu vlastností používat tabulátory nebo mezery. Někdy je mezi dvojtečkou a hodnotou nemovitosti mezera, ale je na vás, abyste se rozhodli, čemu dáte přednost.

  Pro větší pohodlí můžete přidávat komentáře přímo v CSS. Do nich můžete psát vysvětlení a poznámky, které vám pomohou orientovat se v šablonách stylů.

  Komentáře v CSS se zapisují mezi znaky /* a */. Nezobrazují se na webové stránce v prohlížeči a jsou viditelné pouze v kódu. Vývojáři také často používají komentáře ke skrytí dočasně nepotřebných částí kódu CSS. Komentáře vypadají takto:

  /* Styl hlavního textu */ p ( váha písma: tučné; barva: #1E824C; velikost písma: 1em; )

  Interní a externí styly

  Jakmile vytvoříte šablonu stylů, můžete si vybrat, jak ji připojit ke své webové stránce. U tabulek jsou dvě možnosti – interní, které se přidávají přímo na stránku, a externí, které jsou umístěny v samostatném souboru s příponou .css a jsou se stránkou propojeny pomocí odkazu.

  Interní šablony stylů se zapisují do dokumentu HTML mezi značky. Na každou webovou stránku musíte přidat šablonu stylů. Pokud má web velký počet stránek, které vyžadují stejný design, pak se přidávání a úprava stylů stává nevděčnou prací – proces bude trvat velmi dlouho. Proto jsou interní styly považovány za nepohodlné.

  Externí styly jsou mnohem běžnější. Stačí pouze připojit tabulku ke všem potřebným webovým stránkám pomocí značky s atributem rel (definuje vztah mezi stránkou a zahrnutým souborem) a hodnotou šablony stylů, což znamená, že zahrnutý soubor obsahuje šablonu stylů. Atribut href je cesta (URL) k vašemu souboru .css:

  Úpravou pouze jednoho souboru můžete změnit styl pro celý web najednou, bez ohledu na počet stránek. To je velmi výhodné, zejména u velkých zdrojů.

  Lekce: vytvoření šablony stylů

  Protože externí šablony stylů jsou nejpohodlnější a nejrozšířenější při vývoji designu, naučíme se, jak je vytvořit. Archiv se soubory k této lekci si můžete stáhnout na této stránce.

  Ve složce najdete HTML dokument s ukázkou jednoduché stránky a obrázkem (k použití v tutoriálu). Otevřete dokument HTML ve svém prohlížeči. Uvidíte, že stránka vypadá úplně normálně. Aby to vypadalo atraktivněji, pojďme ho upravit.

  Prozatím se nemusíte příliš hluboce ponořit do toho, co který daný kus kódu znamená. Nyní musíte pochopit princip fungování. Začněme.

  Propojení CSS s HTML

  Chcete-li začít, otevřete libovolný textový editor na vašem počítači (poznámkový blok to udělá) a vytvořte prázdný soubor s názvem style , uložte jej s příponou .css (měli byste skončit se souborem style.css). Uložte soubor do složky, kde se nachází stažený dokument HTML.

  Otevřete dokument HTML v textovém editoru a také v prohlížeči (pro snadné zobrazení změn vzhledu stránky). Přidat mezi značky následující kód:

  Stručně shrňte, co jste právě udělali. Vložením tohoto kódu do dokumentu HTML:

  • poskytl odkaz na font s názvem Roboto Condensed, který bude převzat ze serveru Google (o fontech Google si řekneme později);
  • připojil náš externí šablonu stylů style.css (zatím prázdný).

  Psaní CSS stylu

  Uložte změny do dokumentu HTML a přejděte do prázdného souboru .css, který jste vytvořili. Přidejme na stránku nějaký styl:

  Html ( padding-top: 5px; background-image: url(background.jpg); )

  Uložte změny. Gratulujeme, napsali jste své první pravidlo - týká se značky . První vlastnost – padding-top – přidá mezi okno prohlížeče a obsah webové stránky horní odsazení o velikosti 5 pixelů. Druhou vlastností, background-image , jste zahrnuli obrázek pro pozadí celé stránky zadáním cesty ke grafickému souboru (umístěnému ve stejné složce jako dokument HTML).

  Obnovte otevřenou webovou stránku v prohlížeči. Pokud je vše provedeno správně, uvidíte, že se na stránce objevilo pozadí a odsazení mezi horní částí okna a textem se mírně zvětšilo.

  Text (šířka: 75 %; odsazení: 40 pixelů; okraj: 15 pixelů automaticky; barva pozadí: #EBEBEB; rádius ohraničení: 30 pixelů; )

  Uložte změny do souboru. Teď ty:

  • nastavte oblast pro obsah značky , což se rovná 75 % šířky okna prohlížeče;
  • poskytl okraj 40 pixelů ze všech stran oblasti obsahu;
  • umístil oblast do středu stránky a také udělal odsazení v horní a dolní části o 15 pixelech;
  • nastavit barvu pozadí #EBEBEB pro oblast obsahu;
  • zaoblené rohy obdélníkové oblasti s určením poloměru zaoblení 30 pixelů.

  Znovu aktualizujte dokument HTML. Zároveň se ujistěte, že je mezipaměť deaktivována, nebo znovu načtěte stránku s aktualizovanými všemi soubory, které jsou k ní přidruženy, pomocí speciální kombinace kláves (například pro Chrome je to Ctrl+F5).

  Uvidíte, že do středu stránky byla přidána obdélníková oblast se zaoblenými rohy. Toto je výsledek vašich akcí v souboru CSS. Můžete také zkusit zmenšit okno prohlížeče a obdivovat, jak se šířka obdélníkové oblasti přizpůsobuje jeho velikosti. To je způsobeno skutečností, že šířka je zadána v procentech.

  Změna písma pomocí CSS

  Je čas ozdobit náš text. Přidejte tento kód do své šablony stylů a uložte změny:

  H1 ( barva: #E87E04; font-size: 2em; margin-left: 20px; font-family: "Roboto Condensed", sans-serif; ) h2 (color: #E87E04; font-size: 1.7em; margin-left : 20px; font-family: "Roboto Condensed", sans-serif; ) p ( barva: #22313F; výška řádku: 150 %; margin-top: 20px; margin-left: 20px; font-family: "Roboto Condensed ", bezpatkové;)

  Po napsání jste nastavili barvy písma pro značky h1 , h2 , p, označili jejich velikosti, přidali okraj od levého okraje 20 pixelů a navíc pro

  Horní část jsme odsadili o 20 pixelů a nastavili jsme výšku řádku (řádkování textu) o 50 % větší než je standardní. Písmo Roboto Condensed jste navíc připojili ke všem třem značkám (proto jste na něj museli hned na začátku uvést odkaz v souboru HTML).

  Obnovte stránku v prohlížeči a obdivujte výsledek. V tomto tutoriálu zkusíme ještě jednu věc. Přidejte tento kód do CSS:

  Důraz ( váha písma: tučné; )

  Uložte a obnovte stránku ve svém prohlížeči. Uvidíte, že v posledním odstavci se písmo v některých částech textu stalo tučným. Abyste pochopili, co se stalo, přejděte do okna textového editoru, kde jste na samém začátku otevřeli soubor HTML. Podívejte se na poslední odstavec: část věty je zabalena do značky s třídou důrazu. Tímto způsobem jste napsali styl pro jeden řádek textu v odstavci. Více o třídách si povíme v další kapitole.

  Měli byste skončit se stránkou jako je tato:

  
  
  

  V praxi zkuste změnit velikost textu pro

  (řekněme 1,1 em), a také zvětšit mezeru mezi

  A levý okraj oblasti obsahu o dalších 10 pixelů.

  závěry

  Tato kapitola se zabývala syntaxí CSS a tím, jak vytvořit základní šablonu stylů. Naučili jste se, jak začlenit CSS do stránky HTML a jak vytvářet jednoduché styly. Pojďme zdůraznit hlavní věci, které si z této kapitoly musíte zapamatovat:

  Každý styl CSS se skládá z několika prvků: selektoru, vlastnosti stylu a hodnoty této vlastnosti.

  Všechny vlastnosti a jejich hodnoty se zapisují do deklaračního bloku mezi dvě složené závorky () po určení selektoru.

  Musíte pečlivě sledovat značky: dvě složené závorky (otevřené na začátku reklamního bloku a zavírání na konci). Bez těchto závorek nebude CSS fungovat správně.

  Za vlastnost je nutné umístit dvojtečku a za hodnotu středník.

  Pro pohodlí a lepší čitelnost kódu CSS zapište každou vlastnost na nový řádek a nešetřete mezerami a tabulátory.