Kako oblikovati sliko s CSS

Kako oblikovati sliko s CSS. Uporabite CSS za predstavitev slik vašega spletnega mesta na najboljši možni način. V tem članku boste izvedeli, kam postaviti sliko in ali vključiti okraske, kot so obrobe.

Lebdenje in centriranje

1. korak

Vstavite svojo sliko na stran na vaš običajen način. Ne pozabite vključiti ustreznega nadomestnega besedila za sliko.

2. korak

Če želite, da se vaše besedilo ovije okoli slike na desni, podobno kot je na fotografiji, ki predstavlja uvod v ta članek, uporabite pravilo CSS, kot je to:

img { float:levo; oblazinjenje-desno:1em; }

S pravilom float:left se slika premakne na levi rob. Pravilo desnega odmika preprečuje, da bi besedilo udarilo naravnost ob desno stran slike. Če bi tej sliki dodali obrobo, bi med sliko in obrobo prišlo do oblazinjenja. Za delo s sliko z obrobo glejte razdelek 2.

3. korak

Če želite preliti besedilo na levi, premaknite sliko na desni rob. Uporabite takšno pravilo:

img { float:desno; oblazinjenje-levo:1em; }

4. korak

Če želite srediti sliko, morate najprej spremeniti običajno vstavljeni slikovni element v element na ravni bloka.

img { prikaz:blok; }

5. korak

Nato dodajte robove levo in desno od slike, da jo postavite na sredino. Pravilna vrednost za levi in ​​desni rob za centriranje česar koli je samodejno.

img { prikaz:blok; rob-desno:samodejno; rob-levo:samodejno; }

Obrobe in robovi

1. korak

Obrobe lahko uporabite za ustvarjanje učinka padajoče sence ali videza okvirja.

Če želite ustvariti debelo, okvirju podobno obrobo s slogom utorne obrobe, lahko uporabite pravilo, kot je to:

img { float:levo; širina roba:1em; slog obrobe:utor; barva obrobe:#000000; }

Drugi slogi obrob so polne, pikčaste, črtkane, dvojne, grebenaste, vstavljene in izhodne. Širina je lahko izražena v slikovnih pikah, em ali odstotkih.

2. korak

Obrobe lahko selektivno uporabite na vrhu, desni, spodnji in levi strani slike. To znanje lahko uporabite za ustvarjanje učinka, kot je padajoča senca.

3. korak

Če uporabite polno obrobo v 2 odtenkih sive samo na desni in spodnji obrobi, dobite učinek padajoče sence.

img { float:levo; rob-desni slog:trdna; barva-desne-obrobe:#CCCCCC; slog obrobe na dnu:trdna; barva spodnjega roba:#999999; }

4. korak

Marža je zunaj meje. Če dodate rob na desni in spodnji strani slike, boste preprečili, da bi se besedilo zaletelo obnjo.

img { float:levo; rob-desni slog:trdna; robna-desna širina:8px; barva-desne-obrobe:#CCCCCC; slog obrobe na dnu:trdna; robna-spodnja širina:8px; barva spodnjega roba:#999999; rob-desno:1em; rob-spodaj:1em; }

Nasvet

Če imate slike v več kot eni delitvi (div) strani, uporabite izbirnike potomcev, da jih stilizirate posamično. Možni izbirniki:#content img, #sidebar img, #feature img.