Element na úrovni bloku v dokumentu HTML (např. Na webové stránce) se zobrazí v pořadí. Chcete-li změnit objednávku tak, aby stránka vypadala atraktivněji nebo aby se zlepšila její užitečnost, musíte obtékat bloky včetně obrázků tak, aby kolem ní proudil text této stránky.
V webových termínech se tento efekt označuje jako "plovoucí" obraz. Tento styl je dosažen vlastností CSS pro "float". Tato vlastnost umožňuje, aby text procházel kolem levého obrázku na pravou stranu. Nebo kolem pravého obrázku na levé straně.
Začněte s HTML
První věc, kterou budete muset udělat, je mít nějaký HTML, s nímž budete pracovat. Pro náš příklad zapíšeme text odstavce a přidáme obrázek na začátek odstavce (před textem, ale po otevření
štítek). Zde vypadá, jak vypadá značka HTML:
Text odstavce je zde. V tomto příkladu máme obrázek o headshotové fotografii, takže tento text by se pravděpodobně týkal osoby, pro kterou je záhlaví určeno.
Ve výchozím nastavení by se naše webová stránka zobrazovala s obrázkem nad textem, protože obrázky jsou prvky HTML na úrovni bloku. To znamená, že prohlížeč zobrazuje před a po prvek obrázku výchozí řádky. Tento výchozí vzhled změníme otočením na CSS. Nejprve však do prvku image přidáme hodnotu třídy. Tato třída bude fungovat jako "hák", který budeme používat v našem CSS později.
Text odstavce je zde. V tomto příkladu máme obrázek o headshotové fotografii, takže tento text by se pravděpodobně týkal osoby, pro kterou je záhlaví určeno.
Všimněte si, že tato třída "vlevo" vůbec nic nečiní sama. Abychom dosáhli požadovaného stylu, potřebujeme použít CSS dále.
Styly CSS
S našimi HTML na místě (včetně našeho atribut třídy "vlevo") můžeme nyní obrátit na CSS. Do našeho šablony stylů bychom přidali pravidlo, které by tento obrázek vznášelo a přidávalo vedle něj malý polštář tak, aby text, který se nakonec obtočí kolem obrazu, příliš neohýbal. Zde je CSS, které můžete napsat:
.vlevo, odjet { plavat vlevo; polstrování: 0 20px 20px 0;}
Tento styl vznáší tento obrázek doleva a přidá malé polstrování (pomocí některé zkratky CSS) vpravo a v dolní části obrázku. Pokud jste v prohlížeči prohlížili stránku, která obsahuje tento kód HTML, obrázek bude nyní zarovnán doleva a text odstavce se objeví napravo s odpovídajícím rozestupem mezi těmito dvěma. Všimněte si, že hodnota třídy "left", kterou jsme použili, je libovolná. Mohli jsme jí říkat cokoli, protože pojem "vlevo" nic neudělal sám. Ať už používáte jakýkoli výraz, musíte mít atribut třídy v HTML, který pracuje se stávajícím stylem CSS, který určuje vizuální změny, které chcete vyvíjet. Tento přístup dává prvku obrázku atribut třídy a pak pomocí obecného stylu CSS, který vznáší prvek, je pouze jeden způsob, jak můžete tento vzhled "levého zarovnaného obrazu" dosáhnout. Můžete také vzít hodnotu třídy mimo obrázek a upravit její styl pomocí CSS psaním konkrétnějšího výběru. Podívejme se například na příklad, kdy je tento obrázek uvnitř divize s hodnotou třídy "main-content". Chcete-li stylovat tento obrázek, můžete napsat tento CSS: .main-content img { plavat vlevo; polstrování: 0 20px 20px 0;}
V tomto scénáři by byl náš obrázek zarovnán doleva s textem, který se kolem něj pohybuje jako předtím, ale nepotřebovali jsme přidat další značkovou hodnotu do naší značky. Toto dělení v měřítku může pomoci vytvořit menší soubor HTML, který bude snadněji řízen a může také pomoci zvýšit výkon. Konečně můžete dokonce přidat styly přímo do značky HTML, například:
Tato metoda se nazývá inline styly. Není to vhodné, protože kombinuje styl prvku se svým strukturálním označením. Webové osvědčené postupy diktují, že styl a struktura stránky by měly zůstat oddělené. Tato segregace je obzvláště užitečná, když vaše stránky potřebují změnit své uspořádání a hledat různé velikosti obrazovky a zařízení s citlivým webem. Styl stránky navzájem propojené v kódu HTML způsobí, že bude mnohem obtížnější vytvářet mediální dotazy, které přizpůsobí vzhled vašeho webu tak, jak je to nutné pro různé obrazovky. Alternativní cesty k dosažení těchto stylů
Text odstavce je zde. V tomto příkladu máme obrázek o headshotové fotografii, takže tento text by se pravděpodobně týkal osoby, pro kterou je záhlaví určeno. Vyhněte se inline stylům
Text odstavce je zde. V tomto příkladu máme obrázek o headshotové fotografii, takže tento text by se pravděpodobně týkal osoby, pro kterou je záhlaví určeno.
