V prvom rade si zadefinujme, ako web vyzerá takpovediac zvnútra. Bez toho, aby sme zachádzali do detailov, to môžeme povedať web je súbor súborov, ktoré sa nachádzajú na serveri (hostingu) na internete a vzájomne interagujú podľa určitých scenárov. Výsledkom tejto interakcie sú práve stránky, ktoré si denne prezeráte.

Preto musia byť všetky tieto súbory, ktoré tvoria stránku, niečím naplnené. Presne tak, je! A sú naplnené kódom. Takže tu to je každá z kryptických skratiek je jazyk, na ktorom sú napísané stránky a skripty, ktoré tvoria web.

Čo je HTML?

HTML (Hypertext značkovací jazyk) je hypertextový značkovací jazyk. Nie je to celkom jasné, však? Pri zjednodušení definície môžeme povedať, že HTML je „kostra“ každej stránky.

Príkladom je nasledujúca časť stránky, ktorú sme vymysleli:

Názov stránky

viditeľná časť odkazu (kotva)

Názov stránky

Toto je text, odsek, uzavretý v značkách. HTML sa spravidla skladá zo značiek, ktoré sa otvárajú a zatvárajú a rámujú určité prvky. A teraz odstavec textu skončí a dodáme.

viditeľná časť odkazu (kotva)

Prečo "kostra"? Ak sa pozriete pozorne, interpretovaný kód nie je vôbec naformátovaný. Žiadne farby, žiadne veľkosti, žiadne umiestnenie.

Môžeme z toho vyvodiť záver HTML je sada značiek, ktoré tvoria základ akejkoľvek stránky na internete. S ich pomocou deklarujeme nadpisy, odseky, odkazy, obrázky a ďalšie prvky.

Čo je CSS?

CSS (anglicky Cascading Style Sheets – kaskádové štýly) – to je tá „magická mágia“, vďaka čomu vyzerá značenie HTML pekne. O Pomocník CSS máme možnosť akýmkoľvek spôsobom upraviť akýkoľvek prvok špecifikovaný v značke.

Myslím, že najlepšie je uviesť príklad:

Zebry

Farbenie


Zistite viac o zebrách!

Zebry

Zebry (lat. Hippotigris) - podrod rodu koní, vrátane druhov zebry Burchellovej (Equus quagga), zebry Grévyho (Equus grevyi) a zebry horskej (Equus zebra). Hybridné formy medzi zebrami a domácimi koňmi sa nazývajú zebroidy, medzi zebrami a somármi - zebruly. Zebry žijú v malých skupinách pozostávajúcich zo samíc s mláďatami a jedného žrebca.

Farbenie

Čo sa týka sfarbenia pozadia zebry, často sa vyskytujú dve vzájomne sa vylučujúce polohy: biela alebo čierna. Kurátorka veľkých cicavcov v Atlante Zoo Lisa Smith hovorí, že odborníci najčastejšie opisujú zebry ako čierne kone s bielymi pruhmi.

Zebry

Zebry (lat. Hippotigris) - podrod rodu koní, vrátane druhov zebry Burchellovej (Equus quagga), zebry Grévyho (Equus grevyi) a zebry horskej (Equus zebra). Hybridné formy medzi zebrami a domácimi koňmi sa nazývajú zebroidy, medzi zebrami a somármi - zebruly. Zebry žijú v malých skupinách pozostávajúcich zo samíc s mláďatami a jedného žrebca.

Farbenie

Čo sa týka sfarbenia pozadia zebry, často sa vyskytujú dve vzájomne sa vylučujúce polohy: biela alebo čierna. Kurátorka veľkých cicavcov v Atlante Zoo Lisa Smith hovorí, že odborníci najčastejšie opisujú zebry ako čierne kone s bielymi pruhmi.

Nie je ťažké vidieť, že použitie CSS je neoddeliteľnou a dôležitou súčasťou procesu vývoja stránky., pretože sú to šablóny štýlov, ktoré vám umožňujú programovo realizovať všetku krásu, ktorú predtým dizajnér nakreslil.

