Cascading Style Sheet (CSS) je systém pro kódování webových stránek, který umožňuje návrhářům manipulovat s několika funkcemi najednou přiřazením určitých prvků do skupin. Například pomocí kódu na pozadí webu mohou návrháři změnit barvu pozadí nebo obrázek na všech stránkách webu jedinou změnou souboru CSS. Zde je návod, jak vytvořit CSS pro základní web.
Kroky
Část 1 ze 4: Psaní vloženého CSS
Krok 1. Ujistěte se, že rozumíte základním značkám HTML
Měli byste vědět, jak značky fungují a jak
src
a
href
atributy.
Krok 2. Naučte se některé ze základních vlastností CSS
Zjistíte, že nemovitostí je velmi mnoho. Není však nutné se je všechny naučit.
-
Některé dobré základní vlastnosti CSS je znát
barva
a
rodina písem
- .
Krok 3. Přečtěte si o hodnotách pro každou příslušnou vlastnost
Všechny vlastnosti potřebují hodnotu. Pro
barva
vlastnost, můžete například zadat
Červené
hodnota.
Krok 4. Přečtěte si o
styl
Atribut HTML.
Používá se v prvku jako
href
nebo
src
. Chcete -li jej použít, vložte do uvozovek za znaménko rovnosti atribut CSS, dvojtečku a poté hodnotu vlastnosti. Toto je známé jako pravidlo CSS.
Krok 5. Pochopte, že inline CSS obvykle nepoužívají pro webové stránky profesionální weboví vývojáři
Vložené CSS mohou do dokumentu HTML přidat zbytečný nepořádek. Je to však skvělý způsob, jak se seznámit s tím, jak CSS funguje.
Část 2 ze 4: Psaní základních CSS
Krok 1. Spusťte program, který chcete použít
Mělo by vám to umožnit vytvářet soubory HTML a CSS.
Pokud nemáte nainstalovaný speciální program, můžete použít Poznámkový blok nebo jiný textový editor. Jednoduše uložte soubor jako textový soubor a soubor CSS
Krok 2. Otevřete soubor HTML pro svůj web
Měli byste to otevřít také pomocí editoru HTML, pokud jej máte nainstalovaný.
HTML editory vám umožňují upravovat HTML a CSS současně
Krok 3. Vytvořte značku v hlavě HTML
To vám umožní psát CSS bez potřeby samostatného souboru.
Krok 4. Vyberte prvek, ke kterému chcete přidat styl, a zadejte název prvku následovaný sadou složených závorek ({})
Aby byl váš kód čitelnější, vždy vložte druhou složenou závorku na vlastní řádek.
Krok 5. Mezi složená závorka zadejte pravidla CSS stejným způsobem jako pomocí
styl
atribut.
Každý řádek musí končit středníkem (;). Aby byl váš kód čitelný, každé pravidlo by mělo začínat na vlastním řádku a každý řádek by měl být odsazen.
Je velmi důležité si uvědomit, že tento styl ovlivní všechny prvky vybraného typu na stránce. Konkrétnější styling bude popsán v následující části
Část 3 ze 4: Pokročilejší CSS
Krok 1. Vytvořte soubor CSS, nikoli soubor HTML, a uložte jej pomocí souboru
.css
rozšíření.
Otevřete také svůj soubor HTML.
Krok 2. Vytvořte značku v HTML hlavě
To vám umožní propojit samostatný soubor CSS s vaším dokumentem HTML. Vaše značka odkazu vyžaduje tři atributy:
rel
typ
a
href
-
rel
znamená „vztah“a říká prohlížeči, jaký je vztah k dokumentu HTML. Tady by to mělo mít hodnotu
"šablona stylů"
- .
-
typ
udává, s jakým typem média je propojeno. Tady by to mělo mít hodnotu
"text/css"
-
href
- zde se používá podobně jako v prvku, ale zde musí odkazovat na soubor CSS. Pokud je soubor CSS umístěn ve stejné složce jako soubor HTML, je třeba do uvozovek zapsat pouze název souboru.
Krok 3. Vyberte prvky různých typů, ke kterým chcete přidat stejný styl
Přidat
třída
těmto prvkům přiřaďte a nastavte je na stejný název třídy, jaký si vyberete. Díky tomu budou mít vaše prvky stejný styl.
Krok 4. Přiřaďte, jaký styl dostane třída
Zadejte název třídy do souboru CSS s tečkou (.), Která mu předchází (tj.
.třída
).
Krok 5. Vyberte jednotlivé prvky, ke kterým chcete přidat speciální styl, a přidejte
id
atribut.
ID se vytvářejí v CSS pomocí symbolu libry (#) spíše než tečky.
ID jsou konkrétnější než třídy, takže ID přepíše jakýkoli styl třídy, pokud má atribut s jinou hodnotou než třída
Část 4 ze 4: Další informace
Krok 1. Navštivte školy w3
Jedná se o oficiální web zaměřený na výuku dovedností vývoje webu. W3 má spoustu referencí uvedených pro HTML a CSS, stejně jako pro další webové jazyky.
Krok 2. Najděte další weby specificky zaměřené na učení a výuku HTML a CSS
Weby jako CSS tricks.com jsou konkrétně zaměřeny na výuku CSS a webového designu. Nalezení renomovaných zdrojů vám pomůže na vaší cestě za učením.
Krok 3. Spojte se s webovými designéry a vývojáři
Jejich zkušenosti a know-how vás mohou naučit cenné znalosti a dovednosti.
Krok 4. Zobrazte zdrojový kód webových stránek, na které narazíte
Zobrazení CSS dobře vyvinutých webů vám může ukázat způsoby, jak navrhnout části webů. Zkopírování jako praxe a manipulace s kódem vám může pomoci naučit se používat různé atributy CSS.
