Rychlá příručka - CSS - Obrázky

Kaskádové styly tagu <img>

Obrázky se v kódu jazyka HTML vkládají pomocí tagu <img>, který je jeden z mála nepárový. Obrázek, který chceme vložit na web, bychom měli mít již předem upravený. Předem bychom měli v různých editorech obrázků a fotografií upravit nejen kvalitu obrázku, ale také jeho velikost. Poté můžeme nastavit pro obrázek jen pár maličkostí pomocí kaskádových stylů. V HTML části této příručky jste se mohli dočíst o parametrech align, alt, width a height. Parametr align pomocí kaskádových stylů nahradit nelze, můžeme ale použít kaskádový styl float, který nastaví obtékání obrázku ostatním obsahem. Jeho hodnotou mohou být slova left nebo right. Alternativní text nemůžeme nijak vytvořit pomocí kaskádových stylů, pokud tedy nějaký alternativní text chceme, vždy ho nastavíme parametrem alt k tagu <img> v kódu jazyka HTML. Další parametry, které upravují obrázek, již nahradit můžeme. Parametr width nahradíme kaskádovým stylem width, parametr height zase kaskádovým stylem height, výrazy jsou tedy stejné. Stejné jsou hodnoty těchto výrazů, parametry mají čísla, kaskádové styly mají také čísla, ale u nich nesmíme zapomenout na jednotku. Dále můžeme použít pro obrázek kaskádové styly margin (pro nastavení odsazení obrázku od okolí) a border (pro nastavení rámečku obrázku).

© 2013 Petr Lhotský - petrlhotsky@windowslive.com