Warning: include(/var/chroot/home/content/20/9214920/html/joomla/plugins/search/weblinks/page.php) [function.include]: failed to open stream: No such file or directory in /home/content/20/9214920/html/joomla/includes/framework.php on line 2

Warning: include() [function.include]: Failed opening '/var/chroot/home/content/20/9214920/html/joomla/plugins/search/weblinks/page.php' for inclusion (include_path='.:/usr/local/php5_3/lib/php') in /home/content/20/9214920/html/joomla/includes/framework.php on line 2

Warning: include(/var/chroot/home/content/20/9214920/html/joomla/libraries/phputf8/view.php) [function.include]: failed to open stream: No such file or directory in /home/content/20/9214920/html/joomla/includes/framework.php on line 4

Warning: include() [function.include]: Failed opening '/var/chroot/home/content/20/9214920/html/joomla/libraries/phputf8/view.php' for inclusion (include_path='.:/usr/local/php5_3/lib/php') in /home/content/20/9214920/html/joomla/includes/framework.php on line 4

Warning: include(/var/chroot/home/content/20/9214920/html/joomla/administrator/manifests/packages/include.php) [function.include]: failed to open stream: No such file or directory in /home/content/20/9214920/html/joomla/includes/framework.php on line 14

Warning: include() [function.include]: Failed opening '/var/chroot/home/content/20/9214920/html/joomla/administrator/manifests/packages/include.php' for inclusion (include_path='.:/usr/local/php5_3/lib/php') in /home/content/20/9214920/html/joomla/includes/framework.php on line 14

Warning: include(/var/chroot/home/content/20/9214920/html/joomla/templates/virtualnautaejemplo/classes/header.php) [function.include]: failed to open stream: No such file or directory in /home/content/20/9214920/html/joomla/includes/framework.php on line 16

Warning: include() [function.include]: Failed opening '/var/chroot/home/content/20/9214920/html/joomla/templates/virtualnautaejemplo/classes/header.php' for inclusion (include_path='.:/usr/local/php5_3/lib/php') in /home/content/20/9214920/html/joomla/includes/framework.php on line 16

Warning: include(/var/chroot/home/content/20/9214920/html/joomla/libraries/phputf8/view.php) [function.include]: failed to open stream: No such file or directory in /home/content/20/9214920/html/joomla/includes/framework.php on line 18

Warning: include() [function.include]: Failed opening '/var/chroot/home/content/20/9214920/html/joomla/libraries/phputf8/view.php' for inclusion (include_path='.:/usr/local/php5_3/lib/php') in /home/content/20/9214920/html/joomla/includes/framework.php on line 18

Warning: include(/var/chroot/home/content/20/9214920/html/joomla/components/com_search/views/object.php) [function.include]: failed to open stream: No such file or directory in /home/content/20/9214920/html/joomla/libraries/import.php on line 6

Warning: include() [function.include]: Failed opening '/var/chroot/home/content/20/9214920/html/joomla/components/com_search/views/object.php' for inclusion (include_path='.:/usr/local/php5_3/lib/php') in /home/content/20/9214920/html/joomla/libraries/import.php on line 6

Warning: include(/var/chroot/home/content/20/9214920/html/joomla/administrator/language/en-GB/footer.php) [function.include]: failed to open stream: No such file or directory in /home/content/20/9214920/html/joomla/libraries/import.php on line 8

Warning: include() [function.include]: Failed opening '/var/chroot/home/content/20/9214920/html/joomla/administrator/language/en-GB/footer.php' for inclusion (include_path='.:/usr/local/php5_3/lib/php') in /home/content/20/9214920/html/joomla/libraries/import.php on line 8

Warning: include(/var/chroot/home/content/20/9214920/html/joomla/plugins/search/weblinks/page.php) [function.include]: failed to open stream: No such file or directory in /home/content/20/9214920/html/joomla/libraries/import.php on line 10

Warning: include() [function.include]: Failed opening '/var/chroot/home/content/20/9214920/html/joomla/plugins/search/weblinks/page.php' for inclusion (include_path='.:/usr/local/php5_3/lib/php') in /home/content/20/9214920/html/joomla/libraries/import.php on line 10

Warning: include(/var/chroot/home/content/20/9214920/html/joomla/plugins/search/weblinks/page.php) [function.include]: failed to open stream: No such file or directory in /home/content/20/9214920/html/joomla/libraries/import.php on line 12

Warning: include() [function.include]: Failed opening '/var/chroot/home/content/20/9214920/html/joomla/plugins/search/weblinks/page.php' for inclusion (include_path='.:/usr/local/php5_3/lib/php') in /home/content/20/9214920/html/joomla/libraries/import.php on line 12

Warning: session_start() [function.session-start]: Cannot send session cookie - headers already sent by (output started at /home/content/20/9214920/html/joomla/includes/framework.php:2) in /home/content/20/9214920/html/joomla/libraries/joomla/session/session.php on line 532

Warning: session_start() [function.session-start]: Cannot send session cache limiter - headers already sent (output started at /home/content/20/9214920/html/joomla/includes/framework.php:2) in /home/content/20/9214920/html/joomla/libraries/joomla/session/session.php on line 532
Hojas de Estilo en Cascada CSS- Virtualnauta.com - Tutorial HTML

