3

Jun


Estilos CSS

Autor: David

En días anteriores hemos visto como se realizaba una maquetación básica con HTML. Si observáis he incluido colores de celda, márgenes, borde,... Estos atributos permiten modificar el aspecto de la web, pero si como normalmente se utilizan muchos atributos no es viable incrustarlos en el propio código HTML.

Podemos separar los estilos de la maquetación básica de la página utilizando estilos, ya sea incluidos directamente dentro de la etiqueta <head></head> o en un archivo externo CSS.

Para incluirlos directamente sólo tenemos que utilizar las etiquetas <style></style> e incluir todos los estilos dentro.

En el caso de una hoja de estilo CSS externa, enlazamos el archivo mediante la siguiente etiqueta:

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

Una hoja de estilo tipica sería la siguiente:

estilos.css

HTML:
  1. BODY {
  2.   background: #ffffff;
  3.   color: #000000;
  4.   margin: 0px;
  5.   font-family:arial,verdana,helvetica;
  6.   font-size:12px;
  7. }
  8.  
  9. .head {
  10.     background-image: url('images/template/bg_head.jpg');
  11.     background-repeat: repeat-x;
  12.     background-color: #ffffff;
  13. }
  14.  
  15. #box {
  16.     border: 1px solid #cccccc;
  17. }
  18.  
  19. A:link {COLOR: #000000; TEXT-DECORATION: underline}
  20. A:visited {COLOR: #000000; TEXT-DECORATION: underline}
  21. A:active {COLOR: #000000; TEXT-DECORATION: underline}
  22. A:hover {COLOR: #990000; TEXT-DECORATION:none}

Explicación:

- primeramente a la etiqueta BODY le aplicamos color de fondo blanco, color de texto negro, sin margen, fuentes arial, tamaño 12 px.

- despues incluimos una clase "head", esto sólo afectará al elemento que tenga definida esta clase, por ejemplo: <td class="head">

- luego incluimos un estilo para un elemento concreto que debe ser identificado con un id. Por ejemplo: <table id="box">

- por últimos aplicamos estilos a todos los enlaces (etiqueta A) que haya en la web de forma que tendrán un color negro con subrayado y cuando el cursor pase por encima se coloreará a rojo sin subrayado.

 
Salu2

Básicos


0 Comments Send your comment ↓

If comments are open, but there are no comments


Leave a Reply