Er zijn verschillende manieren om tekst te inspringen. Echter, voor compatibiliteit met meerdere browsers en toegankelijkheid, bespreken we de meest populaire methoden voor het inspringen van tekst op uw webpagina.
aanbevolen methode met CSS & HTML
Voor het inspringen van tekst of een alinea zou de meest gebruikte en aanbevolen methode CSS zijn. Hieronder staan verschillende voorbeelden van hoe CSS tekst kan inspringen., Elk van deze voorbeelden zou worden geplaatst tussen uw <head></head> HTML-tags.
het volgende voorbeeld maakt een stijlklasse met de naam “tab” die de tekst en alinea 40 pixels van links inspringt.
<style type="text/css"><!-- .tab { margin-left: 40px; }--></style>
zodra de bovenstaande code in de <head> sectie staat, kunt u deze gebruiken door het toe te voegen aan uw paragraaf (<p>) tags zoals getoond.,
<p class="tab">Example of a tab</p>
inclusief CSS in uw HTML-document, zoals hierboven getoond, wordt aangeduid als” in-line ” CSS. Het is nuttig om snel veranderingen aan te brengen, maar op de lange termijn is het moeilijk om later te veranderen.
in plaats daarvan kunt u al uw CSS-code en plaats het een apart bestand, met de extensie .css. Vervolgens kunt u vanuit elk HTML-document naar dit ene bestand linken, en dat document kan die CSS-eigenschappen gebruiken. Het gebruik van een extern CSS-bestand maakt het makkelijker om de CSS later te wijzigen, omdat alle CSS op één plaats is gedefinieerd.
<link rel="stylesheet" Type="text/css" href="http://www.example.com/basic.css">
zodra dit .,css-bestand is aangemaakt, bewerk het bestand en voeg dezelfde CSS-code toe, met uitzondering van de <style> en commentaar tags erin, zoals getoond.
.tab { margin-left: 40px; }
tenslotte, als de bovenstaande stappen zijn voltooid, kunt u elke tekst tabblad gebruiken met dezelfde <p class=”tab”> voorbeeld dat we hierboven hebben getoond.
Er zijn ook andere vormen van inspringen. Als u bijvoorbeeld alleen de eerste regel van een alinea wilt inspringen, gebruikt u in plaats van de bovenstaande CSS-regel de volgende regel.,
.tab { text-indent:40px }
U kunt ook inspringen met een percentage. Bijvoorbeeld, in plaats van inspringen met 40px (pixels), kunt u het inspringen met 5% vervangen door tekst inspringen met 5% van de huidige weergave. U kunt ook een em-spatie gebruiken bij het definiëren van de breedte van een inspringing.
U kunt ook van een linker inspringing naar een rechter inspringing veranderen door margin-left naar margin-right te veranderen.
aanbevolen methode gebruikmakend van HTML
Het is mogelijk om dezelfde resultaten hierboven te bereiken met een inline stijl binnen HTML., Terwijl het gebruik van de bovenstaande CSS voorbeeld kan het gemakkelijker te onderhouden over meerdere webpagina ‘ s, als je nodig hebt om een stijl te gebruiken slechts een keer kunt u het volgende voorbeeld te gebruiken.
<p style="margin-left: 40px">This text is indented.</p>
in dit eerste voorbeeld wordt alle tekst in de alineatag 40 pixels van links ingesprongen. Andere alineatags worden niet ingesprongen.
<p style="text-indent: 40px">This text is indented.</p>
in dit tweede voorbeeld wordt alleen de eerste regel tekst in de alinea 40 pixels van links ingesprongen. Eventuele extra regels tekst in dat lid worden niet ingesprongen.,
U kunt ook inspringen met een percentage. Bijvoorbeeld, in plaats van inspringen met 40px (pixels), kunt u het inspringen met 5% vervangen door tekst inspringen met 5% van de huidige weergave. U kunt ook een em-spatie gebruiken bij het definiëren van de breedte van een inspringing.
U kunt ook van een linker inspringing naar een rechter inspringing veranderen door margin-left naar margin-right te veranderen.
alternatieve methode
een andere veel voorkomende (maar onjuiste) methode om tekst te inspringen is met de <blockquote> tags, zoals weergegeven in het volgende voorbeeld., Hoewel dit een eenvoudiger oplossing is, introduceert het toegankelijkheidsproblemen. Deze tag is voor het citeren van tekst en niet voor inspringen.
<blockquote>This text would be indented</blockquote>
aanvullende informatie
- moet u inspringen bij het schrijven van HTML-code?
- Hoe maak je extra ruimte in HTML of een webpagina.
- zie de indent definitie voor gerelateerde informatie en links.
- HTML-en webdesignhulp en-ondersteuning.
