Co jsou styly v html. Navrhování html značek s atributem style (vestavěné styly CSS)
CSS je zkratka pro „Cascading Style Sheets“, což znamená „Cascading Style Sheets“. Používá se k návrhu webových stránek. Pokud HTML kód obsahuje obsah (to, co prohlížeč zobrazí), pak CSS určuje jeho design (jak jej prohlížeč zobrazí). Krása CSS spočívá v tom, že pomocí jednoho stylu můžete navrhnout všechny stejné typy prvků stránky nebo celého webu (všechny odkazy, odstavce, seznamy najednou). Pomocí stylu CSS jednou definujete, jak má konkrétní prvek, například obrázky, vypadat, a změní svůj design ve všech dokumentech najednou. Chcete-li změnit formátování textu na svém webu, stačí změnit kód CSS pouze jednou.
Základní prvky CSS
Stejně jako HTML se skládá ze značek, atributů a hodnot, CSS se skládá ze svých vlastních prvků. Podstatu konstrukcí CSS lze vysvětlit takto: „Určete, který prvek stránky se má stylizovat, a určete, jak jej stylovat.“ Zde jsou stavební kameny CSS.
- Volič. Identifikátor, který prohlížeči sděluje, na který prvek stránky má použít návrh. Prohlížeč díky němu „pochopí“, že styl je určen například pro návrh seznamů nebo tabulek.
- Blok deklarace stylu. Píše se za selektorem a je uzavřeno ve složených závorkách. Specifikuje styl prvku (jeho design). Blok deklarace stylu se skládá ze dvou částí.
- Vlastnictví. Obdoba atributu v HTML. Určuje, která vlastnost vzhledu se změní.
- Význam. Zadává se do vlastnosti pomocí dvojtečky a přesně určuje, jak se vlastnost změní.
V bloku deklarace stylu může být několik vlastností a hodnot, v takovém případě jsou uvedeny oddělené středníkem.
Typy voličů
V závislosti na vlastnostech prvků stránky, které definují, se selektory dodávají v různých typech.
- Univerzální. Nastaví pravidla pro všechny prvky stránky, které nemají nastavena jiná pravidla.
Kód * (velikost písma: 14px;) nastaví velikost písma na 14 pixelů pro všechny prvky dokumentu, pro které nejsou určena jiná pravidla, pomocí jiných selektorů. - Tega. Tento typ selektoru určuje pravidla formátování pro obsah konkrétní značky HTML. Název selektoru je stejný jako název deskriptoru, pouze se píše bez lomených závorek: p, h1, ul.
Například kód h2 (červená barva;) nastaví barvu textu na zelenou pro všechny nadpisy druhé úrovně, tedy obsah značek . - Atribut. Pomocí této skupiny selektorů můžete určit styl obsahu všech značek, které mají zadaný konkrétní atribut. Selektory lze přesněji specifikovat zadáním nejen názvu atributu, ale také přiřazené hodnoty a názvu tagu, který jej obsahuje. Toho lze využít k tomu, aby byl design individuálnější.
- třída. Typ selektorů, když potřebujete jinak formátovat obsah značek stejného typu. Například chcete, aby byly odkazy ve spodní části webu červené, zatímco všechny ostatní by měly zůstat modré, jak byly. Chcete-li použít pravidla třídy na prvek webu, musíte v atributu zadat název třídy třída odpovídající značku.
Řekněme pomocí třídy krok jednotlivé prvky musí mít levý okraj 15 pixelů.
CSS kód bude vypadat takto:
Krok (levý okraj: 15px;)
Kód HTML, který připojí prvek k pravidlu, bude:
Odsazený text
- ID. Používá se ve spojení s atributem id HTML tag a používá se, když je třeba nastavit vlastnosti pro jeden prvek. Na rozdíl od selektoru třídy, jehož názvu předchází tečka, se zapisuje pomocí hash:
#exclusive (barva:oranžová;)
- Kontextové. V HTML se určité značky často nacházejí uvnitř jiných značek a kontextové selektory pomáhají definovat pravidla právě pro takové případy. Můžete je například použít k formátování položek v číslovaných seznamech nebo textu kurzívou uvnitř odstavců:
P i (fint-family: Century;)
Zbývající skupiny selektorů jsou založeny na kombinaci uvedených typů a také na principu dědičnosti, kdy podřízený prvek přebírá vlastnosti svého rodiče.
Kombinování a seskupování voličů je výhodné v mnoha situacích. Například nastavit pravidla třídy krok pouze u odkazů je třeba zadat oba selektory oddělené tečkou (nejprve značku, poté třídu):
A.step (levý okraj: 15px;)
Jak zahrnout CSS do stránky HTML?
Existuje několik způsobů, jak zajistit vzájemnou interakci nástrojů pro tvorbu webových stránek. Na základě způsobu přidávání jsou styly rozděleny do následujících kategorií.
Vestavěné styly
Nastavte v dokumentu přímo do HTML tagu pomocí atributu styl. Mít nejvyšší prioritu. To znamená, že pokud je pro stejný prvek specifikován jiný design, pak bude dána přednost pravidlu, které je napsáno uvnitř značky. Selektor pro vestavěný styl není potřeba, protože souvislost mezi stylem a tagem je zřejmá - je v něm specifikován design tagu.
Následující kód nastavuje velikost a barvu písma pro text uvnitř značky
Text formátovaný pomocí interního stylu.
Globální styly
Nastaveno podle značky …