Skratka CSS znamená „kaskádové štýly štýlov“. CSS sa používa na úpravu webových stránok a aplikácií používaných na všetkých zariadeniach. Šablóna štýlov sa bežne používa spolu s HTML a programovacím jazykom front-end, ako je JavaScript.

CSS je možné implementovať jedným z troch spôsobov - vloženým, interným alebo externým. Aj keď je externý CSS odporúčaným prístupom, existujú prípady, keď by tieto dve zostávajúce metódy implementácie mohli byť praktickejšie.

V tomto tutoriálnom článku sa naučíte všetky základy CSS, aby ste dnes mohli začať vytvárať aplikácie.

Kedy použiť rôzne metódy implementácie CSS

Inline CSS je ideálnou metódou implementácie, ak je zámerom zahrnúť na webovú stránku iba jednu alebo dve predvoľby štýlu a niekoľko ďalších špecializovaných prípadov. Vložená metóda CSS využíva príponu štýl kľúčové slovo spolu s vlastnosťou CSS na dosiahnutie konkrétneho výsledku.

Ak máte v úmysle zmeniť farbu jedného nadpisu na červenú, môže byť dobrou voľbou vložený CSS. Špecifický prípad, ako je uvedené vyššie, by bol pri vytváraní rozložení HTML predovšetkým pozostávajúcich z tabuliek (zastaraná prax).

Použitie príkladu vloženého CSS

Hlavný nadpis

V riadku kódu vyššie sa zobrazí text „Hlavný nadpis“ potiahnutý červenou farbou. Toto je pravdepodobne jeden z mála praktických dôvodov pre používanie vloženého CSS, pretože tam je zvyčajne iba jeden h1 prvok na danej webovej stránke.

Ak máte v úmysle všetky kabát h2 prvky na webovej stránke so žltou farbou. Budete musieť použiť CSS štýl kľúčové slovo spolu s príponou farba vlastnosť a jej hodnota (žltá) na každom prvku. Efektívnejším spôsobom splnenia tejto úlohy je však použitie interného CSS.

Použitie interného príkladu CSS

Umiestnenie kódu vyššie do súboru tag vášho súboru HTML zaistí, že všetky h2 prvky v tomto súbore sú potiahnuté žltou farbou. Interné CSS sú oddelené od kódu HTML, a preto je metóda efektívnejšia, pretože uľahčuje zacielenie na rôzne skupiny prvkov.

Prečo je teda metóda externej implementácie CSS stále najviac odporúčaným prístupom? Oddelenie obáv. Vďaka externému CSS je váš CSS kód úplne oddelený od HTML kódu, čo zaisťuje škálovateľnosť veľkých projektov a zefektívňuje proces testovania.

Použitie externého príkladu CSS

Vloženie riadka kódu vyššie do súboru tag vášho súboru HTML uľahčí vytváranie štýlu vašej webovej stránky pomocou externej metódy CSS. Jediným aspektom vyššie uvedeného kódu, ktorý sa zmení, je hodnota priradená k href vlastnosť, ktorá by mala byť vždy názvom súboru CSS (vrátane prípony .css).

Súvisiace: Čo sú to kaskádové štýly a na čo sa používa CSS? So súborom CSS prepojeným s dokumentom HTML môžete teraz začať písať kód CSS do súboru CSS. V tomto mieste je jediným rozdielom medzi vyššie uvedeným interným príkladom CSS a externým CSS súbor štýl tag. Preto vloženie nasledujúceho kódu do súboru CSS prinesie rovnaký výsledok ako vyššie uvedený interný príklad CSS.

h2 {
farba: žltá;
}

Preskúmanie základnej štruktúry CSS

Základná deklarácia CSS obsahuje sedem základných prvkov, ako vidíte na nižšie uvedenom príklade. Všetky spolupracujú na dosiahnutí špecifického súboru preferencií štýlu.

Selektor

V deklarácii CSS môže byť selektor buď id, a triedaprvok, alebo v niektorých špeciálnych prípadoch pseudo-volič. V štruktúre CSS nad a prvok sa používa ako selektor, čo znamená, že všetky odkazy na webovej stránke budú označené červenou farbou. Cieľom selektora je v zásade identifikovať prvok (prvky), ktoré by mali byť štylizované.

Vyhlásenie začiatok a koniec

