Hvordan å style et bilde med CSS

Hvordan å style et bilde med CSS. Bruk CSS til å presentere nettstedets bildene på best mulig måte. I denne artikkelen vil du lære hvor du skal plassere et bilde og om ikke å inkludere dekorasjoner som grenser.

Bruksanvisning

Flytende og Sentre

1 Sett bildet på siden med din vanlige metoden. Ikke glem å ta med egnet alternativ tekst for bildet.

2 For å gjøre teksten brytes rundt bildet til høyre, på samme måte som det er i bildet innføre denne artikkelen, kan du bruke en CSS-regel som dette:

img {
float: left;
padding-right: 1em;
}

Den float: left regel gjør bildet flytte til venstre marg. Den padding-right regel holder teksten fra bumping rett opp mot høyre side av bildet. Hvis en ramme ble lagt inn i dette bildet, ville padding komme mellom bildet og den grensen. Se avsnitt 2 for å jobbe med et bilde med en ramme.

3 For å gjøre teksten brytes til venstre, flyter på bildet til høyre marg. Bruk en regel som dette:

img {
float: right;
padding-left: 1em;
}

4 For å sentrere et bilde må du først gjøre den normalt inline bildeelement i en blokk nivå element.

img {
display: block;
}

5 Deretter legger du margene til venstre og høyre for bildet for å sentrere den. Den riktige verdien for venstre og høyre marg for å sentrere alt er auto.

img {
display: block;
margin-right: auto;
margin-left: auto;
}

Grenser og marger

6 Kantlinjer kan brukes til å skape en rulleskyggeeffekt eller utseendet av en ramme.

For å lage en tykk, rammelignende grensen ved å bruke sporet grensen stil, kan en regel som dette brukes:

img {
float: left;
border-width: 1em;
border-style: groove;
border-color: # 000000;
}

Andre grense stiler er solid, prikkete, stiplede, dobbelt, møne, innfelt og begynnelsen. Bredde kan uttrykkes i piksler, EMS, eller prosenter.

7 Grenser kan brukes selektivt til toppen, til høyre, nederst og til venstre i bildet. Du kan bruke denne kunnskapen til å skape en effekt som en skygge.

8 Ved hjelp av en solid ramme i 2 nyanser av grått på akkurat rett til kantlinjer, får du en skygge effekt.

img {
float: left;
border-right-style: solid;
border-right-color: #CCCCCC;
border-bottom-style: solid;
border-bottom-color: # 999999;
}

9 Margin er utenfor grensen. Legge noen margin på høyre og nederst på bildet vil at denne teksten bumping mot den.

img {
float: left;
border-right-style: solid;
border-right-width: 8px;
border-right-color: #CCCCCC;
border-bottom-style: solid;
border-bottom-width: 8px;
border-bottom-color: # 999999;
margin-right: 1em;
margin-bottom: 1em;
}

Hint

• Hvis du har bilder i mer enn en divisjon (div) på en side, bruker kommer velgere til å style dem individuelt. Mulige velgere: #content img, #sidebar img, #feature img.