2.7. Estilos (style)
La etiqueta <style> define hojas de estilo para el documento actual. Esta etiqueta debe ser ubicada en la cabecera del documento.Va entre las etiquetas:
<head></head>
Está delimitado por las etiquetas:
<style></style>
Ejemplo:
<head>
<style type="text/css">
Aqui van los atributos y valores de estilos.
</style>
</head>
<style type="text/css">
Aqui van los atributos y valores de estilos.
</style>
</head>
Nota:
No se explica lo que va entre las etiquetas <style></style> porque lo normal es utilizar Hojas de Estilo en Cascada (Cascading Style Sheets) CSS. Solamente es para que se sepa que es posible dar estilo a una página desde la propia página o en casos que se quiera poner algun estilo en concreto.
Ejemplo:
<head>
<style type="text/css">
H1 {border-width: 1px; border: solid; text-align: center}
.clase {border-width: 1px; border: solid; text-align: center}
#id {border-width: 1px; border: solid; text-align: center}
Es lo mismo que poner:
H1, .clase, #id {border-width: 1px; border: solid; text-align: center}
</style>
</head>
.clase: Para el atributo class. Es llamado: <div class="clase">
#id: Para el atributo id. Es llamado: <div id="id">
<style type="text/css">
H1 {border-width: 1px; border: solid; text-align: center}
.clase {border-width: 1px; border: solid; text-align: center}
#id {border-width: 1px; border: solid; text-align: center}
Es lo mismo que poner:
H1, .clase, #id {border-width: 1px; border: solid; text-align: center}
</style>
</head>
.clase: Para el atributo class. Es llamado: <div class="clase">
#id: Para el atributo id. Es llamado: <div id="id">
2.7.1. Atributos
Van dentro de la etiqueta:<style>
2.7.1.1. type
Es Obligatorio en la etiqueta <style>. Especifica el lenguaje de hojas de estilo. El único valor es text/css.Ejemplo:
<style type="text/css">
Aqui van los atributos y valores de estilos.
</style>
Aqui van los atributos y valores de estilos.
</style>
2.7.1.2. media
Especifica los estilos para los diferentes tipos de medios. Puede ser un solo medio o una lista de medios separada por comas. Los navegadores soportan los valores all, screen y print. El valor predeterminado es screen.- all: Aplicable a cualquier dispositivo.
- aural: Para sintetizadores de voz.
- braille: Para dispositivos táctiles Braille.
- handheld: Para dispositivos de mano (pantalla pequeña, monocromáticos, etc.).
- print: Para paginados y para documentos vistos en pantalla en vista previa de impresión.
- projection: Para proyectores.
- tty: Para medios usando una grilla de caracteres como los teletypes, terminales, o dispositivos portables con capacidades de graficación limitadas.
- tv: Para dispositivos tipo televisión (baja resolución o color, sin desplazamiento).
- screen: Para pantallas de computadoras.
Ejemplo:
<html>
<head>
<title>HTML Básico</title>
<style type="text/css" media="screen">
Aqui van los atributos y valores de estilos.
</style>
</head>
<body>
Etiquetas y contenidos del cuerpo. Parte del documento que será mostrada por el navegador: Texto e imágenes.
</body>
</html>
<head>
<title>HTML Básico</title>
<style type="text/css" media="screen">
Aqui van los atributos y valores de estilos.
</style>
</head>
<body>
Etiquetas y contenidos del cuerpo. Parte del documento que será mostrada por el navegador: Texto e imágenes.
</body>
</html>
2.7.1.3. title
Este atributo ofrece información consultiva sobre el elemento para el cual se establece.Ejemplo:
<html>
<head>
<title>HTML Básico</title>
<style type="text/css" media="screen" title="Estilos para la página">
Aqui van los atributos y valores de estilos.
</style>
</head>
<body>
Etiquetas y contenidos del cuerpo. Parte del documento que será mostrada por el navegador: Texto e imágenes.
</body>
</html>
<head>
<title>HTML Básico</title>
<style type="text/css" media="screen" title="Estilos para la página">
Aqui van los atributos y valores de estilos.
</style>
</head>
<body>
Etiquetas y contenidos del cuerpo. Parte del documento que será mostrada por el navegador: Texto e imágenes.
</body>
</html>
2.7.1.4. dir
Especifica la dirección del texto. El valor ltr va de izquierda a derecha (left to right). El valor rtl va derecha a izquierda (right to left). El español se escribe de izquierda a derecha mientras que el árabe o hebreo van de derecha a izquierda.Ejemplo:
<html>
<head>
<title>HTML Básico</title>
<style dir="ltr"></style>
</head>
<body>
Etiquetas y contenidos del cuerpo. Parte del documento que será mostrada por el navegador: Texto e imágenes.
</body>
</html>
<head>
<title>HTML Básico</title>
<style dir="ltr"></style>
</head>
<body>
Etiquetas y contenidos del cuerpo. Parte del documento que será mostrada por el navegador: Texto e imágenes.
</body>
</html>
2.7.1.5. lang
Especifica el idioma base de los valores de los atributos y del texto contenido en un elemento. El atributo lang es útil para:- Ayudar a los motores de búsqueda.
- Ayudar a los sintetizadores de voz.
- Ayudar al agente de usuario a hacer decisiones sobre separación de palabras, ligaduras, y espaciado.
- Ayudar a los verificadores de ortografía y gramática.
Ejemplo:
<html>
<head>
<title>HTML Básico</title>
<style lang="es-ES"></style>
</head>
<body>
Etiquetas y contenidos del cuerpo. Parte del documento que será mostrada por el navegador: Texto e imágenes.
</body>
</html>
<head>
<title>HTML Básico</title>
<style lang="es-ES"></style>
</head>
<body>
Etiquetas y contenidos del cuerpo. Parte del documento que será mostrada por el navegador: Texto e imágenes.
</body>
</html>
Temas :
- 0. Introducción
- 1. Documento HTML
- 2. Cabecera <head>
- 2.2. Título <title>
- 2.3. Metadatos <meta>
- 2.4. Enlaces <link>
- 2.5. Base <base>
- 2.6. Script <script>
- 2.7. Estilos <style>
- 3. Cuerpo <body>.
- 3.2. Caracteres especiales
- 3.3. Texto
- 3.4. Listas
- 3.5. Enlaces
- 3.6. Imágenes
- 3.7. Tablas
- 3.8. Formularios
- Apéndice A