Takže pokračujeme html lekcie pre začiatočníkov... V minulej lekcii som hovoril o značke HEAD a o tom, ako nastaviť kódovanie HTML stránky, ako aj špecifikovať pre ňu kľúčové slová a popis. Čo sa dnes naučíme? V tomto návode sa naučíme, ako zahrnúť štýly do šablóny. Viac podrobností nižšie.

Ako prepojiť štýly dizajnu v šablóne? Po prvé, poďme sa dozvedieť o čo sú štýly CSS... Styles CSS je prostriedok na úpravu webových stránok napísaných pomocou značkovacích jazykov HTML, XHTML a XML. Môžu byť špecifikované ako v samotnom HTML dokumente, tak pripojené zvonku, t.j. popísať v samostatnom súbore. Navrhujem zvážiť prvý aj druhý spôsob. Takmer všetky webové stránky a webové stránky použiť štýl CSS.

1. Spôsob prepojenia štýlov dizajnu CSS - vo vnútri dokumentu HTML alebo prepojenie interných štýlov.
Ak štýly nie sú špecifikované v samostatnom súbore, je potrebné ich špecifikovať v samotnom dokumente vnútri značky ... Príklad prepojenia štýlov css v dokumente:

.....

Štýly spojené týmto spôsobom platí v celom dokumente, ale čo ak ich potrebujete špecifikovať len pre jeden blok? Štýly vo vnútri určitého bloku (značky) môžete opísať pomocou atribútu tejto značky - štýl... Príklad prepojenia štýlov pre jednu značku:

Náhodný text veľkosti 15 a červený

Štýly opísané týmto spôsobom neovplyvnia ostatné značky v dokumente.

2. Metóda, ktorá umožňuje pripojiť štýly z iného súboru alebo pripojiť externé štýly dizajnu.

Ak máte štýly v samostatnom súbore, musíte ich zahrnúť do špeciálneho riadku. Na úpravu štýlu celého dokumentu HTML použijeme značku ktorý by sa mal nachádzať vo vnútri značky , o ktorom som hovoril v. Príklad takéhoto spojenia:

Cesta k súboru obsahujúcemu štýly je uvedená v tejto časti značky: href = "style.css" v úvodzovkách. Príklad obsahuje súbor štýlu, ktorý je uložený v rovnakom priečinku ako dokument HTML.

Externé štýly môžete prepojiť aj inak – pomocou špeciálnej direktívy @import, ktorá je priložená vo vnútri tagu ... Príklad pripojenia pomocou direktívy @import:

.....

Súbor štýlov CSS, alebo skôr cesta k nemu, je pri tejto metóde uvedená v zátvorkách.

Spojenia štýlov, ktoré boli popísané v druhej metóde, musia byť umiestnené medzi tagy. .

Ak potrebujete do dokumentu XML zahrnúť štýly CSS, musíte použiť nasledujúci riadok:

Pri tomto spôsobe pripojenia je cesta k súboru štýlu uvedená v úvodzovkách.

Lekcia pre dnešok skončila! Šťastné usporiadanie a nové poznatky!

Chcete cestovať do Európy? Potrebuješ

Pekný deň všetkým.

V jednom z predchádzajúcich článkov sme sa teda s vami stretli.

Ale nezaoberali sme sa jednou veľmi dôležitou otázkou. menovite - ako naviazať CSS štýly na HTML kód stránky nášho webu.

Táto otázka je v skutočnosti veľmi dôležitá. Po všetkom ak nesprávne naviažeme štýly css na stránky našej lokality, nebudeme môcť použiť tieto štýly. Prehliadač ich bude jednoducho ignorovať a výsledok používania určitých štýlov neuvidíme.

CSS štýly môžete viazať na kód stránky rôznymi spôsobmi a dnes sa pokúsime zvážiť všetky z nich.

Začnime.

Charakterom pripojenia kaskádových štýlov CSS k dokumentu HTML sa rozlišujú vonkajšie a vnútorné štýly.

1. Interné šablóny štýlov CSS.

