CSS3: Výukový program se všemi základy pro začátečníky
V tomto tutoriálu vám představíme CSS3. CSS3 je nový standard pro definování designu webové stránky nebo dokumentu. Spolu s HTML je CSS nejdůležitějším základem ve vývoji webu.
Výukový program CSS3: Požadavky
Než začnete programovat CSS, potřebujete editor. Doporučujeme bezplatný editor Notepad ++, který je k dispozici pouze pro Windows. Pokud pracujete s Macem, najdete zde dobré alternativy. Také potřebujete znalost HTML. Základy HTML5 lze nalézt v dalším praktickém tipu.
Výukový program: Struktura příkazů CSS
Nejprve se naučíme základní strukturu příkazů CSS.
- Při vytváření příkazu CSS se v zásadě musíte zeptat, kdo by měl vzít určitou hodnotu z určité vlastnosti.
- Příklad: Vše
Nadpisy by měly mít červenou hodnotu ve vlastnosti barvy písma.
- Syntaxe pak vypadá takto: [element] {[property]: [value]; }
- V našem příkladu obarvíme nadpis takto: h1 {color: red; }
- V složených závorkách může za sebou následovat libovolný počet párů hodnota-vlastnost.
- Důležité: Každý pár musí končit středníkem.
Výukový program CSS3: Vložení CSS do HTML
Existují tři způsoby, jak vložit CSS do HTML, ale pouze jeden z nich má smysl.
- Varianta 1: Úprava přímo v prvku pomocí atributu styl. příklad:
titulek
- To platí pouze pro tento jeden prvek. I zde lze postupně použít několik párů vlastností a hodnot.
- Varianta 2: Na začátku souboru HTML v rámci značky v dokumentu. Příklad: h1 {color: red; barva pozadí: modrá; }
- Varianta 3: outsourcing jiného dokumentu. Napište příkazy v externím souboru s příponou .css. Tento soubor pak zahrnete do hlavy HTML.
- Téměř v každém případě byste měli použít variantu 3. Toto je jediný způsob, jak použít design v několika souborech HTML, aniž byste museli několikrát psát stejný kód.
Výukový program CSS3: Prvky, ID a třídy jako selektory
První hodnota před složenými závorkami vždy odpovídá selektoru. To určuje, na koho se vztahuje následující.
- Den můžete jednoduše použít jako selektor. To pak ovlivní každý prvek této značky. Ve výše uvedeném příkladu by každý nadpis h1 byl červený.
- Alternativně můžete použít ID, abyste zajistili, že lze použít pouze jeden prvek. Chcete-li to provést, připojte atribut v prvku HTML:
Moje hlavička
- Poté na toto ID v listu CSS označte znak # před selektorem: #myHeader {color: red; }
- Alternativně můžete přiřadit třídy k ovlivnění některých, ale ne všech, prvků:
Moje hlavička
- Namísto znaku # použijte v CSS znak „.“ před selektorem: .myH1Class {color: red; }
Výukový program CSS: důležité funkce
Níže jsou uvedeny klíčové vlastnosti, které potřebujete k manipulaci vzhledu prvků.
- color: přiřadí barvu písma. Je předdefinováno mnoho běžných barev, například červená, černá, bílá, žlutá atd. Jednotlivé barvy můžete zadat jako hex hodnoty: # B3D2FF
- background-color: Použijte k přiřazení barvy pozadí. Můžete použít stejné barvy jako pro barvu.
- ohraničení: Definujte rámeček kolem prvku. rámeček: černý 2px pevný; vytvoří například černý rámeček.
- font-size: Nastavení velikosti písma. Relativní (em) nebo bodové (pt) hodnoty jsou zde běžné.
- width and height: Určete šířku a výšku prvků. To se obvykle provádí staticky prostřednictvím pixelů (px) nebo relativně k maximální hodnotě v procentech: div {width: 70%; výška: 300 pixelů; }
- float: Pomocí doleva a doprava určete, zda má být prvek zarovnán vlevo nebo vpravo.
- padding: Zadejte padding. Například můžete umístit text do pole.
- margin: Podobně jako u výplně, kromě toho, že zde zadáte okraj. Tímto způsobem můžete vytvořit mezeru mezi dvěma poli.
Výukový program CSS3: možnosti s CSS3
U CSS3 je méně často nutné vytvářet a integrovat vlastní grafiku, protože dynamicky lze vytvářet více efektů.
- neprůhlednost: S hodnotou mezi 0 a 1 můžete snadno určit průhlednost prvků.
- Barvy lze nyní zadat ve formátu HSL. „H“ znamená Hue (odstín), „S“ pro nasycení (saturace) a „L“ pro světlost: barva: hsl (300 100%, 60%);
- box-shadow: Přiřaďte stín oblasti. stín stínu: 10px 10px 10px červený; by vytvořil červený stín vpravo a dole.
- poloměr ohraničení: Jednoduše vytvořte zaoblené rohy pro povrchy nebo obrázky.
Jak změnit řádkování HTML pomocí CSS lze přečíst v dalším praktickém tipu.