Vytváranie webových stránok nie je prácou pre ľudí so slabými nervami. Okrem vedomostí musíte mať kreatívny prístup, záujmy perfekcionistov a presnosť jemnosti pri rozložení stránky. CSS je v tejto záležitosti nepostrádateľná. A poznať jeho základy je potrebné pre každého webmastera.

Čo je to CSS?

Tí, ktorí poznajú HTML, nemusia povedať, že ide o značkovací jazyk stránok. Ale jeho tvorcovia sa rozhodli pridať štítky, ktoré sú zodpovedné za vzhľad a dizajn. Len s týmto prístupom sa kód stránky stal príliš objemným a prakticky nečitateľným. Samozrejme, táto cesta nijako nevedela, takže to bolo komplexné riešenie: HTML je zodpovedný za rozvrhnutie stránok, CSS - pre vizuálny dizajn.


Skratka CSS znamená kaskádové štýly (kaskádové štýly). Pozostáva z parametrov, ktoré sú zodpovedné za vizualizáciu objektov na stránke.

Výhody CSS

Kaskádový štýl štýlu umožňuje správcovi webu nielen vytvoriť dobrý zdroj, ale aj urobiť kód čitateľný, čo výrazne znižuje jeho veľkosť. Pomocou služby CSS môžete nastaviť parametre, ktoré nie sú možné v značke HTML na stránke. Pomocou CSS môžete doslova zmeniť vzhľad stránok s prostriedkami len niekoľkými kliknutiami. To je veľmi výhodné, najmä ak máte stránky s viacerými stránkami. Všetky zmeny návrhu sa vykonávajú v kaskádovom štýle šablón, a nie zmenou parametrov na každej stránke zdroja. A len vďaka CSS môžete urobiť blokovú značku.

Pripojenie CSS

Hovoríme o základných princípochCSS, musíte najprv naučiť pripojiť kaskádový štýl štýlu do súboru HTML. Tento proces je dosť jednoduchý. Najprv musíte vytvoriť dokument HTML. Pre tých, ktorí ešte nevedia, sú vytvorené v programe Notebook. Potom pomocou funkcie "Uložiť ako" musíte zadať rozšírenie HTML.


Rovnakým spôsobom sa vytvorí kaskádový štýl, pričom by sa malo špecifikovať len rozšírenie súboru css. Výsledný dokument musí byť uložený v rovnakom priečinku ako súbory HTML. Predpokladajme, že dokument štýlový list sa nazýva style.css. Ak sa chcete pripojiť k dokumentu HTML, musíte použiť značku, ktorá je zodpovedná za pripojenie externých súborov. Medzi značkami musíte zadať nasledovné: Toto je pravdepodobne jeden z najpohodlnejších spôsobov pripojenia externých súborov.

Pravidlo CSS

CSS štítková štúdia by mala začínať s vyučovaním syntaxe. V kaskádovom štýle štýlov nie sú žiadne značky, skripty alebo možnosti. Existuje len pravidlo, ktoré treba dodržiavať. Skladá sa z voliča a bloku štýlov. Napríklad v kaskádovom štýle štýlu je daná pozícia: body {background: black; farba: biela}. Tu body a je selektor zodpovedný za štylistické formátovanie telo stránky; pozadie: čierna a farba: biele sú vlastnosti a ich význam. Sú napísané pomocou čiarky. Táto pozícia spôsobuje, že pozadie stránky je čierne a text je biely.

Selektory

No, pokračujeme v intenzívnom vstupe do CSS. Stránky rozloženia budú ťažké robiť bez toho, aby ste vedeli o selektoroch. Ak sú vlastnosti a ich významy jasné, potom ďalšie znalosti o selektorochpomôcť vytvoriť požadované rozloženie stránky.
Čo potrebujete vedieť o selektoroch? Po prvé, ich odrody:

Identifikátor. Ako selektory je možné použiť názvy prvkov stránky. V prípade, že napríklad je potrebné zvýrazniť odsek textu v inej farbe, pridajte identifikátor. Je zadaný parametrom id.

