Kép stílusozása CSS-sel
Hogyan alakítsunk ki egy képet CSS-sel. Használja a CSS-t, hogy a lehető legjobb módon mutassa be webhelye képeit. Ebből a cikkből megtudhatja, hová helyezze el a képet, és hogy bele kell-e helyeznie dekorációkat, például szegélyeket.
Lebegés és központosítás
1. lépés
Illessze be a képét az oldalra a szokásos módon. Ne felejtsen el megfelelő alternatív szöveget beilleszteni a képhez.
2. lépés
Ha azt szeretné, hogy a szöveg a jobb oldali kép körül – hasonlóan a cikket bemutató fotóhoz – kerüljön körbe, használjon egy ehhez hasonló CSS-szabályt:
img { float:left; padding-right:1em; }
A float:left szabály a képet a bal margóra mozgatja. A jobb oldali kitöltés szabály megakadályozza, hogy a szöveg közvetlenül a kép jobb oldalához csapódjon. Ha szegélyt adnak ehhez a képhez, akkor a kép és a szegély közé párnázás kerülne. A szegélyes kép kezeléséhez lásd a 2. részt.
3. lépés
A szöveg bal oldali tördeléséhez úsztassa a képet a jobb margóra. Használjon ehhez hasonló szabályt:
img { float:jobbra; padding-bal:1em; }
4. lépés
Egy kép középre állításához először a szokásosan soron belüli képelemet blokk szintű elemmé kell tenni.
img { display:block; }
5. lépés
Ezután adjon hozzá margókat a kép bal és jobb oldalához, hogy középre helyezze azt. A bal és a jobb margó megfelelő értéke bárminek középre állításához az automatikus.
img { display:block; margó-jobb:auto; margó-bal:auto; }
Szegélyek és margók
1. lépés
A szegélyek segítségével árnyékoló hatást vagy keret megjelenését hozhatja létre.
Vastag, keretszerű szegély létrehozásához a barázdaszegély stílus használatával egy ehhez hasonló szabály használható:
img { float:left; keret szélessége:1em; border-style:groove; keretszín:#000000; }
Egyéb szegélystílusok:tömör, pontozott, szaggatott, dupla, gerinc, betét és kiinduló. A szélesség pixelben, ems-ben vagy százalékban fejezhető ki.
2. lépés
A szegélyek szelektíven alkalmazhatók a kép felső, jobb, alsó és bal oldalán. Ezt a tudást felhasználhatja egy árnyékhoz hasonló hatás létrehozására.
3. lépés
Ha a szürke 2 árnyalatát tartalmazó tömör keretet csak a jobb és az alsó szegélyen használ, vetett árnyékhatást kap.
img { float:left; border-right-style:tömör; keret jobb oldali szín:#CCCCCC; border-bottom-style:tömör; keret-alsó szín:#999999; }
4. lépés
A margó a határon kívül van. Ha a kép jobb oldalán és alján némi margót ad, megakadályozza, hogy a szöveg nekiütődjön.
img { float:left; border-right-style:tömör; szegély jobb oldali szélesség:8 képpont; keret jobb oldali szín:#CCCCCC; border-bottom-style:tömör; keret-alsó szélesség:8 képpont; keret-alsó szín:#999999; margó-jobb:1em; margó-alsó:1em; }
Tipp
Ha egy oldalon több felosztásban (div) is vannak képei, a leszármazott választókkal egyedileg alakíthatja ki őket. Lehetséges kiválasztók:#content img, #sidebar img, #feature img.