CSS a velikost písma, obrázkové odkazy, obrázek u odkazu směřující do nového okna, obrázková galerie v CSS, průhlednost a krytí v CSS
Pokračovat ve čteníCSS průhlednost a nastavení krytí
Možná si někdo z vás pokládal otázku, zda lze pomocí CSS zprůhlednit obrázek, nebo text. Možná už se to někomu podařilo, možná ne. My se proletíme od základů CSS transparentnosti přes moře příkladů až po využití v praxi.
Jestli jste někdy překrývali vzorek na pozadí své stránky PNG obrázkem, abyste určitou plochu ztmavili, nebo zesvětlili, dělali jste to zbytečně – CSS práci průhledných PNG obrázků zastane. Stejně jako u PNG obrázků si můžete v CSS nastavit míru průhlednosti, velikost plochy, vzorek na pozadí, obrys. — abych nevykrádal z cizích webů, tak odkaz na originální článek (a pokud by to náhodou nefungovalo, klikněte zde)
Obrázková galerie pomocí CSS
Obrázková galerie, to jest stránka s mnoha malými náhledy obrázků, které slouží jako odkaz na jejich plné verze, se obvykle řeší tabulkou (značky table, tr a td). Z pohledu čístoty jazyka HTML však toto řešení není správné. Jak ale tabulku nahradit?
S kaskádovými styly (CSS) to jde překvapivě snadno. Dokonce můžeme udělat i něco, co tabulka neumí — galerii s plovoucí šířkou. Tu vám ukážu v dnešním prvním příkladu. Jako druhý příklad jsem pak připravil „klasickou“ galerii s pevně daným počtem obrázků na řádku, avšak opět bez pomoci tabulek.
- Galerie s plovoucí šířkou
Pokud si příklad otevřete prohlížečem podporujícím CSS (tj. IE 4+, Opera 5+, Mozilla/NN 6), uvidíte 10 malých obrázků. Některé jsou orientovány na šířku, některé na výšku; pod každým je textový titulek.
Důležité je, že stránka se roztahuje podle šířky okna prohlížeče, takže při šířce 800 pixelů uvidíte 2 řady po 5 obrázcích, při šířce 600 pixelů se vejdou na jeden řádek jen 4 obrázky (a řady jsou tedy 3) a při šířce 1000 pixelů se do řady vejde obrázků 7.
Pokud byste se podívali některým starým prohlížečem bez podpory CSS, viděli byste obrázky pod sebou, nikoli v řadách.
Zdrojový kód stránky je velmi jednoduchý. Každý obrázek je uzavřen v prvku DIV takto:
<div class=“thumbnail“>
<img src=“obr1.jpg“ alt=“Obrázek 1″ width=“100″ height=“75″ />
<p>Titulek obrázku 1</p>
</div>V definici stylů jsou pak třídě „thumbnail“ přiřazeny tyto vlastnosti:
div.thumbnail { float: left; width: 120px; height: 180px; margin: 1em; text-align: center; font-size: 0.8em; }Podstatná je vlastnost „float: left“, protože právě ta způsobuje, že se obrázky řadí do řádků (dokud je v okně prohlížeče místo) a ne pod sebe.
Vlastnosti „width“ a „height“ určují rozměry bloku obrázku včetně jeho titulku. Pro všechny obrázky jsou stejné, neboť jinak by náhledy v řádce epěkně „skákaly“. Důležité je správně dimenzovat výšku („height“), aby se do ní vešel i ten nejvyšší obrázek i se svým titulkem.
Vlastnost „margin: 1em“ zajišťuje odstup jednotlivých obrázků od sebe, a to jak horizontálně, tak vertikálně. Vlastnost „text-align: center“ centruje obrázek i titulek v rámci bloku který je 120 pixelů široký — „width: 120px“) a vlastnost „font-size: 0.8em“ nastavuje velikost písma titulku na 80%
základní velikosti písma stránky.
Důležité je, že galerie musí být ukončena odstavcem (nebo jiným prvkem) s vlastností „clear: both“.
- Galerie s pevnou šířkou
Galerie s pevnou šířkou dá v CSS, ku podivu, o něco víc práce. Pevnou šířkou v tomto případě ale nemyslím šířku stránky (ta je plovoucí jako v předešlém případě), ale počet obrázků na řádek.
V příkladu zde jsou na řádky vždy dva obrázky a každý je vodorovně vystředěn do bloku, který zabírá 45% šířky okna prohlížeče.
Zdrojový kód stránky je tentokrát složitější. Každý řádek galerie vypadá takto:
<div class=“row“>
<div class=“left“>
<img src=“obr1.jpg“ width=“256″ height=“192″ alt=“Obr, 1″ />
<p>Titulek obrázku 1</p>
</div>
<div class=“right“>
<img src=“obr1.jpg“ width=“256″ height=“192″ alt=“Obr. 2″ />
<p>Titulek obrázku 2</p>
</div>
</div>Jak vidíte, jsou zde hned tři třídy — „row“, která vymezuje blokřádku, „left“ označující levý obrázek a „right“ pro pravý obrázek. Tyto třídy jsou definovány takto:
.row {clear: both; width: 90%; margin: 10px 4%; }
.left {float: left; width: 49%; text-align: center; }
.right {float: left; width: 49%; text-align: center; }Obrázky uvnitř bloků „left“ a „right“ mají navíc nastaveny okraje takto:
.left img, .right img {margin: 10px auto;}Příklady: https://www.benni.cz/samples/samp02041a.html / https://www.benni.cz/samples/samp01.htm / https://www.benni.cz/samples/samp02.htm / https://www.benni.cz/samples/samp02041b.html / https://www.benni.cz/samples/samp03.htm
CSS a velikost písma
Každý tvůrce webových stránek čas od času potřebuje ovlivnit velikost písma. Jak to však udělat správně? To je problém, se kterým někdy bojují i zkušení webmasteři. V následujícím článku
se vám pokusím dát alespoň několik základních rad a doporučení.
(1) Nejprve tu máme universální formátovací tag <font>. Ten je ovšem v HTML 4 potlačen a neměl by tedy být nadále používán. Pokud ho neznáte, buďte rádi a pokud ho znáte a používáte,
pokuste se ho zapomenout.
(2) Další možností jsou tagy <small> a <big>. První z nich písmo o něco zmenší, druhý o něco zvětší. Teoreticky lze oba tagy vnořovat do sebe a dosáhnout tak víc velikostních stupňů než 3,
příliš se to ale nedoporučuje. O tom, o jak velkou změnu velikosti se skutečně bude jednat, nerozhodujete totiž vy, ale prohlížeč. Co se tedy může zdát hezké na vašem počítači, na jiném
může vypadat zcela jinak.
(3) Velikost písma ovlivňují i tagy pro nadpisy <h1> až <h6>. Nicméně ty jsou vyhrazeny opravdu jen pro nadpisy a pro samotnou změnu velikosti písma nám tedy nepomohou. Dokonce nám naopak problémy přidělají. Podle jednoho z pravidel dobrého stylu by totiž každý HTML dokument měl obsahovat právě jeden nadpis úrovně H1 a zpravidla i několik nadpisů úrovní H2 i nižších. Jenže nadpis H1 je většinou prohlížečů vykreslen až příliš veliký a často je tedy potřeba ho o něco zmenšit.
(4) Tím se dostáváme k poslednímu způsobu ovlivňování velikosti písma, a tím jsou kaskádové styly, neboli CSS. Styly dávají tvůrcům stránek nesrovnatelně větší možnosti než tagy <big> a <small>. Zároveň nejsou v kolizi z významovými tagy typu <h1> a mohou je dokonce vhodně doplňovat.
Jak tedy měnit velikost písma pomocí CSS. Začátek je překvapivě jednoduchý. Stačí nám totiž jediná vlastnost (property) CSS, a to font-size. Tím ale všechna jednoduchost končí. Vlastnost font-
size totiž může nabývat mnoha různých hodnot. Konkrétně se jedná o:
— absolutní velikost
— relativní velikost
— délku
— procento
Absolutní velikost se udává jedním ze 7 klíčových slov „xx-small“, „x-small“, „small“, „medium“, „large“, „x-large“ a „xx-large“, které představují 7 možných stupňů velikosti od nejmenší po největší. Poněkud v rozporu s názvem tyto velikosti až tak absolutní nejsou, neboť zcela závisí na prohlížeči. Implicitní velikost písma MSIE např. odpovídá velikost „small“ (malá), ačkoli by člověk spíše očekával „medium“ (střední).
Relativní velikost má jen dvě možné hodnoty – „smaller“ a „larger“ a v podstatě odpovídá tagům <small> a <big>.
Velikost lze udat i procentem a myslí se přitom procento z rodičovského prvku. V CSS je rodičovský prvek ten, ve kterém je daný tag vložen. V tomto příkladu
<body>
<p>Odstavec s <q>krátkým <strong>citátem</strong></q>.</p>
</body>je <body> rodičovským prvkem <p>, <p> je rodičovským prvkem <q> a <q> je rodičovským prvkem <strong>.
Jestliže tedy v definici CSS určíme:
body {font-size: medium}
q {font-size: 90%}
strong {font-size: 110%}bude písmo mezi a
o 10% menší než okolní a písmo mezi a naopak o 10% větší.
Háček je v tom, že IE3 implementoval tuto vlastnost špatně a percentuální rozdíl chápal oproti původní velikosti písma daného prvku, nikoli dle prvku rodičovského. Definice
h1 {font-size: 200%}pak způsobí, že je obsah tagů dvakrát větší než implicitní a nikoli dvakrát větší než běžné písmo body. Od IE4 a i v NN je to však již v pořádku, takže např. na stránce Sovy v síti jsem si troufl použít pro velikost písma pouze procenta, neboť u webmasterů používání IE3 neočekávám.
Nakonec jsem si nechal délku, přesněji hodnotu vlastnosti font-size udanou v délkových jednotkách. Až dosud měly všechny uvedené způsoby jedno společné. O skutečné velikosti písma na obrazovce uživatele rozhodoval výhradně prohlížeč, resp. sám uživatel. Všechny tyto způsobu totiž v kombinaci s běžnými prohlížeči umožňují, aby si uživatel nastavil velikost písma sám
To, že si uživatel může sám nastavit velikost písma je většinou v pořádku. Každý má jiný vkus a jinak silné či spíše slabé oči. Skutečná velikost navíc silně závisí na vlastnostech zobrazovacího média (např. rozlišení a velikost monitoru), a je tedy žádoucí, aby si ji uživatel mohl sám doladit. Jsou však případy, kdy z důvodů grafické úpravy kombinujete písmo s obrázkya případně tabulkami takovým způsobem, že změna velikosti písma by váš výtvor zcela rozházela. Pak je třeba použít délkových jednotek.
DÉLKOVÉ JEDNOTKY V CSS
CSS zná mnoho délkových jednotek a aby bylo zmatení pojmů dokonalé, člení je na relativní a absolutní. Tyto pojmy však nemají s absolutními a relativními velikostmi vlastnosti font- size popsanými výše nic společného.
Relativní délkové jednotky jsou „em“ (výška fontu daného prvku), „ex“ (výška písmene ‚x‘) a „px“ (pixel, obrazový bod).
Absolutními jednotkami pak jsou „in“ (palce), „cm“ (centimetry), „mm“ (milimetry), „pt“ (typografické body) a „pc“ (typografická míra pica). Povšimněte si, že všechny absolutní jednotky jsou navzájem převoditelné (1pc = 12pt, 1pt = 1/72in, 1cm = 10mm a 1in = 2,54cm). Z praktického hlediska tedy mají z absolutních jednotek význam jen typografické body – „pt„.
Relativní délkové jednotky „em“ a „ex“ se na velikost písma moc nehodí, neboť jsou právě z velikosti písma odvozeny. O to víc se však hodí na velikost různých mezer, okrajů, odrážek, atd.
Naproti tomu pixely („px“) jsou v určitých případech právě pro určení velikosti písma velice praktické. V pixelech se totiž zásadně udávají velikosti obrázků. A pokud chcete zachovat poměr
velikosti obrázků a písma, máte jedinou možnost – určit velikost písma v „px“.
Ještě dodejme, že ony absolutní jednotky (pt, mm, atd.) zase až tak absolutní ve skutečnosti nejsou. Výsledná velikost písma totiž silně závisí na vlastnostech výstupního média (monitoru, papíru) a na tom, jak se prohlížeč snaží médiu přizpůsobit. IE ve Windows tedy např. vesele zmenšuje s rostoucím rozlišením monitoru i písmo, jehož velikost je udána v „pt“ a tím stírá rozdíl mezi „pt“ a „px“. Některé prohlížeče a operační systémy se naopak snaží přizpůsobit skutečné velikosti a rozlišení monitoru. Výsledkem je, že ani u absolutních jednotek nevíte, co vlastně uživatel nakonec uvidí.
Obrázkové odkazy v CSS
Obrázkové odkazy pomocí CSS se využívají asi nejvíce u různých odkazů v podobě log. V případě použití stylů se zobrazí odkaz v podobě loga (obrázku) a v textové verzi už jen nadpis jako textový odkaz.
#logo img { max-width: 83px; height: auto; }<h3 id="logo"> <a href="../odkazy.html"><img src="./logo.gif" width="83" height="30" alt="Odkazy"></a> </h3>
Obrázek u odkazu směřující do nového okna
Návod jak si pomocí kaskádových stylů (CSS) přidat za odkaz směřující do nového okna (_blank) obrázek.
Jako první si musíte najít obrázek, který se umístí za odkaz. Hledejte jej pod názvem „link out“ pod článkem . Obrázek nakopírujte na FTP server do příslušné složky.
Úprava *.css stylu
Otevřte si váš *.css soubor a napište do něj:
a[href^='http:'] {padding-right:12px; background-image:url("link_out.gif"); background-position: right top; background-repeat: no-repeat}Cestu k obrázku si uprave dle sebe. A je to. Připojený soubor LinkOut
