HTML | Etiqueta de estilo – Barcelona Geeks

La etiqueta <style> en HTML nos ayuda a modificar nuestro texto, visto en la página. Esta modificación incluye cambiar el tamaño de la fuente, la familia de fuentes, el color de la fuente, etc. No solo los textos, sino que también podemos cambiar el estilo de un cuerpo o parte de una página. Ahora veamos varios atributos de estilo y qué más admite la etiqueta.
Sintaxis:

<tagname style="property:value;">

El nombre de la etiqueta incluye <p>, <body>, de <h1> a <h6>, etc.
La propiedad se toma prestada de CSS como color, tamaño de fuente, familia de fuentes, etc.
El valor también se toma prestado de CSS.

Familia de fuentes HTML: la familia de fuentes cambia el estilo de fuente de un texto y se puede usar en cualquier etiqueta de escritura de texto como <p> o etiqueta de encabezado. Estas familias de fuentes incluyen todos los nombres que encuentra en Microsoft Office o cualquier otro software basado en escritura.
Ejemplo:

<html>
<head>
    <title>Font Family</title>
</head>
<body>
    <h1 style="font-family:commanders;">Hello GeeksforGeeks.</h1>
    <h2 style="font-family:Chaparral Pro Light;">Hello GeeksforGeeks.</h2>
    <h3 style="font-family:algerian;">Hello GeeksforGeeks.</h3>
    <p style="font-family:Castellar;">Hello GeeksforGeeks.</p>
</body>
</html>

Producción:

Tamaño de fuente HTML: el tamaño de fuente cambia el tamaño de un texto y esto también se puede usar en cualquier etiqueta de escritura de texto como <p> o etiqueta de encabezado. Las unidades se pueden dar en “%” o también se pueden incluir píxeles u otras unidades.
Ejemplo:

<html>
<head>
    <title>Font Size</title>
</head>
<body>
    <h1 style="font-size:80%;">Hello GeeksforGeeks.</h1>
    <h2 style="font-size:150%;">Hello GeeksforGeeks.</h2>
    <h3 style="font-size:20px;">Hello GeeksforGeeks.</h3>
    <p style="font-size:30px;">Hello GeeksforGeeks.</p>
</body>
</html>

Producción:

Color de fuente HTML: la etiqueta de color de fuente cambia el color de un texto y se puede usar en cualquier etiqueta de escritura de texto como <p> o etiqueta de encabezado. Podemos usar tanto el nombre de los colores como los códigos de color que se usan principalmente en Photoshop. Para varios códigos de color o para elegir entre varios rangos de color, consulte Códigos de color HTML .
Ejemplo:

<html>
<head>
    <title>Font Color</title>
</head>
<body>
    <h1 style="color:red;">Hello GeeksforGeeks.</h1>
    <h2 style="color:#8CCEF9;">Hello GeeksforGeeks.</h2>
    <h3 style="color:green;">Hello GeeksforGeeks.</h3>
    <p style="color:#810CA6;">Hello GeeksforGeeks.</p>
</body>
</html>

Producción:

Alineación de texto HTML: la etiqueta de alineación de texto se utiliza para cambiar la alineación de un texto, incluida la alineación central, izquierda o derecha.
Ejemplo:

<html>
<head>
    <title>Text Align</title>
</head>
<body>
    <h1 style="text-align:left;">Hello GeeksforGeeks.</h1>
    <h2 style="text-align:center;">Hello GeeksforGeeks.</h2>
    <p style="text-align:right;">Hello GeeksforGeeks.</h2>
</body>
</html>

Producción:

Color de fondo HTML: Usando este atributo podemos cambiar el color de fondo de la página o página web. Este atributo se usa junto con la etiqueta del cuerpo para cambiar todo el color del cuerpo. También se puede usar junto con las etiquetas de texto para cambiar el color del bloque de texto.
Ejemplo:

<html>
<head>
    <title>Background Color</title>
</head>
<body style="background-color:#616A6B;">
    <h1 style="font-family:commanders; 
        background-color:yellow;">Hello GeeksforGeeks.</h1>
    <h2 style="font-family:algerian; 
        background-color:cyan;">Hello GeeksforGeeks.</h2>
    <p style="font-family:Castellar; 
        background-color:green;">Hello GeeksforGeeks.</p>
</body>
</html>

Producción:

Ahora también aprendemos algo nuevo: dentro de una sola etiqueta <style> podemos agregar varios atributos usando un punto y coma, como se muestra en el ejemplo anterior.

Aplicación de CSS

Ya que hemos aprendido cómo usar el atributo de estilo para proporcionar las propiedades CSS a los elementos HTML, veamos cómo usarlos en CSS. Las propiedades CSS se pueden mencionar dentro de las etiquetas de estilo que se encuentran dentro de la etiqueta principal. A cada elemento se le pueden proporcionar propiedades únicas mencionando etiquetas únicas como h1 o p y si hay más de un elemento, podemos asignar a cada elemento una identificación o clase única, para diferenciarlos del resto.
Ejemplo:

<html>
<head>
    <title>CSS</title>
    <!--CSS properties applied inside this style tag-->
    <style>
        body{
        background-color: #616A6B;
        }
        h1{
        font-family: commanders;
        background-color: yellow;
        }
        h2{
        font-family: algerian; 
        background-color: cyan;
        }
        #first{
        font-family: Castellar; 
        background-color: green;
        color: blue;
        }
        .second{
        text-align: right;
        background-color: white;
        font-size: 30px;
        color: red;
        }
    </style>
</head>
<body>
    <h1>Hello GeeksforGeeks.</h1>
    <h2>Hello GeeksforGeeks.</h2>
    <p id = "first">Hello GeeksforGeeks.</p>
    <p class = "second">Welcome Geeks</p>
</body>
</html>

Salida:

navegadores compatibles: los navegadores compatibles se enumeran a continuación:

Google Chrome
explorador de Internet
Firefox
Ópera
Safari

Publicación traducida automáticamente

Artículo escrito por GeeksforGeeks-1 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta