Et blokniveauelement i et HTML-dokument (f.eks. En webside) vises i rækkefølge. For at ændre ordren for at gøre siden mere tiltalende eller for at forbedre dens anvendelighed, skal du pakke blokke, herunder billeder, så teksten på den side strømmer rundt om den.
I webbetingelser er denne effekt kendt som "flydende" billedet. Denne stil opnås med CSS-ejendommen til "float". Denne egenskab tillader tekst at strømme rundt i det venstrejusterede billede til højre side. Eller omkring et højrejusteret billede til venstre side.
Start med HTML
Det første du skal gøre er at have nogle HTML at arbejde med. For vores eksempel vil vi skrive et stykke tekst og tilføje et billede i begyndelsen af stykket (før teksten, men efter åbningen
tag). Her er, hvad denne HTML-markup ser ud:
Teksten til stykket går her. I dette eksempel har vi et billede af et headshot-billede, så denne tekst vil sandsynligvis være om den person, som headshotet er til.
Som standard vises vores webside med billedet over teksten, fordi billeder er blokniveauelementer i HTML. Det betyder, at browseren viser linjeskift før og efter billedelementet som standard. Vi ændrer dette standardlook ved at vende til CSS. Først vil vi dog tilføje en klasseværdi til vores billedelement. Denne klasse vil fungere som en "krog", som vi vil bruge i vores CSS senere.
Teksten til stykket går her. I dette eksempel har vi et billede af et headshot-billede, så denne tekst vil sandsynligvis være om den person, som headshotet er til.
Bemærk at denne klasse af "venstre" ikke gør noget i sig selv. For os at opnå vores ønskede stil, skal vi bruge CSS næste.
CSS-stilarter
Med vores HTML på plads (herunder vores klasseattribut til "venstre") kan vi nu henvende os til CSS. Vi ville tilføje en regel til vores stylesheet, der ville flyde billedet og også tilføje en lille polstring ved siden af det, så den tekst, der i sidste ende omslutter billedet, ikke støder op imod det for tæt. Her er CSS du kan skrive:
.venstre { flyde: venstre; polstring: 0 20px 20px 0;}
Denne stil flyder billedet til venstre og tilføjer en lille polstring (ved hjælp af en CSS-stenografi) til højre og bunden af billedet. Hvis du har gennemgået den side, der indeholder denne HTML i en browser, vil billedet nu justeres til venstre, og teksten i stykket vises til højre med en passende afstand mellem de to. Bemærk klassens værdi af "left" som vi brugte er vilkårlig. Vi kunne have kaldt det noget, fordi udtrykket "venstre" ikke gør noget på egen hånd. Uanset hvilket udtryk du bruger, skal du have en klasseattribut i HTML'en, der virker med en faktisk CSS-stil, der dikterer de visuelle ændringer, du søger at lave. Denne tilgang til at give billedelementet en klassetildeling og derefter bruge en generel CSS-stil, der flyder elementet, er kun en måde, du kunne opnå dette "venstrejusterede billede" -udseende. Du kan også tage klassens værdi ud af billedet og stil det med CSS ved at skrive en mere specifik vælger. Lad os eksempelvis se på et eksempel, hvor billedet er inde i en division med en "hovedindhold" klasseværdi. Hvis du vil style dette billede, kan du skrive dette CSS: .main-indhold img { flyde: venstre; polstring: 0 20px 20px 0;}
I dette scenario vil vores billede blive justeret til venstre, med teksten flydende rundt om det som før, men vi behøvede ikke at tilføje en ekstra klasseværdi til vores markering. Gør dette i målestok kan hjælpe med at skabe en mindre HTML-fil, som vil være lettere at administrere og kan også bidrage til at forbedre ydeevnen. Endelig kan du endda tilføje stilarterne direkte til din HTML-opdeling, som denne:
Denne metode kaldes "inline styles." Det er ikke tilrådeligt, fordi det kombinerer stilen af et element med dets strukturelle markering. Webens bedste praksis dikterer, at stilen og strukturen på en side skal forblive adskilt. Denne segregering er især nyttig, når din side skal ændre sit layout og søge efter forskellige skærmstørrelser og enheder med en lydhør hjemmeside. At have stilen på siden sammenflettet i HTML'en gør det meget sværere at forfatter medieforespørgsler, som vil tilpasse dit websites udseende efter behov for de forskellige skærmbilleder. Alternative måder at opnå disse stilarter
Teksten til stykket går her. I dette eksempel har vi et billede af et headshot-billede, så denne tekst vil sandsynligvis være om den person, som headshotet er til. Undgå inline stilarter
Teksten til stykket går her. I dette eksempel har vi et billede af et headshot-billede, så denne tekst vil sandsynligvis være om den person, som headshotet er til.
