Čo je to css kód a kde je. Základy CSS pre začiatočníkov. Výhody používania CSS

Stručne vysvetľuje, čo sú kaskádové štýly (CSS). S jeho pomocou si vytvoríte jednoduchý dokument, ktorý využijete v ďalších častiach.

Info: Čo je CSS

Cascading Style Sheets = CSS je jazyk, ktorý je zodpovedný za vizuálnu prezentáciu dokumentov používateľovi.

Pod dokument budeme rozumieť množine informácií o popísanej štruktúre stránky značkovací jazyk.

A výkon Prezentácia dokumentu používateľovi zase znamená jeho transformáciu do podoby, ktorá je ľahko zrozumiteľná. Prehliadače ako Firefox, Chrome alebo Internet Explorer boli vytvorené na vizuálne zobrazenie dokumentov, napríklad na obrazovke počítača, projektore alebo výstupe na tlačiareň.

Príklady

Webová stránka, ktorú práve čítate, je dokument. Štruktúra informácií, ktoré vidíte na stránke, je zvyčajne opísaná pomocou značkovacieho jazyka HTML (HyperText Markup Language).
Dialógové okná v počítačových programoch, nazývané aj modálne okná, sú zvyčajne tiež dokumenty. Takéto okná je možné popísať aj pomocou značkovacieho jazyka ako XUL (XML User Interface Language), ktorý nájdeme napríklad v niektorých aplikáciách Mozilly.

V tejto príručke bloky s názvom Viac informácií, ako napríklad nasledujúce, obsahujú dodatočné informácie a odkazy na zdroje, ktoré vám umožnia hlbšie sa ponoriť do problematiky, ktorej je venovaná konkrétna časť. Tieto materiály môžete použiť okamžite alebo tieto bloky preskočiť a vrátiť sa k nim neskôr.

Viac informácií

Dokument nie je to isté ako súbor. Dokument však môže byť uložený v jednom súbore.

So stránkou, ktorú práve čítate, sú veci trochu komplikovanejšie. Keď váš prehliadač požiada o danú stránku, server vstúpi do databázy a vygeneruje dokument, pričom ho poskladá z niekoľkých dokumentov, z ktorých každý môže byť umiestnený v niekoľkých súboroch. V tomto návode však budete vedieť pracovať aj s dokumentmi, z ktorých každý je reprezentovaný jedným súborom.

Viac informácií o dokumentoch a značkovacích jazykoch nájdete v iných častiach tejto stránky:

V druhej časti tohto návodu uvidíte príklady týchto značkovacích jazykov.

Viac informácií

V CSS termínoch program, ktorý používateľovi zobrazí dokument, tzv užívateľský agent(UA). Prehliadač je jedným z typov UA. CSS teda nie je len prehliadač alebo vizuál, ale v prvej časti tohto tutoriálu budete pracovať iba s CSS v prehliadači.

Ďalšie definície a termíny súvisiace s CSS možno nájsť v Definíciách špecifikácie CSS vytvorenej organizáciou World Wide Web Consortium (W3C), medzinárodnou komunitou, ktorá stanovila štandardy pre otvorené webové stránky.

Akcia: Vytvorte dokument

Vytvorte v počítači nový priečinok pre cvičenia.
Otvorte textový editor a vytvorte nový textový súbor. Tento súbor bude obsahovať dokument pre niekoľko nasledujúcich cvičení.
Skopírujte a prilepte nižšie uvedený kód HTML a potom uložte súbor ako doc1.html. Vzorový dokument
C vzostupne Sštýl S heets
Otvorte novú kartu alebo okno v prehliadači a otvorte súbor, ktorý ste práve vytvorili.
Mali by ste vidieť riadok s veľkými písmenami tučným písmom:

C vzostupne Sštýl S heets
To, čo v skutočnosti vidíte, sa môže mierne líšiť, pretože predvolené nastavenia vášho prehliadača a tejto encyklopédie budú pravdepodobne odlišné: malé rozdiely v písme, medzerách a farbách nie sú veľmi dôležité.

Čo bude ďalej?

Dokument, ktorý ste vytvorili, ešte nepoužíva CSS. V ďalšej časti sa dozviete, ako použiť CSS na úpravu štýlu dokumentu.

