Ejemplos y trucos utiles con CSS's

Ejemplos y trucos útiles con CSS's

(Alguno de los ejemplos sólo funcionan en Internet Explorer)

Temas relacionados: DHTML y CSS's | Tabla de Referencia de CSS's | Tablas y CSS's

Botones

Äreas de trabajo

Mediante el uso exclusivo de Tablas para establecer el posicionamiento y dimensiones de cada área de la pantalla, se puede establecer una gran variedad de diseño con sólo aplicar clases de estilo adecuadas a cada celda.

En el siguiente ejemplo no se ha utilizado ni una sóla imágen intentando reproducir lo que podría ser una Home Page de un site. Ni que decir tiene que la carga de una página de estas características es prácticamente inmediata.

Artículos

Consumibles

Recambios

Authority to supervise presidential elections...

Nave and chancel are an early work by Lafrans Botvidarson. The walled up portal on the northern side reminds one of an older church, that in the beginning of the 13th century was augmented with the present tower. The chancel is decorated with remarkable paintings from three periods. Más...

The Churches of Gotland

To this complex belong, too, the ornaments on the ribs. "The beautiful Madonna" in the chancel arch was painted by a prominent artist about 1330. Más...

Introduzca su usuario:

Usuario
Password

¿Considera útil este sitio?

Mucho ...
Poco .....
Nada......

En primer lugar definimos el layout de las áreas de la página mediante tablas, asociando a estas y a sus celdas las clases de estilo que vayamos a precisar: Para no ser extensos vamos a prescindir de mostrar el código ya que puede observarse mediante la opción de "Ver Código Fuente" del navegador.

Pero sí vamos a mostrar las distintas clases de estilo que se han utilizado para aplicar diseño a cada elemento, lo que dará una idea de como resolver el aspecto y situación de cada objeto de la "página":

.rightEj1Table {table-layout: fixed;background: #003366;border: 1px solid #FFBB00;}
.rightEj1Content {background: #5577AA;color:#FFFFFF;padding: 1px 5px;font-weight:normal;font-size: 10px;font-family: verdana,arial,helvetica,sans-serif;}
.rightEj1Label {color:#FFFF99;font-weight:normal;font-size: 10px;font-family: verdana,arial,helvetica,sans-serif;}
.rightEj1Field {background: #FFFF99;color:#000000;font-weight:normal;font-size: 10px;font-family: verdana,arial,helvetica,sans-serif;}
.rightEj2Table {table-layout: fixed;background: #EE9900;border: 1px solid #BB0055;}
.rightEj2Content {background: #FFCC00;color:#003366;padding: 1px 5px;font-weight:normal;font-size: 10px;font-family: verdana,arial,helvetica,sans-serif;}
.rightEj2Field {position: relative;background: #5577AA;color:#FFFF99;font-weight:normal;font-size: 10px;left: 65px;;font-family: verdana,arial,helvetica,sans-serif;}

.rightEj3Table {table-layout: fixed;background: #FFFF99;border: 1px solid #5577AA;}
.rightEj3Content {color:#000000;font-weight:normal;font-size: 10px;font-family: verdana,arial,helvetica,sans-serif;}

.rightEj4Table {table-layout: fixed;background: #FFFFFF;border: 3px double #5577AA;}
.rightEj4Header {background: #FFFF99;color:#003366;border: 2px groove #FFFF99;font-weight:normal;font-size: 10px;font-weight: bold;font-family: verdana,arial,helvetica,sans-serif;}
.rightEj4Content {color:#000000;font-weight:normal;font-size: 10px;font-family: verdana,arial,helvetica,sans-serif;}

.Bar1Table {background: #ECCAB4;border: 1px solid #9E3E01;font-weight:normal;font-size: 10px;font-family: arial,helvetica,sans-serif;}
.Bar1Cell {background: #E8B492;color:#000000;border: 2px outset #E8B492;font-weight:normal;font-size: 10px;font-family: arial,helvetica,sans-serif;}

a.right4ALaunch:link {float: right;color:#BB0000;font-weight: normal;font-size:10px;text-decoration: none;font-family: verdana, arial,helvetica,sans-serif;}
a.right4ALaunch:hover {float: right;color:#BB0000;cursor: hand;font-weight: normal;font-size:10px;text-decoration: underline;font-family: verdana, arial,helvetica,sans-serif;}
a.right4ALaunch:active {float: right;color:#BB0000;font-weight: normal;font-size:10px;text-decoration: none;font-family: verdana, arial,helvetica,sans-serif;}
a.right4ALaunch:visited {float: right;color:#BB0000;font-weight: normal;font-size:10px;text-decoration: none;font-family: verdana, arial,helvetica,sans-serif;}

De este ejemplo, la conclusión que podemos sacar es que, mediante el uso exahustivo de CSS's no sólo podemos reducir drásticamente el peso de las páginas del site, sino que la codificación HTML de las mismas se simplifica mucho ayudándonos a trabajar de forma mucho más estructurada y ordenada. La codificación es además claramente más simple.

Capítulos:
Botones Äreas de trabajo Textos Menús Barras de Herramientas Posicionamiento de objetos Ocultar objetos

Temas relacionados: DHTML y CSS's | Tabla de Referencia de CSS's | Tablas y CSS's