God webdesign handler ofte om god typografi. Siden så mye av innholdet på en webside presenteres som tekst, er det en viktig ferdighet å ha som webdesigner å kunne utforme teksten for å være både attraktiv og effektiv. Dessverre har vi ikke samme nivå av typografisk kontroll på nettet som vi gjør på trykk. Dette betyr at vi ikke alltid kan stile tekst på en nettside på samme måte som vi kunne gjøre det i et trykt stykke.
En vanlig avsnittstil som du ofte ser på trykk (og som vi kan gjenskape online) er hvor den første linjen i dette avsnittet er innrykket en tabulatorplass. Dette lar leserne se hvor ett avsnitt begynner og et annet slutter.
Du ser ikke denne visuelle stilen så mye på websider fordi nettlesere som standard viser avsnitt med mellomrom under dem som en måte å vise hvor en slutter og en annen begynner, men hvis du vil style en side for å ha det trykkinspirert innrykkstil på avsnitt kan du gjøre det med tekstinnrykk stil eiendom.
Syntaksen for denne egenskapen er enkel. Slik legger du til en tekstinnrykk i alle avsnittene i et dokument.
p {
tekstinnrykk: 2em;
}
Tilpasse innrykkene
En måte du kan spesifisere nøyaktig avsnittene som skal innrykkes, kan du legge til en klasse i avsnittene du vil ha innrykket, men det krever at du redigerer hvert avsnitt for å legge til en klasse i det. Det er ineffektivt og følger ikke HTML-koding beste praksis.
I stedet bør du vurdere når du setter inn avsnitt. Du setter inn avsnitt som følger direkte etter et annet avsnitt. For å gjøre dette kan du bruke den tilstøtende søskenvelgeren. Med denne velgeren velger du hvert avsnitt som er umiddelbart foran et annet avsnitt.
p + p {
tekstinnrykk: 2em;
}
Siden du innrykker den første linjen, bør du også sørge for at avsnittene dine ikke har noe ekstra mellomrom (som er nettleserens standard). Stilmessig bør du enten ha mellomrom mellom avsnittene eller innrykk første linje, men ikke begge deler.
p {
margin-bunn: 0;
polstring-bunn: 0;
}
p + p {
margin-topp: 0;
polstring-topp: 0;
}
Negative innrykk
Du kan også bruke tekstinnrykk eiendom, sammen med en negativ verdi, for å få starten på en linje til å gå til venstre i motsetning til høyre som et normalt innrykk. Du kan gjøre dette hvis en linje begynner med et anførselstegn slik at anførselstegnet vises i liten margin til venstre for avsnittet og bokstavene i seg selv danner fortsatt en fin venstre Justering.
Si for eksempel at du har et avsnitt som er en etterkommer av et blockquote, og du vil at det skal være negativt innrykket. Du kan skrive denne CSS:
blockquote p {
tekstinnrykk: -.5em;
}
Dette vil gi starten på avsnittet, som antagelig inkluderer åpningstegnet, som blir flyttet litt til venstre for å skape hengende tegnsetting.
Når det gjelder marginer og polstring
Ofte i nettdesign, bruker du margin- eller polstringsverdier å flytte elementer og skape hvite rom. Disse egenskapene fungerer imidlertid ikke for å oppnå den innrykkede avsnitteffekten. Hvis du bruker en av disse verdiene på avsnittet, vil hele teksten i det avsnittet, inkludert hver linje, være plassert i stedet for bare den første linjen.