Interné štýly sa nachádzajú priamo na našej webovej stránke. Áno, áno... Priamo v HTML kóde každej jednej stránky.

Je to, samozrejme, trochu nepohodlné, ale napriek tomu takáto možnosť existuje a nemôžem o tom len povedať.

Prvým spôsobom, ako naviazať štýly CSS na kód stránky, je použiť značku sa aplikujú na celý obsah dokumentu HTML. Môže ich byť toľko, koľko chcete, aspoň všetky štýly pre celú stránku. Ale toto je trochu nesprávne. Budem o tom hovoriť trochu neskôr, keď sa pozriem na externé štýly.

Niekedy musíte písať štýly css do kódu HTML.

Napríklad, keď na svoju stránku umiestnite reklamný banner, vložíte kód tohto banneru do kódu stránky.

Na to, aby sa tento banner zobrazoval správne (neprelieza z pridelených hraníc, možno potrebuje rámec atď.), niekedy je potrebné naň naviazať niekoľko css inštrukcií.

Nemá však zmysel robiť zmeny v celkovej šablóne štýlov. Bannery sú dočasné. Dnes jeden, zajtra druhý. Preto je jednoduchšie napísať štýly priamo do kódu tohto bannera.

To znamená, že potrebujeme pripojiť iba štýly CSS ku konkrétnemu prvku stránky. To sa robí veľmi jednoducho pomocou atribútu style.

Takto napísané štýly ovplyvňujú iba prvok, v tagu ktorého sa nachádzajú. V tomto prípade iba pre tento odsek (tag

). A nie na žiadnej inej!

2. Externé štýly.

Názov externé šablóny CSS štýlov znamená, že sa nezapisujú do tela HTML dokumentu, ale do samostatného špeciálneho súboru. Tieto súbory majú príponu .css

Takže, ako som sľúbil, hovorím vám, prečo je lepšie používať externé štýly.

Faktom je, že vám umožňuje načítať stránky vášho webu o niečo rýchlejšie. Nechajte to byť na zlomok sekundy, ale rýchlejšie. to znižuje zaťaženie vašej stránky a pohodlnejšie pre vašich návštevníkov – na načítanie stránky musia čakať menej.

Prečo sa to deje?

Ak sú štýly CSS pre váš web v samostatnom súbore, prehliadač používateľa nemusí tieto štýly načítať pri každom načítaní novej stránky. Raz ich stiahol, umiestnil do vyrovnávacej pamäte (pamäťová oblasť v počítači návštevníka) a keď sa načíta ďalšia stránka, prevezme odtiaľ štýly.

Súbory so štýlom CSS môžete k webovej stránke pripojiť dvoma spôsobmi.

Prvým najbežnejším spôsobom je použitie značky s atribútmi: rel = "stylesheet" type = "text / css" href = "stylesheet.css" v kóde hlavičky stránky (značka ).

Napríklad:

1 2 3 4

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

Tento príklad pripojí k stránke štýly CSS špecifikované v súbore style.css. Sú platné v celom dokumente.

Existuje aj iný spôsob pripojiť externé šablóny so štýlmi k HTML dokument. Toto používa direktívu @import. Umožňuje vám importovať obsah súboru CSS do aktuálnej šablóny štýlov.

Môžete ho použiť na pridanie niektorých hárkov štýlov k iným, ako aj na pripojenie súboru so štýlmi k dokumentu HTML. Ak to chcete urobiť, musíte ho napísať do značky... Tu je príklad globálnej šablóny štýlov:

Výhody globálneho CSS:

• Šablóna štýlov ovplyvňuje iba jednu stránku.
• Triedy a ID možno použiť v globálnom CSS.
• Nie je potrebné nahrávať viacero súborov. HTML a CSS môžu byť v rovnakom súbore.

Nevýhody globálneho CSS:

• Zvýšený čas načítania stránky.
• Pripája sa iba k jednej stránke – neúčinné, ak chcete použiť rovnaký CSS pre viacero stránok.

Ako pripojiť CSS k HTML stránke

