Welcome to Our Website

Hvordan gjør jeg innrykk eller kategorien tekst på min web-side eller HTML?

Oppdatert: 02/01/2021 av Datamaskinen Håper

Det finnes forskjellige metoder for innrykk av tekst. Imidlertid, for kompatibilitet med flere nettlesere og tilgjengelighet, vi diskutere de mest populære metoder for innrykk av teksten på nettsiden din.

Anbefalt metode med CSS & HTML

For innrykk av tekst eller et avsnitt, som er den mest brukte og anbefalte måten ville være å bruke CSS. Nedenfor er ulike eksempler på hvordan CSS kan rykke inn tekst., Hver av disse eksemplene skulle plasseres mellom <head></head> HTML-koder.

følgende eksempel vil opprette en stil klasse som heter «tab» som innrykk av tekst og avsnitt 40 piksler fra venstre.

<style type="text/css"><!-- .tab { margin-left: 40px; }--></style>

Når koden ovenfor er i <head> – delen, kan du bruke den ved å legge den til dine avsnitt (<p>) koder som vist.,

<p class="tab">Example of a tab</p>

Inkludert CSS i HTML-dokumentet, som vist ovenfor, er referert til som «in-line» CSS. Det er nyttig for å raskt kunne gjøre endringer, men i det lange løp, det er vanskelig å endre senere.

i Stedet, kan du ta alle CSS-koden, og plasser det i en separat fil med filtypen .css. Deretter kan du koble til denne filen fra hvilken som helst HTML-dokument, og at dokumentet kan bruke disse CSS-egenskaper. Ved hjelp av en ekstern CSS-fil gjøre det enklere å endre CSS senere, fordi CSS er definert på ett sted.

<link rel="stylesheet" Type="text/css" href="http://www.example.com/basic.css">

Når dette .,css-filen er opprettet, kan du redigere filen, og legg til den samme CSS-kode, unntatt <stil> og kommentar merkelapper inn i det, som vist.

.tab { margin-left: 40px; }

til Slutt, når de ovennevnte trinnene er fullført, kan du kategorien tekst ved hjelp av de samme <p class=»tab»> eksempel vi har vist ovenfor.

Det er også andre former for innrykk. For eksempel, hvis du ønsket å rykke inn den første linjen i et avsnitt, i stedet for å bruke over CSS-linje, kan du bruke følgende linje.,

.tab { text-indent:40px }
Tips

Du kan også innrykk ved hjelp av en prosent. For eksempel, i stedet for innrykk av 40px (punkter), kan du erstatte innrykket med 5% til å rykke inn tekst med 5% av den gjeldende visningen. Du kan også bruke en em-plass når du definerer bredden av et innrykk.

Bonus Tips

Du kan også endre seg fra en venstre innrykk til en riktig innrykk ved å endre margin-left til margen til høyre.

Anbefalte metoden å bruke HTML

Det er mulig å oppnå de samme resultatene ovenfor med en innebygd stil i HTML., Mens du bruker den over CSS eksempel kan gjøre det lettere å opprettholde over flere web-sider, hvis du trenger å bruke en stil bare én gang, kan du bruke følgende eksempel.

<p style="margin-left: 40px">This text is indented.</p>

I denne første eksempel, all tekst i avsnitt tag er innskåret 40 piksler fra venstre. Andre ledd-koder er ikke rykket inn.

<p style="text-indent: 40px">This text is indented.</p>

I dette andre eksemplet, bare den første linjen av teksten i avsnitt vil være innskåret 40 piksler fra venstre. Noen ekstra linjer av teksten i dette avsnittet er ikke rykket inn.,

Tips

Du kan også innrykk ved hjelp av en prosent. For eksempel, i stedet for innrykk av 40px (punkter), kan du erstatte innrykket med 5% til å rykke inn tekst med 5% av den gjeldende visningen. Du kan også bruke en em-plass når du definerer bredden av et innrykk.

Tips

Du kan også endre seg fra en venstre innrykk til en riktig innrykk ved å endre margin-left til margen til høyre.

Alternativ metode

en Annen vanlig (men feil) metode for innrykk av tekst er med <blockquote> – kodene, som vist i følgende eksempel., Selv om dette er en lettere løsning, introduserer tilgjengelighetsproblemer. Denne koden er for å sitere tekst, og ikke for innrykk.

<blockquote>This text would be indented</blockquote>

Mer informasjon

  • har du behov for å lage innrykk når du skriver HTML-koden?
  • Hvordan å lage ekstra plass i HTML-eller en web-side.
  • > Se kor definisjon for relatert informasjon og lenker.
  • HTML og web-design for hjelp og støtte.

Legg igjen en kommentar

Din e-postadresse vil ikke bli publisert. Obligatoriske felt er merket med *