Vizuální styl a uspořádání webových stránek jsou dány CSS nebo kaskádovými styly. Jedná se o dokumenty, které formují HTML značku webové stránky a poskytují webovým prohlížečům pokyny, jak zobrazovat stránky, které jsou výsledkem této značky. CSS zpracovává rozvržení stránky, stejně jako barvu, obrázky na pozadí, typografii a mnoho dalšího.
Pokud se podíváte na soubor CSS, uvidíte, že tyto soubory mají specifickou syntaxi jako všechny značky nebo kódovací jazyk. Každý stylový list se skládá z několika pravidel CSS. Tato pravidla, jsou-li přijata v plném rozsahu, jsou to, co stylové stránky.
Části pravidla CSS
Pravidlo CSS se skládá ze dvou odlišných částí - voliče a deklarace. Volič určuje, co je na stránce stylizováno a prohlášení je, jak by mělo být navrženo. Například:
p {
barva: # 000;
}}
Toto je pravidlo CSS. Volicí část je "p", což je volič prvků pro "odstavce". Z tohoto důvodu byste zvolili VŠECHNY odstavce na webu a poskytli byste jim tento styl (pokud tam nejsou odstavce, které jsou cíleny konkrétnějšími styly jinde v dokumentu CSS).
Část pravidla, která říká "barva: # 000;" je to, co je známé jako deklarace. Toto prohlášení se skládá ze dvou kusů - vlastnictví a hodnoty.
Vlastnost je částí "barvy" tohoto prohlášení. Určuje, který aspekt selektoru bude vizuálně měněn.
Hodnota je to, čím bude zvolená vlastnost CSS změněna. V našem příkladu používáme hex hodnotu # 000, což je zkratka CSS pro "černé".
Takže pomocí tohoto pravidla CSS by naše stránka měla odstavce zobrazené v barvě černé barvy.
Základy vlastností CSS
Při psaní vlastností CSS nemůžete jednoduše vytvořit, jak uznáte za vhodné. U instancí je "barva" skutečná vlastnost CSS, takže ji můžete použít. Tato vlastnost určuje barvu textu prvku. Pokud jste se pokusili použít jako textové barvy nebo "font-color" jako vlastnosti CSS, tak by selhaly, protože nejsou aktuálními částmi jazyka CSS.
Jiným příkladem je vlastnost "obrázek na pozadí". Tato vlastnost nastavuje obrázek, který lze použít pro pozadí, například:
.logo {
obrázek na pozadí: url (/images/company-logo.png);
}}
Pokud jste jako vlastnost zkusili použít jako pozadí "background-picture" nebo "background-graphic", pak by se nepodařilo, protože opět nejsou vlastnictvím vlastností CSS.
Některé vlastnosti CSS
Existuje celá řada vlastností CSS, které můžete použít pro stylování webu. Některé příklady jsou:
- Hranice (včetně okrajového stylu, barvy ohraničení a šířky okraje)
- Padování (včetně polstrování, polstrování vpravo, polstrování dole a polstrování vlevo)
- Okraje (včetně margin-top, margin-right, margin-bottom a margin-left)
- Rodina písma
- Velikost písma
- Barva pozadí
- Šířka
- Výška
Tyto vlastnosti CSS jsou skvělé, které lze použít jako příklady, protože jsou všechny velmi jednoduché a dokonce i když neznáte CSS, můžete pravděpodobně hádat, co dělají na základě jejich jména.
Existují další vlastnosti CSS, se kterými se setkáte, což nemusí být tak zřejmé, jak fungují na základě jejich jména:
- Plovák
- Průhledná
- Přetékat
- Textová transformace
- Z-index
Jak se dostanete hlouběji do webového designu, narazíte (a použijete) všechny tyto vlastnosti a další!
Vlastnosti potřebné hodnoty
Pokaždé, když používáte vlastnost, musíte jí dát hodnotu - a některé vlastnosti mohou přijímat pouze určité hodnoty.
V našem prvním příkladu vlastností "barva" musíme použít hodnotu barvy. Mohlo by to být hexadecimální hodnota , hodnota RGBA nebo klíčová slova . Kterákoli z těchto hodnot by však fungovala, kdybyste použili slovo "ponurý" s touto vlastností, nic by neudělalo, protože v deskriptivním slova, jako je toto slovo, to není uznaná hodnota v CSS.
Náš druhý příklad "pozadí-obrázek" vyžaduje, aby se cesta ke snímku použila k načtení skutečného obrázku ze souborů vašeho webu. Toto je požadovaná hodnota / syntaxe.
Všechny vlastnosti služby CSS mají hodnoty, které očekávají. Například:
- Barva ohraničení očekává hodnotu barvy
- Velikost ohraničení očekává velikost velikosti, jako jsou pixely nebo procenta
- Styl stylu očekává, že jeden z rezervovaných stylů použitých pro tuto vlastnost, jako "solidní"
Pokud procházíte seznamem vlastností CSS, zjistíte, že každá z nich má specifické hodnoty, které použije při vytváření stylů, pro které jsou určeny.
Upravil Jeremy Girard