Codigos Css

Sin CSS estábamos limitados a poner colores e imágenes de fondo solo en el cuerpo de la web y en tablas. Ahora con CSS, podemos aplicar tanto una imagen de fondo como un color de fondo a prácticamente cualquier elemento de nuestra web.

Lo más sencillo es poner un color de fondo, por ejemplo, si tenemos un texto marcado en negrita y queremos ponerle un color de fondo azul haremos:

<strong style="background-color: #3333FF">Texto en negrita</strong>

Pero no estamos limitados a un color de fondo, también podemos poner una imagen:

<strong style="background-image: url(imagen.jpg)">Texto en negrita</strong>

Para que funcione este código el archivo "imagen.jpg" debe estar en el mismo directorio que el archivo .html.

También podemos manipular el fondo, podemos hacer que esté alineado a la izquierda y que no se repita. Aunque esto lo probaremos en una celda, para poder verlo mejor:

<table>
<tr>
<td height="50" style="background-image: url(imagen.jpg); background-repeat: no-repeat; background-position: left;">Fondo</td>
</tr>
</table>

El fondo no se repetirá y estará alineado a la izquierda. Todo lo que hemos visto aquí también lo podemos aplicar a campos de un formulario o a cualquier otra etiqueta.

Por Alex.
Director Técnico de WebTaller.

Las hojas de estilo nos dan un control mucho más preciso sobre nuestras tablas y los elementos que contienen, y si utilizamos un archivo de CSS externo, nos permite hacer cambios a todo un sitio con solo alterar unas lineas, sin necesidad de cambiar cada página. En este tutorial reviso algunas de las aplicaciones más prácticas y comunes a un layout hecho con tablas.

 

Un ejemplo es la tipografía. Si utilizamos las etiquetas<font>, debemos de definir la fuente para cada bloque de texto. Si utlilizamos CSS podemos definir un estilo tipográfico para toda una tabla o una celda, y todo su contenido automaticamente tomará ese estilo. por ejemplo, definimos en nuestro archivo CSS:

.celda1{

font: bold 11px/14px Verdana, Geneva,

Arial, Helvetica, sans-serif;

}

Todas las celdas con clase "celda1" tendrán la misma tipografía, sin tener que definirla cada vez. Esto es especialmente útil cuando los textos van a ser editados más tarde por el cliente. Podemos estar seguros que no terminarán en Times New Roman a 18 pixeles, arruinando nuestro diseño.

Podemos definir tanto los altos como los anchos de la celda con CSS,dándonos control preciso, de esta manera:

.celda4{
width:200px;
height:200px;
}

Si el cliente decide mañana que la celda del menú debe de ser más alta, podemos hacer los ajustes en el archivo de css y automáticamente todas nuestras páginas se cambiarán

Una enorme ventaja que nos da CSS en tablas es la capacidad de aplicar no solo distintos márgenes y bordes a cada celda, sino a cada lado de cada celda. Por ejemplo:

.celda1{
border:1px dotted 5E93B5;
padding: 10px;
}
.celda2{
border-top: 2px solid 5E93B;
border-right: 1px dotted #416D89;
border-left:1px dotted #416D89;
border-bottom:none;
padding-top:10px;
padding-right:3px;
padding-left:20px;
padding-bottom:12px;
}

Fondos

Podemos especificar muchas más propiedades para las imágenes de fondo usando CSS, por ejemplo:

repeat: podemos tener una imagen que se repita solo horizontalmente, solo verticalmente, hacia ambos lados, o que no se repita.

position: podemos especificar que una imagen de fondo se alinee a cualquier borde de nuestra celda o tabla.

attachment: nuestra imagen puede desplazarse o quedar fija cuando hagamos scroll a la pagina.

También podemos definir colores de fondo para nuestras celdas.

.celda3{
background-image: url(../imgs/fondo1.gif);
background-repeat: repeat-x;
}
.celda1{
background-image: url(../imgs/fondo2.gif);
background-position: top right;

background-repeat: no-repeat; }
.celda2{
background-color:#EEEEEE;
}