Začiatok a koniec deklarácie sú dôležité, pretože obsahujú všetky preferencie štýlu, ktoré sa vzťahujú na konkrétny volič. Oba prvky zastupuje dvojica otvorených a zatvorených kučeravých zátvoriek. Dobrým spôsobom, ako si zapamätať použitie začiatku deklarácie alebo konca deklarácie, je zapamätať si, že ak máte otvorenú zloženú zátvorku, mala by existovať zodpovedajúca uzavretá zložená zátvorka a naopak.

Vlastníctvo

Vlastnosťou CSS v deklaračnej štruktúre môže byť ktorýkoľvek z viac ako stovky rôznych typov vlastností. Typ vlastnosti použitý v štruktúre CSS vyššie je farba a táto vlastnosť zacieľuje text na webovej stránke. Ak sa chcete dozvedieť viac, pozrite sa na náš komplexný zoznam vlastností CSS a ich použitia.

Oddeľovač majetku/hodnoty

Aj keď sa to môže zdať malé a bezvýznamné, oddeľovač vlastnosti/hodnoty je rovnako dôležitý ako všetky ostatné prvky v štruktúre CSS. Ak sa niekedy stane, že sa na tento prvok zabudne, celé vyhlásenie CSS sa nespustí.

Hodnota

Hodnota vlastnosti CSS predstavuje presný štýl, ktorý by ste chceli použiť pre dané vlastníctvo. Hodnoty, ktoré sú k dispozícii na použitie, závisia od typu vlastnosti. Napríklad vlastnosť použitá v štruktúre vyššie je farba, čo znamená, že na túto vlastnosť je možné použiť iba jeden typ hodnoty, názov farby. A farba hodnota môže byť prezentovaná v jednej zo štyroch foriem: hodnota slova (ako v príklade vyššie), hexadecimálna hodnota, hodnota HSL (odtieň, sýtosť, svetlosť) alebo hodnota RGB (červená, zelená, modrá).

Oddeľovač deklarácie

Oddeľovač deklarácie naznačuje, že ste na konci konkrétneho vyhlásenia o štýle. V štruktúre vyššie je iba jeden oddeľovač deklarácií, ale môže ich byť aj viac. Všetko závisí od počtu vlastností CSS, ktoré chcete v konkrétnom prípade použiť trieda, idalebo prvok.

Čo sú to ID a triedy?

ID a triedy zohrávajú zásadnú úlohu v procese štýlu CSS. Rovnako ako prvky HTML, CSS ID a triedy sa používajú ako selektory v deklarácii CSS. Avšak, triedy a ID majú prednosť pred prvkom HTML.

Všeobecným pravidlom v CSS je, že posledná deklarácia štýlu, ktorú pridáte do súboru, prepíše tie, ktoré tam boli predtým. Ak teda existujú dve vyhlásenia s príponou h2 selektora v súbore CSS, deklarácia, ktorá bola pridaná ako posledná, prepíše tie, ktoré tam boli predtým.

Ak však toto h2 prvok má an id ktorý sa používa ako selektor vo vyhlásení CSS, bez ohľadu na jeho pozíciu (pred alebo po) vo vyhlásení CSS, ktoré má h2 prvok ako jeho selektor, preferencia štýlu v id deklarácia bude mať vždy prednosť pred prvkom. Stručne povedané, an id prepíše ostatné selektory štýlu.

Je dôležité mať na pamäti, že vo vyhlásení CSS ID začínajú číslicou a hodiny sa začínajú bodkou. Najvýraznejší rozdiel medzi an id a a trieda je to id je jedinečný, zatiaľ čo a trieda je možné duplikovať. Napríklad zbierka podobných tagom je možné priradiť to isté trieda názov; však id každého značka musí byť jedinečná.

Skúmanie rôznych typov selektorov

Existujú tri základné typy selektorov - jeden, viacnásobný a vnorený. Tento článok doteraz podrobne pokrýval jednotlivé selektory.

Pri použití CSS existujú prípady, keď by ste chceli rôzne prvky na rôznych pozíciách v webová stránka bude mať podobný štýl, ktorý sa líši od všeobecného štýlu aplikovaného na celú webovú stránku. V týchto prípadoch bude užitočné vedieť, ako používať viac selektorov.

Základný príklad šablóny HTML

Vitajte

Lorem ipsum dolor sit amet consectetur, adipisicing ellit. Impedancia odit voluptates
dignissimos voluptatibus tenetur.  Repudiandae, animi corporis!  Architecto
tempora voluptates nulla officia placeat quisquam facere at! Quod dolore doloribus eos!







