Flyta över hjälp i HTML

När du skapar webbsidor för ditt företag med hjälp av enkel HTML- och CSS-kod kan du använda CSS för att utforma och formatera specifika "divisioner" i ditt innehåll - definierad i din HTML-kod - som låter dig formatera text och bilder på ett sådant sätt att de "slingrar runt" eller överensstämmer med varandra. Med andra ord kan delar av ditt innehåll anpassas till andra avsnitt, så att bilder och text kan passa ihop som kolumner, galler eller någon annan specificerad anpassning.

HTML och CSS

Medan HTML presenterar ett taggat metaspråk som definierar hur en webbsida kommer att visas i en webbläsare, kommer den verkliga kraften i webbdesign när du blandar HTML med Cascading Style Sheets. CSS definierar beteenden för element som är inbäddade i HTML-filer, skapar en universell layout för sidan. Flera HTML-dokument kan referera till samma CSS-sida, vilket innebär att du kan genomföra ett regelbundet utseende på alla dina sidor.

HTML-avdelningar och flytande

CSS arbetar med HTML genom att definiera uppförandet av HTML-taggar. Specifikt utnyttjar CSS "" taggarna. Dessa delningstaggar omger en del av dokumentet och identifierar den som en diskret informationsenhet som borde ha samma stil hela tiden. Dessa divisioner fungerar också som "lådor" av sorter, eftersom genom CSS kan du ha delar av innehållsförändringsfärg, ändra storlek eller "float" till en viss sidgräns så att storleken på sidan inte förstörs.

Flyter i CSS och HTML

För att använda attributet "float" skapar du en uppdelning i ditt innehåll eller hänvisar till en bild. I ditt CSS-dokument hänvisar du då till den div eller bilden med namn och ger den en flottaattribut. Följande kodexempel visar hur du gör det med ett internt stilark. Observera att uppdelningen i HTML, som heter "section1", har en bredd på 100 pixlar. Alla avdelningar som använder float kräver en specificerad bredd. Bilder har redan en underförstådd bredd:

Rensa, margener och vadderingar

Tillsammans med grunderna för att använda float-attributet kan du också använda andra objekt, till exempel klara, marginal och vadderande attribut. Det klara attributet säkerställer att inget annat innehåll visas på samma rad som det flytande elementet. Marginaler kontrollerar utrymmet runt divisionens vänstra och nedre del. Padding kontrollerar det inre utrymmet i divisionen mellan innehållet och gränserna för divisionen. Dessa tre saker tillsammans kan skapa rena, "boxformade" divisioner som tillåter eller tillåter inte att text och annan bild läggs runt dem.