Javascript Obtener Elemento Hijo Por Etiqueta

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

Para crear un efecto de texto en negrita CSS, debe usar la propiedad font-weight. La propiedad font-weight determina el "peso" de una fuente, o qué tan negrita aparece esa fuente. Puede usar palabras clave o valores numéricos para instruir a CSS sobre qué tan audaz debe ser un texto.

Como desarrolladores, cuando diseñamos un sitio web, a veces queremos llamar la atención sobre algo . Hay varias maneras en que podemos hacer esto. La forma más sencilla es aumentar el peso de los caracteres del texto que desea resaltar. Esto se refiere a hacer que el texto aparezca en negrita.

En este artículo, hablaremos sobre la fuente de peso, cómo definirla y brindaremos una ilustración de los diferentes valores posibles de la propiedad.

CSS Fat: una guía

Los conjuntos de propiedades font-weight son cómo debe aparecer el texto en negrita en la pantalla. Puede usar palabras, claves o valores numéricos para decir CSS qué tan negrita debe aparecer un texto juntos

La sintaxis de la propiedad CSS font-weight es la siguiente:

El valor weightOfFont es el peso de la fuente que desea usar para el elemento al que se aplica el estilo.

La propiedad font-weight acepta algunos valores, según el peso de la fuente que desee establecer para un elemento en particular.

CSS scale bold

Piense en su familia de fuentes como si tuviera una escala de 100 a 1000 en negrita. Cuanto mayor sea el número, más negrita será el carácter

Investigue un poco sobre su familia de fuentes favorita. Esto le permitirá estar seguro de que el resultado será tan claro o audaz como desee en su sitio. Algunas familias de fuentes no usan escala completa.

El siguiente código muestra qué tan clara y qué tan oscura puede lograr una fuente popular llamada `Arial` al usar números y palabras - clave:

y más negrita más claro: ¿qué significan realmente?

Lo principal que debe señalarse aquí es que más ligero y más audaz no es una traducción literal. Más negrita no significa "más negrita que negrita"

De hecho, más audaz y más claro significa, en este contexto, qué tan audaces son o qué tan claros son en relación con su elemento principal. Entonces, cuando hagamos un elemento secundario más atrevido, tendrán una fuente relativa más oscura que sus padres; lo mismo ocurre con el más claro.

Los pesos relativos de los caracteres son los siguientes:

td> < td> 400
Peso relativo de los caracteres < td> peso de fuente real
delgado 100
normal
negrita 700
fuerte 900

Entonces, podríamos usar la fuente de peso: propiedad en negrita para establecer th e peso de la fuente de un párrafo de texto a 800. Cuando un niño tiene un peso relativo más audaz que el padre, use la tabla anterior para comprender qué tan gordo es.

Por ejemplo, digamos que tengo un niño que tiene un padre con un grosor de fuente de 400. Si pongo el valor de grosor de fuente en el elemento secundario más negrita, el grosor de fuente en el elemento secundario se convierte en 700.

Esto se debe a que el elemento secundario tiene una fuente más oscura en comparación a -peso que el padre. Si el padre ya es lo más oscuro o claro posible, estos valores de propiedad no hacen nada.

ejemplo de peso de fuente CSS

Digamos que está diseñando un sitio web para The Seattle Stamp Club, una empresa local de sellos. La empresa de sellos a la que le pedimos que hiciera Quienes son - nosotros encabezamos aparece en negrita en A Acerca de su sitio web. Esto llamará la atención del visitante sobre el título.

El club de sellos nos ha pedido que agreguemos un bloque de texto a su sitio web con la historia del club. Este bloque de texto debe aparecer con el peso de fuente normal. Algunas frases que el club quiera llamar la atención del espectador deben aparecer en negrita

Podríamos usar el siguiente código para crear este bloque de texto, con algunas frases recomendadas:

Estilo de clic imagen del botón botón en el editor de código de arriba para ver el resultado de nuestro código HTML/CSS.

en nuestro archivo HTML, hemos definido un párrafo de texto incluido de

; . tag también hemos incluido algunas oraciones en . etiquetas, que fomentamos en nuestro CSS

A continuación, en nuestro archivo CSS, definimos una regla de estilo que define el peso del estilo de fuente de cada < /a> etiqueta más negrita. Esto significa que el texto encerrado en una etiqueta aparece en negrita que el elemento principal.

Cuando ejecutamos nuestro código, nuestro párrafo aparece con un ancho de fuente normal y las oraciones encerradas en etiquetas se muestran en negrita . En este ejemplo, las expresiones da la bienvenida a todos y 250 miembros están encerradas en las etiquetas .

Texto CSS en negrita con caracteres variables

El último nivel de fuentes CSS pone a nuestra disposición algunas fuentes nuevas. Se denominan caracteres variables y pueden tomar un número entre 1 y 1000 como ancho de carácter. La compatibilidad con navegadores no se implementó por completo hasta mayo de 2020, por lo que son bastante nuevos. Si desea obtener más información sobre las fuentes variables, consulte esta rel = "noopener"> l ` introducción.

Conclusión

En este tutorial, hemos discutido el CSS font -weight propiedad y cómo afecta la negrita de nuestras fuentes.

Hemos aprendido que un peso más audaz y ligero significa un peso de fuente relativo alejado del peso de fuente del elemento principal. Básicamente, observamos un rango de pesos de caracteres para ver cómo se ve el texto. Serás un ponderador de fuentes profesional en poco tiempo

Para obtener más información sobre la codificación en CSS, lea nuestra guía sobre cómo aprender CSS . Puede leer nuestra guía sobre cómo poner texto en negrita en HTML si desea que su texto esté en negrita sin depender de CSS.