Kód CSS je zvyčajne uložený v súbore oddelenom od označenia stránky a je zahrnutý vo všetkých dokumentoch, ktoré ho potrebujú. Nebudeme sa baviť o syntaxi a pravidlách používania, keďže to presahuje rámec nášho článku, urobím však výhradu, že napriek všetkým možnostiam, ktoré sa s CSS otvárajú, je celkom jednoduché naučiť sa jeho vlastnosti.

Čo je PHP?

PHP (rekurzívna skratka pre PHP: Hypertext Preprocessor) je bežný programovací jazyk open source na všeobecné účely. PHP je navrhnuté špeciálne pre vývoj webu a jeho kód je možné vložiť priamo do HTML.

Čo to pre nás znamená? Pozrime sa na príklad použitia PHP:

echo "Ahoj svet! Som PHP skript.";
?>

Ahoj svet! Som PHP skript.

Charakteristický rozlišovací znak daný jazyk je, že výsledkom jeho spracovania môže byť bežné html značky(HTML kód). Preto sa aktívne používa vo webovom programovacom prostredí. Za zmienku tiež stojí, že na rozdiel od HTML dokáže PHP komunikovať so serverom, ako aj prehliadať databázy, „ťahať“ potrebné informácie a zobraziť na stránke.

PHP kód je oddelený špeciálnymi počiatočnými a koncovými značkami, ktoré vám umožňujú "prepínať" do a z "režimu PHP", keď ste v značke HTML. PHP skripty môžu byť tiež umiestnené v samostatných súboroch od označenia, ak je ich úloha rozsiahla a vyžaduje veľa kódu.

Vďaka programovacím jazykom, ako PHP(a samotné PHP) sa stalo možným vytvorenie CMS(Content Management System, CMS) alebo Content Management Systems.

Čo teraz potrebujeme vedieť? PHP skripty sú akýmsi „konštruktorom lepidla“, ktorý umožňuje naprogramovať výstup rôznych informácií na obrazovke používateľa. Na vytvorenie obyčajnej statickej stránky na internete to stačí pomocou HTML spárované s CSS. Ale ak je táto stránka (napríklad novinky) súčasťou nejakej dynamickej stránky, potom je jej vzhľad s najväčšou pravdepodobnosťou výsledkom spustenia PHP skriptu.

čo je JS?

JavaScript – skriptovací jazyk založený na prototype. Ako vždy, definícia nedáva žiadne pochopenie pre neprogramátora, preto sa pokúsime pochopiť pomocou jednoduchých téz.

Na začiatok navrhujem zvážiť malý príklad toho, čo sa dá urobiť pomocou JS:








Dobrý deň, milí čitatelia blogu. Dnes chcem začať hovoriť o CSS podrobne (materiály budú nahromadené v zodpovedajúcom).

Po naučení Html je čas prejsť na to. Značkovací jazyk štýlu je zodpovedný za vonkajší dizajn stránok lokality a bez jeho pochopenia bude veľmi ťažké niečo opraviť, presunúť alebo zarovnať.

Samozrejme, CSS vyzerá oveľa komplikovanejšie ako Html, ale to je, pokiaľ ide o rozloženie medzi prehliadačmi, ale pokiaľ ide o opravu nejakej maličkosti v dizajne vašej vlastnej stránky, nepotrebujete veľa pozornosti. Vo všeobecnosti sa pokúsime podrobne rozobrať jeho základy a nuansy ich filigránskeho použitia zostanú pre nepovinné štúdium (voliteľné). Všetci webmasteri však musia poznať základné pojmy.

Čo je to jazyk CSS a na čo slúži?

Skratka CSS znamená Cascading Style Sheets alebo v ruskom preklade ako Cascading Style Sheets. Čo to je a prečo bol tento jazyk vynájdený naraz?

Takže na základe toho, čo sme študovali trochu 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 nastaviť ďalšie prvky štruktúry dokumentu, a dokonca im dať v prehliadači taký vzhľad, aký potrebujeme.

Čas však diktoval potrebu používať čoraz viac atribútov vizuálneho dizajnu v HTML, čo značne zasypalo zdroj. 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 fragmentu textu v čistom Html? Presne tak, s . A ak chcete vyfarbiť v požadovanej farbe niekoľko odsekov v texte naraz?

