Vizuálny štýl a rozloženie webových stránok sú diktované CSS alebo kaskádovými štýlmi. Ide o dokumenty, ktoré formujú značku HTML webovej stránky a poskytujú webovým prehliadačom pokyny na zobrazenie stránok, ktoré sú výsledkom tejto značky. CSS spracúva rozloženie stránky, rovnako ako farbu, obrázky na pozadí, typografiu a oveľa viac.
Ak sa pozriete na súbor CSS, uvidíte, že tieto súbory majú rovnakú syntax ako každý značkovací alebo kódovací jazyk. Každý štýl štýlu sa skladá z niekoľkých pravidiel CSS. Tieto pravidlá, ak sú prevzaté v plnom rozsahu, sú to, čo štýly stránok.
Časti pravidla CSS
Pravidlo CSS pozostáva z dvoch odlišných častí - selektora a deklarácie. Volič určuje, čo sa na stránke štýlu štýlu a deklarácia je, ako by mal byť štýl. Napríklad:
p {
farba: # 000;
}
Toto je pravidlo CSS. Výberová časť je "p", čo je volič prvkov pre "odseky". Preto by ste si vybrali VŠETKY odseky na webe a poskytnite im tento štýl (pokiaľ nie sú paragrafy, ktoré sú cielené konkrétnejšími štýlmi inde v dokumente CSS).
Časť pravidla, ktorá hovorí "farba: # 000;" je to, čo je známe ako deklarácia. Toto vyhlásenie sa skladá z dvoch častí - majetku a hodnoty.
Vlastníctvo je "farebným" dielom tohto vyhlásenia. Určuje, ktorý aspekt selektora bude vizuálne zmenený.
Hodnota je to, čím bude vybraná vlastnosť CSS zmenená. V našom príklade používame hexadecimálnu hodnotu # 000, čo je CSS skratka pre "čierne".
Ak použijeme toto pravidlo CSS, naša stránka bude mať zobrazené farby písma v čiernej farbe.
Základy vlastníctva CSS
Keď píšete vlastností CSS, nemôžete jednoducho urobiť ich podľa vlastného uváženia. Pre prípady, "farba" je skutočná vlastnosť CSS, takže ju môžete použiť. Táto vlastnosť určuje farbu textu elementu. Ak ste sa pokúsili použiť ako farbu textu "farbu textu" alebo "farbu písma" ako vlastnosti CSS, tieto by nepodarili, pretože nie sú skutočnými časťami jazyka CSS.
Ďalším príkladom je vlastnosť "pozadie-obrázok". Táto vlastnosť nastavuje obrázok, ktorý sa dá použiť ako pozadie:
.logo {
obrázok na pozadí: url (/images/company-logo.png);
}
Ak ste sa pokúsili používať ako vlastnosť "pozadie-obrázok" alebo "pozadie-grafika", zlyhali, pretože znova nie sú skutočnými vlastnosťami CSS.
Niektoré vlastnosti služby CSS
Existuje niekoľko vlastností CSS, ktoré môžete použiť na štýl stránky. Niektoré príklady sú:
- Hranice (vrátane hraničného štýlu, farby okraja a šírky ohraničenia)
- Vankúšik (vrátane čalúnenia, čalúnenia vpravo, spodného čalúnenia a polstrovania vľavo)
- Okraje (vrátane margin-top, margin-right, margin-bottom a margin-left)
- Font-family
- Veľkosť písma
- Farba pozadia
- šírka
- výška
Tieto vlastnosti CSS sú skvelé ako príklady, pretože sú veľmi jednoduché a aj keď nepoznáte CSS, môžete pravdepodobne hádať, čo robia na základe ich mien.
Existujú aj iné vlastnosti CSS, s ktorými sa stretnete, čo nemusí byť tak zrejmé, ako fungujú na základe ich názvov:
- Plavák
- jasný
- pretekať
- Text-transform
- Z-index
Keď sa dostanete hlbšie do webového dizajnu, narazíte (a použijete) všetky tieto vlastnosti a ešte viac!
Vlastnosti vyžadujú hodnoty
Zakaždým, keď používate vlastnosť, musíte jej dať hodnotu - a určité vlastnosti môžu prijímať iba určité hodnoty.
V prvom príklade objektu "farba" musíme použiť hodnotu farby. Môže to byť hexadecimálna hodnota , hodnota RGBA alebo dokonca kľúčové slovo farieb . Ktorákoľvek z týchto hodnôt by však fungovala, keby ste s touto vlastnosťou použili slovo "ponurý", nebola by nič, pretože ako popisné, ako to môže byť, nie je v CSS uznávanou hodnotou.
Náš druhý príklad "pozadia-obrázok" vyžaduje, aby sa cesta k obrázku použila na načítanie aktuálneho obrázka zo súborov vašej lokality. Toto je požadovaná hodnota / syntax.
Všetky vlastnosti služby CSS majú hodnoty, ktoré očakávajú. Napríklad:
- Hranica farby očakáva farebnú hodnotu
- Hraničná veľkosť očakáva veľkosť veľkosti, ako sú pixely alebo percentá
- Štýly hraníc očakávajú, že jeden z rezervovaných štýlov použitých pre túto vlastnosť, ako napríklad "solid"
Ak prejdete zoznamom vlastností CSS, zistíte, že každý z nich má konkrétne hodnoty, ktoré použije na vytvorenie štýlov, pre ktoré sú určené.
Upravil Jeremy Girard