Welcome to Our Website

Hur gör jag indrag eller flik text på min webbsida eller i HTML?

uppdaterad: 02/01/2021 av Computer Hope

det finns olika metoder för indragning av text. Men för kompatibilitet med flera webbläsare och tillgänglighet diskuterar vi de mest populära metoderna för indragning av text på din webbsida.

rekommenderad metod med CSS& HTML

för indragning av text eller ett stycke skulle den vanligaste och rekommenderade metoden vara att använda CSS. Nedan finns olika exempel på hur CSS kan indrag text., Vart och ett av dessa exempel skulle placeras mellan <head></head> HTML-taggar.

följande exempel skulle skapa en stilklass med namnet ”tab” som indrag texten och stycket 40 pixlar från vänster.

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

När koden ovan är i avsnittet<Huvud> kan du använda den genom att lägga till den i stycket (<p>) taggar som visas.,

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

inklusive CSS i ditt HTML-dokument, som visas ovan, kallas ”in-line” CSS. Det är användbart för att snabbt göra förändringar, men på lång sikt är det svårt att byta senare.

istället kan du ta all din CSS-kod och placera den en separat fil med tillägget .css. Sedan kan du länka till den här filen från alla HTML-dokument, och det dokumentet kan använda dessa CSS-egenskaper. Använda en extern CSS-fil gör det lättare att ändra CSS senare, eftersom alla CSS definieras på ett ställe.

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

När detta .,css-filen har skapats, redigera filen och lägga till samma CSS-kod, exklusive <stil> och kommentera taggar i det, som visas.

.tab { margin-left: 40px; }

slutligen, när ovanstående steg är klara, kan du flika någon text med samma<p class=”tab”> exempel Vi har visat ovan.

det finns också andra former av indragning. Om du till exempel bara ville dra in den första raden i ett stycke, istället för att använda ovanstående CSS-linje, skulle du använda följande rad.,

.tab { text-indent:40px }
tips

Du kan också dra in med en procentsats. Till exempel, istället för att indragas med 40px (pixlar), kan du ersätta indraget med 5% för att indrag text med 5% av den aktuella vyn. Du kan också använda ett em-utrymme när du definierar bredden på ett indrag.

bonus tips

Du kan också ändra från en vänster indrag till en höger indrag genom att ändra marginal-vänster till marginal-höger.

rekommenderad metod med HTML

det är möjligt att uppnå samma resultat ovan med en inline-stil inom HTML., När du använder ovanstående CSS exempel kan göra det lättare att underhålla över flera webbsidor, om du behöver använda en stil endast en gång kan du använda följande exempel.

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

i det här första exemplet är all text i stycketaggen indragen 40 pixlar från vänster. Alla andra styckemärken är inte indragna.

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

i detta andra exempel kommer endast den första textraden i stycket att vara indragen 40 pixlar från vänster. Eventuella ytterligare textrader i den punkten är inte indragna.,

tips

Du kan också dra in med en procentsats. Till exempel, istället för att indragas med 40px (pixlar), kan du ersätta indraget med 5% för att indrag text med 5% av den aktuella vyn. Du kan också använda ett em-utrymme när du definierar bredden på ett indrag.

tips

Du kan också ändra från en vänster indrag till en höger indrag genom att ändra marginal-vänster till marginal-höger.

alternativ metod

en annan vanlig (men felaktig) metod för indragning av text är med<blockquote> taggar, som visas i följande exempel., Även om detta är en enklare lösning, introducerar den tillgänglighetsfrågor. Den här taggen är för att citera text och inte för indragning.

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

ytterligare information

  • behöver du dra in när du skriver HTML-kod?
  • hur man skapar extra utrymme i HTML eller en webbsida.
  • se strecksatsen definition för relaterad information och länkar.
  • HTML och webbdesign hjälp och support.

Lämna ett svar

Din e-postadress kommer inte publiceras. Obligatoriska fält är märkta *