Základy CSS: Rozložení stránek

Vytvoření webových stránek není pro lidi se slabými nervy úkolem. Vedle znalostí musí člověk při označování stránky mít kreativní myšlení, perfectionisty a filigránskou přesnost. CSS v této věci je prostě nenahraditelná. A každý správce webu musí znát své základy.

Co je to CSS?

Ti, kteří jsou seznámeni s HTML, nemusíte říkat, že jde 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 téměř nečitelným. Samozřejmě tento způsob vedl k nikam, takže bylo přijato 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ý stylový list). Obsahuje parametry, které jsou zodpovědné za vizualizaci objektů na stránce.

Výhody CSS

Kaskádový stylový list umožňuje správci webu nejen vytvořit krásný zdroj, ale také aby byl kód čitelný, což významně snižuje jeho velikost. Pomocí CSS můžete zadat takové 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 je stránka vícestranová. Všechny změny návrhu se provádějí v kaskádovém stylu, nikoli změnou parametrů na každé stránce zdroje. A pouze díky CSS můžete implementovat značku bloků.

Připojení CSS

Když mluvíme o základních principech CSS, první krok je naučit se připojit kaskádový stylový list do souboru HTML. Tento proces je docela jednoduchý. Prvním krokem je vytvoření dokumentu HTML. Pro ty, kteří dosud neznají, vytvoří to v programu Poznámkový blok. Potom pomocí funkce "Uložit jako" musíte zadat rozšíření HTML.

Kaskádový stylový list je vytvořen stejným způsobem, pouze soubor by měl být zadán s příponou css. Přijatý dokument by měl být uložen ve stejném adresáři jako soubory HTML. Například dokument stylu se jmenuje style.css. Chcete-li jej připojit k dokumentu HTML, musíte použít značku , který je zodpovědný za připojení externích souborů. Mezi značkami , je nutné zadat následující:

Možná je to jeden z nejvhodnějších způsobů připojení externích souborů.

Pravidlo CSS

Studie o značení CSS by měla začínat studiem syntaxe. V kaskádovém stylu nejsou tagy, skripty ani parametry. Existuje pouze pravidlo, které se má řídit. Skládá se z voliče a bloku stylů. Například v kaskádovém stylu se umístí pozice: body {background: black-color: white}.

Tady je tělo selektor, který je zodpovědný za formátování stylu pozadí místa těla: černá a barva: bílá jsou vlastnosti a jejich významy. Jsou psány středníkem. Tato poloha dělá pozadí stránky černé a text je bílý.

Výběr

No, pokračujeme v intenzivním úvodu do CSS. Rozložení stránek bude poměrně obtížné bez znalosti selektorů. Pokud je vše jasné s vlastnostmi a jejich hodnotami, další znalosti o selektorech pomohou vytvořit požadované rozložení stránky.

Co potřebujete vědět o selektorech? Za prvé, jejich odrůdy:

• Identifikátor. Názvy prvků stránky lze použít jako voliče. V případě, že například potřebujete vybrat odstavec textu jinou barvou, přidejte identifikátor. Je zadán parametrem id.

Stojí za zmínku, že jeden identifikátor lze použít pouze jednou. V tomto příkladu se volič nazývá růžový, pokud potřebujete jiný identifikátor, jednoduše potřebujete přiřadit jiný název (pink2, zelená atd.).

Třídy. Volič tříd se používá, pokud chcete nastavit stejné parametry pro několik objektů. Například pro dva odstavce textu musíte zadat červenou barvu.

Objekty s třídami mohou být libovolné číslo.

Pro stejný objekt můžete zadat jak třídu, tak identifikátor - to není v rozporu se značkou CSS. Ale vzhledem k tomu, že identifikátor má vyšší prioritu, bude tento styl použit pro objekt. Při označování stránky v CSS stojí za to zvážit.

Identifikátory a třídy lze aplikovat na všechny objekty. A pokud potřebujete zadat jeden styl pro text a obrázky, nemůžete zadat název prvku, jak byl uveden v příkladu (p # pink, p.red). Můžete jen dát bod nebo mřížku. Voliče lze také seskupit. Například h1, h2, h3 {barva: červená-font-sixe: 17px}.

Rozložení stránky

Při studiu rozvržení stránek můžete pochopit, že existuje několik jeho odrůd:

• Tabulka. Pokud nebyl k dispozici žádný kaskádový stylový štítek, byl tento značka hlavní. To umožnilo nejpřesnější umísťování zdrojových objektů od sebe navzájem. Kód se však ukázal být příliš velký a vyhledávač je špatně indexován. Další nevýhodou této metody je rychlost stahování. Až do načtení celé tabulky uživatel nevidí ani začátek textu.
• Blokovat. Nyní je to hlavní způsob rozvržení stránky. Jeho využití bylo možné pouze díky vývoji a zdokonalení stylu.

Výhody rozvržení bloku

Blokovat rozložení stránky pomocí CSS má několik nevyvratitelných výhod. Za prvé, styl objektů je oddělený od dokumentu HTML, což výrazně zlepšuje čitelnost kódu a umožňuje rychle provést vizuální změny. Za druhé, je možné překrýt jednu vrstvu s druhou a to několikrát usnadňuje polohovací proces. Samozřejmě, takové stránky jsou rychleji načítá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 odlišné "pochopení" prohlížečů. Někteří lidé zobrazují zdroj ve formě, ve které ho webmaster vidí. Ale existují prohlížeče, které zkreslují obraz, takže s velkým počtem tříd a selektorů potřebujete používat hacks, díky nimž bude kód křížový prohlížeč přátelský.

Jak vytvořit rozvržení stránek?

První věcí, kterou byste měli začít, je vytvoření rozvržení. Toto by mělo být normální obraz s příponou psd. Po vytvoření (nákupu nebo stažení) je nutné snímek snížit na bloky a umístit do jedné složky (nejlépe samostatné). Tyto fragmenty budou použity jako pozadí pro bloky.

V dokumentu HTML pro rozložení bloku použijte značku

První věc, kterou je třeba udělat po rozložení webu, byla rozřezána na kusy, v HTML, nastavit strukturu webu pomocí značky

Nastavte parametry

Například můžete jasně vidět, jak jsou nastaveny parametry pro bloky CSS. Umístění rozložení stránky je uvedeno v pixelech, ačkoli ve většině případů je lepší použít procenta. V okně prohlížeče vypadá tato stránka jako "přizpůsobená 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 také poměrně funkční produkt.

Mezi značkami

Tento příklad je jen malou částí všeho, s kým webmaster bude muset jednat při práci na kvalitativních charakteristikách zdroje. Když vytvoříte dobrý webový zdroj, můžete často používat hacks k získání funkce cross-browser. Upravit kódy stránek může být ve speciálních editorech, což značně zjednodušuje práci, ačkoli nevylučuje webmastera z nutnosti manuálního editování.

Každý může vytvořit web samostatně. Hlavní věc je pochopit, že jak CSS, tak HTML byly vytvořeny lidmi a určeny pro lidi. Základy rozvržení stránky jsou k dispozici všem a vytváření webových zdrojů není jen výsadou vyvolených, ale může to být také docela obyčejná činnost každého, kdo si přeje.