Potom budete musieť do každého z nich vložiť značky Font s požadovanou hodnotou farby v atribúte Color (značka odseku P je bloková značka, čo znamená, že ju nemožno umiestniť do vloženého prvku Font).

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ánok a vytvorí sa zbytočné zaťaženie zariadení internetovej komunikácie. Vývojári na to nemohli „ísť“.

Preto prišli s nasledujúcim východiskom z tejto situácie. Vývojári W3C sa rozhodli štylizovať všetky vizuálne reprezentácie webového dokumentu do špeciálneho značkovacieho jazyka s názvom Cascading Style Sheets alebo jednoducho CSS (vyslovuje sa CES). Čo je podstatou technológie?

A podstata je toto – pripojením značkovacieho jazyka štýlu k ľubovoľným dokumentom (stránkam) môžeme nastaviť vizuálnu reprezentáciu všetkých tých prvkov (vytvorených Html tagmi), ktoré sa v tomto dokumente budú nachádzať.

Na internete existuje zdroj, ktorý pomáha veľmi jasne vidieť, ako môže webová stránka zmeniť svoj vzhľad len preto, že obsahuje 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 ľavej ponuke, môžete zobraziť desiatky alebo dokonca stovky možností dizajnu pre tú istú webovú stránku zahrnutím iného dizajnu štýlu (ďalší súbor so štýlmi).

Upozorňujeme, že pôvodný kód Html zostáva úplne rovnaký a len zmeny CSS štýl . Zarážajúce, však?!

CSS nie je značkovací jazyk v rovnakom zmysle ako napríklad Html. Toto je značkovací jazyk štýlu - má svoju vlastnú syntax, svoj vlastný vnútorný obsah av mnohých ohľadoch sa bude veľmi líšiť od predtým študovaného.

V porovnaní s Html je tiež značkovací jazyk štýlu oveľa zložitejší. Má veľa nuancií, ktoré budete potrebovať vedieť okrem základných pojmov. V HTML neboli žiadne špeciálne nuansy - študovali ste všetky prvky a môžete bezpečne 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 údajný jazyk môže rozdeliť na dve časti:

  1. Pravidlá, ktoré povedia prehliadaču, ako by mal prvok vyzerať na obrazovke.
  2. Selektory sú označenia, ktoré umožňujú prehliadaču presne pochopiť, na ktoré prvky kódu HTML bude musieť použiť tieto pravidlá.

Teraz sa pozrime na to, ako je štýl definovaný v štýloch prepojený so zdrojovým kódom webovej stránky. Existujú tri hlavné spôsoby pomocou css s html:

  1. Nesting – CSS kód sa zapisuje priamo do požadovaného tagu prvku pomocou atribútu Style
  2. Vkladanie – celý kód štýlu pre webový dokument sa zapisuje do jeho hlavičky (v rámci značiek Head) pomocou prvku Style
  3. viazanie - všetky CSS kód je umiestnený (renderovaný) 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 bez problémov oddelené od druhého bodkočiarka. Po poslednom pravidle už nebude možné vkladať bodkočiarku, ale aby sa predišlo excesom, je najlepšie, aby bolo pravidlom vždy vkladať. v kóde CSS nemajú ž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 vkladanie css do html pomocou atribútu Style:

Pozrime sa, ako môžeme použiť túto metódu ak chcete nastaviť farbu a pozadie odseku:

Čo je metóda hniezdenia

