Vytváření webových stránek není práce pro lidi se slabými nervy. Kromě znalostí musíte mít kreativní myšlení, zájmy perfekcionisty a přesnost jemnosti při rozvržení stránky. CSS je v této záležitosti nevyhnutelné. A znát její základy je nutné pro každého webmastera.

Co je to CSS?

Ti, kteří jsou obeznámeni s jazykem HTML, nemusí říkat, že se jedná o značkovací jazyk stránek. Ale jeho tvůrci se rozhodli přidat štítky, které jsou zodpovědné za vzhled a design. Pouze s tímto přístupem se kód stránky stal příliš objemným a prakticky nečitelným. Přirozeně to nikde nevedlo, takže to bylo komplexní řešení: HTML je zodpovědný za rozvržení stránky, CSS - pro vizuální design.


Zkratka CSS znamená kaskádové styly (kaskádové styly). Obsahuje parametry, které jsou zodpovědné za vizualizaci objektů na stránce.

Výhody CSS

Kaskádový stylový štítek umožňuje správci webu nejen vytvářet dobrý zdroj, ale také čitelnost kódu, což výrazně snižuje jeho velikost. Pomocí CSS můžete nastavit parametry, které nejsou možné v označení HTML stránky. Pomocí služby CSS můžete doslova změnit vzhled stránek zdrojů pouze několika kliknutími. To je velmi výhodné, zvláště pokud máte vícestranovou stránku. Všechny změny návrhu se provádějí v kaskádovém stylu, spíše než změnou parametrů na stránce jednotlivých zdrojů. A jen díky CSS můžete provést blokovou značku.

Připojení CSS

Mluvit o základních principechCSS, musíte se nejprve naučit připojit kaskádový stylový list do souboru HTML. Tento proces je poměrně jednoduchý. Nejprve je třeba vytvořit dokument HTML. Pro ty, kteří ještě neví, jsou vytvořeny v programu Notebook. Potom pomocí funkce "Uložit jako" musíte zadat rozšíření HTML.


Přesně stejným způsobem je vytvořen kaskádový stylový list, měl by být zadán pouze přípona souboru css. Výsledný dokument musí být uložen ve stejné složce jako soubory HTML. Předpokládejme, že dokument stylu se nazývá style.css. Chcete-li jej připojit k dokumentu HTML, musíte použít značku, která je odpovědná za připojení externích souborů. Mezi značkami musíte zadat následující: Toto je pravděpodobně jeden z nejvhodnějších způsobů připojení externích souborů.

Pravidlo CSS

Studie markingu CSS by měla začít se syntaktickým učením. V kaskádovém stylu nejsou žádné značky, skripty nebo možnosti. Je zde pouze pravidlo, které se má řídit. Skládá se z voliče a bloku stylů. Například v kaskádovém stylu listu se uvádí: body {background: black; barva: bílá}. Zde je tělo a je selektor, který je zodpovědný za stylistické formátování těla místa; pozadí: černá a barva: bílá jsou vlastnosti a jejich významy. Jsou zapsány čárkou. Tato poloha dělá pozadí stránky černé a text je bílý.

Výběr

No, pokračujeme v intenzivním vstupu do CSS. Stránky rozvržení budou obtížné dělat, aniž byste o výběru věděli. Pokud jsou vlastnosti a jejich významy jasné, pak další znalosti o selektorechpomohou uspořádat rozložení stránky.
Co potřebujete vědět o selektorech? Za prvé, jejich odrůdy:

Identifikátor. Jako selektory lze použít názvy prvků stránek. V případě, že například je třeba zvýraznit odstavec textu v jiné barvě, přidejte identifikátor. Zadává se parametrem id.