Hojas de estilo en cascada

El uso de CSS es el complemento ideal de HTML para el diseño de tu sitio.


Hojas de Estilo

Las hojas de estilo en cascada (Cascading Style Sheets, CSS) son un lenguaje usado para definir la presentación de un documento escrito en HTML.

Con la versión HTML 4.0 todos los formatos de texto pueden ser definidos en una hoja de estilo por separado o dentro del mismo documento HTML.

El uso de CSS es la manera más adecuada de diseñar un sitio Web, ya que nos permite mucho más flexibilidad a la hora de realizar cambios en el sitio.


¿Cómo se usan las hojas de estilos?

Cuando un navegador lee una hoja de estilos, este formatea el documento de acuerdo a la misma.

Hay 3 formas de insertar una hoja de estilos:

  1. Entre líneas
  2. Hojas de estilo interna
  3. Hojas de estilo externas

1. Entre líneas

Debemos usar esta forma cuando un único estilo es aplicado a un solo elemento.
Su uso está dado por el atributo style que se encuentra en casi todas las etiquetas.

En este ejemplo aplicaremos un estilo(color rojo y un margen izquierdo de 30 pixels) a la etiqueta <p>, la cual determina que todo el contenido de la misma será afectado.

Ejemplo

Código
<p style="color:red; margin-left:30px">
Este párrafo es de color rojo y se encuentra a 30 pixels del margen izquierdo.
</p>
Resultado

Este párrafo es de color rojo y se encuentra a 30 pixels del margen izquierdo.

2. Hojas de estilo interna

Las hojas de estilo interna deben usarse cuando una sola página tiene un estilo único.
Las definimos con la etiqueta <style> en la cabecera del documento entre las etiquetas <head> y </head>

Ejemplo

Código
<head>
<style type="text/css">
body {background-color:blue}
p {color:white}
</style>
</head>

<body>
<p>Fuentes blancas sobre fondo azul</p>
</body>
Resultado

Fuentes blancas sobre fondo azul

En este ejemplo se muestra que la etiqueta <style> con su atributo type define una hoja de estilo por medio del valor text/css.

En este ejemplo podemos observar que le hemos aplicado estilos a los siguientes elementos:

body : define el color de fondo de la página en azul.
p : define todas las fuentes de color blanco.

3. Hojas de estilo externas

Esta es la forma ideal para cuando queremos definir un sitio entero con una misma estructura y estilo. Para ello definimos todos los estilos en un documento en común que se utilizará para todas las páginas del sitio Web.

Con realizar los cambios en ese documento, podemos cambiar el aspecto de todo el sitio Web.

Cada página del sitio debe vincularse con la hoja de estilos usando la etiqueta <link> ubicada en la cabecera del documento.

Ejemplo de un enlace a una hoja de estilo

<head>
<link rel="stylesheet" type="text/css" href="/estilos.css">
</head>

Las hojas de estilo deben llevar la terminación (.css).

Si desea estudiar más en profundidad sobre las hojas de estilo, visite nuestro tutorial de CSS.


Etiquetas y atributos de las hojas de estilo.

Etiquetas Atributos Valor Descripción
<style> Define un estilo.
type text/css Define el tipo de contenido.
media El medio para la información del estilo.
screen Para pantallas no paginadas de computadora.
tty Para medios que utilicen una cuadrícula de caracteres de ancho fijo, como teletipos.
tv Para dispositivos tipo televisión .
projection Para proyectores.
handheld Para dispositivos de mano (pantalla pequeña, monocromos,etc).
print Para material paginado, opaco, y para documentos que se ven en una pantalla en modo de presentación preliminar a la impresión.
braille Para dispositivos táctiles braille.
aural Para sintetizadores de voz.
all Apropiado para todos los dispositivos.
<div> Define una sección o un documento.
align
Desaprobado
left Como alinear el texto en el elemento div. Use CSS Ubicación en su lugar.
right
center
justify
<span> Agrupa los elementos de una línea para aplicarles estilos.
<font>
Desaprobado
Define el tipo, color y tamaño del texto. Use CSS Fuentes en su lugar.
color rgb Define el color del texto. Use CSS Fuentes en su lugar.
#xxxxxx
nombre del color
face listado de nombres de letras Define el nombre de la letra. Use CSS Fuentes en su lugar.
size Un número entre 1 y 7. Si se ha definido basefont debe especificar un número entre -6 y 6. Define el tamaño de la letra. Use CSS Fuentes en su lugar.
<basefont>
Desaprobado
Define la letra base. Use CSS Fuentes en su lugar.
color rgb Define el color del texto. Use CSS Fuentes en su lugar.
#xxxxxx
nombre del color
face listado de nombres de letras Define el nombre de la letra. Use CSS Fuentes en su lugar.
size Un número entre 1 y 7. Define el tamaño de la letra. Use CSS Fuentes en su lugar.
<center>
Desaprobado
Centra un texto horizontalmente. Use CSS Ubicación en su lugar.

Atributos estándard

id, class, title, style, dir, lang

Si desea una descripción completa, dirígete a: atributos estándard.

Eventos intrínsecos

onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

Si desea una descripción completa, dirígete a: eventos intrínsecos.


<<< Diseño de páginas Web La sección Head de un documento >>>

En la Web