Descripción general del atributo de estilo HTML
El código HTML necesita el atributo de estilo para que las páginas web se representen en navegadores web como Chrome, FireFox, IE para que se muestren como deben verse. Las etiquetas HTML pueden contener una variedad de información y el atributo de estilo controla la apariencia de la información contenida en los bloques HTML utilizando un estilo en línea.
En este artículo, aprenderemos más sobre el atributo de estilo HTML, que no es más que un conjunto de reglas que definen cómo se representará una página en el navegador web.
Lista de atributos de estilo HTML
Aquí hay una lista de todas las propiedades de estilo que se pueden usar para influir y controlar el diseño de elementos HTML acompañado de un ejemplo práctico:
1. Color de fondo
Con esta propiedad CSS podemos establecer el color de fondo para cualquier elemento HTML como,
etc.
Ejemplo
My background is blue
Salida:
2. Color
El color de fuente del texto en un elemento HTML se puede controlar configurando su atributo de color con el nombre de color correcto o código HEX o código RGB.
Ejemplo
My font color is blue
Salida:
3. Color del borde
Podemos establecer el color del borde de cualquier elemento HTML si queremos agregarle un borde.
Ejemplo
Mi borde es rojo
Salida:
Como puede ver en el código anterior, la propiedad de borde acepta 3 propiedades en el siguiente orden: "Borde-ancho borde-estilo borde-color".
4. Imagen de fondo
También podemos establecer una imagen como fondo usando la propiedad background-image de la siguiente manera:
Ejemplo:
Salida:
5. Repetir fondo
Como puede ver en el ejemplo anterior, cuando una imagen se establece como fondo utilizando la propiedad background-image; Por defecto, repite la imagen tanto horizontal como verticalmente. Sin embargo, es posible que algunas imágenes deban repetirse vertical u horizontalmente o tal vez no sea necesario repetirlas. Este comportamiento se puede controlar estableciendo el valor deseado contra la propiedad de background-repeat y solo se puede usar cuando se está usando background-image; de lo contrario, no agregará ningún valor de estilo cuando se use como una propiedad independiente.
El valor "repetir-x" se utiliza para permitir que la imagen se repita solo horizontalmente.
El valor "repetir-y" se utiliza para permitir que la imagen se repita solo verticalmente.
El valor "no repetir" se utiliza para detener cualquier tipo de repetición de la imagen de fondo.
Modifiquemos el ejemplo anterior para mejorar la imagen de fondo.
Ejemplo
Salida:
Podemos comparar los ejemplos anteriores y comprender que con background-image podemos agregar una imagen como fondo y con background-repeat, podemos controlar la repetición de la imagen de fondo.
6. Posición de fondo
Con esta propiedad, podemos definir la posición de la imagen de fondo.
Ejemplo
Salida:
7. Márgenes
CSS nos proporciona propiedades para establecer márgenes en los cuatro lados de un elemento HTML o podríamos agregar márgenes a un lado particular del elemento.
Con margin-top puede agregar un margen a la parte superior del elemento, margin-right agregará un margen a la derecha del elemento, margin-left agregará un margen a la izquierda del elemento y margin-bottom agregará un margen al fondo del elemento. En lugar de usar estas 4 propiedades, también podemos usar la propiedad de margen y establecer sus valores según nuestro requisito.
Ejemplo
p (
margin-top: 25px;
margin-bottom: 75px;
margin-right: 50px;
margin-left: 100px;
)
or
p
(
margin: 25px 50px 75px 100px;
)
8. Relleno
La propiedad de relleno define el espacio entre el contenido de un elemento y sus bordes. Podemos usar la propiedad "relleno" o propiedades de relleno individuales como padding-top, padding-bottom, padding-left, padding-right para establecer el relleno para la parte superior, inferior, izquierda o derecha del contenido de un elemento.
p (
padding-top: 25px;
padding -bottom: 75px;
padding -right: 50px;
padding -left: 100px;
)
or
p
(
padding: 25px 50px 75px 100px;
)
9. Altura y ancho
La altura y el ancho son las propiedades CSS más básicas utilizadas para definir la altura y el ancho de cualquier elemento HTML. Se pueden establecer en un valor de píxel como 200 px o un porcentaje como 10%, 20%, etc.
10. Alinear texto
Esta propiedad se usa para establecer la dirección horizontal en la que nos gustaría alinear el texto de un elemento. El valor se puede establecer en centro, derecha o izquierda.
p (
text-align: center;
)
or
p (
text-align: left;
)
or
p (
text-align: right;
)
11. Decoración de texto
La propiedad de decoración de texto se puede usar para establecer decoraciones como subrayado, línea o sobre texto en HTML.
Ejemplo:
Esto está subrayado
Salida:
12. Espacio entre letras
Como su nombre indica, esta propiedad se usa para definir el espacio entre letras / caracteres en una palabra. Se le puede asignar un valor de píxel positivo o negativo para aumentar o disminuir el espacio entre letras.
Ejemplo:
Mis palabras se superponen
Salida:
13. Altura de línea
La altura de línea define la distancia entre líneas verticales. Al igual que el espaciado entre letras, la altura de la línea también se puede establecer en un valor de píxel positivo o negativo. Repasemos el siguiente ejemplo para comprender mejor:
Ejemplo:
Este párrafo tiene una altura de línea pequeña.
Este párrafo tiene una altura de línea pequeña.
Salida:
14. Dirección del texto
A veces, si el contenido de la página web no está en inglés, sino en otro idioma como el árabe que sigue una convención de derecha a izquierda, tendríamos que cambiar la dirección del texto. En tales casos, podemos invertir la dirección del texto.
Ejemplo:
Estoy de derecha a izquierda
Salida:
15. Sombra de texto
Esta propiedad agrega una sombra al texto.
Ejemplo:
Tengo una sombra gris
Salida:
16. Familia de fuentes
Podemos definir la clase de fuente para el texto en un elemento. Podemos definir varias familias de fuentes separadas por una coma como un sistema alternativo para manejar escenarios donde no se puede cargar una clase de fuente preferida.
- Estilo de fuente: con la propiedad de estilo de fuente podemos agregar un efecto cursivo u oblicuo al texto.
Ejemplo:
Este es un estilo oblicuo.
Salida:
- Peso de la fuente: esta propiedad define el peso de una fuente.
Ejemplo:
Este es un párrafo en negrita
Salida:
Los atributos de estilo mostrados sobre nuestros bloques de construcción con diseño de UI y UX. Continúan evolucionando a medida que se introducen nuevas versiones de CSS.
Artículos recomendados
Esta es una guía para el atributo de estilo HTML. Aquí discutimos la lista de todas las propiedades de estilo que pueden usarse para influir y controlar el diseño de elementos HTML con la ayuda de ejemplos prácticos. También puede echar un vistazo a los siguientes artículos para obtener más información:
- Estilos de fuentes HTML
- Estilos de lista HTML
- Etiquetas HTML básicas
- Ventajas de HTML
- Marcos HTML
- Invertir en JavaScript
- Bloques HTML
- Establecer un color de fondo en HTML con ejemplo