Treba si uvedomiť, že jedno ID sa dá použiť iba raz. V tomto príklade je volič označený ružovou farbou, ak potrebujete ešte jeden identifikátor, potom musí byť len iný názov (pink2 zelená atď.). Trieda. Volič triedy sa používa, ak je potrebné nastaviť niekoľko objektov na rovnaké parametre. Napríklad pre dva odseky textu je potrebné zadať červenú farbu. Triedami môže byť ľubovoľný počet objektov. Pre ten istý objekt môžete špecifikovať triedu i identifikátor - nie je v rozpore s označením CSS. Ale keďže ID má vyššiu prioritu, objekt bude používať svoj vlastný štýl. Pri označovaní stránky v CSS by sa to malo brať do úvahy. Identifikátory a triedy je možné použiť pre akékoľvek objekty. A ak potrebujete dať jeden štýl textu a obrázkov, nemôžete zadať názov prvku, ako v príklade (p # pink, p.red). Môžete jednoducho dať bodku alebo mriežku. Môžete tiež zoskupiť výber. Napríklad h1 h2 h3 {farba: červená; font-sixe: 17px}.

Rozloženie stránky

Pri štúdiu označovania stránok možno pochopiť, že existuje niekoľko odrôd:

Tablichna. Keď nebol žiadny kaskádový štýl, tentoznačka bola hlavná. Umožnilo presne umiestniť objekty zdroja navzájom. Ale kód je veľmi veľký a slabo indexovaný vyhľadávačmi. Ďalšou nevýhodou tejto metódy je rýchlosť sťahovania. Až do preberania celej tabuľky sa používateľ ani nezobrazí začiatok textu.

Blokovať. Teraz je to hlavný spôsob označovania stránky. Jeho využitie bolo možné len prostredníctvom vývoja a zdokonalenia štýlu.

Výhody rozloženia bloku

Blokovanie rozloženia stránky pomocou CSS má niekoľko nepopierateľných výhod. Po prvé, štýl objektu je oddelený od dokumentu HTML, čo značne zvyšuje čitateľnosť kódu a umožňuje rýchlo vykonať vizuálne zmeny. Po druhé, existuje možnosť uložiť jednu vrstvu na druhú, a to niekoľkokrát uľahčuje proces polohovania. Samozrejme, takéto stránky sú rýchlejšie preberané a indexované vyhľadávacími nástrojmi. Rozloženie stránky v systéme CSS umožňuje jednoduché nastavenie moderných vizuálnych efektov. Jedinou nevýhodou tohto prístupu je odlišné "pochopenie" prehliadačmi. Niektoré odrážajú zdroj vo forme, v ktorej ho správca webu vidí. Existujú však prehliadače, ktoré skresľujú obraz, takže ak máte veľa tried a selektorov, mali by ste použiť hackery, ktoré robia kód cross-browser.

Ako vytvoriť blokové rozloženie stránky?

Prvá vec, ktorú treba začať, je vytvoriť rozloženie. Mal by to byť bežný obrázok s príponou psd. Po jej vytvorení (nákup alebo prevzatie) je potrebné obrázok vyrezaťbloky a vložte do jednej zložky (najlepšie oddelené). Tieto úryvky sa použijú ako pozadie pre bloky. V dokumente HTML pre rozloženie bloku sa používa značka. Všetko v ňom sa nazýva vrstva a formát tejto vrstvy sa nastavuje v kaskádovom štýle pomocou tried alebo identifikátorov. Prvá vec, ktorú je potrebné urobiť po rozložení stránky, bude rozrezaná na kusy, v HTML nastavte štruktúru lokality pomocou značky a priradíte selektor pre každú vrstvu. Ak je to napríklad menu, napíšte: id = menu. Potom je potrebné pripojiť kaskádový štýl štýlu a nastaviť vlastné parametre pre každú vrstvu. Najjednoduchší kód má nasledujúcu formu.

Nastavenie parametrov

Príklad ukazuje, ako sú nastavené parametre pre bloky CSS. Rozloženie rozloženia stránky je uvedené v pixeloch, aj keď vo väčšine prípadov je lepšie použiť záujem. V okne prehliadača bude táto stránka mať formu "orezaná z rôznych častí plátna", pretože v príklade bola použitá iba farba blokovej plochy. Ale ak ho nahradíte pozadím na pozadí, môžete získať nielen krásny, ale aj funkčný produkt. Medzi značkami môžete napísať všetky potrebné informácie s požadovaným formátovaním. Každý text napísaný v rámci tejto značky je okamžite umiestnený na vrstve na formátovanom bloku. Objekty medzi nimi sa automaticky znižujú, aby neprekročili veľkosť bloku. Tento príklad je len malou časťou toho, čo sa musí správca webu zaoberať prácou na kvalite.charakteristiky zdroja. Pri vytváraní dobrého webového zdroja sa často môžu kupovať kúpiť Crossbreds. Kódy stránok môžete upravovať v špeciálnych editorech, čo značne zjednodušuje prácu, hoci webmasteru nepostrádza potrebu manuálnej úpravy. Každý môže vytvoriť stránky nezávisle. Hlavná vec - pochopiť, že aj CSS, HTML boli vytvorené ľuďmi a určené pre ľudí. Zásady označovania stránok sú k dispozícii všetkým a vytváranie webových zdrojov nie je len výsadou vybraných, ale môže to byť celkom každodenná činnosť každého, kto chce.