Diseño y maquetación con CSS

Box model: modelo de caja en CSS

El modelo de caja define cómo los elementos se representan visualmente: incluye el contenido, padding, bordes y márgenes. Por ejemplo:

				
					div {  
    width: 200px;              /*Ancho*/        
    padding: 10px;             /*Relleno*/
    border: 5px solid black;   /*Borde*/
    margin: 15px;              /*Margen*/    
}

Diseño de estructuras básicas: bloques, líneas y columnas

Organiza elementos en bloques o líneas, y diseña columnas con propiedades como float, flex, o grid.

				
					.col {  
    float: left;  
    width: 33.33%;  
}

Posicionamiento de elementos: relative, absolute, fixed

Controla la ubicación de los elementos:

🔸Relative: Posición relativa a su posición original.

🔸Absolute: Posición respecto al contenedor con relative.

🔸Fixed: Posición fija en la ventana.

Cuestionario HTM y CCS

Diseño responsive y media queries

Adapta el diseño a diferentes tamaños de pantalla con media queries.

				
					@media (max-width: 768px) {
    body {
        background-color: lightblue; 
    }
}

Flexbox y Grid: herramientas avanzadas de maquetación

🔸Flexbox: Centra y distribuye elementos en una dimensión.

🔸Grid: Organiza elementos en filas y columnas.

				
					.container { 
    background-color: aqua;
    display: flex; 
    justify-content: center; 
    align-items: center; 
}

Enlaces

CSS permite aplicar diferentes estilos a un mismo enlace en función de su estado. De esta forma, es posible cambiar el aspecto de un enlace cuando, por ejemplo, el usuario pasa el ratón por encima o cuando el usuario pincha sobre ese enlace.

Con los atributos id o class no es posible aplicar distintos estilos a un mismo elemento en función de su estado. Por ello, CSS introduce un nuevo concepto llamado pseudo-clases y, en concreto, define cuatro diferentes:

🔸:link, aplica estilos a los enlaces que apuntan a páginas o recursos que aún no han sido visitados por el usuario.

🔸:visited, aplica estilos a los enlaces que apuntan a recursos que han sido visitados anteriormente por el usuario.

🔸:hover, aplica estilos al enlace sobre el que el usuario ha posicionado el puntero del ratón.

🔸:active, aplica estilos al enlace que está pinchando el usuario. Los estilos sólo se aplican desde que el usuario pincha el botón del ratón hasta que lo suelta, por lo que suelen ser unas pocas décimas de segundo.

				
					a:Visited {color: white;}
a:Active {color: red;}
a:Hover {color: black;}

El siguiente ejemplo muestra cómo ocultar el subrayado cuando el usuario pasa el ratón por encima de cualquier enlace de la página:

				
					a:hover  {text-decoration: none; }

Si se definen varias pseudo-clases diferentes sobre un mismo enlace, habrá que hacerlo en el orden en que se han descrito para que no se produzcan colisiones de estilos.

Imágenes

CSS permite establecer la anchura y la altura de una imagen mediante las propiedades width y height, respectivamente, independientemente de su anchura y altura real. Veamos un ejemplo:

				
					#destacada {
    width: 100px;
    height: 200px;
}

/* Documento HTML */
<img id=”destacada” src=”imagen.png” />

Usar anchuras y alturas diferentes a las reales produce deformaciones en las imágenes y el resultado estético es muy desagradable.

Por otra parte, establecer la anchura y altura para cada imagen mediante CSS es una práctica poco recomendable puesto que produce una sobrecarga de estilos. Por este motivo, aunque es una solución que no respeta la separación entre contenidos y presentación, se recomienda establecer la anchura y la altura de las imágenes mediante atributos de la etiqueta <img>.

Cuando una imagen forma parte de un enlace, los navegadores muestran por defecto un borde grueso azul alrededor de ella. Por tanto, una de las reglas más utilizadas en los archivos CSS es la que elimina los bordes de las imágenes con enlace:

				
					img { border: none;}

Tipos de imágenes en la Web