Je třeba si uvědomit, že jedno ID může být použito pouze jednou. V tomto příkladě je volič pojmenován růžový, pokud potřebujete ještě jeden identifikátor, pak mu stačí zadat jiný název (pink2 zelená atd.). Třídy Volič třídy se používá, pokud je třeba nastavit několik objektů na stejné parametry. Například pro dva odstavce textu je třeba zadat červenou barvu. Třídy mohou být jakýkoli počet objektů. Pro stejný objekt můžete zadat jak třídu, tak identifikátor - to není v rozporu s označením CSS. Ale vzhledem k tomu, že ID má vyšší prioritu, použije objekt svůj vlastní styl. Při označování stránky v CSS je třeba vzít v úvahu. Identifikátory a třídy mohou být použity pro všechny objekty. A pokud potřebujete dát jeden styl textu a obrázků, nemůžete zadat název prvku, jako v příkladu (p # růžový, p.red). Můžete jednoduše položit bodku nebo mřížku. Můžete také seskupit výběry. Například h1 h2 h3 {barva: červená; font-sixe: 17px}.

Rozložení stránky

Zatímco studujeme značku stránky, lze si uvědomit, že existuje několik odrůd:

Tablichna. Když tam nebyl žádný kaskádový štítek, tenhleznačka byla hlavní. Umožnilo přesné umísťování objektů zdroje od sebe navzájem. Kód je však velmi velký a špatně indexován vyhledávači. Další nevýhodou této metody je rychlost stahování. Dokud nebude stažena celá tabulka, uživatel dokonce neuvidí začátek textu.

Blokovat. Nyní je to hlavní způsob značení stránky. Jeho využití bylo možné pouze díky vývoji a zdokonalení stylu.

Výhody blokového uspořádání

Blokování rozvržení stránky pomocí CSS má několik nepopiratelných výhod. Za prvé, styl objektu je oddělený od dokumentu HTML, což značně zvyšuje čitelnost kódu a umožňuje rychle provést vizuální změny. Za druhé, existuje možnost uložit jednu vrstvu na druhou a to několikrát usnadňuje proces polohování. Samozřejmě jsou tyto stránky rychlejší stahovány a indexovány vyhledávači. Rozložení stránky v CSS umožňuje snadné nastavení moderních vizuálních efektů. Jedinou nevýhodou tohoto přístupu je rozdílné "porozumění" prohlížečů. Některé odrážejí zdroj ve formě, kterou jeho webmaster vidí. Ale existují prohlížeče, které obraz zkreslují, takže pokud máte velké množství tříd a selektorů, měli byste používat hacks, které dělají kód cross-browser.

Jak vytvořit blokové uspořádání webu?

První věcí, kterou je třeba začít je vytvořit rozvržení. Toto by mělo být normální obrázek s příponou psd. Po vytvoření (nákupu nebo stažení) je nutné obrázek snížitbloky a vložte do jedné složky (nejlépe oddělené). Tyto úryvky budou použity jako pozadí pro bloky. V dokumentu HTML pro rozložení bloku se používá značka. Všechno v něm je nazýváno vrstvou a formát této vrstvy je nastaven v kaskádním stylu pomocí tříd nebo identifikátorů. První věc, kterou je třeba udělat po rozvržení stránky, bude rozřezána na kusy, ve formátu HTML nastavte strukturu webu pomocí značky a přiřadíte volič pro každou vrstvu. Pokud je to například nabídka, pak napište: id = menu. Poté je třeba připojit kaskádový stylový list a nastavit vlastní parametry pro každou vrstvu. Nejjednodušší kód má následující formulář.

Nastavení parametrů

Příklad ukazuje, jak jsou parametry nastaveny pro bloky CSS. Rozložení rozložení stránky je uvedeno v pixelech, ačkoli ve většině případů je lepší použít zájem. V okně prohlížeče bude mít tento web formu "oříznuta z různých částí plátna", protože v příkladu byla použita pouze barva oblasti bloku. Pokud však nahradíte obrázek na pozadí, získáte nejen krásný, ale i funkční produkt. Mezi značkami můžete napsat všechny potřebné informace s požadovaným formátováním. Jakýkoli text napsaný v této značce je okamžitě umístěn na vrstvě na formátovaném bloku. Objekty mezi nimi se automaticky sníží, aby nepřekročily velikost bloku. Tento příklad je jen malou částí toho, co se webmaster musí zabývat zpracováním kvality.charakteristiky zdroje. Při vytváření dobrého webového zdroje mohou být často k nákupu produktů Crossbreds používány hacks. Kódy stránek můžete upravovat ve speciálních editorech, což značně zjednodušuje práci, ačkoliv webmasterovi neodstraňuje potřebu manuální úpravy. Každý může vytvořit stránky nezávisle. Hlavní věc - pochopit, že jak CSS, HTML byly vytvořeny lidmi a určeny pro lidi. Zásady pro značení stránek jsou k dispozici všem a vytváření webových zdrojů není jen výsadou vybraných, ale může to být také každodenní činnost každého, kdo chce.