Placeringen av objekt på en webbsida är avgörande för dess övergripande design. Även om det finns andra sätt att påverka layouten, till exempel att använda tabeller (som vi inte rekommenderar), är det bästa att använda CSS.
Nedan ser vi hur du använder en enkel CSS-stil inline-egenskap för att anpassa bilder, tabeller, stycken och mer.
Notera: Dessa samma metoder kan också användas på externa stilark, men eftersom de gäller för enskilda objekt och sannolikt behöver stanna så är det bäst att använda in-line styling som vad som nämns nedan.
Anpassa textparagraf
Punktetiketten är första platsen för att börja lägga in din webbsida. Det öppnar och stänger taggar ser så här ut:
Standardinriktningen av text i en paragraf är till vänster på sidan, men du kan också anpassa dina stycken till höger och i mitten.
Med floategenskapen kan du anpassa punkterna till höger eller vänster om moderelementet. Alla andra element i det här moderelementet kommer att flöda runt det flytande elementet.
För att få den bästa effekten med ett stycke är det bäst att ställa in en bredd på stycket som är mindre än behållaren (föräldraelementet).
Rikta in texten i texten
Förmodligen är den mest intressanta anpassningen för stycketexten "rättfärdig", vilket berättar att webbläsaren visar textjusterad, i huvudsak till både höger och vänster sida av fönstret.
För att rättfärdiga texten i en paragraf skulle du använda egenskapen för textjustering.
Du kan också anpassa all text i ett stycke till höger eller vänster (standard) med hjälp av textjusteringsegenskapen.
Textjusteringsegenskapen anpassar texten inuti elementet. Tekniskt är det inte tänkt att anpassa bilder som finns i stycket eller andra element, men de flesta webbläsare behandlar bilder som inline för den här egenskapen.
Justera bilder
Genom att använda floategenskapen på en bildtagg kan du definiera placeringen av bilder på sidan och hur texten ska vikas runt dem.
Precis som ovanstående punkter placerar egenskapen float-stil i bildtaggen din bild på sidan och berättar webbläsaren hur man flyter text och andra element runt den bilden.
Text som följer ovanstående bildtagning kommer att flöda runt bilden till höger när bilden visas till vänster om skärmen.
Om jag vill att texten ska stoppa omslaget runt bilden använder jag den klara egendomen:
Justera mer än stycken
Men, om du vill justera mer än bara en paragraf eller en bild? Du kan helt enkelt lägga en stilegenskap i varje stycke, men det finns en tagg som du kan använda som är effektivare:
Omkring texten och bilderna (inklusive HTML-taggar) med taggen och stilegenskapen (float eller text-align) och allt i den uppdelningen kommer att anpassas efter hur du vill.
Tänk på att anpassningar som läggs till i stycken eller bilder inom divisionen kommer att hederas, tvingande taggen.
