Hlavní navigace

Kapka CSS - Kaskádové styly 2. díl

1. 3. 2001

Sdílet

Pokud jste již četli první díl tohoto seriálu, věřím, že nejde jen o pouhounáhodu a vaše zraky teď spočinuly na tomto místě zcela záměrně, očekávajíc další povídání o probl...
Pokud jste již četli první díl tohoto seriálu, věřím, že nejde jen o pouhou
náhodu a vaše zraky teď spočinuly na tomto místě zcela záměrně, očekávajíc
další povídání o problematice Kaskádových stylů, abyste si jimi mohli své HTML
stránky zase drobet přikrášlit. Minule jsme z úvodní teorie probrali popisy
všech možných syntaxí a deklarací Kaskádových stylů, a v příkladech jsme
přikročili k několika prvním stylům. Co jsme nakousli, v tom budeme samozřejmě
dnes pokračovat. Znamená to, že si tentokráte uvedeme již samotné styly s
popisy, co a jak dělají a jak je správně zapisovat. Dnešní díl bude ve znamení
tabulek, plných různých skupin stylů pro změnu vlastností barev a fontu (tedy
písma). Dodám jen, že kladu maximální důraz na snadnou pochopitelnost obsahu
článku; pokud tedy komukoliv nebude cokoliv jasné, může se na mne obrátit s
dotazem, který se mu pokusím zodpovědět. Posílejte mi je na mou e-mailovou
adresu j.kysela@centrum.cz. Tak tedy, začněme:

Definice stylů

VLASTNOSTI BAREV

Těmito styly měníme barvu popředí (v případě, že popředím je text, pak barvu
onoho textu) a pozadí daného elementu. Navíc lze jako pozadí použít i velice
efektivního potexturování daného elementu (tedy "potažení" elementu nějakým
obrázkem).

V tomto příkladu měníme vlastnosti elementu H1, tj. nadpisu o velikosti č. 1
(jelikož celé pozadí textu potexturujeme obrázkem \ell.gif\, je uvedení barvy
pozadí \yellow\ prakticky zbytečné projeví se teprve až když úmyslně či omylem
neumístíme obrázek do adresáře)



či jednodušeji:



V těle HTML pak tedy kupříkladu uvedeme:

Černá magie CSS! ;)




Vlastnosti fontu

Tyto styly zase slouží k různým hrátkám s fonty. Nabízejí tak každopádně
podstatně více, než klasické nastavování písma tagem HTML. Níže uvedený příklad
způsobí, že hypertextový odkaz (resp. text na odkaz směřující) bude po najetí
na něj kurzorem myši vždy vypsán tučnějším písmem (u NN je použitá pseudotřída
podporována až od verze 6, u Opery od verze 4):



či třeba nastavíme vlastnosti fontu u textu vypsaného v odstavci a
předformátovaném textu:


Byl pro vás článek přínosný?