Úvod do príkazov CSS
CSS je skratka pre kaskádové štýly. Používa sa na opis prezentácie dokumentu, ktorý je napísaný v značkovacom jazyku, ako je HTML. Vykonáva oddelenie oddelenia prezentácie a obsahu, ktoré zahŕňa rôzne rozloženie, farby a písma. Oddelenie poskytuje flexibilitu a kontrolu nad rôznymi charakteristikami, ktoré umožňujú zdieľanie formátovania viacerých webových stránok špecifikovaním relevantného CSS. Špecifikácie CSS spravuje World Web Consortium. Okrem toho poskytuje aj osobitné pravidlá, ktoré pomáhajú pri alternatívnom formátovaní, ak sa k obsahu pristupuje z mobilného zariadenia.
Základné príkazy CSS
1. Syntax CSS: Existuje niekoľko pravidiel, ktoré sa musia v príkaze CSS riadiť. Sada pravidiel CSS pozostáva z voliča a bloku deklarovania. Selektor sa používa na ukazovanie na prvok HTML, ktorý by používateľ chcel štýlom. Blok vyhlásení môže obsahovať jedno alebo viac vyhlásení, ktoré môžu byť oddelené bodkočiarkami. Každé vyhlásenie by malo obsahovať názov vlastnosti s jej hodnotou a tie oddelené dvojbodkami.
2. Selektor ID : Selektor id môže použiť id atribútu prvku HTML a pomôcť pri výbere konkrétneho prvku. Používa sa na výber jedného jedinečného prvku a tento prvok by mal byť jedinečný pre danú stránku. Na výber prvku s konkrétnym ID sa použije znak „#“ a za ním nasleduje ID tohto prvku.
3. Selektor triedy: Na výber konkrétneho atribútu triedy sa používa selektor triedy na výber prvkov z tejto triedy. Na použitie prvkov v konkrétnej triede sa používa znak obdobia (.). Nasleduje názov triedy. Ak teda užívateľ chce, aby sa používali iba konkrétne prvky, trieda môže špecifikovať iba tie prvky.
4. Selektory zoskupovania: Sú prípady, keď majú prvky rovnaké definície štýlov. Lepšou možnosťou je ich zoskupenie a minimalizovanie kódu. V skupine môže užívateľ selektora použiť čiarku a každý selektor oddeliť
5. Poznámky: Tieto príkazy CSS sa odporúčajú používať pri písaní kódu. Poskytujú prehľadnosť toho, čo kód robí, a pomáhajú vám alebo niekomu inému, kto je novým v kóde, s ním podľa toho pracovať. Prehliadače ignorujú komentáre. Komentár CSS sa začína a končí / * * /.
6. Displej: Blok - Mnoho prvkov HTML je nastavených na tento režim zobrazenia. Prvky úrovne bloku v predvolenom nastavení zaberajú toľko miesta a nemôžu byť umiestnené na rovnakom riadku pomocou iného režimu zobrazenia. Je možné získať schopnosť meniť výšku a šírku prvku podľa vášho želania.
7. Farby v CSS: V týchto príkazoch CSS môžu byť farby definované vo vzorci RGB. Každý parameter definuje intenzitu týchto farieb a definuje novú farbu. Napríklad na zobrazenie čiernej by mali byť všetky farebné parametre nastavené na RGB (0, 0, 0).
8. Farba pozadia: Vlastnosť farba pozadia definuje farbu, ktorá sa má nastaviť na pozadí prvku. Farba sa dá ľahko definovať zadaním názvu farby, pridaním hodnoty Hex alebo nastavením hodnoty RGB
9. Obrázok na pozadí: Obrázok na pozadí sa dá nastaviť na ľubovoľný konkrétny obrázok podľa vášho výberu. Akonáhle je obrázok nastavený, opakuje sa a pokrýva celý prvok.
10. Okraje CSS: Príkaz CSS má rôzne vlastnosti okrajov, ktoré môžu pomôcť pri vytváraní priestoru okolo rôznych prvkov a tiež ich definujú za vonkajšími hranicami. CSS môže mať vlastnosti ako okraj-horný, okraj-pravý, okraj-dolný a okraj-ľavý.
Priebežné príkazy CSS
1. Výbery tried a ID: Okrem značky HTML môže užívateľ definovať aj vlastné výbery, ktoré môžu byť vo forme triedy alebo ID. Hlavným použitím týchto prvkov je, že môžete mať rovnaký prvok HTML a prezentovať ho odlišne na základe ID alebo triedy, ktorá je potrebná.
2. Pseudotrieda: Tieto triedy sa používajú na určenie konkrétneho stavu alebo vzťahu k danému selektoru. Tieto triedy môžu mať aj formu selektora: pseudo_class (property: value; ). Táto trieda je definovaná jednoduchým zadaním dvojbodky medzi selektor a pseudotriedu.
3. Formátovanie textu: Pridané texty je možné prispôsobiť a formátovať pomocou vlastností formátovania. Farbu je možné zmeniť pomocou kľúčového slova „color“. Rovnako tak zarovnanie textu. Použitím textovej dekorácie je možné nastaviť a odstrániť dekorácie. Transformácie sa môžu robiť s ohľadom na prípady.
4. Písma CSS: Písma v CSS majú rôzne rodiny ako generická rodina a rodina písiem. Rodina písiem je rodinou textov. Generický typ majúci skupinu rodín, ktoré majú podobný vzhľad, a typ písma, ktorý má špecifické písmo.
5. Ikony: Použitím knižnice ikon a pridaním názvu určených ikon triedy ikon môžete v CSS ľahko použiť.
6. Tabuľky: CSS môže tiež zobrazovať tabuľky a pomáhať pri prispôsobovaní hraníc, ich šírky a výšky. Použitím kľúčových slov, ako sú „okraj“, „šírka“ a výška, môže mať používateľ ľahko tabuľky na webovej stránke.
7. Určenie polohy: Táto vlastnosť určuje typ metódy určovania polohy, ktorá sa môže použiť pre akýkoľvek prvok. Táto poloha môže byť statická, relatívna, pevná, absolútna alebo lepkavá.
8. Pretečenie: Táto vlastnosť pomáha pri kontrole obsahu, ktorý je príliš veľký na to, aby sa zmestil do oblasti.
9. Float: Vlastnosť float umožňuje prvku vedieť, ako má plávať. Určuje, ktoré prvky sa môžu vznášať vedľa zúčtovaných prvkov.
10. Nepriehľadnosť: Táto vlastnosť definuje nepriehľadnosť alebo priehľadnosť ktoréhokoľvek prvku.
Pokročilé príkazy CSS
1. Zaoblené rohy CSS: Použitím vlastnosti „polomeru hranice“ môže byť prvku daný zaoblený roh. Môžete tiež určiť konkrétny roh zo štyroch rohov a vykonať zmeny podľa vášho výberu.
2. Ohraničenie obrázkov : Obrázok môžete nastaviť ako orámovanie okolo ľubovoľného prvku. Toto je možné pomocou vlastnosti border-image. Vytvorí záber a rozdelí ho na deväť častí a potom sa rohy v rohoch a stredné časti zopakujú alebo roztiahnu.
Tipy a triky na použitie príkazov CSS:
- Využite reset.css a resetujte všetky základné štýly.
- Použite skratku Shorthand CSS, aby ste mali kratší spôsob písania kódov Command CSS.
- Na ladenie, porozumenie a ladenie štýlov príkazov CSS používajte ladiace nástroje CSS.
záver
Príkaz CSS vám pomáha udržiavať informačný obsah dokumentu oddelený a pomáha pri jeho zobrazovaní. Pomáha predchádzať duplicite, ľahko udržiavať kód a používať rovnaký obsah s rôznymi štýlmi.
Odporúčané články
Toto bol sprievodca príkazmi CSS. Diskutovali sme tu o základných, stredných a pokročilých príkazoch CSS. Viac informácií nájdete aj v nasledujúcom článku -
- Najlepšie príkazy MySQL
- Príkazy PL / SQL
- Ako používať príkazy SQL
- Uhlové príkazy