Et blokknivåelement i et HTML-dokument (for eksempel en nettside) vises i sekvensiell rekkefølge. For å endre rekkefølgen for å gjøre siden ser mer tiltalende ut eller for å forbedre bruken sin, må du pakke inn blokker, inkludert bilder, slik at teksten til den siden renner rundt den.
I webbetingelser er denne effekten kjent som "flytende" bildet. Denne stilen oppnås med CSS-egenskapen for "float". Denne egenskapen tillater tekst å flyte rundt det venstrejusterte bildet til høyre side. Eller rundt et høyrejustert bilde til venstre side.
Start med HTML
Det første du må gjøre er å ha litt HTML å jobbe med. For eksempel vil vi skrive et tekststykke og legge til et bilde i begynnelsen av avsnittet (før teksten, men etter åpningen
stikkord). Her ser det som HTML-oppslaget ser ut som:
Teksten i avsnittet går her. I dette eksemplet har vi et bilde av et headshot-bilde, så denne teksten vil trolig være om personen som headshotet er for.
Som standard vil vår nettside vise med bildet over teksten, fordi bilder er blokknivåelementer i HTML. Dette betyr at nettleseren viser linjebrudd før og etter bildeelementet som standard. Vi vil endre dette standardutsnittet ved å slå til CSS. Først vil vi imidlertid legge til en klasseverdi for bildeelementet vårt. Denne klassen vil fungere som en "krok" som vi vil bruke i vårt CSS senere.
Teksten i avsnittet går her. I dette eksemplet har vi et bilde av et headshot-bilde, så denne teksten vil trolig være om personen som headshotet er for.
Merk at denne klassen "venstre" ikke gjør noe i det hele tatt alene. For oss å oppnå ønsket stil, må vi bruke CSS neste.
CSS-stiler
Med vår HTML på plass (inkludert vår klassattributt av "venstre") kan vi nå gå til CSS. Vi vil legge til en regel i vårt stilark som vil flyte bildet og legge til en liten polstring ved siden av den, slik at teksten som til slutt vil vikle rundt bildet ikke støter opp mot det for tett. Her er CSS du kan skrive:
.venstre { flyte: venstre; polstring: 0 20px 20px 0;}
Denne stilen flyter bildet til venstre og legger til en liten polstring (med noen CSS-kortografi) til høyre og bunnen av bildet. Hvis du har vurdert siden som inneholder denne HTML-en i en nettleser, vil bildet nå justeres til venstre, og teksten i avsnittet vil se ut til høyre med en passende mengde mellomrom mellom de to. Legg merke til klassens verdi av "venstre" som vi brukte er vilkårlig. Vi kunne ha kalt det noe fordi begrepet "venstre" ikke gjør noe på egen hånd. Uansett hvilket uttrykk du bruker, må du ha en klasseattributt i HTML-en som fungerer med en faktisk CSS-stil som dikterer de visuelle endringene du ønsker å gjøre. Denne tilnærmingen med å gi bildeelementet en klassetributt og deretter bruke en generell CSS-stil som flyter elementet, er bare en måte du kan oppnå dette "venstrejusterte bildet" utseende. Du kan også ta klassen verdien av bildet og stil det med CSS ved å skrive en mer spesifikk velger. For eksempel, la oss se på et eksempel der bildet er inne i en divisjon med en "hovedinnhold" klasse verdi. Hvis du vil stile dette bildet, kan du skrive dette CSS: .main-innhold img { flyte: venstre; polstring: 0 20px 20px 0;}
I dette scenariet vil bildet bli justert til venstre, med teksten som flyter rundt det som før, men vi trengte ikke å legge til en ekstra klasseværdi for oppslaget vårt. Å gjøre dette i skala kan bidra til å lage en mindre HTML-fil, som blir enklere å administrere, og kan også bidra til å forbedre ytelsen. Til slutt kan du til og med legge til stilene direkte i HTML-oppslaget ditt, slik som dette:
Denne metoden kalles "inline styles." Det er ikke tilrådelig fordi det kombinerer stilen til et element med strukturell markering. Webens beste praksis dikterer at stilen og strukturen til en side skal forbli atskilt. Denne segregeringen er spesielt nyttig når siden din må endre oppsettet og se etter forskjellige skjermstørrelser og enheter med en responsiv nettside. Å ha stilen på siden sammenflettet i HTML-en, vil gjøre det mye vanskeligere å forfatter media spørringer som vil justere nettstedets utseende etter behov for de forskjellige skjermbildene. Alternative måter å oppnå disse stilene
Teksten i avsnittet går her. I dette eksemplet har vi et bilde av et headshot-bilde, så denne teksten vil trolig være om personen som headshotet er for. Unngå Inline Styles
Teksten i avsnittet går her. I dette eksemplet har vi et bilde av et headshot-bilde, så denne teksten vil trolig være om personen som headshotet er for.