Una de las principales decisiones a la hora de incluir imágenes en una web es elegir el formato correcto para cada tipo de imagen de manera que se logre una correcta relación entre la calidad visual de la misma y su peso en bytes. Básicamente, existen distintos tipos de imágenes: las que son mapas de bits, las vectoriales y las imágenes animadas.

En la web, las imágenes deben ocupar lo menos posible. Cuanto menos peso tengan las imágenes, más rápido podrán descargarse. Para lograr que las imágenes ocupen el menor tamaño posible se utilizan las técnicas de compresión.

Estas técnicas consisten en reducir el número de bits necesarios para representar la imagen eliminando la información redundante. Se dice que hay información redundante cuando hay información repetida que se podría eliminar permitiendo la reconstrucción de la información original sin problemas.

La compresión consiste en eliminar la información redundante. Existen varios métodos de compresión empleados por los diferentes formatos de almacenamiento de imágenes, pero se clasifican en dos tipos: 🔸Métodos de compresión sin pérdida de información (lossless): estos métodos se basan en eliminar la redundancia de datos. Uno de ellos es el método de compresión LZW usado por el formato GIF, muy eficaz comprimiendo secuencias de píxeles del mismo color. Su funcionamiento es sencillo: si una imagen de 600 píxeles de ancho tiene en su primera fila 40 píxeles negros este método de compresión crea un código que ocupa poco, que significa «40 píxeles negros». La próxima vez que se encuentre con la misma secuencia lo sustituirá por ese mismo código. Es por esta razón que es un método ideal para el formato GIF cuyas imágenes están formadas en su mayor parte por colores uniformes. 🔸Métodos de compresión con pérdida de información (lossy): entre los que podemos destacar el algoritmo JPEG utilizado por el formato de imagen que lleva el mismo nombre. La tasa de compresión (Relación entre la cantidad de información perdida y la información original) es mayor pero a costa de perder calidad, aunque esta pérdida no es perceptible para el ojo humano ya que este sistema se basa en la eliminación de la información visual redundante. Cuando se habla de formatos de imagen en la Web, tradicionalmente se han se han contemplado las imágenes de mapa de bits, dentro de las que se encuentran imágenes que se pueden identificar a través de sus extensiones: .GIF, .JPG y .PNG.

Las principales características de los tres tipos de imágenes mencionados son las siguientes:

Imángenes .GIF

🔸Las imágenes .GIF (Graphic Image File Format) hacen uso de un formato más adecuado para aquellas imágenes sencillas, de formas simples y en las que no existe un elevado número de colores. Sus características son:

Número de colores: de 2 a 256 de una paleta de 24 bits.
Formato de compresión sin pérdida basado en el algoritmo LZW.
Carga progresiva en el navegador.
Máscara de trasparencia de 1 bit.
Permite la animación simple.

Imágenes .JPEG

🔸El formato en JPEG (Joint Photographic Experts Group) fue diseñado para la compresión de imágenes fotográficas, basándose en el hecho de que el ojo humano no es perfecto y no es capaz de captar toda la información que se puede almacenar una imagen de 24 bits. El formato JPEG intenta eliminar la información que el ojo humano no es capaz de distinguir, por eso se dice que posee un formato de compresión con pérdida, porque elimina información. Por regla general, es el más indicado para aquellas imágenes que son fotografías. Las características de este formato son:

Número de colores: 24 bits color o 8 bits B/N.
Elevado grado de posibilidad de compresión.
Formato de compresión con pérdida.
No permite trasparencias.
No permite la animación.

Imágenes .PNG

El formato PNG (Portable Network Graphics) es el más adecuado para imágenes renderizadas, es decir que provienen de un modelo, ya que se logran unos degradados más suaves y una buena definición de las líneas. Este formato proporciona una compresión de imágenes sin pérdida, a diferencia del formato JPG. Las principales características de este formato son:

Color indexado hasta 256 colores y TrueColor hasta 48 bits por píxel.
Mayor compresión que el formato GIF (+10%).
Compresión sin pérdida a diferencia del formato JPG.
Canal alfa (transparencia variable).
No permite animación, a diferencia del formato GIF.
Como ya se ha resaltado, GIF, JPEG y PNG son formatos gráficos de mapa de bits, es decir, que su estructura se basa en una matriz de puntos, cada punto correspondiente a un punto virtual del gráfico, y cada uno de ellos incorpora la información correspondiente al color que le es propio.

Principales atributos de la etiqueta <img>

Las imágenes se incluyen en las páginas web con la etiqueta <img>, independientemente de su tipo, y otra serie de elementos cuyo soporte depende de cada navegador, pero que el propio HTML5 no especifica, ya que queda en manos de cada uno de ellos. Los principales atributos ligados a la etiqueta <img> son los siguientes:

🔸src: este atributo es obligatorio al añadir una imagen e indica la dirección URL donde se encuentra el elemento a mostrar.

🔸alt: este elemento es el «texto alternativo» en una imagen. Es un atributo importante ya que está muy relacionado con el soporte a la característica de accesibilidad en la Web 2.0. Dependiendo de una serie de combinaciones hay que ponerlo o no.

🔸width/height: las imágenes pueden llevar el tamaño de las mismas. Por norma general es interesante indicarlas ya que de esta forma el navegador no tendrá que esperar a finalizar la carga de la página para poder acabar de renderizarla correctamente.

🔸usemap: este elemento, si existe, indica la información del mapa asociado y será el nombre del mapa.

🔸ismap: Si la imagen es un mapa y se encuentra dentro de un enlace, entonces hay que indicarlo con este parámetro booleano. Con esto el enlace quedaría en entredicho ya que necesitará de un mapa.

Un ejemplo de imagen definida en una página web utilizando la etiqueta y los atributos anteriormente presentados es el siguiente:

				
					<imgsrc="/pix/milford_sound/milford_sound_t.jpg" width="225"  height="151" alt="Milford Sound in New Zealand">

Derechos de la propiedad intelectual de la imágenes.

El artículo 27 de la Declaración Universal de los Derechos Humanos de la ONU, dice: «Toda persona tiene derecho a tomar parte libremente en la vida cultural de la comunidad, a gozar de las artes y a participar en el progreso científico y en los beneficios que de él resulten. Toda persona tiene derecho a la protección de sus intereses morales y materiales derivados de toda producción científica, literaria o artística de la cual es autor».

Se define Licencia como un contrato mediante el cual una persona recibe de otra el derecho de uso de varios de sus bienes, normalmente de carácter no tangible o intelectual y describe algunos tipos de licencias:

🔸Licencia copyleft: El autor permite la libre distribución de copias y versiones modificadas de una obra u otro trabajo, exigiendo que los mismos derechos sean preservados en las versiones modificadas. Un ejemplo de esta licencia es la GFDL (GNU Free DocumentationLicense o Licencia de documentación libre de GNU).

🔸Dominio público: Cualquiera puede manipular, distribuir y utilizar una obra de dominio público sin consecuencias legales. Un trabajo liberado al dominio público por su autor es contenido libre.

🔸CreativeCommons: Ofrecen determinados derechos a terceras personas bajo ciertas condiciones.

🔸Contenido libre o información libre: cualquier obra funcional, de arte u otro contenido creativo que no posee restricciones legales significativas en relación a derecho de uso, redistribución y creación de versiones modificadas o derivadas por parte de terceros. Incluye las obras de dominio público y algunas con derecho de autor (copyright) cuyas licencias cumplen y conservan las libertades mencionadas anteriormente.

Repositorios de Imágenes

