Javascript-regelhoogte

| | | | | | | | | | | | | | | | | | | | | | | | | |

De CSS-eigenschap regelhoogte bepaalt de regelhoogte van verschillende HTML-elementen. Het wordt vaak gebruikt om de afstand tussen tekstregels te definiëren. De regelhoogte kan worden ingesteld met behulp van woorden - sleutels, percentages of numerieke waarden.

Met de CSS-eigenschap line-height kunnen ontwikkelaars de ruimte tussen twee inline-elementen op een webpagina instellen. Ontwikkelaars gebruiken vaak de CSS-eigenschap line-height om de afstand tussen tekstregels op een webpagina te vergroten of te verkleinen.

In deze zelfstudie wordt uitgelegd hoe u de CSS-eigenschap line-height gebruikt. We verwijzen naar een voorbeeld om u op weg te helpen. Tegen de tijd dat u klaar bent met het lezen van deze tutorial, zult u een goed begrip hebben van het gebruik van de eigenschap line-height in uw code.

Line-height CSS

De line-height CSS-eigenschap definieert de hoogte van een rijvak. Lijngebieden zijn de lijnen die een in CSS gebied vormen. Deze methode wordt vaak gebruikt om de afstand tussen regels tekst te definiëren.

Door de hoogte van regels aan te passen, kunt u indirect de afstand tussen regels tekst (of andere elementen) op een webpagina aanpassen. Het lijkt erg op het opmaken van tekst in Microsoft Word met dubbele spatiëring of 1,15 spatiëring.

De syntaxis van de CSS-eigenschap op regelhoogte is als volgt:

"lineHeight" verwijst naar een lengtewaarde die de hoogte van een element definieert.

Drie soorten waarden die u kunt gebruiken met de eigenschap line-height zijn lengte, aantal en percentage:

Waarde Beschrijving Voorbeeldwaarden ‚ Äã‚Äã Resultaat van Voorbeeldwaarden ‚Äã‚Äã
Lengte Definieert de lijnhoogte met behulp van een specifieke maateenheid (zoals em, px en cm). 10 px, 15 px, 20 px Als u 10px opgeeft, is de hoogte van de lijn 10px.
Getal Stelt de hoogte van de regel in op een veelvoud van de lettergrootte. 1, 1,8, 2 Als de lettergrootte 10px is, is de rijhoogte respectievelijk 10px, 18px en 20px.
percentage Definieert de rijhoogte als een percentage van de lettergrootte van het item . 30%, 50%, 110% Als de lettergrootte 10px is, is de rijhoogte respectievelijk 3px, 5px en 11px.

Als alternatief kunt u het trefwoord "normal" specificeren. Dit trefwoord specificeert het gebruik van de standaardbrowser. Deze waarde ligt meestal rond de 1,2, afhankelijk van de browser die door de gebruiker wordt gebruikt.

Als u de eigenschap line-height toepast op een vak, zal alle tekst in dat vak de hoogte gebruiken van het .line-vak dat u hebt opgegeven.

Een opmerking over toegankelijkheid

De regel wijzigen spatiëring is een veelgebruikt gebruik van de eigenschap line-height. Dit komt omdat u er altijd voor wilt zorgen dat er voldoende ruimte tussen de regels is. Als er niet genoeg ruimte tussen de regels is, kan de tekst moeilijk te lezen zijn.

een moeilijk leesbare tekst heeft een bijzonder ernstig effect op slechtzienden. Bij het maken van een website moet altijd rekening worden gehouden met de toegankelijkheid.

Bij gebruik van een cijfer om de rijhoogte van een element in CSS, je moet d geen waarden ‚Äã‚Äãkleiner dan 1,5 gebruiken. Dit komt omdat rijhoogtewaarden ‚Äã‚Äãminder dan 1,5 uw site moeilijker te gebruiken kunnen maken voor slechtziende lezers.

CSS-voorbeeld voor rijhoogte

Stel dat u een " ontwerpt Over ons‚" Pagina voor een lokale kookclubwebsite. De pagina bevat een kop gevolgd door een alinea met tekst die een beschrijving van de club beschrijft.

We willen dat onze tekst op de juiste afstand staat. Dus besluiten we om stel de regelhoogte van de tekstparagraaf op de webpagina in op 1.6 rem. We kunnen dit doen met deze code:

Onze code geeft als resultaat: Klik `Afbeelding in de code-editor hierboven om de uitvoer van onze HTML / CSS-code te zien.

In ons HTML-bestand hebben we een "Over ons"-header gedefinieerd met een

tag . Dus schreven we een beschrijving van Fantastic Chefs en namen deze op in de HTML

tag .

In ons CSS-bestand hebben we een regel gedefinieerd. Onze regel gebruikt twee CSS-eigenschappen. We stellen de rijhoogte in op 1.6rem en de lettergrootte tot 16px voor alle HTML

tags.

De maateenheid "rem" die we gebruikten met de eigenschap line-height definieert een rijhoogte relatief aan de lettergrootte van het root-element. "rem" betekent "root element". Omdat onze lettergrootte 16px was, was de regelhoogte van deze tekstparagraaf 25,6px (16px * 1.6).

De tekst in de bovenstaande alinea is goed gespreid en niet overlappen.

In het vorige voorbeeld zouden we ook rijhoogte kunnen toepassen op ons -tag instellen op de waarden ‚Äã‚Äãwe gespecificeerd. Dit zou betekenen dat onze titels en onze

tag zouden worden beïnvloed.

Conclusie

De CSS line-hei De eigenschap ght definieert de hoogte van een lijnvak. Meestal wordt deze eigenschap gebruikt om de afstand tussen tekstregels in een alinea of kop in te stellen. De rijhoogte kan worden ingesteld met het normale trefwoord, een percentage, een lengte of een numerieke waarde.

In deze zelfstudie zijn de basisprincipes van de CSS-eigenschap rijhoogte besproken en hoe u deze in code kunt gebruiken. U heeft nu de kennis om de CSS line-height eigenschap als een expert te gaan gebruiken!

Wilt u een webontwikkelaar worden? Bekijk onze CSS-leergids voor deskundig advies en tips over de beste leermiddelen en cursussen.