Ako vidíte, jedným jednoduchým pohybom sme vyfarbili text odseku červenou farbou (color:red) a zároveň sme ho umiestnili pod sivé pozadie(pozadie:#cccccc). Štýl je jedným z tých šiestich, ktoré možno použiť s úplne ľubovoľnou značkou (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 ďalších článkoch, ale zatiaľ sme zvažovali možnosť použiť štýl na pripojenie pravidiel štýlu k určitým prvkom. html kód. Umožňuje vám použiť ako svoju hodnotu súbor rovnakých pravidiel (v neobmedzenom počte).

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 na druhej strane, s jeho pomocou môžete veľmi jednoducho niečo vyskúšať a experimentovať a až potom preniesť všetky tieto pravidlá do samostatného súboru s tabuľkami CSS štýly.

Ď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 uvažovanej metódy hniezdenia.

Namiesto zahrnutia atribútu Style, ktorý obsahuje pravidlá jazyka štýlu do každej značky na stránke, teraz napíšeme všetky pravidlá CSS, ktoré potrebujeme pre tento webový dokument, do jedného jediného Značka štýlu, 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 nepamätáte, pozrite sa na tento vývojový diagram:

Tie. v kóde to môže vyzerať takto:

... ...

Nie je to celkom jasné? No a teraz sa to pokúsim ilustrovať:

Aby prehliadač neakceptoval pravidlá štýlu ako hypertextový značkovací jazyk, požadovaný atribút bude potrebné napísať do prvku Style Napíšte s hodnotou „text/css“(hlavička mediálneho obsahu pre kaskádové štýly). To. kód uzavretý v tomto prvku bude prehliadač interpretovať ako CSS.

Pozrime sa na príklad vyššie. Ako vidíte, štýl vládne uzavretý v rovnátka , 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 povedať, že tieto pravidlá CSS bude potrebné použiť iba na značky odsekov (selektor P) tento web dokument a nič iné.

Tu sme sa opäť dotkli otázky syntaxe. Pri použití metód vkladania a vkladania 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 viacero 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 by sa mali aplikovať presne na značku, v ktorej je zaregistrovaný 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 vyžadovala použitie zložených zátvoriek a selektorov. To. naznačujeme prehliadaču, že túto sadu pravidiel CSS (uzatvorenú v zložených zátvorkách) láskavo aplikujete na všetky odseky a táto sada je určená na niečo iné.

V najjednoduchšom prípade môžete ako selektor použiť názov tagu, na ktorý treba 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).

Aby som to zhrnul pre metódu vloženia kódu CSS do dokumentu Html – všetky pravidlá štýlu potrebné pre tento dokument budú popísané v jednej značke Style a nie v mnohých rôznych prvkoch, ako by to bolo pri použití metódy vnorenia opísanej práve vyššie.

Presun šablón so štýlmi CSS do samostatného súboru pomocou odkazu

Posledný spôsob integrácie kódu štýlu do webového dokumentu sa nazýva spôsob viazania. Najjednoduchší spôsob, ako ilustrovať túto metódu, je:

Jeho hlavný rozdiel od metód diskutovaných vyššie (vnorenia a vloženia) je v tom, že pri použití metódy prepojenia sú všetky pravidlá jazyka CSS umiestnené v samostatnom externom súbore. Bude to opäť text (ako každý Html dokument) a zvyčajne má prípony .css, aby sa dal otvoriť lokálny počítač pod Ovládanie Windows mohli byť pridelené špeciálny program ().

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 patrí do kategórie, ktorá nie je viditeľná v prehliadači.

Prehliadač v tomto prípade nájde zadaný súbor so štýlmi (predtým, ako je špecifikovaný v atribúte Href značky Link), načíta ho a použije pravidlá jazyka CSS špecifikované v ňom vonkajší dizajn aktuálny html dokument.

Vo všeobecnosti je prepojenie veľmi podobné použitiu značky Style popísanej o niečo skôr, ale umožňuje výrazne urýchliť načítanie stránok lokality a znížiť zaťaženie zariadení internetovej komunikácie.