Stock.xchng es la galería más popular. Cuenta con más de 350.000 fotos de gran calidad hechas por más de 30.000 fotógrafos. Se puede usar para divulgar nuestras propias fotografías, así como consultar un foro dedicado a los autores de las imágenes. MorgueFile nos permite descargar fotos sin necesidad de registrarte. Además de las fotos gratuitas y muchas de ellas de muy buena calidad. Cuenta con un área de formación online que enseña fotografía y un foro de discusión. Free Digital Photos ofrece imágenes gratuitas y de pago. Las de resolución media son gratuitas poniendo un enlace al fotógrafo. Las de alta resolución hay que pagarlas. Dreamstime cuenta en su base de datos con más de 9 millones de imágenes gratuitas y a la venta. Si eres fotógrafo puedes vender tus fotos ganando desde un 30 a un 60% de comisión. Stockvault permite bajar imágenes gratuitas sin necesidad de registro. También contiene una zona de compra y venta.

Conversiones

Como sabemos los formatos más ligeros y adecuados para la web son: GIF, PNG y JPEG. En esta sección comentaremos diferentes herramientas online y aplicaciones que nos permiten realizar la conversión de unos formatos de imagen en otros según las necesidades que presente la web donde vayan a ser publicados.

Herramientas online para la conversión de formatos de imagen

🔸Online-convert: es un conversor online de imágenes. Convierte archivos de imágenes online de un formato a otro. 🔸Convertio: es otro conversor de imágenes en línea, admite cualquier formato y es fácil de usar. 🔸Img2go: es otra herramienta para la conversión de archivos de imagen. Añade la funcionalidad de poder exportar una imagen especificando la url de la misma. 🔸CleverPDF: es un conversor online que tiene la particularidad de poder convertir un pdf a distintos formatos de imagen. Muy útil cuando necesitamos hacer conversiones de este tipo.

Aplicaciones para la conversión de formatos de imagen

🔸Gimp: Es una aplicación de software libre que además de permitir la edición y creación de imágenes, también permite su exportación a diferentes formatos. 🔸Photoshop: Quizás la aplicación más conocida para la edición y creación de imágenes. Es un software comercial de uso profesional que además permite la exportación de una imagen a diferentes formatos. 🔸Paint: El popular editor de imágenes que proporciona el sistema operativo Windows. También permite la conversión de una imagen a diferentes formatos (bmp, jpg, png). 🔸Photo Pos Pro: es una aplicación gratuita menos conocida especializada en fotografías. Nos permite la edición y exportación a diferentes formatos de imagen e incluye un navegador para encontrar fotografías en nuestro disco duro.

Audio

Al igual que podemos colocar imágenes en nuestra web, también podemos incorporar audio para diversas funciones, ya sea para tener un audio de fondo o para que suene cualquier tipo de advertencia o notificación.

En este punto se muestran diferentes maneras de introducir audio en una web con HTML.

Insertar audio de fondo (en HTML4)

Poner un sonido de fondo para una página web usando etiquetas HTML no es la opción más versátil. Existen dos etiquetas que, en teoría, lo permiten <bgsound> y <embed>.

				
					<bgsound src="audios/Beethoven.wma"   loop="2"  volume="20"   />

Lo más importante de esta etiqueta es que para indicar el fichero a reproducir hay que utilizar el atributo src. Otros atributos de interés son loop, que permite que la canción vuelva a empezar cada vez que acaba (se le puede indicar cuántas veces se repetirá, con INFINITE no hay límite); delay: es un valor para retrasar el inicio de la música (debe ser un número positivo en segundos); volumen, determina la intensidad del sonido de fondo, con valores entre -10.000 (el más débil) a 0 (el más alto).

🔸<embed> es una alternativa para insertar complementos (plugins) de audio y vídeo que es compatible para todos los navegadores. Sin embargo, no está incluida dentro del estándar W3C. Un ejemplo de código es el siguiente:

				
					<embed src="audios/Aretha.mp3" height="0" type="audio/mpeg" loop="false" controller="false">

El atributo src sirve para especificar la ruta del archivo (como en <bgsound>). Los audios insertados a través de esta etiqueta se reproducen automáticamente al cargarse la página, y se reproducen solamente una vez. Esto puede cambiarse a través de los atributos autostart y loop.

Insertar sonido (HTML5)

