Kako stilizirati sliku pomoću CSS-a

Kako stilizirati sliku pomoću CSS-a. Upotrijebite CSS za prikaz slika vaše web stranice na najbolji mogući način. U ovom ćete članku saznati gdje postaviti sliku i želite li uključiti ukrase poput obruba.

Plutanje i centriranje

1. korak

Umetnite svoju sliku na stranicu svojim uobičajenim načinom. Ne zaboravite uključiti odgovarajući alternativni tekst za sliku.

2. korak

Kako bi se vaš tekst prelamao oko slike s desne strane, slično kao na fotografiji koja predstavlja uvod u ovaj članak, upotrijebite CSS pravilo poput ovog:

img { float:lijevo; padding-desno:1em; }

Pravilo float:left čini da se slika pomakne na lijevu marginu. Pravilo desnog odstupanja sprječava da tekst naleti na desnu stranu slike. Ako je ovoj slici dodan obrub, ispuna bi došla između slike i obruba. Pogledajte odjeljak 2 za rad sa slikom s rubom.

3. korak

Da bi se tekst prelomio s lijeve strane, pomaknite sliku na desnu marginu. Upotrijebite ovakvo pravilo:

img { float:desno; padding-lijevo:1em; }

4. korak

Da biste centrirali sliku, prvo morate normalno ugrađeni element slike pretvoriti u element na razini bloka.

img { prikaz:blok; }

Korak 5

Zatim dodajte margine s lijeve i desne strane slike kako biste je centrirali. Ispravna vrijednost za lijevu i desnu marginu za centriranje bilo čega je auto.

img { prikaz:blok; margin-desno:automatski; margin-lijevo:auto; }

Granice i margine

1. korak

Obrubi se mogu koristiti za stvaranje efekta sjene ili izgleda okvira.

Za stvaranje debelog obruba nalik na okvir pomoću stila obruba utora, može se koristiti pravilo poput ovog:

img { float:lijevo; border-width:1em; rubni stil:žlijeb; boja obruba:#000000; }

Ostali stilovi obruba su čvrsti, točkasti, isprekidani, dvostruki, greben, umetnuti i krajnji. Širina se može izraziti u pikselima, em ili postocima.

2. korak

Obrubi se mogu primijeniti selektivno na gornji, desni, donji i lijevi dio slike. Ovo znanje možete koristiti za stvaranje efekta poput sjene.

3. korak

Upotrebom čvrstog obruba u 2 nijanse sive samo na desnom i donjem obrubu, dobit ćete efekt sjene.

img { float:lijevo; border-desno-style:čvrsta; boja ruba-desno:#CCCCCC; border-bottom-style:solid; boja obruba-dna:#999999; }

4. korak

Marža je izvan granice. Dodavanje margine s desne i donje strane slike spriječit će udar teksta o nju.

img { float:lijevo; border-desno-style:čvrsta; border-desno-width:8px; boja ruba-desno:#CCCCCC; border-bottom-style:solid; border-bottom-width:8px; boja obruba-dna:#999999; margina-desno:1em; margina-dno:1em; }

Savjet

Ako imate slike u više od jedne podjele (div) stranice, upotrijebite selektore potomaka da biste ih pojedinačno stilizirali. Mogući birači:#content img, #sidebar img, #feature img.