Ahoj milí čitatelia remontcompy! Volám sa Roman Nahvat a predstavujem vám niekoľko článkov o jazyku štýlu CSS3. Skratka CSS pochádza z anglických kaskádových štýlov, čo znamená kaskádové štýly. Štýl alebo CSS je sada možností formátovania použitých na prvky v dokumente HTML na zmenu ich vzhľadu. Samotný HTML je iba štandardným jazykom pre dokumenty HTML a používa sa na štruktúrovanie obsahu stránky HTML, takže HTML je iba prvým krokom v procese učenia, ako vytvárať webové stránky. Ďalším krokom je naučiť sa štýly alebo CSS, čo urobíme. Existuje niekoľko spôsobov, ako pridať štýly na webovú stránku. Každá metóda sa líši svojimi schopnosťami a účelom. V tomto článku sa zameriame na tri spôsoby, ako pridať štýly do dokumentu HTML..

Len o zložitých alebo naučiť CSS3. Časť 1. Koncept CSS. Spôsoby pripojenia štýlov CSS k dokumentu HTML

Vytvorte štandardnú štruktúru dokumentu HTML, ako je to znázornené nižšie.

Medzi značky a napíšte názov dokumentu HTML, napríklad „Spôsoby pripojenia štýlov CSS“

Používanie značiek

a

pridať nadpis na webovú stránku s textom „Čo je CSS“

Pod nadpisom pomocou značiek

a

vytvorte malý odsek s textom, ako je uvedené nižšie

Tento dokument uložte na jednotku Flash do priečinka CSS pod indexom mien s príponou .html

Zadajte index názvu, vyberte typ súboru html

Dostávame nasledujúce.

Prejdeme do priečinka CSS, kde sa nachádza náš uložený html dokument s názvom index. Otvorte ho vo webovom prehliadači

Ako vidíte, obsah webovej stránky, ktorú sme vytvorili, sa zobrazil v okne webového prehľadávača, konkrétne nadpis s textom „Čo je CSS“ a odsek začínajúci slovami „CSS je štýlový jazyk, ktorý definuje ....“

Pomocou atribútu Zarovnať (priraďovať stredovú hodnotu) zarovnáme nadpis s textom „Čo je CSS“ v strede webovej stránky.

Dostávame nasledujúce.

Zmeňte farbu textu odseku zo štandardnej čiernej na inú. Používame značku

Existuje veľa farieb html, napríklad pre text odseku na stránke, ktorú sme vytvorili, vyberte farbu DeepSkyBlue

Nastavte atribút farby značky na DeepSkyBlue

Znovu načítame našu webovú stránku a vidíme, že text odseku zmenil farbu z čiernej na farbu, ktorú sme zadali

Rovnakým spôsobom zmeňte farbu textu nadpisu, napríklad na červenú.

Dostávame nasledujúce

Text nadpisu a odseku na našej webovej stránke vrátime do pôvodného stavu, konkrétne odstránime atribút zarovnania a značky ...

Po odstránení značiek ... a atribútu zarovnania získame pôvodný vzhľad webovej stránky

Ak sme vyššie menili farbu a usporiadanie nadpisu a odseku textu na webovej stránke pomocou značiek html, urobíme to isté, ale pomocou CSS. Ako je uvedené vyššie, v tomto článku zvážime tri spôsoby, ako pridať štýly na webovú stránku, a to: Pridanie interných štýlov na webovú stránku; Pridanie globálnych štýlov na webovú stránku; Pridanie súvisiacich štýlov na webovú stránku; Zvážte pridanie interného štýlu na webovú stránku. Interný štýl je rozšírenie jednej značky, ktorá sa používa na webovej stránke. Atribút štýlu sa používa na definovanie štýlu a jeho hodnota je určitá sada pravidiel štýlu. Zmeňte farbu textu nadpisu na webovej stránke na červenú a tiež centrujte pomocou vnútorného štýlu. Označiť

pridajte atribút style, potom si zapíšeme vlastnosti štýlu, a to: text-allign: center, color: red

Dostávame nasledujúce.

Výsledkom je, že po otvorení súboru index.html vo webovom prehliadači vidíme, že text nadpisu na webovej stránke je červený a vycentrovaný na stred..

Rovnakým spôsobom pomocou atribútu style zmeňte farbu textu odseku zo štandardnej čiernej na deepskyblue

Znovu načítame stránku index.html a vidíme zmenu farby odseku.

Zmeňte farbu textu nadpisu na webovej stránke na červenú a centrovanú, tentoraz pomocou globálneho štýlu. Ak sa použije globálny štýl, vlastnosti CSS sa nachádzajú medzi značkami a a tie (a značky) sa zase nachádzajú medzi značkami a .

Medzi značky a zátvorky v zátvorkách píšeme vlastnosti štýlu pre hlavičku webovej stránky (značka

) a pre odsek (značka

): h1 zarovnanie textu: stred; color: red - umiestnite text nadpisu do stredu webovej stránky a zmeňte jeho farbu na červenú p color: deepskyblue - zmeňte farbu odseku na deepskyblue

Výsledkom je rovnaký výsledok ako pri použití interných štýlov.

Zvážte posledný spôsob pridania štýlov na webovú stránku, konkrétne použitie súvisiacich štýlov. Podstatou súvisiacich štýlov je to, že sú definované v súbore oddelenom od html dokumentu a majú príponu .css. Vytvorte ešte prázdny dokument a uložte ho na jednotku Flash do priečinka CSS pod štýlom názvu a príponou .css.

udržať.

Vytvorený súbor štýlu s príponou .css

Nechajte súbor style.css zatiaľ prázdny.

Na prepojenie dokumentu html (v našom prípade index.html) so súborom štýlov style.css používame značku. Značka by mala byť umiestnená vo vnútri značiek ... Napíšme nasledujúci riadok medzi značky: where: rel = "stylesheet" - atribút značky, ktorý hovorí webovému prehľadávaču, že štýly sa spoja; Atribút href = "style.css" označuje cestu k súboru štýlov style.css

Pri vytváraní súborov štýlov musíte dodržiavať určité pravidlá uvedené nižšie (pri pridávaní globálnych štýlov sa musia dodržiavať rovnaké pravidlá). Jedným z hlavných prvkov súboru štýlov je selektor. Selektor určuje, ktorý prvok v html dokumente má použiť určité parametre štýlu. Selektorom sú značky, triedy a identifikátory. Po zadaní selektora sa do zátvorky vložia zložené zátvorky, v ktorých je zaregistrovaná vlastnosť štýlu, potom je uvedená jeho hodnota. Napríklad html značka h1 je na obrázku nižšie označená ako selektor, farba: ako vlastnosť štýlu sa zapíše hodnota vlastnosti štýlu.

Pretože chceme umiestniť text názvu (značku

) v strede webovej stránky a nastavte text na červený, ako aj na text odseku (značka

) zobrazte farebne deepskyblue, v súbore štýlov style.css píšeme riadky: h1 text-zarovnať: stred; color: red a p color: deepskyblue kde: h1 zarovnanie textu: stred; color: red - zarovnajte text hlavičky („Čo je CSS“) v strede a nastavte text na červenú p color: deepskyblue - nastavte text odseku („CSS je jazyk štýlu, ktorý definuje ...“) color deepskyblue

V dôsledku pripojenia súboru style.css k html dokumentu index.html vidíme, že text nadpisu na webovej stránke je vycentrovaný a má červenú farbu. Text odseku tiež zmenil farbu na deepskyblue

Pokračovanie v článku: Skoro komplikované alebo sa učte CSS3. Časť 2. Typy selektorov CSS