En HTML5 la inclusión de sonidos en páginas web intenta paliar muchos de los inconvenientes vistos con las etiquetas <bgsound> o <embed>. De alguna manera, HTML5 ofrece una alternativa más sencilla y eficaz para que el desarrollador pueda insertar audio. Sin embargo, la realidad es que cada navegador implementa de HTML5 lo que quiere, por lo que tampoco con esta opción se consigue una solución universal. La propuesta de HTML5 utiliza la etiqueta <audio>.

Atributos de la etiqueta <audio>

Los atributos de esta etiqueta son: 🔸Autoplay especifica que el audio debería empezar automáticamente tan pronto como esté listo para reproducirse (el único valor de este atributo es autoplay). 🔸Controls indica que los controles de reproducción serán visibles (el único valor posible de este atributo es controls). 🔸Loop indica que el audio se repetirá automáticamente cuando termine (el único valor posible de este atributo es loop). 🔸Preload, especifica sí el audio debería ser cargado cuando la página se carga o no, es decir, se empieza a cargar cuando el usuario lo quiera reproducir (el valor auto indica que se cargará todo el archivo cuando se cargue la página, el valor meta indica que sólo se cargarán los metadatos del archivo y none que no habrá precarga). 🔸 src especifica la URL de archivo de audio. Además de estos atributos, <audio> soporta también atributos globales de HTML5 y eventos.

Un ejemplo del uso de esta etiqueta para obtener un reproductor para un audio que se inicia solo, sería:

				
					<audio src="audios/Aretha.mp3" controls="controls" autoplay></audio>

Una mejora para hacer más versátil esta opción es usar la etiqueta <source> dentro de <audio>. De esta manera, el navegador intenta cargar la primera línea <source>. Si falla o no es soportada esa reproducción, entonces pasa a la siguiente. Por ejemplo, si lExplorer, Safari y Google Chrome leen archivos mp3 y Firefox lee archivos ogg (no soporta mp3), el siguiente código hace una solución para los cuatro navegadores. Cuando el navegador Firefox llegue al primer <source> y no pueda interpretar mp3 entonces pasará al segundo con ogg. Sin embargo, Internet Explorer, Safari y Google Chrome se quedarán con el primer <source>. El siguiente ejemplo empieza definiendo el tipo de documento (<!DOCTYPE html> )que es: navegadores como lExplorer lo necesitan para interpretar bien el contenido.

Aplicar estilos CSS a la etiqueta <audio>

A la etiqueta <audio> también se le puede aplicar estilos CSS. Por ejemplo, el siguiente código define una estilo para hacer que una etiqueta audio que use la clase audio-fondo aparezca con una color de fondo amarillo y una tamaño determinado.

				
					.audio-fondo {
     width: 160px;
     height: 36px;
     background: #FFFFOO;
}

Los dispositivos móviles actuales integran navegadores que soportan HTML5 por lo que es cuestión de poco tiempo que todos los usuarios tengan navegadores HTML5 y no sea necesario buscar alternativas con <object> o JavaScript para detectar qué audio puede reproducir un complemento determinado de un navegador concreto. Aunque será inevitable que en la etiqueta <audio> se den opciones variadas respecto al tipo de archivo (mp3, ogg).

Por último, como opción de diseño avanzada, se puede usar JavaScript y HTML5 para personalizar el reproductor. El siguiente código utiliza botones para reproducir, en vez de un player. Esta opción da mucho juego en el diseño del reproductor al poder cambiar los botones por imágenes acordes con el estilo del sitio.

Videos

Para aprender a insertar vídeo en páginas web se empezará por las posibilidades de HTML5. HTML5 ofrece soluciones mucho más ventajosas para insertar audio que su predecesor HTML4. Y para el caso del vídeo ocurre lo mismo. En HTML5 hay una etiqueta <video> que permite embeber archivos de vídeo de forma nativa sin necesidad de complementos (plugins) adicionales.

Insertar video en una web

La etiqueta <video> es muy parecido a <audio>: dispone de los atributos autoplay, loop y preload, con la misma sintaxis y semántica que en <audio>. También se puede especificar la fuente de un archivo, bien usando el atributo src o bien usando la etiqueta <source>. Así mismo, se puede utilizar los controles que ofrece el navegador de forma nativa utilizando el atributo controls o bien puedes ofrecer tus propios controles en JavaScript.

