En este artículo, veremos el atributo de estilo HTML , junto con la comprensión de su implementación a través de los ejemplos. Los estilos en HTML son básicamente reglas que describen cómo se presentará un documento en un navegador. La información de estilo se puede adjuntar como un documento separado o incrustarse en el documento HTML. Hay 3 formas de implementar el estilo en HTML:
- Estilo en línea : en este método, el atributo de estilo se usa dentro de la etiqueta de inicio HTML.
- Estilo incrustado : en este método, el elemento de estilo se usa dentro del elemento <head> del documento.
- Estilo externo : en este método, el elemento <link> se usa para apuntar a un archivo CSS externo.
Etiquetas compatibles: admite todos los elementos HTML.
Estilo en línea: en el estilo en línea, las reglas de CSS se escriben directamente dentro de la etiqueta de inicio utilizando el atributo de estilo. El atributo de estilo incluye una serie de propiedades CSS y pares de valores. Cada par ‘ propiedad: valor ‘ está separado por un punto y coma ( ; ). Este atributo anulará las propiedades de estilo globalmente para cualquier conjunto de estilos relevante.
Ejemplo: este ejemplo describe el estilo interno especificando el atributo de estilo para agregar las diversas propiedades de estilo.
HTML
<!DOCTYPE html> <html> <head> <title>Inline Styling</title> </head> <body> <h1 style="color:Blue;font-size:25px;"> Example of Inline Style </h1> <p style="color:red;">First paragraph</p> <p style="color:green;font-size:40px;"> Second paragraph </p> <hr style="border-color:orange;"> </body> </html>
Producción:
atributo de estilo
Estilo incrustado: las hojas de estilo incrustadas o internas solo afectan al documento en el que están incrustadas. Las hojas de estilo incrustadas se definen en la sección <head> de un documento HTML mediante la etiqueta <style>.
Ejemplo: este ejemplo describe la propiedad de estilo incrustado.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
body {
background-color: powderblue;
}
h1 {
color: black;
font-family: arial;
}
p {
color: yellow;
font-family: verdana;
}
</style>
<title>Embedded Styling</title>
</head>
<body>
<h1>Example of Embedded Style</h1>
<p>First paragraph.</p>
</body>
</html>
Producción:
Estilo incrustado
Hoja de estilo externa: el método de hojas de estilo externas puede ser útil cuando el CSS debe aplicarse a varias páginas web. Una hoja de estilo externa contiene todas las reglas de estilo en un documento separado que puede vincular desde un archivo HTML en su sitio. Hay dos formas de adjuntar hojas de estilo externas:
- Vinculación de hojas de estilo externas
- Importación de hojas de estilo externas
Vinculación de hojas de estilo externas : en este método, una hoja de estilo externa se vincula a un documento HTML utilizando la etiqueta <link>.
Ejemplo: este ejemplo describe la hoja de estilo externa para agregar las diversas propiedades de estilo.
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="/html/css/externalstyle.css"> <title>External Styling</title> </head> <body> <h3>Example of Linking External Style Sheet</h3> <p>First paragraph.</p> </body> </html>
Producción:
Estilo externo
Importación de hojas de estilo externas: las hojas de estilo externas se pueden cargar en un documento HTML utilizando » @import «. La instrucción «@import» le indica al navegador que cargue el archivo CSS. También se pueden incluir otras reglas CSS utilizando el elemento <style>.
Ejemplo: este ejemplo describe la importación de una hoja de estilo externa para agregar las propiedades de estilo del estilo externo.
HTML
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
@import url("/html/css/importstyle.css");
p {
color: powderblue;
font - size: 30px;
}
</style>
<title>Importing external Styling</title>
</head>
<body>
<h3>Example of external style sheet using import</h3>
<p>First paragraph</p>
</body>
</html>
Producción:
Importación de estilo externo
Navegador compatible: los navegadores compatibles con el atributo de estilo se enumeran a continuación:
- Google Chrome
- explorador de Internet
- Borde de Microsoft
- Firefox
- Ópera
- Safari
Publicación traducida automáticamente
Artículo escrito por Shubrodeep Banerjee y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA