Hvordan bruke CSS til å vikle et bilde med en bildetekst

Hvordan bruke CSS til å vikle et bilde med en bildetekst


Cascading Style Sheets er brukt i koding websider, uten å stole på bordene for å gjengi konsekvent på tvers av nettlesere. Fordelene med å bruke en ekstern CSS, inkluderer raskere lasting sider, muligheten til å gjøre en enkel endring til et stilark for hele nettstedet replikering, og reduksjon av rot, noe som gjør din forenklet koden mer elegant og tilgjengelig. Det er to hovedelementer å vurdere når innpakning et bilde med CSS, "bilde float" definisjon i stilarket, og "flyte attributten" i bildet styling på målwebsiden.

Bruksanvisning

Innpakning en bildetekst til et bilde ved hjelp av CSS

1 Hvordan bruke CSS til å vikle et bilde med en bildetekst

Lag en definisjon for flytende bilde i stilarket.

I den eksterne CSS dokumentet, lage en definisjon som heter "floatLeft '. Koden vil se slik ut:

img.floatLeft {

float: left;

}

2 Hvordan bruke CSS til å vikle et bilde med en bildetekst

Legg attributter til din definisjon å style din klasse.

Legg polstring rundt fløt bildet for å skape et rom mellom grensene av bildet, og teksten som brytes rundt det.

img.floatLeft {

float: left;

padding: 10px 25px 10px 25px;

}

Her blir polstringen satt til 10 bildeelementer på toppen og bunnen av bildet; og 25 piksler til venstre, og til høyre.

3 Hvordan bruke CSS til å vikle et bilde med en bildetekst

I stilarket, skape en klassedefinisjon for bildeteksten.

Legg en definisjon som heter "captionText" til eksternt stilark til å styre utseendet på bildeteksten:

.captionText {

font-family:Verdana, Arial, Helvetica, sans-serif;

font-size: 14px;

color: # 666666;

}

Legg merke til bruken av en periode før det første tegnet i definisjonen navn. Dette definerer fontfamilie, størrelse og farge for bildeteksten.

4 Hvordan bruke CSS til å vikle et bilde med en bildetekst

Plasser bildet ditt inn i din webside.

I din webside, lage følgende kode der du vil at bildet skal vises:

<Img class = "floatLeft">

Denne koden forteller leseren at det valgte bildet - 'yourImageName.jpg' - i overensstemmelse med den klassen 'floatLeft' som definert i det eksterne malen.

5 Hvordan bruke CSS til å vikle et bilde med en bildetekst

Lag en bildetekst og style den med bildetekst definisjon.

Til slutt legger stilegenskapene til avsnittet som skal inneholde bildetekst ved å angi en klasse:

<Img class = "floatLeft">

<P class = "captionText"> Bildeteksten går her ... </ p>

Hint

  • Ikke glem å laste opp CSS stilark til din server hver gang du gjør en endring.
  • Er du i tvil, kan du bruke en CSS validering tjeneste for å sikre din kode funksjonalitet.
  • Ikke anta at alle CSS definisjoner arbeider jevnt i alle nettlesere. Test for kryssplattform / multi-nettleser problemer.