Sin embargo, a diferencia del audio, el vídeo necesita un tamaño para reproducirse, tal y como ocurre con las imágenes. Para ello se pueden usar los atributos height (alto) y width (ancho) con más sentido que en <audio>. Un ejemplo de uso de esta etiqueta con un archivo mp4 es el siguiente:

				
					<video poster="images/portada.png" src="videos/recetapollo.mp4"  controls  

 width="360" height="240" </video>

Además, de los atributos vistos, la etiqueta <video> también tiene un atributo póster en el que se indica una imagen que se usará como portada antes de que el vídeo empiece a reproducirse.

El ejemplo anterior usa un archivo mp4 lo que hace que su reproducción sea nativa sólo en Safari, y no en IExplorer, Firefox ni Google Chrome. Entonces, para hacer la reproducción adecuada para la mayor cantidad de navegadores posible, se puede utilizar la etiqueta <source> igual que se hizo en <audio>.

Es importante destacar, que no todos los vídeos que se insertan en páginas web deben estar en propiedad del creador. También es posible utilizar vídeos disponibles en cualquier repositorio de vídeo como por ejemplo, Youtube o Vimeo. Estos repositorios ofrecen código para incrustar un vídeo determinado en una página web. Actualmente, el código proporcionado utiliza la etiqueta <iframe> en sustitución a <object> con el fin de dar soporte más optimizado a páginas web para dispositivos móviles tipos iPad.

Como ocurre en audio, también a la etiqueta <vídeo> se le pueden aplicar estilos con CSS.

Listas

Viñetas personalizadas

Por defecto, los navegadores muestran los elementos de las listas no ordenadas con una viñeta formada por un pequeño círculo de color negro y los elementos de las listas ordenadas con la numeración decimal utilizada por la mayoría de los países.

CSS define la propiedad list-style-type para controlar el tipo de viñeta que muestra una lista:

Propiedad list-style-type
list-style-type	Tipo de viñeta
Valores	disc \| circle \| square \| decimal \| decimal-leading-zero \| lower-roman \| upper-roman \| lower-greek \| lower-latin \| upper-latin \| armenian \| georgian \| lower-alpha \| upper-alpha \| none \| inherit
Se aplica a	Elementos de una lista
Valor inicial	Disc
Descripción	Permite establecer el tipo de viñeta mostrada para una lista

El valor none permite mostrar una lista sin viñetas, números o letras, por lo que es un valor muy utilizado en los menús de navegación de las páginas.

El resto de los valores se dividen en tres grupos:

🔸Valores gráficos: muestran las viñetas como círculos rellenos (circle), círculos vacíos (disc) o cuadrados (square).

🔸Valores numéricos: pueden ser decimal, decimal-leading-zero, lower-roman, upper-roman, armenian y georgian.

🔸Valores alfanuméricos: se controlan mediante lower-latin, upper-latin, lower-alpha, upper-alpha y lower-greek.

La propiedad list-style-position permite controlar la colocación de las viñetas:

Propiedad list-style-position
list-style-position	Posición de la viñeta
Valores	inside \| outside \| inherit
Se aplica a	Elementos de una lista
Valor inicial	outside
Descripción	Permite establecer la posición de la viñeta de cada elemento de una lista

Para personalizar el aspecto de las viñetas se emplea la propiedad list-style-image que permite mostrar una imagen propia en vez de una viñeta automática.

Propiedad list-style-image
list-style-image	Imagen de la viñeta
Valores	<url> \| none \| inherit
Se aplica a	Elementos de una lista
Valor inicial	none
Descripción	Permite reemplazar las viñetas automáticas por una imagen personalizada

CSS define una propiedad de tipo “shorthand” que permite establecer todas las propiedades de una lista de forma directa. El siguiente ejemplo indica que no se debe mostrar ni viñetas automáticas ni personalizadas:

				
					ul { list-style: none; }

Menús