O

Lorem ipsum dolor sit amet consectetur, adipisicing ellit. Impedancia odit voluptates
dignissimos voluptatibus tenetur.  Repudiandae, animi corporis!  Architecto
tempora voluptates nulla officia placeat quisquam facere at! Quod dolore doloribus eos!







Názov

Lorem ipsum dolor sit amet consectetur adipisicing ellit. Labore aspernatur vel dicta quod quibusdam!
Ea delectus sit, laboriosam eos aperiam asperiores? Na ad laborum illo inventor quos est dolores
prekážať, asperiores repellendus harum maxime voluptate sit nulla eaque officiis fuga animi,
perferendis in earum iure dolorum laboriosam enim reiciendis! Eum cum delectus est tenetur korupti
mollitia, minima, magni at iusto id needitatibus harum ratione, ipsum doloremque deleniti ex eligendi
prekážať hic maxime? Máte inú možnosť, ako dočasne sapientovať?







Názov

Lorem ipsum dolor sit amet consectetur adipisicing ellit. Labore aspernatur vel dicta quod quibusdam!
Ea delectus sit, laboriosam eos aperiam asperiores? Na ad laborum illo inventor quos est dolores
prekážať, asperiores repellendus harum maxime voluptate sit nulla eaque officiis fuga animi,
perferendis in earum iure dolorum laboriosam enim reiciendis! Eum cum delectus est tenetur korupti
mollitia, minima, magni at iusto id needitatibus harum ratione, ipsum doloremque deleniti ex eligendi
prekážať hic maxime? Máte inú možnosť, ako dočasne sapientovať?

Ak sa pozriete pozorne na vyššie uvedený súbor HTML, uvidíte dynamiku, ktorá medzi nimi existuje ID a triedy. Pokiaľ ide o vyššie uvedený súbor, ak chcete použiť rovnaký štýl na súbor o sekcii a článkoch na webovej stránke to dosiahne nasledujúci kód CSS.

Príklad použitia viacerých voličov

#Obout, .content {
farba: biela;
farba pozadia: darkcyan;
}

Pri použití viacerých voličov by ste mali každý selektor oddeľovať čiarkou. Vyššie uvedený príklad má dva selektory, an id a a trieda. Ak čiarka, ktorá nasleduje po oid chýba, deklarácia CSS sa nespustí.

Keď sa vrátime k vyššie uvedenému príkladu základnej šablóny HTML, existujú dve prítomné značky - jedna v uvítacej sekcii a druhá v sekcii about. Ak je vašim cieľom zacieliť iba na jeden z nich tagy, vnorený selektor by mal byť vašou metódou.

Použitie príkladov vnorených selektorov

#Welcome p span {
farba: červená;
}

Vnorený volič vyššie obsahuje príponu id a dva prvky HTML. Ako vidíte na vyššie uvedenom príklade, vnorený selektor vám poskytuje možnosť zacieliť na konkrétny prvok v skupine.

Preto iba rozpätie časť v sekcii značka div s vitaj id bude potiahnutý červenou farbou.

Či už používate stylingový jazyk, ako je CSS, alebo programovací jazyk, mali by ste vedieť, ako napísať komentár. Pripomienky sú nevyhnutné v projektoch na podnikovej úrovni, kde spolupracuje viacero vývojárov, a sú tiež užitočné pri vývoji v malom rozsahu.

Komentár CSS obsahuje dve lomky, dve hviezdičky a sekciu komentárov.

/ * Takto napíšete jednoriadkový komentár v CSS */

/*
Takto píšeš
viacriadkový komentár
v CSS
*/

Čo bude ďalej?

Tento článok vám poskytne základné prvky CSS. Teraz môžete použiť identifikátor:

• Ktorákoľvek z troch metód implementácie CSS
• Všetky prvky v deklarácii CSS
• Tri základné typy selektorov
• Komentár CSS

Napriek tomu je to len začiatok. CSS má niekoľko rámcov, ktoré vám pomôžu lepšie porozumieť jazyku. Jedinou výzvou je rozhodnúť sa, ktorá je pre vás najlepšia.

Tailwind CSS vs. Bootstrap: Čo je lepší rámec?

Pri výbere rámca CSS je dôležité nájsť ten, ktorý vyhovuje vašim požiadavkám.

Čítajte ďalej

O autorovi