Cascading Style Sheets (CSS) es la base para Dynamic HTML y para los dos browser Nestcape 4.0 y Internet Explorer 4.0. Las CSS permite en una forma crear y poner "styles" para definir como insertar los elementos en tu página. Cascading Style Sheets Positioning (CSS-P) es una extensión a CSS la cual ofrece un control a nivel de pixeles para el desarollador de la localización de cualquier cosa en la pantalla. Convenientemente ya existen buenas guías y documentación de CSS y CSS-P yo no las voy a duplicar, prefiero continuar construyendo encima de ellas.
Aquí se encuentran dos documentos/guías que explica el sintaxis de CSS y CSS-P:
Esos sitios te ofrecen una completa interpretación de CSS y como aplicarlas. Rápidamente te enseñaran las partes de CSS que usaremos a lo largo de este tutorial.
Usando DIV Tags:
Cuando se utilizan CSS-P, las propiedades de esta son usualmente aplicadas en el DIV tag (etiqueta) vacía, una etiqueta no establecida, que es la que le va mejor en CSS. Cuando pones HTML/text dentro de un DIV tag es referida comúnmente como una de: "DIV block", "DIV element", "CSS-layer", o como dije, exactamente una capa. Cuando leas sobre Dynamic HTML en Sitios Web o en Grupos de Información, y si alguien esta hablando de algunos de estos términos, está hablando sobre lo mismo, alguna pieza de HTML que se encuentra dentro de un positioned "DIV" tag.
Para marcar a un DIV tag vacío es igual que cualquier otro tag:
<DIV> Este es un DIV tag </DIV>
Usando solamente DIV tag tiene los mismos resultados como si se usara <P></P>
Pero al aplicar CSS a tags DIV podemos definir en que lugar de la pantalla esa pieza de HTML será exhibida, dibuja cuadrados o líneas, o como hacer que el texto que esta adentro se exhiba. Puedes hacer esto con darle primero el DIV un ID (casi como un nombre):
<DIV ID="camión"> Este es un camión </DIV>
Lo que tienes que usar para él ID es tu decisión. Puede ser un conjunto de caracteres (a-z,A-Z,0-9 y desmarcado) pero siempre comenzando con letras.
Después aplicas tus CSS en una de las 2 formas :
Inline CSS:
Inline (enlinea) es la forma usada mas comúnmente. Y es la forma que yo comenzaré a enseñarte como escribir DHTML y JavaScript.
<DIV ID="camión" STYLE="Style van aquí">
Este es un camión
</DIV>
External STYLE tag:
Utilizando el método de external funciona muy bien, sin embargo, habrá algunos asuntos envueltos para escribir CSS como estos, entonces lo que yo sugiero es esperar hasta que lleguemos a la lección de Nesting Layers antes que trates de hacerlo tu solo. Por el momento solamente observa y mira como se hace...
<STYLE TYPE="text/css"> <!-- #truck {Style van aquí } --> </STYLE> <DIV ID="camión"> Este es un camión </DIV>
Note de como el ID es utilizado en el STYLE tag (etiqueta) para asignarle los CSS styles.
Cross-Browser CSS Properties:
Como sea, este sitio es para producir DHTML que funcione en los dos browsers Netscape y Internet Explorer, nosotros nos encontramos limitados de cuales CSS styles/properties podemos utilizar. Usualmente, las propiedades siguientes son las que funcionan (razonablemente cerca) por las normas que son definidas por él W3C.
Importante:
Cuando se usan capas para animación siempre se deberá
definir el width (ancho). La razón de esto es porque en IE existe ausencia del
ancho de toda la pantalla. Si mueves una capa alrededor de la pantalla un
scrollbar aparecerá en la parte de abajo, lo cual es molesto y causa que le
animación sea mas lenta.
El sintaxis de CSS es distinto de HTML, para separar la propiedad y su valor tienes que usar dos puntos (:), y punto y coma (;) para separarlo de propiedades diferentes:
position: absolute; left: 50px; top: 100px; width: 200px; height: 100px; clip: rect(0,200,100,0); visiblity: visible; z-index: 1; background-color:#FF0000; layer-background-color:#FF0000; background-image:URL(filename.gif); layer-background-image:URL(filename.gif);
Tienes un poquito de flexibilidad cuando asignas las propiedades a CSS. No tienen que ser todas definidas. Un espacio en blanco es ignorado, así pues todos podrán estar en la misma línea, o en líneas separadas, tabs entre los valores etc. Y también, el valor unitario default (normal) es en pixeles, entonces no hay necesariamente que tener el "px" valor después de left (izquierda), top (arriba), width (ancho) y height (altura). Así que CSS pueden también estar establecidas de esta forma:
position:absolute; left:50; top:100; width:200; height:100; clip:rect(0,200,100,0); background-color:#FF0000; layer-background-color:#FF0000;
Inline Example:
<DIV ID="divname" STYLE="position: absolute; left: 50px; top: 100px; width: 200px; height: 100px; clip: rect(0,200,100,0); visiblity: visible; z-index: 1;">
</DIV>
External Example:
<STYLE TYPE="text/css">
<!--
#divname {position: absolute; left: 50px; top: 100px; width: 200px; height: 100px; clip:rect(0,200,100,0); visiblity: visible; z-index: 1;}
-->
</STYLE>
<DIV ID="divname">
</DIV>
Una demostración que vale mil palabras:
| Casa | Próxima Lección: Cross-Browser JavaScript |