Las listas HTML se suelen emplear, además de para su función natural, para la creación de menús de navegación verticales y horizontales. A continuación se muestra una transformación de una lista sencilla de enlaces de un menú de navegación:

				
					<ul class=”menu”>
 <li><a href=”#” >Elemento 1</a></li>
 <li><a href=”#” >Elemento 2</a></li>
 <li><a href=”#” >Elemento 3</a></li>
</ul>

La transformación de la lista en un menú se podría realizar de esta forma:

				
					ul.menu {
  width: 180px;
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid #3A3A3A;
}

ul.menu li{
  border-bottom: 1px solid #3A3A3A;
  border-top: 1px solid #BBB;
  background: #F4F4F4;
}

ul.menu li a{
  padding: .2em 0 .2em  .5em;
  display: block;
  text-decoration: none;
  color:  #222;
}

Tablas

CSS permite seleccionar el modelo de borde de las celdas de una tabla mediante la propiedad border-collapse:

Propiedad border-collapse
border-collapse	Fusión de bordes
Valores	collapse \| separate \| inherit
Se aplica a	Todas las tablas
Valor inicial	separate
Descripción	Define el mecanismo de fusión de los bordes de las celdas adyacentes de una tabla

El modelo collapse fusiona de forma automática los bordes de las celdas adyacentes, mientras que el modelo separate fuerza a que cada celda muestre sus cuatro bordes.

Si se opta por el modelo separate, se puede utilizar la propiedad border-spacing para controlar la separación entre los bordes de cada celda.

Propiedad border-spacing
border-spacing	Espaciado entre bordes
Valores	<medida><medida>? \| inherit
Se aplica a	Todas las tablas
Valor inicial	0
Descripción	Establece la separación entre los bordes de las celdas adyacentes de una tabla

Si solamente se indica una medida, se asignará a la separación horizontal y vertical. Si se indican dos medidas, la primera corresponderá a la separación horizontal y la segunda a la separación vertical.

Cuando se usa el modelo de bordes separate, se puede establecer el tratamiento que reciben las celdas vacías de una tabla mediante la propiedad empty-cells:

Propiedad empty-cells
empty-cells	Tratamiento de las celdas vacías
Valores	show \| hide \| inherit
Se aplica a	Celdas de una tabla
Valor inicial	show
Descripción	Define el mecanismo utilizado para el tratamiento de las celdas vacías de una tabla

Una celda vacía es aquélla que no tiene ningún contenido, ni siquiera un espacio en blanco o un  . El valor hide indica que las celdas vacías no se deben mostrar.

El título de las tablas se establece mediante el elemento <caption> que, por defecto, se muestra encima de los contenidos de la tabla. La propiedad caption-side permite controlar la posición del título de la tabla:

Propiedad caption-side
caption-side	Posición del título de la tabla
Valores	top \| bottom \| inherit
Se aplica a	Los elementos caption
Valor inicial	top
Descripción	Establece la posición del título de la tabla

El valor bottom indica que el título de la tabla se debe mostrar después de los contenidos de la misma. Su alineación horizontal se controla mediante la propiedad text-align.

Se puede aplicar las pseudo-clase :hover para que el color de una fila varíe cuando el usuario pasa el ratón por encima de ella. En el ejemplo se muestra cómo se haría:

				
					table tr:hover{ background: #FFFF66; }

CSS no permite modificar los elementos propios del navegador o de la interfaz de usuario del sistema operativo. Sin embargo, el puntero del ratón es una excepción, ya que se puede modificar mediante la propiedad cursor:

Propiedad Cursor
cursor	Puntero del ratón
Valores	( (<url> ,)* (auto \| crosshair \| default \| pointer\| move ! e-resize \| ne-resize \| nw-resize \| n-resize \| se-resize \| sw-resize \| s-resize \| w-resize \| text \| wait \| help \| progress) ) \| inherit
Se aplica a	Todos los elementos
Valor inicial	Auto
Descripción	Permite personalizar el puntero del ratón

Introducción a CSS

Formulario Avanzados