1. Otvorte svoju stránku HTML v ľubovoľnom textovom editore. Ak už bola stránka nahraná na váš hostingový účet, môžete použiť textový editor, ktorý poskytuje váš hosting. Ak máte tento dokument HTML vo svojom počítači, môžete ho upraviť pomocou ľubovoľného textového editora a potom ho znova nahrať do svojho hostiteľského účtu.
2. Nájdite úvodný štítok a za ním pridajte nasledujúci kód:

Po všetkých krokoch by HTML dokument s globálnym CSS mal vyzerať asi takto :

Sprievodca Hostingerom

Toto je náš text.

Možnosť 2 – Externý CSS

Snáď najpohodlnejšou možnosťou prepojenia CSS s vašou stránkou je prepojenie s externým. .css súbor. V tomto prípade sa všetky zmeny vykonané v externom súbore CSS vo všeobecnosti prejavia na vašej lokalite. Odkaz na externý súbor CSS je umiestnený v kontajneri stránky:

Zatiaľ čo samotné šablóny štýlov sa nachádzajú v súbore style.css... Napríklad:

Xleftcol (float: vľavo; šírka: 33 %; pozadie: # 809900;) .xmiddlecol (float: vľavo; šírka: 34 %; pozadie: # eff2df;)

Výhody externého CSS:

• Menšia veľkosť HTML stránky a čistejšia štruktúra súborov.
• Rýchla rýchlosť sťahovania.
• To isté možno použiť pre rôzne stránky. .css súbor.

Nevýhody externého CSS:

• Stránka sa nemusí vykresliť správne, kým sa úplne nenačíta externý CSS.

Možnosť 3- Interné CSS

Vnútorné CSS sa používa pre špecifický HTML tag. Atribút... Na každú webovú stránku musíte pridať šablónu so štýlmi. Ak má stránka veľký počet stránok, ktoré potrebujú rovnaký dizajn, potom sa pridávanie a úprava štýlov stáva nevďačná práca – proces bude trvať veľmi dlho. Preto sa interné štýly považujú za nepohodlné.

Externé štýly sú oveľa bežnejšie. Tabuľku stačí pripojiť pomocou značky ku všetkým potrebným webovým stránkam s atribútom rel (definuje vzťah medzi stránkou a zahrnutým súborom) a hodnotou šablóny štýlov, čo znamená, že zahrnutý súbor obsahuje šablónu štýlov. Atribút href je cesta (URL) k vášmu súboru .css:

Úpravou iba jedného súboru môžete zmeniť štýl pre celú lokalitu naraz bez ohľadu na počet stránok. To je veľmi výhodné, najmä pri veľkých zdrojoch.

Lekcia: vytvorenie šablóny so štýlmi

Keďže externé štýly sú najpohodlnejšie a najpoužívanejšie pri vývoji dizajnu, naučíme sa, ako ich vytvoriť. Archív so súbormi pre túto lekciu si môžete stiahnuť na tejto stránke.

V priečinku nájdete HTML dokument s ukážkou jednoduchej stránky a obrázkom (bude použitý v návode). Otvorte svoj HTML dokument v prehliadači. Uvidíte, že stránka vyzerá úplne normálne. Aby vyzerala atraktívnejšie, napíšme jej sloh.

Zatiaľ sa nemusíte príliš hlboko zaoberať tým, čo znamená časť kódu. Teraz musíte pochopiť, ako to funguje. Začnime.

Pripojenie CSS k HTML

Najprv otvorte ľubovoľný textový editor v počítači (poznámkový blok to urobí) a vytvorte prázdny súbor s názvom style, ktorý uložte s príponou .css (mali by ste získať súbor style.css). Uložte súbor do rovnakého priečinka ako stiahnutý dokument HTML.

Otvorte dokument HTML v textovom editore, ako aj v prehliadači (aby ste mohli jednoducho zobraziť zmeny vzhľadu stránky). Pridať medzi značky nasledujúci kód:

Stručne o tom, čo ste práve urobili. Vložením tohto kódu do dokumentu HTML:

• zadali odkaz na font s názvom Roboto Condensed, ktorý bude prevzatý zo servera Google (o fontoch Google si povieme neskôr);
• pridali svoj vlastný externý štýl style.css (zatiaľ prázdny).

Písanie CSS štýlu

Uložte zmeny do dokumentu HTML a prejdite na prázdny súbor .css, ktorý ste práve vytvorili. Upravme štýl stránky:

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

Uložte zmeny. Gratulujeme, napísali ste prvé pravidlo - týka sa značky ... Prvá vlastnosť, padding-top, pridá medzi okno prehliadača a obsah webovej stránky 5 pixelovú hornú výplň. Druhou vlastnosťou, background-image, ste zahrnuli obrázok pre pozadie celej stránky s uvedením cesty ku grafickému súboru (umiestnenému v rovnakom priečinku ako HTML dokument).

Obnovte otvorenú webovú stránku vo svojom prehliadači. Ak je všetko vykonané správne, uvidíte, že na stránke sa objavilo pozadie a odsadenie medzi hornou časťou okna a textom sa mierne zväčšilo.

Text (šírka: 75 %; výplň: 40 pixelov; okraj: 15 pixelov automaticky; farba pozadia: #EBEBEB; polomer okraja: 30 pixelov;)

Uložte zmeny do súboru. Teraz ty:

• nastaviť rozsah obsahu značky , čo sa rovná 75 % šírky okna prehliadača;
• Poskytuje 40-pixelový okraj zo všetkých strán oblasti obsahu.
• umiestnil oblasť do stredu stránky a tiež odsadil hornú a spodnú časť o 15 pixelov;
• nastaviť farbu pozadia #EBEBEB pre oblasť obsahu;
• zaoblené rohy obdĺžnikovej oblasti s polomerom 30 pixelov.

Znova obnovte svoj HTML dokument. V takom prípade sa uistite, že je vyrovnávacia pamäť deaktivovaná, alebo znova načítajte stránku s aktualizáciou všetkých súborov, ktoré sú s ňou spojené, pomocou špeciálnej kombinácie klávesov (napríklad pre Chrome toto Ctrl + F5).

Uvidíte, že do stredu stránky bola pridaná obdĺžniková oblasť so zaoblenými rohmi. Toto je výsledok vašich akcií v súbore CSS. Môžete tiež skúsiť zmenšiť okno prehliadača a obdivovať, ako sa šírka obdĺžnikovej plochy prispôsobuje jej veľkosti. Je to spôsobené tým, že šírka sa udáva v percentách.

Zmena písma pomocou CSS

Je čas ozdobiť náš text. Pridajte tento kód do svojej šablóny so štýlmi a uložte zmeny:

H1 (farba: # E87E04; veľkosť písma: 2em; ľavý okraj: 20px; rodina písma: "Roboto Condensed", bezpätkové;) h2 (farba: # E87E04; veľkosť písma: 1,7em; ľavý okraj : 20px; font-family: "Roboto Condensed", sans-serif;) p (farba: # 22313F; výška riadku: 150 %; margin-top: 20px; margin-left: 20px; font-family: "Roboto Condensed ", bezpätkové ;)

Napísaním tohto textu nastavíte farby písma pre značky h1, h2, p, špecifikujete ich veľkosti, pridáte 20 pixelov okraja zľava a navyše pre

Hornú časť odsadíme o 20 pixelov a výšku riadka nastavíme o 50 % viac ako je štandard. Okrem toho ste ku všetkým trom tagom pripojili font Roboto Condensed (preto ste museli hneď na začiatku zadať odkaz naň v HTML súbore).

Obnovte stránku v prehliadači a obdivujte výsledok práce. V tomto návode skúsime ešte jednu vec. Pridajte tento kód do CSS:

Dôraz (hmotnosť písma: tučné;)

Uložte a obnovte stránku vo svojom prehliadači. Uvidíte, že v poslednom odseku je časť textu tučná. Aby ste pochopili, čo sa stalo, prejdite do okna textového editora, kde ste na úplnom začiatku otvorili súbor HTML. Pozrite sa na posledný odsek: časť vety je zabalená do štítku s triednym dôrazom. Takto ste napísali štýl pre jeden riadok textu v odseku. Viac o triedach si povieme v ďalšej kapitole.

Mali by ste skončiť so stránkou ako je táto:

V praxi skúste zmeniť veľkosť textu pre

(povedzme 1,1 em) a tiež zväčšiť odsadenie medzi nimi

A ľavý okraj oblasti obsahu ďalších 10 pixelov.

závery

Táto kapitola sa zaoberá syntaxou CSS, ako aj tým, ako vytvoriť základnú šablónu štýlov. Naučili ste sa prepojiť CSS so stránkou HTML a tiež ste sa naučili vytvárať jednoduché štýly. Zdôraznime hlavné veci, ktoré si treba z tejto kapitoly zapamätať:

Každý štýl CSS pozostáva z niekoľkých prvkov: selektor, vlastnosť štýlu a hodnota tejto vlastnosti.

Všetky vlastnosti a ich hodnoty sa zapisujú do deklaračného bloku medzi dve zložené zátvorky () po zadaní selektora.

Musíte venovať veľkú pozornosť znakom: dve zložené zátvorky (otvárajúce sa na začiatku bloku deklarácie a zatvárajú sa na konci). Bez týchto zátvoriek nebude CSS fungovať správne.

Za vlastnosť je potrebné vložiť dvojbodku a za hodnotu bodkočiarku.

Pre pohodlie a lepšiu čitateľnosť kódu CSS píšte každú vlastnosť na nový riadok a tiež nešetrite medzerami a tabulátormi.

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 určiť prezentáciu dokumentu, jeho vzhľad. Poďme sa rýchlo pozrieť na aplikáciu štýlov v kontexte HTML5.

Štýl v CSS predstavuje 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 pozostáva z dvoch častí: selektora, ktorý ukazuje na prvok, a bloku deklarácie štýlu, sady 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 označuje, že tento štýl sa použije na všetky prvky div.

Za selektorom je blok deklarácie štýlu v zložených zátvorkách. 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. Nehnuteľnosť definuje špecifický štýl. Existuje veľa vlastností css. Napríklad farba pozadia definuje 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 príkaz od ostatných.

Sady takýchto štýlov sa často označujú ako štýly resp CSS(Cascading Style Sheets alebo Cascading Style Sheets). Existujú rôzne spôsoby, ako definovať štýly.

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 – názov h2 a blokovať div... Nadpis má modrú farbu textu definovanú pomocou vlastnosti color. Pri bloku div vlastnosti šírky sú definované ( šírka), výšky ( výška), ako aj farby pozadia ( farba pozadia).

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

Štýly

Tu už nie je žiadny prvok štýl, ale je tu prvok odkaz ktorý spája vyššie vytvorený súbor styles.css:

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 štýlu. S touto definíciou sa štýly oveľa ľahšie upravujú, ako keby boli definované v rámci prvkov alebo v rámci prvku. štýl a tento spôsob je preferovaný v HTML5.

Použitie štýlov v externých súboroch môže 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 následnom 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 pripojenom súbore. Napríklad:

A súbor style.css definuje nasledujúci štýl:

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

V tomto prípade je vlastnosť width definovaná na troch miestach pre prvok div a s rôznymi hodnotami. Aká hodnota sa v dôsledku toho 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 konečná šírka 120 pixelov
• Ďalej v poradí priority sú štýly, ktoré sú definované v prvku štýlu.
• Štýly s najmenšou prioritou sú tie, ktoré sú definované v externom súbore.

Html atribúty a css štýly

Mnoho prvkov html umožňuje 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. 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 štýly definovať, či sú správne. A v tomto prípade môžeme použiť validátor css, ktorý je dostupný na http://jigsaw.w3.org/css-validator/.
Tu je videonávod o tom, ako prepojiť CSS s HTML