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
I den eksterne CSS dokumentet, lage en definisjon som heter "floatLeft '. Koden vil se slik ut:
img.floatLeft {
float: left;
}
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.
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.
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.
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.