Cómo en negrita el texto en CSS
Ejemplo 1:
Necesitamos algunos elementos para aplicar la propiedad "Font-Weight". Como resultado, comenzamos creando algunos elementos HTML. Primero debemos abrir un nuevo archivo para crear un archivo HTML eligiendo HTML como idioma. El software que usaremos en este tutorial es el código de Visual Studio. En este archivo, comenzaremos a escribir código. Además, entramos "!"Y luego presione" Enter "para adquirir las etiquetas HTML fundamentales, que son necesarias para todos los códigos HTML.
Después de todo esto, necesitamos crear el cuerpo donde agregaremos algunos párrafos debajo del encabezado. Estamos dando a cada párrafo un nombre único para que podamos usarlo cuando aplicamos el atributo "Font-Weight" a estos párrafos. Tenemos tres párrafos aquí. Ahora, aplicaremos la propiedad "Font-Weight" a estos párrafos en el código CSS. Debemos vincular ambos archivos, el archivo HTML y el archivo CSS dentro del cabezal utilizando la etiqueta "Enlace".
Primero, ponemos el nombre del párrafo "P.P1 "y luego utilice la propiedad" Font-Weight ". Esta propiedad se utiliza para establecer el grosor del texto. Aquí, lo establecemos en "Normal", que también es un valor predeterminado. El "tamaño de fuente" para este primer párrafo es "20px". Después de esto, tenemos un segundo párrafo llamado "P2" y establecemos su "Font-Weight" en "Bold". Esta palabra clave "en negrita" se usa para hacer que el texto del párrafo sea más grueso que el texto simple y también establece su tamaño en "20px". Ahora, para "P3", nuevamente utilizamos la propiedad "Font-Weight". Esta vez, establecemos el valor numérico para establecer el grosor del tercer párrafo y haciéndolo "audaz". Aquí, usamos el valor "900" para esta propiedad "Font-Weight". Entonces, el texto del párrafo aparecerá "audaz" y también "tamaño de fuente" es el mismo que los párrafos anteriores.
Aquí está la salida a continuación, tenemos tres párrafos en la salida y el primer párrafo es simple porque establecemos su valor como normal. El segundo párrafo es más grueso que el primero, lo que significa que este párrafo es "audaz". Además, el último párrafo es "audaz", pero para el tercer párrafo, establecemos el valor numérico en la propiedad "Font-Weight".
Ejemplo # 2:
Aquí, tenemos siete párrafos diferentes con nombres únicos, por lo que usaremos estos nombres en el código CSS para aplicar la propiedad "Font-Weight" en ellos. Estableceremos un valor numérico para esta propiedad, así como las palabras clave.
Estamos utilizando "color" para el encabezado como "granate" y establecemos el "tamaño de fuente" para todo "cuerpo" en "22px". Para "PAR1", establecemos el "peso de fuente" en "normal" y "rojo" como el "color" de este "par1". Para "PAR2", establecemos el valor "Font-Weight" como "600" y el color "verde" está aquí para "PAR2". El valor "Font-Weight" para "PAR3" se ha establecido en "700" y el color "Azul" se usa aquí. Ahora, nuevamente utilizamos la propiedad "Font-Weight" para el próximo párrafo "PAR4" y la establecemos en "800" y su "color" es "naranja". El "PAR5" "Font-Weight" se establece como "900" y el "color" para "PAR5" es "púrpura". Después de esto, estamos configurando la palabra clave "en negrita" para el valor "Font-peso" para "PAR6" y también definiendo su "color" a "rosa". Ahora, tenemos el último párrafo "PAR7" y lo establecemos en la palabra clave "más audaz". El "color" de "par7" es "magenta".
Puede ver múltiples párrafos con diferentes valores de la propiedad "Font-Weight". El primer párrafo parece normal, ya que establecemos su valor como "normal". Los párrafos restantes parecen "audaces" porque establecemos el grosor de estos párrafos en el código CSS utilizando la propiedad "Font-Weight".
Ejemplo # 3:
Tenemos dos párrafos en este código y aplicaremos la propiedad "Font-Weight" a un párrafo y le mostraremos la diferencia entre el texto en negrita y el texto simple.
Primero, vamos a diseñar el cuerpo utilizando dos propiedades. La propiedad "del tamaño de la fuente" establece el tamaño del texto en "20px" y luego alinea todos los elementos del cuerpo con el "centro" utilizando la propiedad "Align de texto". También diseñamos el encabezado para que sea más atractivo utilizando "granate" para el "color" de "H1". Hemos establecido "argelino" como "familia de fuentes" y "subrayar" el "H1" utilizando la propiedad "Decoración de texto". Para el "H2", establecemos el color "verde" y la "familia de fuentes" es "Times New Roman". Ahora, vamos a utilizar la propiedad "Font-Weight" para ambos párrafos. Para "para1", su valor se establece como "normal". Pero para el "para2", simplemente usamos la palabra clave como su valor y la establecemos en "en negrita" para hacer que el texto sea grueso.
Puede notar fácilmente la diferencia entre ambos párrafos. El primer párrafo es el párrafo normal, pero el segundo párrafo aquí es "audaz". El tamaño de fuente de ambos párrafos es el mismo, pero puedes ver que el segundo párrafo parece audaz.
Ejemplo # 4:
Tenemos dos encabezados diferentes y cuatro clases de div diferentes con diferentes nombres para cada div. Vamos a utilizar la propiedad "Font-Weight" para estos Divs.
Primero, usaremos estos dos parámetros para diseñar el cuerpo. El atributo de "tamaño de fuente" ajusta el tamaño del texto al "21px". La propiedad "alinearse" de texto "Centro" todos los componentes del cuerpo a medida que lo establecemos. La "familia-familia" para todos los elementos del cuerpo es "Times New Roman". Utilizamos "púrpura" como el "color" de "H1", definimos la "familia de fuentes" a "argelino" y además diseñamos el encabezado estableciendo el atributo de "decoración de texto" para "subrayar" el "H1". Elegimos el color "naranja" para el "H2" y "Calibri" como la familia de fuentes. No aplicamos ninguna propiedad para el "Div1" y el "Div2", estamos estableciendo un valor numérico "900" para el valor "Font-Weight". Tenemos "Div3" y "Bold" utilizados para "Font-Weight" y el "Div4", "Font-Weight" se establece como "más audaz".
El primer párrafo "DIV1" es simple y no establecimos ningún valor de "Font-Weight" para este DIV1, por lo que el valor predeterminado se establece aquí para "Div1". Para los otros Divs, establecemos el valor del valor de "Font-Weight" y hacemos que el texto de estos divs sea "en negrita" o "grueso". También mencionamos el "peso de fuente" de todos los divs en la salida. El DIV2 aparece con el valor de Font-Weight "900", el siguiente Div3 aparece aquí como un valor "audaz" para la propiedad "Font-Weight" y "Bolder" para el último DIV3.
Conclusión
Has aprendido a usar la propiedad CSS "Font-Weight" a través del curso de este tutorial. En este tutorial, hemos examinado la propiedad de CSS "Font-Weight" y hemos explicado lo que hace, por qué lo usamos, cómo usarlo y qué resultados produce. La propiedad "Font-Weight" ya se ha cubierto en este tutorial. Hemos utilizado esta propiedad de "peso de fuente" para establecer el peso de la fuente en más gruesas o audaces. Junto con los resultados de cada ejemplo en este tutorial, también hemos proporcionado códigos sobre cómo usar la propiedad "Font-Weight". Creo que tendrá una comprensión sólida de la propiedad de CSS "Font-Weight" después de leer este tutorial cuidadosamente.