Úvodný článok o CSS, z ktorého sa zoznámite so všeobecnými pojmami, čo CSS je a na čo je potrebné. Poďme sa v krátkosti pozrieť na jeho syntax a možnosti. Začnime s definíciou

1. Definícia CSS

CSS(z anglického „Cascading Style Sheets“, kaskádové štýly) – zoznam štýlov pre stránku v html

čo je štýl? Zhruba povedané, štýl je to, ako prvok vyzerá na stránke. Akýkoľvek text možno napísať napríklad s veľkosťou 10 pixelov alebo 14 pixelov. Môžete písať čiernou alebo modrou farbou. Môžete podčiarknuť/nakloniť/prečiarknuť atď. Všetko, čo súvisí s formátovaním textu, sa robí cez CSS.

Ale to je len malá časť možností. CSS je zodpovedné za celú vizualizáciu všetkých html značiek. Dokonca aj pre dynamické zmeny: rozbaľovacie ponuky, zvýrazňovanie odkazov pri umiestnení kurzora myši.

Zoznam všetkých štýlov sa v jazyku správcu webu často nazýva „šablón so štýlmi CSS“.

2. Ciele a zámery CSS

Urobte stránku krajšou (vzhľadom na dizajn), vytvorte priateľské rozhranie a len tak, aby sa stránky od seba aspoň nejako líšili
Oddeľte html kód od kódu popisu štýlu a dizajnu

3. Syntax CSS (selektory)

Každá vlastnosť a štýl je popísaný prostredníctvom "Selektory". Jeho syntax je nasledovná

Selektor (atribút: hodnota;)

Selektor- môže to byť názov štýlu alebo značky. Kučeravé zátvorky popisujú špecifické pravidlá. Popis sa vždy riadi rovnakým štandardom: „názov atribútu: hodnota“. Každé pravidlo musí končiť bodkočiarkou.

Napríklad

.názov_štýlu ( atribút1 : hodnoty1; atribút2 : hodnoty2; ... );

Existuje veľa možností na špecifikovanie štýlov CSS. Pozrime sa na tie najpopulárnejšie s príkladmi.

/*Nastavenie celkového štýlu*/ .global_style ( font-size : 12px ; color : red ; ) /**/ font.style1 ( font-size : 10px ; color : blue ; ) /* Nastavenie všeobecného štýlu len pre značku písma*/ #global_style2 ( font-size : 14px ; color : red ; ) h1 ( font-size : 19px ; )

Štýl global_style možno použiť ako triedu pre všetky značky. Napríklad,

style1 je možné použiť iba na štítku pretože font.style1 bol špecifikovaný v definícii.