Pri použití prvku Style (metóda vkladania) bude musieť prehliadač zakaždým načítať spolu s HTML kódom dokumentu aj pravidlá CSS a selektory, ktoré sú doň zapojené, a v prípade použitia externého súboru so štýlmi aj Prehliadač stačí načítať Style.css raz a až potom ho pri navrhovaní ďalších stránok na vašom webe vezme 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 Stylesheet. Ide o to, že Link (hyperlinkový 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 oblasť Hlava obsahuje množstvo rôznych značiek odkazov:

A účel každého z týchto hypertextových odkazov na služby je určený hodnotou Atribút 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 Odkaze sa pýtame prehliadača cesta k súboru so štýlmi(v atribúte Href môže byť táto cesta uvedená 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 (štýle - s CSS).

Na stránkach metóda väzby sa používa takmer vždy CSS a Html (externý súbor so štýlmi). Atribúty štýlu a značky sa zvyčajne používajú iba na testovanie, aj keď môžu existovať špecifické úlohy, keď je ich použitie opodstatnené (napríklad pri zdobení). Ale pri reálnej práci na stránkach sa používajú práve externé súbory, t.j. spôsob prepojenia.

Z tohto dôvodu si dovolím odísť a prisahať, že vám sľúbim, že pokračovanie bude nasledovať vo veľmi blízkej budúcnosti. Ešte raz, naučiť sa CSS je zvyčajne oveľa náročnejšie ako naučiť sa HTML, takže sa pokúsim byť čo najpodrobnejší a najpopisnejší.

Veľa šťastia! Uvidíme sa čoskoro na stránkach blogu

Možno vás bude 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 – nastavenie typu zobrazenia Html prvkov na webovej stránke
Na čo slúži CSS, ako prepojiť kaskádové štýly s Html dokumentom a základy syntaxe tohto jazyka
Pozadie v CSS (farba, poloha, obrázok, opakovanie, príloha) – všetko pre nastavenie farby pozadia resp obrázok na pozadí Html prvky
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 veľkosti (Pixely, Em a Ex) a dedičnosť pravidiel v CSS Rôzny dizajn do interiéru a vonkajšie 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

Možno ste už počuli o CSS, ale neviete, čo to je? V tomto návode sa dozviete, čo je CSS a čo vám môže pomôcť.

CSS je skratka pre C vzostupne Sštýl S klobúky/kaskádové štýly.

Čo môžete robiť s CSS?

CSS je štýlový jazyk, ktorý definuje vykresľovanie HTML dokumentov. CSS sa napríklad zaoberá fontami, farbou, okrajmi, čiarami, výškou, šírkou, obrázkami na pozadí, umiestnením prvkov a mnohými ďalšími vecami. Buďte trpezliví a uvidíte!

HTML možno (nesprávne) použiť na navrhovanie webových stránok. CSS však poskytuje viac výkonu a je presnejšie a prepracovanejšie. CSS v súčasnosti podporujú všetky prehliadače (prehliadače).

Len v niekoľkých lekciách v tomto návode si budete môcť vytvoriť vlastné predlohy štýlov a použiť CSS, aby vaša webová lokalita vyzerala skvele.

Aký je rozdiel medzi CSS a HTML?

HTML sa používa na štruktúrovanie obsahu stránky. Na formátovanie tohto štruktúrovaného obsahu sa používa CSS.

Súhlasím, znie to šialene. Ale prosím čítajte ďalej. Čoskoro bude všetko jasné.

Kedysi dávno, keď bola Madonna panna a chlap menom Tim Berners Lee vynašiel World Wide Web, sa HTML používalo iba na zobrazovanie štruktúrovaného textu. Autor mohol označiť iba text: "toto je nadpis" alebo "toto je odsek" pomocou HTML značiek ako napr.

a

Ako webdizajnérov začal hľadať spôsoby formátovania online dokumentov. Aby výrobcovia prehliadačov (vtedy Netscape a Microsoft) vyhoveli zvyšujúcim sa požiadavkám spotrebiteľov, vymysleli nové HTML značky ako napr , ktoré sa od pôvodných HTML značiek líšili tým, že definovali vzhľad, nie štruktúru.

Z toho vyplynuli aj originálne štruktúrovacie tagy ako napr

, sa čoraz viac používajú na dizajn stránky namiesto štruktúrovania textu. Mnoho nových dizajnových značiek ako napr , boli podporované iba jedným prehliadačom. „Na zobrazenie tejto stránky potrebujete prehliadač X“ je bežným odmietnutím na webových stránkach.

CSS bolo vytvorené s cieľom napraviť túto situáciu tým, že webovým dizajnérom poskytuje možnosti presného návrhu podporované všetkými prehliadačmi. Zároveň došlo k oddeleniu obsahu prezentácie a dokumentu, čo značne zjednodušilo prácu.

Aké výhody mi prinesie CSS?

Príchod CSS spôsobil revolúciu vo svete webového dizajnu. Konkrétne výhody CSS:

  • správa zobrazenia viacerých dokumentov pomocou jedného hárku štýlov;
  • presnejšia kontrola nad vzhľadom stránok;
  • rôzne zobrazenia pre rôzne médiá (obrazovka, tlač atď.);
  • komplexná a sofistikovaná dizajnová technika.

V nasledujúcom návode sa bližšie pozrieme na to, ako CSS vlastne funguje a ako môžete začať.

S rastúcou popularitou webu v 90. rokoch rástol aj zámer použiť na stránku konkrétny dizajn. Weboví vývojári sa pri zlepšovaní webových stránok spoliehali na špecifické značky HTML:

  • určil font celého HTML dokumentu;
  • určil typ písma, farbu a veľkosť textu, ktorý je vo vnútri;
  • vycentroval celý jeho obsah;
  • zväčšenie veľkosti textu;
  • zobrazil text prečiarknutý.

Je možné použiť aj niekoľko atribútov HTML:

  • bgcolor definoval farbu pozadia prvku;
  • text definoval farbu textu;
  • atribúty margin sa dajú použiť na pridanie priestoru na obe strany prvku.

Prečo sa vyhýbať stolom?

Ale predovšetkým na vytváranie stĺpcov, vizuálne zarovnávanie prvkov a vo všeobecnosti na vzájomné umiestnenie prvkov používali weboví vývojári prvok

za dizajn svojich webových stránok, pretože prirodzene poskytoval vizuál mriežka.

Logo slogan
Copyright 2015
Ľavé menu Hlavný obsah Pravý bočný panel

Tento prístup bol ťažkopádny z niekoľkých dôvodov:

  • tabuľky v HTML rozvláčny: vyžadujú veľa štandardného kódu;
  • označenie bolo sémanticky nesprávne: tabuľky by sa mali používať pre viacrozmerné údaje;
  • zmena rozloženia si vyžadovala zmenu rozloženia: ak sme chceli posunúť ľavý stĺpec doprava, museli sme to urobiť upraviť štruktúru HTML;
  • stoly boli náchylné na syntaktické chyby: riadky a bunky pre správnosť musia ísť a byť vnorené určitým spôsobom;
  • označenie bolo nečitateľné: Tabuľky boli vnorené do iných tabuliek, aby sa v stĺpcoch získali ďalšie stĺpce.

Preto sa pomaly upustilo od používania tabuliek ako nástroja na rozloženie a namiesto toho sa začalo používať CSS.

Čo je CSS

CSS (Cascading Style Sheets) je skratka pre Cascading Style Sheets a je to značkovací jazyk štýlu (ako HTML alebo XML). CSS teda samo o sebe nepredstavuje nič, pokiaľ nie je spojené s dokumentom HTML.

CSS prináša života do dokumentu HTML, výber písiem, aplikovanie farieb, definovanie výplne, umiestnenie prvkov, animácia interakcií a ďalšie.

Ako CSS funguje

css vyberá element HTML (napríklad odsek), špecifikuje nehnuteľnosť zmeniť (napríklad farbu) a použiť špecifickú význam(napr. červená):

P (farba: červená ;)

Slovo „štýl“ môže byť zavádzajúce. Možno si myslíte, že CSS sa používa iba na zmenu farby textu, veľkosti a typu písma. CSS však môže nastaviť rozloženie dokumentu HTML definovaním výšky, šírky, okrajov, okrajov, polohy, stĺpcov a ďalších.

Kde môžem napísať CSS?

CSS ako atribút

CSS môžete napísať priamo do HTML prvky s atribútom style:

Toto je dôležitý text.

css v

Môžete použiť značku

Tento odsek bude označený červenou farbou.

CSS v samostatnom súbore

CSS môžete napísať do samostatného súboru .css a potom ho pomocou značky prepojiť s kódom HTML .

P (farba: červená; )

Ahoj svet

Tento odsek bude označený červenou farbou.

Tento HTML dokument, ktorý „volá“ súbor CSS, v našom prípade súbor s názvom style.css, sa nachádza v rovnakom priečinku ako súbor CSS.

Toto tretí spôsob, pomocou samostatného súboru CSS, je preferovaný.

CSS je technológia, ktorá umožňuje ovládať vzhľad obsahu html dokumentu. Skratka CSS znamená Cascading Style Sheets a prekladá sa takto: kaskádové štýly.

Učenie sa CSS predpokladá znalosť HTML. Ak ste sa nenaučili HTML, je príliš skoro začať sa učiť CSS. Najprv sa naučte jazyk hypertextových značiek a potom prejdite na kaskádové štýly.

Choďte k veci.

Každý prvok html dokumentu má svoj vlastný predvolený vzhľad. Napríklad text použitý v značke

, bude mať definovanú veľkosť, farbu a písmo. Takže všetky predvolené značky sú nejakým spôsobom zobrazené a tvoria štýl.

Štýl html dokumentu je zjednodušene povedané všetko, čo súvisí so zobrazením dokumentu v prehliadači: fonty, veľkosti, farby, medzery medzi nadpismi a textom, zarážky atď. Pomocou CSS môžeme ovládať formátovanie prvkov dokumentu.

Ako sa to presne robí?

Najprv popíšem jeden spôsob pripojenia CSS k dokumentu. Aj keď existuje niekoľko spôsobov, musíte začať s jednou vecou.

Takže v koreňovom adresári stránky, ktorú vytvoríte textový súbor, ale s príponou nie .txt, ale .css. Koreň stránky sa vyberie presne tak, môžete vytvoriť priečinok / css / a umiestniť súbor tam.

Nazvime tento súbor css-file.css . Tento súbor obsahuje programovací kódštýly. Šablóna štýlov je šablóna, ktorá riadi formátovanie značiek HTML vo webovom dokumente.

Šablóna štýlov je súbor pravidiel pre formátovanie značiek HTML. Ich syntax je nasledovná:

značka ( property: value )

Napríklad, urobme tento nadpis modrým a veľkosťou 16pt. Za týmto účelom sa do súboru pridá nasledujúci riadok:

h1 ( farba : modrá ; veľkosť písma : 16pt )

Teraz musíte, aby tento súbor ovplyvnil html dokument, nestačí ho umiestniť na hosting. Pre túto sekciu vložte nasledujúcu značku:

AT html dokument teraz značky

bude modrá a bude mať veľkosť 16 bodov.

Inač

Existuje ďalší spôsob, ako napísať pravidlo CSS v dokumente html. potrebné v sekcii pridať šablónu so štýlmi do značky

Teraz uvediem príklad, ako to funguje. Tu je ukážka kódu:

<a href="https://bar812.ru/sk/vypadayushchee-menyu-s-ikonkami-css-fiksirovannoe-bokovoe-menyu-na-chistom-css-primer.html">Príklad CSS</a>

Ahoj!

Hlavička h2!

Ďalší spôsob, ako pridať CSS

Existuje ďalší spôsob, ako pridať štýl do tagu - predpísať potrebné parametre štýlu v samotnom tagu v atribúte style. Tieto štýly sa nazývajú interné alebo inline. V skutočnosti sú tieto štýly rozšírením jednej značky. Tu je príklad použitia tohto štýlu:

Príklad CSS

Hlavička h1 bez štýlov

Hlavička h1 s vnútorným štýlom

Medzisúčty

Zoznámili sme sa teda s tromi spôsobmi, ako do dokumentu pridať predlohy štýlov.

  1. Viazanie - uloženie CSS tabuľky v samostatnom súbore a je súčasťou html dokumentov. Táto metóda vám umožňuje použiť jeden hárok štýlov na formátovanie mnohých dokumentov. Štýly z takýchto súborov sa nazývajú prepojené štýly.
  2. Vkladanie – umožňuje nastaviť všetky pravidlá šablóny štýlov priamo v hlavičke dokumentu. Takéto štýly sa tiež nazývajú globálne štýly.
  3. Vkladanie do značiek dokumentu – umožňuje zmeniť nastavenia štýlu konkrétnych značiek stránok. Toto sa tiež nazýva interný alebo inline štýl.

Existuje aj štvrtý spôsob - importovanie, ale to zatiaľ vynecháme.

Teraz nás zaujíma nasledujúca otázka. Ako sa bude prehliadač správať, ak tag

štýly sú špecifikované všetkými tromi spôsobmi.

V spôsobe použitia štýlov existuje hierarchia, takže na to pamätajte. Prvú prioritu má vnútorný štýl, potom sa použije globálny štýl a ako posledný sa použije súvisiaci štýl.

Možno práve kvôli tejto hierarchii sa štýly nazývajú kaskádové.

Pohodlný spôsob

Najpohodlnejším spôsobom nastavenia štýlov je vloženie css súboru do dokumentu, príp viazanie. Je to ten, ktorý sa používa najčastejšie, pretože umožňuje ovplyvňovať zmeny štýlov na jednom mieste veľké číslo stránky.

Získajte viac informácií o syntaxi a výrazoch CSS

Ako som už písal vyššie, štýlový list je súbor pravidiel pre formátovanie HTML tagov. Syntax pre tieto je:

značka ( property: value )

Pravidlo CSS je pokyn pre prehliadač, ako zobraziť značku.

Každé pravidlo kaskádových štýlov pozostáva z dvoch častí: selektora a definície. To znamená, že naša vzorová syntax môže byť napísaná takto:

selektor ( definícia )

Akýkoľvek volič môže byť HTML tag pre ktoré definícia špecifikuje, ako má byť formátovaný. Samotná definícia sa zase skladá z dvoch častí: vlastností a hodnôt, sú oddelené dvojbodkou (:).

selektor ( vlastnosť: hodnota )

V jednom pravidle CSS môžete nastaviť niekoľko definícií, v takom prípade sú oddelené bodkočiarkou (;), čo je presne to, čo bolo urobené v príkladoch vyššie.

selektor
{
vlastnosť: hodnota;
vlastnosť: hodnota
}

Bodkočiarka (;) je voliteľná za poslednou definíciou.

Ako selektor môžu fungovať nielen značky, ale aj triedy a identifikátory. Ale toto je téma na samostatný článok.

CSS nerozlišuje veľké a malé písmená a medzery, takže zlomy riadkov, tabulátory a medzery je možné použiť podľa vlastného uváženia pre čitateľnosť kódu.

Príklad CSS

Nadpis h1

nadpis h2

V tomto príklade je prvé pravidlo (pre selektor h1 ) napísané na jeden riadok, druhé pravidlo (pre selektor h2 ) je napísané inak - každá definícia selektora je napísaná v Nový riadok. Druhá verzia kódu je čitateľnejšia.

V CSS je povolené, aby jeden selektor špecifikoval každú vlastnosť samostatne, tu je príklad takéhoto kódu:

Táto forma zápisu nie je príliš pohodlná, v takomto kóde sa môže ľahko zmiasť, najmä keď potrebujete nastaviť veľa vlastností štýlu pre jeden selektor. Preferovaný zápis je:

Môže sa stať, že rovnaká vlastnosť štýlu bola nastavená dvakrát pre rovnaký selektor.

V tomto príklade bol volič h1 najprv nastavený na modrú a potom červenú. V tomto prípade bude priradená vlastnosť štýlu, ktorej pravidlo je napísané nižšie v kóde. V našom prípade bude značka h1 zobrazená červenou farbou.

Takéto situácie sa zvyčajne vyskytujú náhodne, ale môžu nastať aj vtedy, keď do dokumentu zahrniete rôzne súbory štýlov, ktoré obsahujú rovnaké selektory. Tento princíp je užitočné mať na pamäti, keď tabuľky CSS nefungujú správne.

Samozrejmosťou je, že každá vlastnosť môže mať len zodpovedajúcu hodnotu. Pre vlastnosť farby to bude farba, nie veľkosť.