Change language
Python.Engineering Wiki Javascript Onderliggend element op tag ophalen

Javascript Onderliggend element op tag ophalen

__main__ Python module | base64 Python module | code Python module | COM PHP module | dis Python module | Ev PHP module | exp | html Python module | http Python module | imp Python module | io Python module | JavaScript | keyword Python module | numbers Python module | os Python module | PS PHP module | Python functions | re Python module | site Python module | SPL PHP module | StackOverflow | struct Python module | test Python module | time Python module | UI PHP module
Michael Zippo Michael Zippo

Als u een vetgedrukt CSS-teksteffect wilt maken, moet u de eigenschap font-weight gebruiken. De eigenschap font-weight bepaalt het "gewicht" van een lettertype, of hoe vet dat lettertype wordt weergegeven. U kunt trefwoorden of getalwaarden gebruiken om CSS te instrueren hoe vet een stuk tekst moet zijn.

Als ontwikkelaars willen we bij het ontwerpen van een website soms de aandacht op iets vestigen . Er zijn verschillende manieren waarop we dit kunnen doen. De eenvoudigste manier is om het tekengewicht te verhogen van de tekst die u wilt markeren. Dit verwijst naar het vet maken van de tekst.

In dit artikel zullen we het hebben over het gewichtslettertype, hoe dit te definiëren en een illustratie te geven van de verschillende mogelijke waarden ‚Äã‚Äãvan de eigenschap.

CSS Fat: A Guide

De font-weight eigenschappensets geven aan hoe vetgedrukte tekst op het scherm moet verschijnen. U kunt woorden - toetsen of numerieke waarde gebruiken om CSS te zeggen hoe vet een tekst samen moet worden weergegeven

De syntaxis van de CSS-eigenschap font-weight is als volgt:.

De weightOfFont-waarde is het gewicht van het lettertype dat u wilt gebruiken voor het element waarop de stijl wordt toegepast.

De eigenschap font-weight accepteert een paar verschillende waarden, afhankelijk van het lettertype dat u voor een bepaald element wilt instellen.

CSS-schaal vet

Beschouw uw lettertypefamilie als een schaal van 100 tot 1000 schaal vet. Hoe hoger het getal, hoe vetter het teken

Doe wat onderzoek naar uw favoriete lettertypefamilie. Zo weet je zeker dat het resultaat op je site zo licht of vet zal zijn als je wilt. Sommige lettertypefamilies gebruiken geen volledige schaal.

De volgende code laat zien hoe licht en hoe donker een populair lettertype `Arial` kan worden bereikt bij het gebruik van cijfers en woorden - key:

en krachtiger duidelijker: wat betekenen ze eigenlijk?

Het belangrijkste dat hier moet worden opgemerkt, is dat lichter en gedurfder geen letterlijke vertaling is. Bolder betekent niet "bolder dan vet"

Bolder en duidelijker in feite betekent in deze context hoe vet ze zijn of hoe duidelijk ze zijn in relatie tot hun bovenliggende element. Dus als we een meer gedurfd kindelement doen, zullen ze een relatief donkerder lettertype hebben dan hun ouders - hetzelfde geldt voor de lichtere.

De relatieve tekengewichten zijn als volgt:

td> < td> 400
Relatief tekengewicht < td> werkelijke lettergewicht
dun 100
normaal
vet 700
zwaar 900

Dus we zouden de weight font: bold eigenschap kunnen gebruiken om deze in te stellen e gewicht lettertype van een alinea tekst tot 800. Als een kind een groter relatief gewicht van de ouder heeft, gebruik dan de bovenstaande tabel om te begrijpen hoe dik hij is.

Laten we bijvoorbeeld zeggen dat ik een kind heb dat heeft een ouder met een font-weight van 400. Als ik de font-weight-waarde op het vettere kind zet, wordt het gewicht van het font op het kind 700.

Dit komt omdat het kind een donkerder lettertype heeft vergeleken met tot -gewicht dan de ouder. Als het bovenliggende element al zo donker of zo licht mogelijk is, doen deze eigenschapswaarden niets.

voorbeeld CSS-lettergewicht

Stel dat u een website ontwerpt voor The Seattle Stamp Club, een plaatselijk postzegelbedrijf. Het postzegelbedrijf dat we hebben gevraagd Wie zijn - we hoofd- verschijnen vetgedrukt op de A About hun website. Dit vestigt de aandacht van de bezoeker op de titel.

De postzegelclub heeft ons gevraagd om een tekstblok op hun website toe te voegen met de geschiedenis van de club. Dit tekstblok zou met een normaal lettertype moeten verschijnen. Sommige zinnen waarop de club de aandacht van de kijker wil vestigen, moeten vetgedrukt worden weergegeven

We zouden de volgende code kunnen gebruiken om dit tekstblok te maken, met enkele aangemoedigde zinnen:

Klikstijl afbeelding van de knop in de code-editor hierboven om de uitvoer van onze HTML / CSS-code te zien.

in ons HTML-bestand hebben we een met tekst omsloten alinea van

gedefinieerd; . tag hebben we ook enkele zinnen in opgenomen. tags, die we aanmoedigen in onze CSS

Vervolgens hebben we in ons CSS-bestand een stijlregel gedefinieerd die het gewicht van de lettertypestijl van elke < definieert /a> tag bolder. Dit betekent dat tekst tussen een -tag er vetter uitziet dan het bovenliggende element.

Als we onze code uitvoeren, wordt onze alinea weergegeven met een normale letterbreedte en worden zinnen tussen -tags vet weergegeven. . In dit voorbeeld zijn de uitdrukkingen verwelkomt iedereen en 250 leden tussen -tags.

Vetgedrukte css-tekst met variabele tekens

Er zijn enkele nieuwe lettertypen beschikbaar gesteld door het nieuwste niveau van CSS-lettertypen. Ze worden variabele tekens genoemd en kunnen een getal tussen 1 en 1000 als tekenbreedte aannemen. Browserondersteuning is pas in mei 2020 volledig geïmplementeerd, dus ze zijn vrij nieuw. Als je meer informatie wilt over variabele lettertypen, bekijk dan deze rel = "noopener"> l` introductie.

Conclusie

In deze tutorial hebben we de CSS font -weight eigenschap en hoe dit de vetgedruktheid van onze lettertypen beïnvloedt.

We hebben geleerd dat vetter en lichter gewicht een relatief fontgewicht betekent dat afwijkt van het fontgewicht van het bovenliggende element. In feite hebben we gekeken naar een bereik van tekengewichten om te zien hoe de tekst eruitziet. Je bent in een mum van tijd een professionele font-weighting

Voor meer informatie over coderen in CSS, lees onze gids over hoe u CSS leert .U kunt onze gids lezen op hoe u vetgedrukte tekst in HTML kunt maken als u uw tekst vet wilt maken zonder afhankelijk te zijn van CSS.