Dnes si prakticky vyzkoušíme, jak jednoduše je možné měnit vzhled celé webové prezentace, a to během několika minut.
V průběhu celé práce jsme upravovali soubor styly.css, kam jsme si ukládali definice jednotlivých stylů. Tento soubor spolupracuje s každou internetovou stránkou, kterou jsme zpracovali. Je to v důsledku toho, že každá stránka má uvnitř hlavičky <head>...</head> vložený následující odkaz:
<link type="text/css" href="styly.css" mce_href="styly.css" rel="stylesheet">
Tento odkaz zajišťuje, že po načtení stránky do prohlížeče se každá HTML značka, kterou použijeme při psaní stránky, bude chovat podle toho, jaký styl jsme pro ni nadefinovali v souboru styly.css.
Nejprve si prakticky ukážeme, jak měnit barvy na stránce. Barva může obecně být v souboru styly.css definována buď názvem barvy, nebo jejím číselným (hexadecimálním) označením.
Názvy barev jsou definovány pouze pro některé barvy, většinou používáme tedy číselné označení barvy. Barvy můžeme definovat ve stylech určených pro nejrůznější prvky stránky - pozadí, text, tlačítka, tabulku nebo její jednotlivé buňky apod.
Přistoupíme tedy k praktickému zásahu do souboru styly.css, který otevřeme pomocí programu TopStyleLite.
Jako první je zde nadefinován styl pro značku <body>. Zde také nalezneme první definici barvy - background-color. Je zapsána pomocí číselného (hexadecimálního) vyjádření barvy.
Jestliže umístíme kurzor do řádku s vlastností background-color, zobrazí se tato vlastnost a její hodnota také v seznamu Style-inspector (vidíme zde i barevné políčko s náhledem barvy):
Po umístění kurzoru na zde zobrazený zápis barvy se…
