CSS – style Mgr. Lenka Švancarová. CSS – značka style (textstyle.html)

Prezentace na téma: "CSS – style Mgr. Lenka Švancarová. CSS – značka style (textstyle.html)"— Transkript prezentace:

1 CSS – style Mgr. Lenka Švancarová

2 CSS – značka style (textstyle.html)

3 p { color: #000099; background-color: yellow; padding: 30px; margin-right: 20%; } Lorem Ipsum Lorem Ipsum

4 CSS – značka style Definici CSS lze vkládat do párové značky style, která se umisťuje do hlavičky dokumentu. Pro zápis CSS ve značce style platí stejná pravidla jako pro zápis CSS do externího souboru. Vždy se podle předpisu formátuje právě a jenom stránka, v níž je umístěn. Vhodné pro jednostránkový web nebo pro podtržení větší důležitosti podstránky.

5 CSS – značka style V minulosti se obsah značky style uváděl v komentářích. Pokud prohlížeč neuměl CSS mohl tak předpis lépe správně ignorovat. <!-- body { background-color: #000000; } //--> Dnes komentáře nejsou nutné, protože všechny prohlížeče CSS umí.

6 CSS – atribut style (textstyle.html) <p style= "color:black; background-color:#99ff66;"> Lorem Ipsum Do prvního odstavce přidej atribut style, a to nejprve pouze s vlastností color a hodnotou (stránku si zobraz v prohlížeči). Přidej vlastnost background-color s hodnotou. Přidej další formátování.

7 CSS – atribut style Vložení stylopisu pomocí atributu style se nazývá individuální definice stylu. Využívá se střídmě a pouze v případech, že je toto formátování v rámci stránky jen na jednom místě, které chci zvýraznit.  Jedna důležitá novinka či akce (firmy)  Jeden velmi důležitý odkaz  Jeden stěžejní obrázek nebo seznam

8 CSS – kdo má přednost V rámci tvorby stránek lze využít všechny možnosti vkládání stylů současně. Při kolizi má přednost  individuální definice před  značkou style a ta má přednost před  externí definicí CSS, jinak se stylopisy skládají. Například pokud v externím souboru zadefinuji bílý text a pomocí style černé pozadí, budu mít bílý text na černém pozadí.

9 CSS – style V PSPadu si otevři soubor matematickytest.html.  U nadpisu Skupina A vymaž atribut align a umísti jej vpravo za použití CSS.  Změň barvu všech horních a dolních indexů. Dolní index 2 bude mít jinou barvu než dolní index 1.  Stránku doformátuj za pomocí CSS. Konečný vzhled nechávám na tobě.