Elementen op blokniveau in een webpagina verschijnen in sequentiële volgorde. Om het uiterlijk of de bruikbaarheid van de pagina te verbeteren, kunt u die volgorde wijzigen door blokken, inclusief afbeeldingen, in te pakken, zodat tekst stroomt rond afbeeldingen.
In termen van webdesign staat dit effect bekend als het zweven van de afbeelding. Dit wordt bereikt met de CSS-eigenschapvlotter, waarmee tekst rond de links uitgelijnde afbeelding naar de rechterkant kan vloeien (of rond een rechts uitgelijnde afbeelding naar de linkerkant).
Begin met HTML
Dit voorbeeld voegt een afbeelding toe aan het begin van een alinea (vóór de tekst, maar na de opening
label). Dit is de eerste HTML-opmaak:
De tekst van de paragraaf komt hier. In dit voorbeeld hebben we een afbeelding van een headshot-foto, dus deze tekst kan de persoon in de headshot beschrijven.
Standaard zou de pagina worden weergegeven met de afbeelding boven de tekst, omdat afbeeldingen elementen op blokniveau in HTML zijn. Dit betekent dat de browser standaard regeleinden voor en na het afbeeldingselement weergeeft. Als u deze standaardlook wilt wijzigen met CSS, voegt u een klassewaarde toe (
links) aan het afbeeldingselement om te dienen als een haak waaraan eigenschappen kunnen worden bevestigd.De tekst van de paragraaf komt hier. In dit voorbeeld hebben we een afbeelding van een headshot-foto, dus deze tekst kan de persoon in de headshot beschrijven.
Merk op dat deze klasse op zichzelf niets doet. CSS zal de gewenste stijl bereiken.
CSS-stijlen toevoegen
Voeg deze regel toe aan de site's stylesheet:
.links {
zweven: links;
opvulling: 0 20px 20px 0;
}
Deze stijl drijft alles met de klas links aan de linkerkant van de pagina en voegt een beetje toe opvulling rechts en onderaan de afbeelding, zodat de tekst er niet tegenaan komt.
In een browser zou de afbeelding nu links uitgelijnd zijn; de tekst zou aan de rechterkant verschijnen met ruimte tussen de twee.
De klassewaarde .links hier gebruikt is willekeurig. Je kunt het alles noemen wat je wilt, omdat het op zichzelf niets doet. U moet echter ook niet zeggen dat elke waarde die u in de CSS wijzigt, ook in de HTML wordt weergegeven.
Andere manieren om deze stijlen te bereiken
U kunt ook de klassewaarde van de afbeelding verwijderen en deze opmaken met CSS door een specifiekere selector te schrijven. In het onderstaande voorbeeld bevindt de afbeelding zich binnen een divisie met a belangrijkste inhoud klasse waarde.
De tekst van de paragraaf komt hier. In dit voorbeeld hebben we een afbeelding van een headshot-foto, dus deze tekst kan de persoon in de headshot beschrijven.
Schrijf deze CSS om deze afbeelding op te maken:
.hoofdinhoud img {
zweven: links;
opvulling: 0 20px 20px 0;
}
In dit scenario wordt de afbeelding links uitgelijnd, met de tekst eromheen zoals voorheen, maar zonder de extra klassewaarde in de opmaak. Door dit op grote schaal te doen, kan een kleiner HTML-bestand worden gemaakt, dat gemakkelijker te beheren is en de prestaties kan verbeteren.
Vermijd inline stijlen
Eindelijk, je zou kunnen gebruiken inline stijlen:
De tekst van de paragraaf komt hier. In dit voorbeeld hebben we een afbeelding van een headshot-foto, dus deze tekst kan de persoon in de headshot beschrijven.
Dit is echter niet aan te raden, omdat het de stijl van een element combineert met zijn structurele opmaak. Best practices schrijven voor dat de stijl en structuur van een pagina gescheiden blijven. Deze scheiding is vooral handig wanneer u de lay-out van de pagina moet wijzigen en op zoek moet naar verschillende schermformaten en apparaten met een responsieve website.
Het verweven van de stijl van de pagina met de HTML maakt mediaquery's opstellen om uw site aan te passen voor verschillende schermen veel moeilijker.