Tretia možnosť pre úlohu je cez mriežku (#). Rovnako ako v prvom prípade je definovaný pre všetky prvky, ale musí byť špecifikovaný nie cez triedu, ale cez atribút id:

V poslednej možnosti sme jednoducho zadali názov značky

a predpísal mu sloh. To znamená, že teraz všetky značky

zdedí hodnotu tohto štýlu.

4. Ako a kde nastaviť CSS štýly

5. Aké sú výhody používania CSS

Jednoduchá zmena dizajnu. Stačí zmeniť štýl na jednom mieste a zmení sa na každej stránke webu
Toto je jediný spôsob, ako zmeniť dizajn na stránke
Jednoduchá syntax jazyka

6. Problémy s CSS v prehliadačoch

Staršie prehliadače nepodporujú všetky funkcie CSS. To spôsobuje problémy so zobrazením. Napríklad efekt, ktorý bol určený na zlepšenie vnímania obsahu, môže viesť k opačnému efektu. Ak niektorá vlastnosť nie je podporovaná, potom hrozí vzájomné prekrývanie blokov, textov atď.

Tento problém čiastočne riešia predpony. V podstate je to len slovo umiestnené pred argumentom v šablóne štýlov. Každý prehliadač má svoju predponu.

-moz- pre prehliadač Firefox
-webkit- pre prehliadače Chrome a Safari (oba prehliadače používajú rovnaké vykresľovacie jadro)
-ms- pre prehliadač Internet Explorer
-o- pre prehliadač Opera

7. Odpovede na často kladené otázky

7.1. Čo je CSS3

V poslednej dobe sa často môžete stretnúť s konceptom CSS3. V podstate ide o rovnaký CSS, ale so sadou nových argumentov, ktoré poskytujú ďalšie možnosti z hľadiska rôznych efektov. Napríklad svietiaci text. Mnoho prehliadačov takéto vlastnosti nepodporuje, preto sa odporúča používať takéto efekty v minimálnom množstve.

7.2. Aký je rozdiel medzi CSS a HTML?

HTML je rámec vašej stránky (sú to odkazy, obrázky, obsah). A CSS určuje, ako sa toto všetko zobrazí používateľovi. HTML a CSS sú teda zásadne odlišné veci, ale súvisia. Pravidlom dobrej formy je oddeliť kódy od seba, aby sa nemiešali na jednej stránke.

Skratka CSS znamená Cascading Style Sheets. Ak veríte (a v takýchto veciach by sa im malo veriť), CSS je mechanizmus na pridávanie štýlu do webového dokumentu. Štýly sú chápané ako pravidlá, ktoré určujú vzhľad a dizajn dokumentu – spravujú písma, farby na stránke a usporiadanie prvkov.

Poďme zistiť, aké sú to tabuľky, na čo slúžia a prečo sú zrazu „kaskádové“?

Prečo potrebujete oddeliť obsah od dizajnu?

Klasický princíp „rozdeľuj a panuj“ je známy už od čias starovekého Ríma. Opakovane umožnil postavám rôznych období dosiahnuť úspech vo vojensko-politických hrách. Pomôže aj nám.

HTML sa pôvodne používalo na štruktúrovanie textu (tu je nadpis, tu je odsek a toto je zoznam). Zobrazenie konkrétnych prvkov bolo určené ich atribútmi a bolo do značnej miery ponechané na uváženie prehliadača. Keďže som chcel stále ovládať vzhľad, začali sa objavovať dizajnové značky, ako napríklad alebo . Výsledkom je, že obsah dokumentu a jeho dizajn sú úzko prepojené. Kód sa stal ťažkopádnym, nepružným a ťažko čitateľným. Napríklad takto:

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit

Zjavné nevýhody:

veľa zbytočných štruktúr, ktoré priamo nesúvisia s označením obsahu - veľká veľkosť súboru, zvýšená návštevnosť a čas načítania;
Je ťažké zmeniť dizajn. Napríklad, ak potrebujete zmeniť farbu, budete musieť hľadať všetky atribúty;
výrazné obmedzenia možností formátovania. Mnoho značiek jednoducho nemožno správne nakonfigurovať pomocou samotných atribútov;
nie je možné prispôsobiť dizajn rôznym typom zobrazovacích zariadení (PC monitor, tlačiareň, obrazovka PDA, hlasový prehliadač atď.);
kód stratí svoje logické označenie (sémantiku) a výsledkom je:
- zle indexované vyhľadávacími robotmi, pretože musia spracovať veľa „odpadu“;
- Dostupnosť pre používateľov používajúcich nevizuálne prehliadače je výrazne znížená.

Oddelenie všetkých pravidiel registrácie do samostatného bloku (súboru) umožňuje vyriešiť tieto problémy. Kód sa stáva jednoduchším a oveľa jednoduchšie sa s ním pracuje. Samotný HTML sa stáva tým, čím mal byť – jazykom pre sémantické označovanie dokumentov:

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit

Výhody používania CSS:

Kód je rozdelený na obsah a dizajn. Získame jednoduchší a zrozumiteľnejší kód;
súbor s návrhom sa stiahne iba raz a uloží do vyrovnávacej pamäte – zníži sa prevádzka, čas sťahovania a zaťaženie servera;
jednoduchosť samotného jazyka CSS + princíp oddelenia dizajnu od obsahu - znižuje sa čas na vývoj a údržbu stránky;
Jediný CSS riadi vykresľovanie viacerých HTML stránok. Zmeny dizajnu sa vykonávajú rýchlejšie;
CSS poskytuje ďalšie možnosti formátovania, ktoré by boli nepredstaviteľné pri použití samotných atribútov;
bol implementovaný mechanizmus na pripojenie rôznych CSS pre rôzne typy zobrazovacích zariadení;
zvýšenie kompatibility s rôznymi platformami pomocou webových štandardov.

Kaskádové štýly

CSS je teda všeobecne uznávaný medzinárodný štandard. CSS je výkonný nástroj, jedna z hlavných súčastí takmer každej webovej stránky, bez ktorej si nemožno predstaviť moderný webový vývoj.

Šablóny štýlov môžu byť interné (v rámci súboru HTML) alebo externé. Externé tabuľky sú najpohodlnejšie a sú to súbory s príponou css. O týchto problémoch sa bude podrobnejšie hovoriť v jednom z nasledujúcich článkov.

Šablóna štýlov pozostáva zo sady pravidiel, ktoré určujú, ako sa bude konkrétny prvok zobrazovať, t.j. aké štýly sa naň použijú.

Príklad útržku CSS:

Pravidiel môže byť veľa, každé sa skladá z dvoch častí (možno si predstaviť, že sú to stĺpce): na čo aplikujeme štýly (selektor) a aké štýly vlastne aplikujeme (definičný blok). Preto sa celá štruktúra nazývala „tabuľka“. Takže „štýlový list“. Ale prečo zrazu „kaskáda“?

Kaskádové dedičstvo

Faktom je, že CSS používa dedičnosť z rodiča na dieťa, čo vám umožňuje definovať štýly založené na tých, ktoré už boli popísané pre rodičov. V tomto prípade nastáva situácia, keď sú pre prvok vhodné vlastnosti z viacerých pravidiel súčasne. Štandard CSS definuje poradie priority, v ktorom sa pravidlá štýlu aplikujú, vďaka čomu sú výsledky predvídateľné. Tento model sa nazýva „kaskáda“.

Spodná čiara

CSS je výkonná technológia, ktorá vám umožňuje opísať pravidlá návrhu dokumentu HTML a oddeliť ich od obsahu. Jednou z kľúčových požiadaviek, ktoré moderný trh práce kladie na dizajnéra rozloženia, je dôkladná znalosť CSS. CSS sa však dá celkom ľahko naučiť. Aby sme tomu pomohli, existuje naša.

Ako si pamätáte, HTML je značkovací jazyk, ale jeho tvorcovia tak chceli zlepšiť život tvorcov stránok, že doň pridali prvky a parametre, ktoré sú zodpovedné za vzhľad stránky: značky , , , a tak ďalej.

V určitom okamihu sa však kód stránky stal tak ťažkopádnym a nečitateľným, že bolo jasné, že táto cesta nevedie „nikam“. Potom sa rozhodlo oddeliť označenie stránky (HTML) a jej vizuálny dizajn (CSS). Spoločne HTML a CSS dokážu zázraky, ako čoskoro uvidíte.

Čo je CSS

CSS (Cascading Style Sheets) – kaskádové štýly.
Štýl- súbor parametrov, ktoré definujú vonkajšiu reprezentáciu objektu. Povedzme napríklad, že chceme všetky nadpisy prvej úrovne (značky
) na jednej strane by bola červená, veľkosť - 24 a písaná kurzívou, a na druhej strane by bola modrá, veľkosť - 12. Náš nadpis je objekt a farba, veľkosť a štýl sú parametre. Ide len o to, že parametre nášho objektu sú pre rôzne stránky rôzne, t.j. líšia sa štýlom.
Každý prvok na stránke môže mať svoj vlastný štýl (odseky, nadpisy, riadky, text...). Súbor štýlov všetkých prvkov je tzv štýlový list.
Ak je pre jeden prvok špecifikovaných niekoľko štýlov (ako v príklade s nadpismi), potom kaskádové, ktorý určuje prioritu konkrétneho štýlu.
Výhody CSS

CSS môže výrazne zmenšiť veľkosť kódu a urobiť ho čitateľným.
CSS umožňuje nastaviť parametre, ktoré sa nedajú nastaviť v samotnom HTML. Napríklad odstráňte podčiarknutie z odkazov.
CSS uľahčuje zmenu vzhľadu stránok. Predstavte si, že ste vytvorili webovú stránku s 50 stránkami, na ktorých sú všetky nadpisy modré. Po nejakom čase ste chceli zmeniť modrú farbu na zelenú. Budete musieť prejsť všetkých 50 strán a zmeniť farbu v príslušnom atribúte. S CSS to musíte urobiť iba raz, v šablóne štýlov.
CSS je spojené s takzvaným blokovým rozložením webovej stránky.
Je čas prejsť od slov k činom, v ďalšej lekcii začneme.
Dobrý deň, milí čitatelia blogu. Dnes chcem začať podrobne hovoriť o CSS (materiály budú zhromaždené v príslušnej sekcii).
Po štúdiu HTML je čas prejsť na to. Značkovací jazyk štýlu je zodpovedný za externý dizajn webových stránok a bez jeho pochopenia bude veľmi ťažké niečo opraviť, presunúť alebo zarovnať.
Samozrejme, CSS vyzerá oveľa zložitejšie v porovnaní s Html, ale to je, pokiaľ ide o otázku rozloženia medzi prehliadačmi, ale pokiaľ ide o opravu niektorých malých detailov v dizajne vašej vlastnej webovej stránky, potom nepotrebujete veľa inteligencie. Vo všeobecnosti sa pokúsime podrobne rozobrať jeho základy a nuansy ich filigránskeho použitia ponecháme na voliteľné štúdium (voliteľné). Všetci webmasteri však musia poznať základné pojmy.
Čo je jazyk CSS a na čo slúži?
Skratka CSS znamená Cascading Style Sheets alebo v ruskom preklade ako kaskádové štýly. Čo to je a prečo bol tento jazyk vynájdený naraz?
Takže na základe toho, čo sme študovali o niečo skôr, môžeme povedať, že označenie webového dokumentu sa vykonáva pomocou značiek tohto jazyka. Tie. Pomocou HTML vytvárame štruktúru našich dokumentov (webových stránok). Napríklad v čistom HTML môžeme špecifikovať ďalšie prvky štruktúry dokumentu a dokonca im dať vzhľad, ktorý potrebujeme v prehliadači.
Čas však diktoval potrebu používať čoraz viac atribútov vizuálneho dizajnu v HTML, čo značne zahltilo zdrojový kód. V tejto súvislosti bola navrhnutá ďalšia, sľubnejšia možnosť rozvoja - vytvorenie samostatného značkovacieho jazyka štýlu CSS. A táto možnosť mala množstvo výhod oproti jednoduchému zvýšeniu počtu dizajnových atribútov.
prečo? Pamätáte si, ako môžete nastaviť farbu textového fragmentu v čistom HTML? Správne, s pomocou . Čo ak chcete vyfarbiť niekoľko odsekov v texte naraz v požadovanej farbe?
Potom do každej z nich (značka odseku P je na úrovni bloku, čo znamená, že ju nemožno umiestniť do vloženého prvku Font) vložte značky Font s požadovanou hodnotou farby v atribúte Color.
To všetko strašne zahltí zdrojový kód, čo je veľmi, veľmi nežiaduce, pretože tým utrpí rýchlosť načítania stránky a vytvorí sa nadmerná záťaž na zariadení internetovej komunikácie. Vývojári to nedokázali.
Preto prišli s nasledovným východiskom zo súčasnej situácie. Vývojári z W3C sa rozhodli navrhnúť všetky vizuálne reprezentácie webového dokumentu vo forme špeciálneho značkovacieho jazyka štýlu, ktorý nazvali kaskádové štýly alebo jednoducho CSS (čítaj ako CSS). Čo je podstatou technológie?
A ide o toto: pripojením značkovacieho jazyka štýlu k ľubovoľným dokumentom (stránkam) budeme môcť nastaviť vizuálnu reprezentáciu všetkých tých prvkov (vytvorených pomocou značiek Html), ktoré sa v tomto dokumente objavia.
Na internete existuje zdroj, ktorý vám veľmi jasne pomôže vidieť, ako môže webová stránka zmeniť svoj vzhľad len preto, že je k nej pripojený iný súbor kaskádových štýlov. Podľa môjho názoru by to bola najlepšia odpoveď na otázku: čo je CSS a prečo je to potrebné?.
Základné zobrazenie dokumentu (webovej stránky) si môžete pozrieť kliknutím na tento odkaz:
Nič zvláštne, ale ak kliknete na odkaz „Zobraziť všetky návrhy“ v ľavom menu, môžete zobraziť desiatky alebo dokonca stovky možností dizajnu pre tú istú webovú stránku pripojením inej šablóny so štýlmi (iného súboru so šablónou štýlov).
Upozorňujeme, že zdrojový kód HTML zostáva úplne rovnaký a Mení sa len dizajn CSS. Úžasné, však?!
CSS nie je značkovací jazyk v rovnakom zmysle ako napríklad Html. Toto je štylistický značkovací jazyk – má svoju vlastnú syntax, svoj vlastný vnútorný obsah av mnohých ohľadoch sa bude veľmi líšiť od toho, čo už bolo študované predtým.
Navyše v porovnaní s HTML je značkovací jazyk štýlov oveľa zložitejší. Je v ňom veľa nuancií, ktoré budete musieť poznať okrem základných pojmov. V HTML neboli žiadne špeciálne nuansy - študovali ste všetky prvky a môžete ľahko pracovať s kódom. Zdá sa mi, že CSS možno prirovnať k šachu – nestačí vedieť, ako sa všetky figúrky pohybujú, ale musíte vedieť aj hrať.
Takže, čo to je a z čoho pozostáva? Tento domnelý jazyk môže byť rozdeliť na dve časti:
Pravidlá, ktoré prehliadaču povedia, ako má vyzerať prvok na obrazovke.
Selektory sú označenia, ktoré umožňujú prehliadaču pochopiť, ktoré prvky kódu HTML budú musieť použiť tieto pravidlá.

Teraz sa pozrime, ako je dizajn špecifikovaný v štýloch prepojený so zdrojovým kódom webovej stránky. Existujú tri hlavné spôsoby pomocou CSS s HTML:
Príloha – CSS kód sa zapíše priamo do požadovaného tagu prvku pomocou atribútu Style
Vkladanie – celý kód štýlu pre webový dokument je zapísaný v jeho hlavičke (v rámci značiek Head) pomocou prvku Style
Linking – všetok CSS kód je umiestnený (extrahovaný) v samostatnom externom súbore, ktorý je prepojený s dokumentom pomocou prvku Link v jeho hlavičke

No, vidíte, ako sme sa už veľa naučili o značkovacom jazyku štýlu. Teraz je čas o tom hovoriť syntax. Vo všeobecnosti je to celkom jednoduché:
Jedno pravidlo v kóde CSS pozostáva z dvoch prvkov – vlastnosti (v našom príklade je to ) a jej hodnoty (v našom príklade je to červená a #CCCCCC). Predpokladom je oddelenie vlastnosti od jej hodnoty dvojbodkou.
Ďalej. Jedno pravidlo je nevyhnutne oddelené od druhého bodkočiarka. Po poslednom pravidle už nemôžete použiť bodkočiarku, ale aby ste sa vyhli excesom, je najlepšie urobiť pravidlo, aby ste ho vždy používali. nemajú v kóde CSS žiadny význam a môžete si ich nastaviť podľa vlastného uváženia.
Použitie štýlu na pripojenie CSS k kódu HTML
Teraz sa pozrime na príklady všetkých tých spôsobov aplikácie pravidiel štýlu na náš dokument, ktoré existujú a ktoré boli všeobecne opísané vyššie.
Prvá metóda sa nazýva metóda Vloženie CSS do Html pomocou atribútu Style:
Pozrime sa, ako môžeme použiť túto metódu na nastavenie farby a pozadia odseku:
Aká je metóda hniezdenia
Ako vidíte, jedným jednoduchým pohybom sme zafarbili text odseku na červeno (color:red) a zároveň sme pod neho umiestnili šedé pozadie (background:#cccccc). Štýl sa vzťahuje na tých šesť, ktoré možno použiť v spojení s absolútne ľubovoľnými značkami (sú uvedené v spodnej časti snímky obrazovky):
V Css budeme aktívne používať aj univerzálne, ale o tom sa bude diskutovať v nasledujúcich článkoch, ale zatiaľ sme zvažovali možnosť použitia štýlu na pripojenie pravidiel dizajnu štýlu k určitým prvkom Html kódu. Umožňuje vám použiť súbor rovnakých pravidiel (v neobmedzenom množstve) ako vašu hodnotu.
Metóda vnorenia pomocou atribútu Style je v praxi veľmi jednoduchá na implementáciu, no napriek tomu je v reálnom rozložení používané veľmi zriedkavo. Ale s jeho pomocou môžete veľmi jednoducho s niečím skúšať a experimentovať a až potom preniesť všetky tieto pravidlá do samostatného súboru s CSS štýlmi.
Ďalší spôsob pripojenia značkovacieho jazyka štýlu sa nazýva metóda vkladanie CSS do Html. Táto metóda sa zásadne líši od predtým diskutovanej metódy investovania.
Namiesto zahrnutia atribútu Style do každej značky na stránke, ktorý obsahuje pravidlá jazyka štýlu, teraz napíšeme všetky pravidlá CSS, ktoré potrebujeme pre tento webový dokument, do jedného Štýl značky, ktorý bude zase umiestnený v hlavičke tohto dokumentu (medzi prvky Head).
Pamätáte si, čo je Head a kde je napísaný v štruktúre webového dokumentu? Ak si to nepamätáte, vyhľadajte si to v tomto blokovom diagrame:
Tie. v kóde to môže vyzerať takto:
... ...
Nie je to celkom jasné? No a teraz to skúsim ilustrovať:
Aby si prehliadač nepomýlil pravidlá štýlu s hypertextovým značkovacím jazykom, v elemente Style bude potrebné zadať požadovaný atribút. Napíšte s hodnotou „text/css“(hlavička mediálneho obsahu pre kaskádové štýly). To. Kód obsiahnutý v tomto prvku bude prehliadač interpretovať ako CSS.
Pozrime sa ďalej na príklad uvedený vyššie. Ako vidíte, štýl vládne uzavreté v kučeravých zátvorkách, a pred nimi je napísaný takzvaný selektor v tvare latinského písmena „P“. Prečo je tento selektor potrebný?
Ako inak môžeme prehliadaču naznačiť, že tieto pravidlá CSS bude potrebné použiť iba na značky odsekov (selektor P) daného webového dokumentu a na nič iné.
Tu sme sa opäť dotkli otázky syntaxe. Pri používaní vnorených a vnorených metód musia byť všetky pravidlá značkovacieho jazyka uzavreté v zložených zátvorkách a pred nimi musí byť určite sa postav alebo niekoľko voličov:
Selektor CSS (vlastnosť: hodnota; vlastnosť: hodnota)
Pri použití metódy hniezdenia sme nepoužili selektor a kučeravé zátvorky, pretože prehliadaču už bolo jasné, že tieto pravidlá CSS je potrebné aplikovať presne na značku, v ktorej bol zapísaný atribút Style.
Pri použití metódy vkladania alebo vkladania sa situácia s určovaním, komu sú tieto pravidlá štýlu určené, skomplikovala a bolo potrebné použiť zložené zátvorky a selektory. To. naznačujeme prehliadaču, že by ste mali láskavo použiť túto sadu pravidiel CSS (v zložených zátvorkách) na všetky odseky a túto sadu na niečo iné.
V najjednoduchšom prípade môžete ako selektor použiť názov tagu, na ktorý sa majú aplikovať pravidlá jazyka CSS, uzavretý do zložených zátvoriek, ktoré sa otvárajú hneď za názvom selektora. V našom príklade sa ako selektor používa názov značky odseku „P“. O selektoroch v značkovacom jazyku štýlov si podrobnejšie povieme v ďalšom článku (pozri odkaz vyššie).
Zhrňme si spôsob vkladania kódu CSS do dokumentu Html – všetky pravidlá štýlu potrebné pre tento dokument budú popísané v jedinej značke Style a nie v mnohých rôznych prvkoch, ako by to bolo v prípade, ak by sa použila práve opísaná metóda vkladania vyššie.
Exportovanie šablón štýlov CSS do samostatného súboru pomocou funkcie Link
Posledný spôsob integrácie kódu štýlu do webového dokumentu je tzv spôsob lepenia. Najjednoduchší spôsob, ako ilustrovať túto metódu, je:
Jeho hlavný rozdiel od metód diskutovaných vyššie (vnorenie a vkladanie) je v tom, že pri použití metódy prepojenia sú všetky pravidlá jazyka CSS sa prenesú do samostatného externého súboru. Bude to opäť text (ako každý Html dokument) a zvyčajne má priradené prípony .css, takže je možné priradiť špeciálny program () na jeho otvorenie na lokálnom počítači so systémom Windows.
Pri použití externého súboru CSS, špeciálne Značka odkazu, ktorý sa zapisuje opäť medzi otvárací a zatvárací prvok Head v hlavičke webovej stránky. Odkaz je v prehliadači klasifikovaný ako neviditeľný.
V takom prípade prehliadač nájde zadaný súbor so štýlmi (je mu predchádzaný v atribúte Href tagu Link), načíta ho a aplikuje v ňom špecifikované pravidlá jazyka CSS pre externý dizajn aktuálneho Html dokumentu.
Vo všeobecnosti je linkovanie veľmi podobné použitiu značky Style popísanej o niečo skôr, ale môže výrazne urýchliť načítanie stránok lokality a znížiť záťaž na internetové komunikačné zariadenia.
Pri použití prvku Style (vložená metóda) bude musieť prehliadač zakaždým načítať v ňom vložené pravidlá CSS a selektory spolu s kódom HTML dokumentu a v prípade použitia externého súboru so štýlmi bude musieť prehliadač načítať iba potrebuje načítať súbor Style.css raz a až potom ho pri navrhovaní iných stránok vášho webu prevziať z vlastnej vyrovnávacej pamäte (oblasť na pevnom disku počítača používateľa).
Atribút type=”text/css” značky Link znamená, že tento mediálny obsah nebude nič iné ako značkovací jazyk štýlu. Používa sa ale aj pri prepojení CSS súboru a Html dokumentu Atribút Rel s hodnotou šablóny so štýlmi. Faktom je, že Link (hypertextový odkaz na službu) možno použiť na úplne iné účely.
Ak sa pozriete na zdrojový kód tejto stránky v prehliadači, uvidíte, že v oblasti Head je celý rad rôznych značiek odkazov:
A účel každého z týchto hypertextových odkazov na služby je určený hodnotou atribútu Rel. Napríklad rel="shortcut icon" sa používa na označenie cesty k súboru a rel="alternate" sa môže použiť na označenie alternatívnej verzie stránky (príkladom alternatívnej reprezentácie dokumentu Html by bolo) .
No a v prípade použitia atribútu rel="stylesheet" v Link nastavíme prehliadač cesta k súboru so štýlmi(v atribúte Href môže byť táto cesta špecifikovaná v absolútnej alebo relatívnej forme). Tie. Pomocou atribútu Rel povieme prehliadaču, ako bude vyzerať súbor, ktorého cesta je uvedená v Href (šablóna štýlov - s CSS).
Na stránkach metóda viazania sa používa takmer vždy CSS a Html (externý súbor šablóny so štýlmi). Značky Atribúty a Štýl sa zvyčajne používajú iba na testovanie, aj keď môžu existovať špecifické úlohy, keď je ich použitie opodstatnené (napríklad pri navrhovaní ). Ale pri reálnej práci na weboch sa používajú práve externé súbory, t.j. spôsob viazania.
Dovoľte mi týmto sa rozlúčiť a prisahať, že vám sľúbim, že pokračovanie bude nasledovať vo veľmi blízkej budúcnosti. Ešte raz opakujem, že naučiť sa CSS je zvyčajne oveľa náročnejšie ako naučiť sa HTML, preto sa budem snažiť byť čo najpodrobnejší a najzrozumiteľnejší.

Veľa šťastia! Uvidíme sa čoskoro na stránkach blogu
Mohlo by vás zaujímať
Štýl zoznamu (typ, obrázok, pozícia) – CSS pravidlá pre prispôsobenie vzhľadu zoznamov v Html kóde
Display (block, none, inline) in CSS – nastavte typ zobrazenia Html prvkov na web stránke
Na čo slúži CSS, ako prepojiť kaskádové štýly s Html dokumentom a základná syntax tohto jazyka
Pozadie v CSS (farba, pozícia, obrázok, opakovanie, príloha) - všetko pre nastavenie farby pozadia alebo obrázka pozadia Html prvkov
Priority v Css a ich zvýšenie z dôvodu Dôležité, kombinácie a zoskupenia selektorov, používateľských a autorských štýlov
Výška, šírka a pretečenie – CSS pravidlá pre popis oblasti obsahu v blokovom rozložení
Jednotky rozmerov (pixely, Em a Ex) a pravidlá dedenia v CSS Rôzne štýly pre interné a externé odkazy cez CSS
Selektory pseudotried a pseudoprvkov v CSS (hover, first-child, first-line a iné), vzťahy medzi značkami HTML kódu
Float and clear in CSS - block layout tools