Nejprve si nadefinujme, jak web vypadá takříkajíc zevnitř. Aniž bychom zacházeli do podrobností, můžeme to říci web je sada souborů, které jsou umístěny na serveru (hosting) na internetu a vzájemně komunikují podle určitých scénářů. Výsledkem této interakce jsou právě stránky, které si denně prohlížíte.
Proto musí být všechny tyto soubory, které tvoří web, něčím naplněny. Přesně tak, je! A jsou plné kódu. Tak tady to je každá z kryptických zkratek je jazyk, na kterém jsou napsány stránky a skripty tvořící web.
Co je HTML?
HTML (Hypertext značkovací jazyk) je hypertextový značkovací jazyk. Není to úplně jasné, že? Pro zjednodušení definice můžeme říci, že HTML je „kostra“ jakékoli stránky.
Příkladem je následující část stránky, kterou jsme vymysleli:
Název stránky
viditelná část odkazu (kotva)
Název stránky
Toto je text, odstavec, uzavřený ve značkách. HTML se zpravidla skládá ze značek, které se otevírají a zavírají a rámují určité prvky. A teď odstavec textu skončí a my dodáme.
viditelná část odkazu (kotva)Proč "kostra"? Pokud se podíváte pozorně, interpretovaný kód není vůbec naformátován. Žádné barvy, žádné velikosti, žádné umístění.
Můžeme to uzavřít HTML je sada značek, které tvoří základ každé stránky na internetu. S jejich pomocí deklarujeme nadpisy, odstavce, odkazy, obrázky a další prvky.
Co je CSS?
CSS (anglicky Cascading Style Sheets – kaskádové styly) – to je ona „magická magie“, díky čemuž vypadá HTML značení pěkně. V Nápověda CSS máme možnost stylizovat libovolný prvek určený v označení jakýmkoli způsobem.
Myslím, že nejlepší je ukázat příklad:
Zebry
Zbarvení
Zjistěte více o zebrách!
- Bez Použití CSS
- Pomocí CSS
Zebry
Zebry (lat. Hippotigris) - podrod rodu koní, zahrnující druhy zebry Burchellovy (Equus quagga), zebry Grévyho (Equus grevyi) a zebry horské (Equus zebra). Hybridní formy mezi zebrami a domácími koňmi se nazývají zebroidi, mezi zebrami a osly - zebruly. Zebry žijí v malých skupinách složených ze samic s mláďaty a jednoho hřebce.
Zbarvení
Pokud jde o zbarvení pozadí zebry, často se vyskytují dvě vzájemně se vylučující polohy: bílá nebo černá. Kurátorka velkých savců Atlanta Zoo Lisa Smith říká, že odborníci nejčastěji popisují zebry jako černé koně s bílými pruhy.
Zebry
Zebry (lat. Hippotigris) - podrod rodu koní, zahrnující druhy zebry Burchellovy (Equus quagga), zebry Grévyho (Equus grevyi) a zebry horské (Equus zebra). Hybridní formy mezi zebrami a domácími koňmi se nazývají zebroidi, mezi zebrami a osly - zebruly. Zebry žijí v malých skupinách složených ze samic s mláďaty a jednoho hřebce.
Zbarvení
Pokud jde o zbarvení pozadí zebry, často se vyskytují dvě vzájemně se vylučující polohy: bílá nebo černá. Kurátorka velkých savců Atlanta Zoo Lisa Smith říká, že odborníci nejčastěji popisují zebry jako černé koně s bílými pruhy.
Není těžké vidět, že použití CSS je nedílnou a důležitou součástí procesu vývoje stránky., protože jsou to šablony stylů, které vám umožňují programově realizovat všechnu krásu, kterou designér předtím nakreslil.
Kód CSS je obvykle uložen v souboru odděleném od označení stránky a je součástí všech dokumentů, které jej potřebují. Nebudeme mluvit o syntaxi a pravidlech použití, protože to je nad rámec našeho článku, nicméně učiním výhradu, že přes všechny možnosti, které se s CSS otevírají, je docela snadné naučit se jeho vlastnosti.
Co je to PHP?
PHP (rekurzivní zkratka pro PHP: Hypertext Preprocessor) je běžný programovací jazyk open source pro všeobecné použití. PHP je navrženo speciálně pro vývoj webu a jeho kód lze vložit přímo do HTML.
Co to pro nás znamená? Podívejme se na příklad použití PHP:
echo "Ahoj světe! Jsem PHP skript.";
?>
Ahoj světe! Jsem PHP skript.
Charakteristický rozlišovací znak daný jazyk je, že výsledkem jeho zpracování může být běžné html značky(HTML kód). Proto se aktivně používá ve webovém programovacím prostředí. Za zmínku také stojí, že na rozdíl od HTML umí PHP komunikovat se serverem, stejně jako procházet databáze, „pull“ nezbytné informace a zobrazit na stránce.
PHP kód je oddělen speciálními počátečními a koncovými značkami, které vám umožňují "přepínat" do a z "režimu PHP" při používání značek HTML. PHP skripty mohou být také umístěny v samostatných souborech od značek, pokud je jejich úkol rozsáhlý a vyžaduje hodně kódu.
Díky programovacím jazykům jako PHP(a PHP samotné) se stalo možným vytvoření CMS(Content Management System, CMS) nebo Content Management Systems.
Co teď potřebujeme vědět? PHP skripty jsou jakýmsi „konstruktorem lepidla“, který umožňuje naprogramovat výstup různých informací na obrazovku uživatele. K vytvoření obyčejné statické stránky na internetu to stačí pomocí HTML spárované s CSS. Pokud je ale tato stránka (například novinky) součástí nějaké dynamické stránky, pak je její vzhled s největší pravděpodobností výsledkem spuštění PHP skriptu.
Co je JS?
JavaScript - Prototype-Based Scripting Language. Definice jako vždy nedává žádné pochopení pro neprogramátora, proto se pokusíme porozumět pomocí jednoduchých tezí.
Pro začátek navrhuji zvážit malý příklad toho, co lze udělat pomocí JS:
Dobrý den, milí čtenáři tohoto blogu. Dnes chci začít mluvit o CSS podrobně (materiály budou nashromážděny v odpovídajícím).
Po naučení Html je čas na to přejít. Styl značkovací jazyk je zodpovědný za externí design stránek webu a bez jeho pochopení bude velmi obtížné něco opravit, přesunout nebo zarovnat.
CSS samozřejmě vypadá mnohem komplikovaněji než Html, ale to je, pokud jde o rozvržení pro různé prohlížeče, ale pokud jde o opravu nějaké maličkosti v designu vašeho vlastního webu, nemusíte se moc starat. Obecně se pokusíme podrobně rozebrat jeho základy a nuance jejich filigránského použití zůstanou pro volitelné studium (volitelné). Ale všichni webmasteři musí znát základní pojmy.
Co je to jazyk CSS a k čemu slouží?
Zkratka CSS znamená Cascading Style Sheets nebo v ruském překladu jako Cascading Style Sheets. Co to je a proč byl tento jazyk najednou vynalezen?
Takže na základě toho, co jsme studovali o něco dříve, můžeme říci, že označení webového dokumentu se provádí pomocí značek tohoto jazyka. Tito. Pomocí HTML vytváříme strukturu našich dokumentů (webových stránek). Například v čistém Html můžeme nastavit další prvky struktury dokumentu, a dokonce jim dát v prohlížeči vzhled, který potřebujeme.
Ale čas diktoval potřebu používat stále více atributů vizuálního designu v HTML, což značně zaneřádilo zdroj. V tomto ohledu byla navržena další, slibnější možnost rozvoje - vytvoření samostatného značkovacího jazyka stylu CSS. A tato možnost měla řadu výhod oproti pouhému zvýšení počtu atributů designu.
Proč? Pamatujete si, jak můžete nastavit barvu textového fragmentu v čistém Html? Přesně tak, s . A pokud chcete vybarvit požadovanou barvou několik odstavců v textu najednou?
Potom budete muset do každého z nich vložit značky Font s požadovanou hodnotou barvy v atributu Color (značka odstavce P je bloková značka, což znamená, že ji nelze umístit do vloženého prvku Font).
To vše strašně zahltí zdrojový kód, což je velmi, velmi nežádoucí, protože utrpí rychlost načítání stránek a vytvoří se zbytečné zatížení komunikačního zařízení internetu. Vývojáři na to nemohli „jít“.
Proto přišli s následujícím východiskem z této situace. Vývojáři W3C se rozhodli stylizovat všechny vizuální reprezentace webového dokumentu do speciálního značkovacího jazyka stylu zvaného Cascading Style Sheets nebo jednoduše CSS (vyslovováno CES). Co je podstatou technologie?
A sečteno a podtrženo je toto - připojením značkovacího jazyka stylu k libovolným dokumentům (stránkám) můžeme nastavit vizuální reprezentaci všech těch prvků (vytvořených Html tagy), které se v tomto dokumentu najdou.
Na internetu existuje zdroj, který pomáhá velmi jasně vidět, jak může webová stránka změnit svůj vzhled jen proto, že je v ní obsažen jiný soubor kaskádových stylů. Podle mého názoru by to byla nejlepší odpověď na otázku: co je CSS a proč je potřeba.
Základní zobrazení dokumentu (webové stránky) si můžete prohlédnout kliknutím na tento odkaz:
Nic zvláštního, ale pokud kliknete na odkaz Zobrazit všechny návrhy z levé nabídky, můžete zobrazit desítky nebo dokonce stovky možností návrhu pro stejnou webovou stránku, když zahrnete jiný návrh stylu (jiný soubor šablony stylů).
Vezměte prosím na vědomí, že původní Html kód zůstává přesně stejný a pouze změny CSS styling . Zarážející, že?!
CSS není značkovací jazyk ve stejném smyslu jako například Html. Jedná se o stylový značkovací jazyk - má svou vlastní syntaxi, svůj vlastní vnitřní obsah a v mnoha ohledech se bude velmi lišit od dříve studovaného.
Ve srovnání s Html je také značkovací jazyk stylů mnohem složitější. Má spoustu nuancí, které budete potřebovat znát kromě základních pojmů. V HTML nebyly žádné zvláštní nuance - studovali jste všechny prvky a můžete bezpečně pracovat s kódem. Zdá se mi, že CSS lze přirovnat k šachům - nestačí vědět, jak se všechny figurky pohybují, musíte také umět hrát.
Co to tedy je a z čeho se skládá? Tento údajný jazyk může rozdělit na dvě části:
- Pravidla, která prohlížeči říkají, jak má prvek vypadat na obrazovce.
- Selektory jsou štítky, které prohlížeči umožňují přesně pochopit, na které prvky kódu HTML bude muset tato pravidla aplikovat.
Nyní se podívejme, jak je styling definovaný ve stylech propojen se zdrojovým kódem webové stránky. Existují tři hlavní způsoby pomocí css s html:
- Nesting – CSS kód se zapisuje přímo do tagu požadovaného prvku pomocí atributu Style
- Vkládání – veškerý kód stylu pro webový dokument je zapsán v jeho záhlaví (uvnitř značek Head) pomocí prvku Style
- Vazba - všechny CSS kód je umístěn (renderován) do samostatného externího souboru, který je k dokumentu připojen pomocí prvku Link v jeho záhlaví
No, vidíte, jak jsme se již hodně naučili o značkovacím jazyce stylů. Nyní je čas o tom mluvit syntax. Obecně je to docela jednoduché:
Jedno pravidlo v kódu CSS se skládá ze dvou prvků – vlastnosti (v našem příkladu je to ) a její hodnoty (v našem příkladu je červená a #CCCCCC). Předpokladem je oddělování vlastnosti od její hodnoty dvojtečkou.
Dále. Jedno pravidlo je bezpodmínečně odděleno od druhého středník. Za posledním pravidlem již nebude možné vkládat středník, ale abyste se vyhnuli excesům, je nejlepší vytvořit pravidlo, že jej budete vkládat vždy. v kódu CSS nemají žádný význam a můžete si je nastavit podle svého uvážení.
Použití stylu k připojení CSS ke kódu HTML
Nyní se podívejme na příklady všech těch způsobů aplikace pravidel stylu na náš dokument, které existují a které byly obecně popsány výše.
První metoda se nazývá metoda vložení css do html pomocí atributu Styl:
Podívejme se, jak můžeme použít tato metoda pro nastavení barvy a pozadí odstavce:
Co je metoda vnořování
Jak vidíte, jedním snadným tahem jsme vybarvili text odstavce červeně (color:red) a zároveň jej umístili pod šedé pozadí(pozadí:#cccccc). Styl je jedním z těch šesti, které lze použít s naprosto jakoukoli značkou (jsou uvedeny ve spodní části snímku obrazovky):
V Css budeme aktivně používat i univerzální, ale o tom bude řeč v dalších článcích, ale zatím jsme zvažovali možnost pomocí Stylu propojit pravidla stylingu s určitými prvky. html kód. Umožňuje vám použít jako svou hodnotu sadu stejných pravidel (v neomezeném počtu).
Metoda vnoření pomocí atributu Style je v praxi velmi jednoduchá na implementaci, přesto je v reálném rozložení používané velmi zřídka. Ale na druhou stranu s jeho pomocí můžete velmi jednoduše něco zkoušet a experimentovat a teprve potom všechna tato pravidla přenést do samostatného souboru s tabulkami CSS styly.
Další způsob připojení značkovacího jazyka stylů se nazývá metoda vložení css do html. Tato metoda se zásadně liší od dříve uvažované metody vnořování.
Namísto zahrnutí atributu Style obsahujícího pravidla jazyka stylu do každého tagu na stránce nyní zapíšeme všechna pravidla CSS, která pro tento webový dokument potřebujeme, do jednoho jediného Stylová značka, který bude zase umístěn v záhlaví tohoto dokumentu (mezi prvky Head).
Pamatujete si, co je Head a kde je ve struktuře webového dokumentu napsáno? Pokud si nepamatujete, podívejte se na tento vývojový diagram:
Tito. v kódu by to mohlo vypadat takto:
... ...
Není to úplně jasné? No a teď se to pokusím ilustrovat:
Aby prohlížeč neakceptoval pravidla stylu jako hypertextový značkovací jazyk, bude nutné požadovaný atribut zapsat do prvku Style Zadejte s hodnotou „text/css“(hlavička mediálního obsahu pro kaskádové styly). Že. kód uzavřený v tomto prvku bude prohlížečem interpretován jako CSS.
Podívejme se na výše uvedený příklad. Jak vidíte, styl vládne uzavřený v rovnátka , a před ně se píše tzv. selektor ve tvaru latinského písmene „P“. Proč je tento selektor potřebný?
Jak jinak můžeme prohlížeči sdělit, že tato pravidla CSS bude nutné použít pouze na značky odstavce (selektor P) tento web dokument a nic jiného.
Zde jsme se opět dotkli problematiky syntaxe. Při použití metod vkládání a vnořování musí být všechna pravidla značkovacího jazyka uzavřena do složených závorek a předcházet jim určitě stát nebo více voličů:
Selektor CSS (Vlastnost: Hodnota; Vlastnost: Hodnota)
Při použití metody hnízdění jsme nepoužili selektor a složené závorky, protože prohlížeči již bylo jasné, že tato pravidla CSS mají být aplikována přesně na značku, uvnitř které je registrován atribut Style.
Při použití metody vkládání nebo vnořování se situace s určováním, komu jsou tato pravidla stylu určena, zkomplikovala a vyžadovala použití složených závorek a selektorů. Že. indikujeme prohlížeči, že tuto sadu pravidel CSS (uzavřenou ve složených závorkách) laskavě použijete na všechny odstavce a tato sada je pro něco jiného.
V nejjednodušším případě můžete jako selektor použít název tagu, na který je třeba aplikovat pravidla jazyka CSS, uzavřený ve složených závorkách, které se otevírají hned za názvem selektoru. V našem příkladu je jako selektor použit název značky odstavce "P". O selektorech ve značkovacím jazyce stylů si povíme podrobněji v příštím článku (viz odkaz výše).
Abych to shrnul pro metodu vkládání kódu CSS do dokumentu Html – všechna pravidla stylu potřebná pro tento dokument budou popsána v jedné jediné značce Style, a ne v mnoha různých prvcích, jak by tomu bylo při použití metody vnoření popsané právě výše.
Přesunutí šablon stylů CSS do samostatného souboru pomocí odkazu
Poslední způsob integrace kódu stylu do webového dokumentu se nazývá způsob vazby. Nejjednodušší způsob, jak ilustrovat tuto metodu, je:
Jeho hlavní rozdíl od metod diskutovaných výše (vnoření a vkládání) je v tom, že při použití metody linkování jsou všechna pravidla jazyka CSS umístěn v samostatném externím souboru. Bude to opět text (jako každý Html dokument) a obvykle má příponu .css, aby se dal otevřít místní počítač pod Ovládání Windows mohlo být přiděleno speciální program ().
Při použití externího souboru CSS speciální Značka odkazu, který se zapisuje opět mezi úvodní a zavírací prvek Head v záhlaví webové stránky. Odkaz patří do kategorie, která není v prohlížeči viditelná.
Prohlížeč v tomto případě najde zadaný soubor šablony stylů (předtím, než je specifikován v atributu Href tagu Link), načte jej a použije pravidla jazyka CSS uvedená v něm. vnější design aktuální html dokument.
Obecně je propojování velmi podobné o něco dříve popsanému použití značky Style, ale umožňuje výrazně urychlit načítání stránek webu a snížit zatížení internetového komunikačního zařízení.
Při použití prvku Style (metoda vkládání) bude muset prohlížeč pokaždé načíst spolu s HTML kódem dokumentu do něj zapojená pravidla CSS a selektory a v případě použití externího souboru šablony stylů Prohlížeč stačí načíst Style.css pouze jednou a teprve poté jej vzít z vaší vlastní mezipaměti (oblast na pevném disku počítače uživatele) při navrhování dalších stránek na vašem webu.
Atribut type="text/css" značky Link znamená, že tento mediální obsah nebude nic jiného než značkovací jazyk stylu. Ale také při propojení CSS souboru a Html dokumentu se používá atribut Rel s hodnotou Stylesheet. Jde o to, že Link (hyperlinkový odkaz na službu) lze použít pro naprosto odlišné účely.
Pokud se podíváte na zdrojový kód této stránky v prohlížeči, uvidíte, že oblast Head má spoustu různých značek odkazů:
A účel každého z těchto hypertextových odkazů služby je určen hodnotou Atribut Rel. Například rel="shortcut icon" se používá k označení cesty k souboru a rel="alternate" lze použít k označení alternativní verze stránky (příkladem alternativní reprezentace dokumentu Html by bylo ) .
No a v případě použití atributu rel="stylesheet" v Odkazu se ptáme prohlížeče cesta k souboru šablony stylů(v atributu Href lze tuto cestu zadat v absolutní nebo relativní podobě). Tito. pomocí atributu Rel sdělíme prohlížeči, jak bude vypadat soubor, jehož cesta je uvedena v Href (stylesheet - s CSS).
Na stránkách metoda vazby se používá téměř vždy CSS a Html (externí soubor šablony stylů). Atributy stylu a značky se obvykle používají pouze pro testování, i když mohou existovat takové specifické úkoly, kdy je jejich použití opodstatněné (například při zdobení). Ale v reálné práci na stránkách se používají právě externí soubory, tzn. způsob propojení.
Z tohoto důvodu si dovolím odejít a přísahat vám, že pokračování bude následovat ve velmi blízké budoucnosti. Ještě jednou, naučit se CSS je obvykle mnohem obtížnější než naučit se HTML, takže se pokusím být co nejpodrobnější a popisný.
Hodně štěstí! Brzy se uvidíme na stránkách blogu
Mohlo by vás zajímat
Styl seznamu (typ, obrázek, pozice) - Pravidla CSS pro přizpůsobení vzhledu seznamů v Html kódu 
Display (block, none, inline) in CSS – nastavte typ zobrazení Html prvků na webové stránce 
K čemu slouží CSS, jak propojit kaskádové styly s Html dokumentem a základy syntaxe tohoto jazyka 
Pozadí v CSS (barva, pozice, obrázek, opakování, příloha) – vše pro nastavení barvy pozadí popř obrázek na pozadí Html prvky 
Priority v Css a jejich zvýšení z důvodu Důležité, kombinace a seskupení selektorů, uživatelských a autorských stylů 
Výška, šířka a přetečení – pravidla CSS pro popis oblasti obsahu v blokovém uspořádání 
Jednotky velikosti (Pixely, Em a Ex) a dědičnost pravidel v CSS Různé provedení pro interiér a externí odkazy přes CSS 
Selektory pseudotříd a pseudoprvků v CSS (hover, first-child, first-line a další), vztahy mezi značkami Html kódu 
Plovoucí a jasné v CSS - nástroje pro rozložení bloků
Možná jste už o CSS slyšeli, ale nevíte, co to je? V tomto tutoriálu se dozvíte, co je CSS a co pro vás může udělat.
CSS je zkratka pro C stoupající S styl S klobouky/kaskádové styly.
Co můžete dělat s CSS?
CSS je stylový jazyk, který definuje vykreslování HTML dokumentů. CSS se například zabývá fonty, barvou, okraji, čarami, výškou, šířkou, obrázky na pozadí, umístěním prvků a mnoha dalšími věcmi. Buďte trpěliví a uvidíte!
HTML lze (nesprávně) použít k návrhu webových stránek. CSS ale poskytuje větší výkon a je přesnější a propracovanější. CSS je v současné době podporováno všemi prohlížeči (prohlížeči).
V několika lekcích v tomto tutoriálu budete schopni vytvořit si vlastní šablony stylů a používat CSS, aby váš web vypadal skvěle.
Jaký je rozdíl mezi CSS a HTML?
HTML se používá ke strukturování obsahu stránky. K formátování tohoto strukturovaného obsahu se používá CSS.
Souhlasím, zní to trochu bláznivě. Ale prosím čtěte dál. Brzy bude vše jasné.
Kdysi dávno, když byla Madonna panna a chlap jménem Tim Berners Lee vynalezl World Wide Web, se HTML používalo pouze k zobrazení strukturovaného textu. Autor mohl pouze označit text: "toto je nadpis" nebo "toto je odstavec" pomocí značek HTML, jako je např.
a
Jako webdesignéři začal hledat způsoby, jak formátovat online dokumenty. Aby uspokojili zvyšující se požadavky spotřebitelů, vynalezli výrobci prohlížečů (tehdy Netscape a Microsoft) nové HTML tagy jako např , které se od původních HTML tagů lišily tím, že definovaly vzhled, nikoli struktura.
Z toho také vznikly originální strukturovací tagy jako např