Impi css-7 enlaces
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Impi css-7 enlaces

on

  • 353 views

 

Statistics

Views

Total Views
353
Views on SlideShare
350
Embed Views
3

Actions

Likes
0
Downloads
1
Comments
0

2 Embeds 3

http://electronicaciclosuperior.blogspot.com 2
http://electronicaciclosuperior.blogspot.com.es 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Impi css-7 enlaces Presentation Transcript

  • 1. Portales de InformaciónCSS: Enlaces2009 - 2010
  • 2. Estilos básicosTamaño, color y decoraciónLos estilos más sencillos que se pueden aplicar a los enlaces sonlos que modifican su tamaño de letra, su color y la decoracióndel texto del enlace.Utilizando las propiedades text-decoration y font-weight sepueden conseguir estilos como los que se muestran en lasiguiente imagen
  • 3. Estilos básicos
  • 4. Estilos básicosCSS también permite aplicar diferentes estilos a un mismoenlace en función de su estado.De esta forma, es posible cambiar el aspecto de un enlacecuando por ejemplo el usuario pasa el ratón por encima ocuando el usuario pincha sobre ese enlace.
  • 5. Estilos básicosCSS introduce un nuevo concepto llamado pseudo-clases.En concreto, CSS define las siguientes cuatro pseudo-clases::link, aplica estilos a los enlaces que apuntan a páginas o recursosque aún no han sido visitados por el usuario.:visited, aplica estilos a los enlaces que apuntan a recursos quehan sido visitados anteriormente por el usuario. El historial deenlaces visitados se borra automáticamente cada cierto tiempo y elusuario también puede borrarlo manualmente.:hover, aplica estilos al enlace sobre el que el usuario haposicionado el puntero del ratón.:active, aplica estilos al enlace que está pinchando el usuario. Losestilos sólo se aplican desde que el usuario pincha el botón delratón hasta que lo suelta, por lo que suelen ser unas pocasdécimas de segundo.
  • 6. Estilos básicosComo se sabe, por defecto los navegadores muestran losenlaces no visitados de color azul y subrayados y los enlacesvisitados de color morado.Las pseudo-clases anteriores permiten modificar completamenteese aspecto por defecto y por eso casi todas las páginas lasutilizan.El siguiente ejemplo muestra cómo ocultar el subrayado cuandoel usuario pasa el ratón por encima de cualquier enlace de lapágina:
  • 7. Estilos básicosLas pseudo-clases siempre incluyen dos puntos (:) por delantede su nombre y siempre se añaden a continuación del elementoal que se aplican, sin dejar ningún espacio en blanco pordelante:
  • 8. Estilos básicosCuando se aplican varias pseudo-clases diferentes sobre unmismo enlace, se producen colisiones entre los estilos dealgunas pseudo-clases.Si se pasa por ejemplo el ratón por encima de un enlacevisitado, se aplican los estilos de las pseudo-clases :hover y:visited.Si el usuario pincha sobre un enlace no visitado, se aplican laspseudo-clases :hover, :link y :active y así sucesivamente.Si se definen varias pseudo-clases sobre un mismo enlace, elúnico orden que asegura que todos los estilos de las pseudo-clases se aplican de forma coherente es el siguiente: :link,:visited, :hover y :active.
  • 9. Estilos avanzadosLa propiedad text-decoration permite añadir o eliminar elsubrayado de los enlaces.Sin embargo, el aspecto del subrayado lo controlaautomáticamente el navegador, por lo que su color siempre esel mismo que el del texto del enlace y su anchura esproporcional al tamaño de letra.No obstante, utilizando la propiedad border-bottom es posibleañadir cualquier tipo de subrayado para los enlaces de laspáginas.El siguiente ejemplo muestra algunos enlaces con el subrayadopersonalizado:
  • 10. Estilos avanzados
  • 11. Estilos avanzadosImágenes según el tipo de enlaceEn ocasiones, puede resultar útil incluir un pequeño icono allado de un enlace para indicar el tipo de contenido que enlaza,como por ejemplo un archivo comprimido o un documento conformato PDF.Este tipo de imágenes son puramente decorativas en vez deimágenes de contenido, por lo que se deberían añadir con CSS yno con elementos de tipo <img>.
  • 12. Estilos avanzadosUtilizando la propiedad background (y background-image) sepuede personalizar el aspecto de los enlaces para que incluyanun pequeño icono a su lado.La técnica consiste en mostrar una imagen de fondo sinrepetición en el enlace y añadir el padding necesario al texto delenlace para que no se solape con la imagen de fondo.El siguiente ejemplo personaliza el aspecto de dos enlacesañadiéndoles una imagen de fondo:
  • 13. Estilos avanzados
  • 14. Estilos avanzadosMostrar los enlaces como si fueran botonesLas propiedades definidas por CSS permiten mostrar los enlacescon el aspecto de un botón, lo que puede ser útil en formulariosen los que no se utilizan elementos específicos para crearbotones.El siguiente ejemplo muestra un enlace simple formateadocomo un botón:
  • 15. Estilos avanzados