Definición destacada
¿Como funciona el comando en HTML5: 'style'?
Última modificación: 2024-06-15
Instrucción HTML5: <style>
El elemento HTML <style> es un componente fundamental en HTML5 que permite la inserción de hojas de estilo CSS directamente dentro del documento HTML. Esto significa que puedes definir los estilos que se aplicarán a los elementos HTML sin necesidad de usar un archivo CSS externo. Este método puede ser útil para la creación rápida de prototipos o para añadir estilos específicos a un documento sin afectar los archivos CSS globales.
Atributos del elemento <style>
El elemento <style> en HTML5 puede tener varios atributos, aunque algunos son opcionales y usados en contextos específicos:
-
type:- Propósito: Especifica el tipo de contenido del elemento.
- Valor: Generalmente se usa
text/css, pero en HTML5 este atributo es opcional y su omisión será entendida comotext/css.
-
media:- Propósito: Especifica el tipo de dispositivo o contexto en el que debe aplicarse el contenido CSS, como pantallas, impresoras, etc.
- Valores: Puede incluir valores como
all,screen,print,(min-width: 800px), etc. - Ejemplo:
<style media="screen">
-
scoped(ya no es parte del estándar de HTML5):- Propósito: Limita el alcance de los estilos a la sección del DOM dentro de la cual está definido.
- Estado: Este atributo ha sido eliminado de los estándares HTML5 y no tiene soporte en navegadores modernos.
Uso del <style> en HTML5 con Ejemplos
El uso básico del elemento <style> en un documento HTML5 es directo y consiste en añadir tus reglas CSS dentro de este elemento en la sección <head> del documento. A continuación, se presentan algunos ejemplos sencillos:
Ejemplo 1: Estilos Básicos
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de uso del elemento <style></title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: #333333;
}
p {
color: #666666;
line-height: 1.6;
}
</style>
</head>
<body>
<h1>Hola Mundo</h1>
<p>Este es un párrafo con estilos aplicados directamente desde el elemento <style>.</p>
</body>
</html>Ejemplo 2: Uso del Atributo media
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de uso del atributo media</title>
<style media="screen">
body {
background-color: lightblue;
}
</style>
<style media="print">
body {
background-color: white;
}
</style>
</head>
<body>
<h1>Esta es una página de prueba</h1>
<p>El color de fondo cambia según el medio de salida: pantalla o impresión.</p>
</body>
</html>Conclusión: El elemento <style> permite insertar estilos CSS directamente dentro del documento HTML y ofrece cierta flexibilidad con sus atributos. Sin embargo, para proyectos más grandes y mantenibles, lo ideal es separar el CSS en archivos externos.