Bra webbdesign handlar ofta om bra typografi. Eftersom så mycket av innehållet på en webbsida presenteras som text är det en viktig färdighet att ha som webbdesigner att kunna utforma texten så att den är både attraktiv och effektiv. Tyvärr har vi inte samma nivå av typografisk kontroll online som vi gör på tryck. Detta betyder att vi inte alltid kan ställa in text på en webbplats på ett tillförlitligt sätt på samma sätt som vi kan göra det i en tryckt bit.
En vanlig styckeform som du ofta ser i tryck (och som vi kan återskapa online) är där den första raden i det stycket är indragen en flikutrymme. Detta gör det möjligt för läsarna att se var ett stycke börjar och ett annat slutar.
Du ser inte den här visuella stilen så mycket på webbsidor eftersom webbläsare som standard visar stycken med utrymme under dem som ett sätt att visa var en slutar och en annan börjar, men om du vill utforma en sida för att ha det tryckinspirerad indragstil på stycken kan du göra det med textindrag stil egendom.
Syntaxen för den här egenskapen är enkel. Så här lägger du till en textindragning till alla stycken i ett dokument.
p {
textindrag: 2em;
}
Anpassa indrag
Ett sätt du kan ange exakt de stycken som ska indragas, du kan lägga till en klass i de stycken du vill ha indrag, men det kräver att du redigerar varje stycke för att lägga till en klass i den. Det är ineffektivt och följer inte HTML-kodning bästa praxis.
Istället bör du överväga när du drar in stycken. Du drar in stycken som följer direkt efter ett annat stycke. För att göra detta kan du använda den intilliggande syskonväljaren. Med denna väljare väljer du varje stycke som omedelbart föregås av ett annat stycke.
p + p {
textindrag: 2em;
}
Eftersom du drar in den första raden bör du också se till att dina stycken inte har något extra utrymme mellan dem (vilket är webbläsarens standard). Stilistiskt bör du antingen ha mellanrum mellan styckena eller indrag första raden, men inte båda.
p {
marginal-botten: 0;
stoppning-botten: 0;
}
p + p {
marginal-topp: 0;
stoppningstopp: 0;
}
Negativa indrag
Du kan också använda textindrag egendom, tillsammans med ett negativt värde, för att starta en rad att gå till vänster i motsats till höger som en normal strecksats. Du kan göra detta om en rad börjar med ett citattecken så att citattecknet visas i liten marginal till vänster om stycket och bokstäverna i sig utgör fortfarande en fin vänster inriktning.
Säg till exempel att du har ett stycke som är en ättling till en blockcitat och att du vill att den ska vara negativt indragen. Du kan skriva den här CSS:
block citat p {
textindrag: -.5em;
}
Detta skulle ge början på stycket, som antagligen innehåller tecknet för inledande citat, att flyttas något åt vänster för att skapa hängande skiljetecken.
När det gäller marginaler och stoppning
Ofta i webbdesign använder du marginal- eller stoppningsvärden för att flytta element och skapa vitt utrymme. Dessa egenskaper fungerar dock inte för att uppnå den indragna styckeeffekten. Om du tillämpar något av dessa värden på stycken, kommer hela texten i det stycket, inklusive varje rad, att vara åtskilda istället för bara den första raden.