Is goed webdesign gaat vaak over goede typografie. Aangezien zoveel van de inhoud van een webpagina als tekst wordt gepresenteerd, is het een belangrijke vaardigheid om die tekst te kunnen opmaken om zowel aantrekkelijk als effectief te zijn als webdesigner. Helaas hebben we online niet hetzelfde niveau van typografische controle als in print. Dit betekent dat we tekst op een website niet altijd betrouwbaar kunnen stylen zoals we dat in een gedrukt stuk zouden kunnen doen.
Een veelvoorkomende alineastijl die u vaak in gedrukte vorm ziet (en die we online opnieuw kunnen maken), is waar de eerste regel van die alinea één inspringt tabruimte. Hierdoor kunnen lezers zien waar de ene alinea begint en de andere eindigt.
Je ziet deze visuele stijl niet zo vaak op webpagina's omdat browsers standaard alinea's met spatie weergeven eronder als een manier om te laten zien waar de ene eindigt en de andere begint, maar als je een pagina wilt opmaken om dat te hebben print-geïnspireerd inspringstijl op alinea's, kunt u dit doen met de tekst streepje stijl eigendom.
De syntaxis voor deze eigenschap is eenvoudig. Hier ziet u hoe u een tekst-inspringing toevoegt aan alle alinea's in een document.
p {
tekst-inspringing: 2em;
}
De inspringingen aanpassen
Een manier waarop u precies de alinea's kunt specificeren die u wilt laten inspringen, u kunt een klasse toevoegen aan de alinea's die u wilt laten inspringen, maar daarvoor moet u elke alinea bewerken om er een klasse aan toe te voegen. Dat is inefficiënt en volgt niet HTML-codering beste praktijken.
In plaats daarvan moet u overwegen wanneer u alinea's inspringt. U laat alinea's inspringen die direct op een andere alinea volgen. Om dit te doen, kunt u de aangrenzende broer/zus-kiezer gebruiken. Met deze selector selecteert u elke alinea die onmiddellijk wordt voorafgegaan door een andere alinea.
p + p {
tekst-inspringing: 2em;
}
Aangezien u de eerste regel laat inspringen, moet u er ook voor zorgen dat uw alinea's geen extra ruimte ertussen hebben (wat de browserstandaard is). Stilistisch gezien zou je ofwel ruimte tussen alinea's moeten hebben of laat de eerste regel inspringen, maar niet beide.
p {
marge-onder: 0;
opvulling-bodem: 0;
}
p + p {
marge-top: 0;
padding-top: 0;
}
Negatieve inspringingen
U kunt ook de tekst streepje eigenschap, samen met een negatieve waarde, om ervoor te zorgen dat het begin van een regel naar links gaat in plaats van naar rechts, zoals bij een normale inspringing. U kunt dit doen als een regel met een aanhalingsteken begint, zodat het aanhalingsteken in de verschijnt kleine marge links van de alinea en de letters zelf vormen nog steeds een mooie linker uitlijning.
Stel bijvoorbeeld dat je een alinea hebt die afstamt van een blockquote en je wilt dat deze negatief wordt ingesprongen. Je zou deze CSS kunnen schrijven:
blokcitaat p {
tekst-inspringing: -.5em;
}
Hierdoor zou het begin van de alinea, die vermoedelijk het openingsaanhalingsteken bevat, iets naar links worden verplaatst om hangende interpunctie te creëren.
Met betrekking tot marges en opvulling
Vaak gebruik je in webdesign marge- of opvulwaarden om elementen te verplaatsen en witruimte te creëren. Deze eigenschappen zullen echter niet werken om het ingesprongen alinea-effect te bereiken. Als u een van deze waarden op de alinea toepast, wordt de volledige tekst van die alinea, inclusief elke regel, gespatieerd in plaats van alleen de eerste regel.