Académique Documents
Professionnel Documents
Culture Documents
Conceptos bsicos
Agrupacin La Agrupacion permite al autor asignar una declaracin a mltiples elementos (selectores). H1, H2, H3, H5 {color: purple;} Los selectores de clases pueden ser usados como un atributo de una etiqueta. Un selector de clase es una cadena de caracteres precedida de un punto. No use el punto cuando se esta referenciando a la clase. No comience el nombre de la clase con un nmero, aunque IE4/5 se lo permita. .example {color: red;} <P class="example"> Esto es un ejemplo en rojo. </P> Los selectores de ID pueden ser usados como un atributo de una etiqueta. Un selector ID es una cadena de caracteres precedida de un marcador hash (#), y es llamado con el atributo ID=. El marcador hash no aparece en el valor de la ID. Funciona como el selector de clase excepto que el ID solo puede ser usado una vez en el documento. #i5 {color: red;} <P ID="i5"> Esto es un texto con una ID de 'i5'. </P> Hechos de uno o mas selectores delimitados por espacios. El ejemplo indica que la negrita sera roja solo cuando se encuente en etiquetas H1. Selectores contextuales H1 B {color: red;} <H1>Esto es <B> rojo</B>.</H1> <P>Esto <B>no</B>.</P> Es buena idea dejar comentarios. Afecta a lo que hay dentro, incluso entre lneas. /* Esto es un comentario. */ Estas dos etiquetas HTML fueron introducidas para soportar CSS. Piense en ellas como etiquetas vacias, las cuales puede rellenar con estilos. DIV se usa para estructura de formato, bloques de texto. <DIV align="center"><H1>Este encabezado</H1></DIV>
ID (atributo de etiqueta)
Comentarios
SPAN es usado para formateado en lnea. <SPAN class="example"> texto rojo en el prrafo</SPAN>
Unidades
Las unidades de medida toman abreviaciones de dos letras, sin espacio entre el numero y la unidad. Las unidades tienen tres categorias: Unidades de longitud
Absolutas: mm, cm, in, pt (tamao de punto), pc (pica) Relativas: em (definiendo el tamao de punto de la fuente), ex (x altura de la fuente) Dependiente del dispositivo: px (pixel)
width: 50px; margin-left: 2em; Usadas por varias propiedades para definir el tamao en terminos relativos. Los valores son calculados atendiendo a su contexto, en el ejemplo, el elemento H2 sera el 75% de su tamao por defecto. H2 {font-size: 75% } Palabras clave CSS usa palabras claves como valores para muchas propiedades. Ejemplos pueden ser bolder, lighter, larger, x-large, xx-large, x-small. Por nmero; por porcentaje; por nombre. Unidades de color color: #FF00FF; /* esto tambin puede ser expresado como #F0F */ color: rgb(100%,0%,100%); color: chocolate Usadas por varias propiedades para definir la ubicacin de las imgenes. Importante: las URLs parciales son relativas a CSS, no al documento HTML! URLs url(dibujo.gif) url(http://www.pix.org/lib1/pic278.gif) list-style-image: url(bullet3.gif)
Unidades de porcentaje
La cascada
! important La declaracin de estilos es declarada importante. Las declaraciones importantes sobreescriben a todas las dems, independientemente del
origen o especificacin. En CSS2, el usuario tendr preferencia sobre el autor. H1 {color: maroon ! important;} Las propiedades de formato de algn elemento son heredadas del elemento en el cual esta contenido. Las propiedades CSS siempre tienen algn valor, aunque no haya sido especificado por el autor. Esto puede ser usado para minimizar, pero puede ser fuente de desagradables sorpresas. Esto permite el control de muchas pginas a la vez. Use la etiqueta LINK en el HEAD de su pgina. Ejemplo: <LINK REL="STYLESHEET" TYPE="text/css" HREF="demo.css"> La precedencia va de lo ms especifico a lo ms general. Lo ms cerca que esta un estilo al elemento al cual se le esta aplicando el estilo, mayor es la prioridad. El orden de mayor a menor: 1. STYLE="bla bla" atributo en lnea a una etiqueta Ejemplo: <P STYLE="color: rojo; font: 14pt 'Times New Roman', serif">inline</P> Ntese que las comillas simples en la fuente se usan para evitar conflictos con las comillas dobles. 2. <STYLE> etiqueta en HEAD del documento Example: <STYLE> .title { font-family: 'Snap ITC', cursive; font-size: 60pt;} </STYLE> 3. <LINK> a una CSS externa en el HEAD del documento Ejemplo: <LINK REL="stylesheet" TYPE="text/css" HREF="demo.css"> 4. Estilos por defecto del explorador Puede especificar diferentes estilos para la visualizacin online y para la impresin. Esto funciona en IE4/5 y Opera 3.5. Media <STYLE media="print"> /* version para impresion */ .noprint {display: none;} /* los items hechos con esta clase no seran impresos */ </STYLE> <STYLE media="screen"> /* version de pantalla */ .noshow {display:none;} /* los items en esta clase no se veran */ </STYLE>
Herencia
Propiedades de fuente
fontUsada para declarar una fuente especifica a usar, o una fuente genrica de
family
una familia en orden de preferencia. Las familias de fuentes genricas son: serif, sans-serif, monospace, cursive y fantasy. No deben tener comillas. Varias palabras como fuente de nombre si deben llevar comillas. P {font-family: "Times New Roman", serif;}
fontstyle
Selecciona entre cursiva, oblicua y normal. EM {font-style: italic;} Dos posibles valores: small-caps and normal. Es probable que aparezcan mas valores en el futuro. H3 {font-variant: small-caps;}
fontvariant
fontweight
Los valores son: bold, normal, lighter, bolder y valores numricos entre 100900. B {font-weight: 700;}
Aplica el tamao absoluto (pt, in, cm, px), tamao relativo (em, ex), o un porcentaje del tamao normal. Palabras clave: xx-large, x-large, large, medium, small, x-small, xx-small, font-size larger, smaller H2 {font-size: 200%;} H3 {font-size: 36pt;} Abreviatura de las demas propiedades de fuente. El orden de los valores es importante: font {font-style font-variant font-weight font-size/line-height font-family;}. Cualquiera de estos valores puede ser omitido, pero el orden es importante. P {font: bold 12pt/14pt Helvetica,sans-serif;}
font
color
para las personas que deshabilitan la carga de imagenes. BODY {background-image: url(bg41.gif);} Establede el estilo de repeticion para una imagen de fondo. Los valores son: repeat (mosaico), no-repeat, repeat-x (horizontal), repeat-y (vertical). Por defecto: repeat. BODY { background-repeat: repeat-y } backgroundattachment Define si la imagen de fondo sigue el movimiento de desplazamiento de la barra de scroll o si no. Los valores posibles son: scroll y fixed. BODY {background-attachment: fixed;} Establece el punto de comienzo de un fondo, ya sea imagen o color. Si es un color, el relleno del color continua desde tal posicin. Si es una imagen, la primera imagen es ubicada en esa posicin. Valores: Position (x y) o (x% y%); top, center, bottom, left, right. BODY {background-position: top center;} Abreviatura para las demas propiedades. Los valores pueden ser escritos en cualquier orden. BODY {background: white url(bg41.gif) fixed center;}
backgroundrepeat
backgroundposition
background
verticalalign
palabra se transforma en mayuscula), uppercase, lowercase. H1 {text-transform: uppercase;} Establece el alineamiento horizontal del texto en un elemento. Solo puede ser aplicado a elementos a nivel de bloque. P {text-align: justify;} H4 {text-align: center;} Define la indentacion de la primera linea en un elemento. Usado comnmente para crear el efecto de tabulacin en los prrafos. Solo se aplica a elementos a nivel de bloque; son permitidos valores negativos. P {text-indent: 5em;} H2 {text-indent: -25px;} Establece la distancia vertical entre lineas bases en un elemento. No es posible usar valores negativos. P {line-height: 18pt;} H2 {line-height: 200%;}
text-align
text-indent
line-height
margin-left
margin
padding
border-topwidth
borderright-width
borderwidth
bordercolor
borderstyle
bordertop
Abreviacin de las propiedades que definen la anchura, color y estilo del borde superior de un elemento. UL {border-top: 0.5in solid black;}
borderright
Abreviacin de las propiedades que definen la anchura, color y estilo del borde derecho de un elemento. IMG {border-right: 30px dotted blue;}
borderbottom
Abreviacin de las propiedades que definen la anchura, color y estilo del borde inferior de un elemento. UL {border-bottom: 0.5in grooved green;}
borderleft
Abreviacin de las propiedades que definen la anchura, color y estilo del borde izquierdo de un elemento. P {border-left: 3em solid gray;} Abreviacin de las propiedades que definen la anchura, color y estilo del conjunto de bordes de un elemento. H1 {border: 2px dashed tan;} Usado para establecer la anchura de un elemento. Puede ser usado en cualquier nivel de bloque o con un objeto reemplazado. Los valores negativos no son posibles. TABLE {width: 80%;} Usado para establecer la altura de un elemento. Puede ser usado en cualquier nivel de bloque o con un objeto reemplazado, entre sus lmites. Los valores negativos no son posibles. IMG.icon {height: 50px;} Causa que elemento sea flotante a un lado, y al otro el texto le rodee. Uselo para elementos de bloque no posicionados. Valores posibles: left; right; none. IMG {float: left;} Especifica si el elemento puede tener elementos flotantes alrededor. Causa que el elemento sea situad abajo si hay elementos flotantes en el lugar especificado. Valores posibles: both; left; right; none. El valor por defecto es none. H1 {clear: both;}
border
width
height
float
clear
display
Usado para sobreescribir el formato por defecto de los elementos HTML. Los valore posibles son: block; inline; list-item; none. El valor por defecto es block. Hgase notar que el espacio no esta reservado por el elemento cuando display = none. (ver propiedad de posicionamiento: visibility.) .hide {display: none;}
whitespace
Define como son tratados los espacios en blanco dentro de el elemento.Los valores son: normal, pre, nowrap. TD {white-space: nowrap;} TT {white-space: pre;} Se usa para declarar el tipo de punto o numeracin a usar en una lista ordenada o no. Los valores son: disc; circle; square; decimal; lower-roman; upper-roman; lower-alpha; upper-alpha; none. UL {list-style-type: square;} OL {list-style-type: lower-roman;} Usado para declarar una imagen a ser usada como punto en una lista ordenada o no. Se aplica a los elementos con un valor de vista en una lista de items. UL {list-style-image: url(bullet3.gif);} Se usa para declarar la posicin del punto o nmero en una lista con respecto al contenido del elemento de la lista. Los valores posibles son: inside; outside. Default: outside. LI {list-style-position: inside;} Abreviacin de propiedades que engloba el resto de propiedades. Se aplica a todos los elementos con un valor de vista en una lista de items. UL {list-style: square url(bullet3.gif) outer;}
list-styletype
list-styleimage
list-styleposition
list-style
Propiedades de posicionamiento
Especifica el area de un elemento para ser dibujada como transparente. Los valore posibles son: rect (arriba derecha izquierda abajo) donde estos valores son auto o valores de longitud (pt, in, cm, px) { clip: rect (5pt auto auto auto) } Especifica la altura de un elemento; el coeficiente de aspecto sera mantenido si la auchura es espeficicada como auto. Los valores posibles son: auto o valores de longitud (pt, in, cm, px) o porcentaje. { height: 50px } width Especifica la anchura de un elemento; el coeficiente de aspecto sera mantenido si la auchura es espeficicada como auto. Los valores posibles son:
clip
height
auto o valores de longitud (pt, in, cm, px) o porcentaje. { width: 50% } left Especifica la posicion izquierda de un elemento posicionado relativamente o absolutamente. Los valores posibles son: auto o valores de longitud (pt, in, cm, px) o porcentaje. { left: 2pt } Especifica la posicion superior de un elemento posicionado relativamente o absolutamente. Los valores posibles son: auto o valores de longitud (pt, in, cm, px) o porcentaje. { top: -2pt } Especifica como el contenido que desborda de la caja debe ser manejado. Valores: visible (ver contenido); hidden (ocultar contenido desbordado); scroll (proveer mecanismo de desplazamiento); auto (que el explorador haga overflow lo que crea conveniente) { overflow: auto } Especifica si el elemento puede ser posicionado. Valores: static (por defecto-sin posicionar); relative (en relacion a donde el elemento deberia estar normalmente); absolute (en relacion a la esquina izquierda superior del elemento padre). { position: relative } Especifica si el elemento es visible. Ntese que el espacio del elemento es reservado en cualquier caso. (ver clasificacion de propiedades: display). visibility Valores posibles: visible; hidden. { visibility: hidden } Especifica si el elemento es visto por encima de elementos en capas superiores. Valores: auto (se aplian en el orden en que aparecen en el cdigo); o un entero. Los elementos con mayor nmero ocultan a los de ms bajo. { z-index: 2 } Las pseudo-clases pueden ser usadas en selectores contextuales y pueden ser combinadas con clases normales. anchor A:link {color: #900} A:link IMG { border: solid blue } A:hover{ background:#ffff00; } /* cuando el raton esta sobre el link (solo IE4)*/ Abajo se puede ver una variacin donde se quiere que el lector sepa que el link es externo. Define una clase "external" para hacer la naturaleza del link obvia.
top
position
z-index
Las clases normales predecen a las pseudo-clases en el selector. A.external:link { color: magenta } <A CLASS="external" HREF="http://out.side/">external link</A> Aplicado a la primera linea de un texto en un elemento dado. Persistete aunque el texto haya sido reformateado. Aplicado a elementos a nivel de bloque solamente. Soportado por IE5.5 y Opera 3.6. P:first-line {color: red;} <P> The first line of this paragraph is red. More blah blah blah...</P> Aplicado a la primera letra de un elemento dado. Puede ser usado para generar efectos de tipo drop-cap, entre otros. Debera ser aplicado a elementos de nivel de bloque solamente. Soportado por IE5.5 y Opera 3.6. P:first-letter {color: red;} <P> T he capital 'T' at the beginning of this paragraph is red.</P> Las propiedades de impresin solo funcionan parcialmente con IE4, mejor con IE5 y Opera 3.5. CSS2 aumentar este tipo de estrategia. Valores: auto hace un salto de pgina despus del elemento si no hay espacio en la pgina actual. always siempre hace un salto de pgina. left hace uno o dos saltos de pgina despus del elemento hasta que una pagina en blanco es encontrada. right hace uno o dos saltos de pgina despus del elemento hasta que una pagina en blanco a la derecha es encontrada. Example: <STYLE> .page {page-break-after: always} </STYLE> ... <P CLASS="page"> ... Valores: los mismos que arriba. Ntese que ninguna de estas propiedades funcionan con tablas. Tambin produce bugs con la etiqueta <br>. Funciona mejor con etiquetas estructurales(H1, P, etc.). Si hubiese conflictos entre propiedades de dos saltos de pagina, el valor resultante es el mayor nmero de saltos de pagina a usar. Especifica la apariencia del curso cuando se situa en un elemento.Valores: auto (el explorador lo determina basndose en el contexto); crosshair; default (normalmente una flecha - determinado por el sistema operativo); help; move; pointer; text; wait; e-resize; ne-resize; nw-resize; n-resize; se-resize; sw-resize; s-resize; w-resize. Use 'hand' para forzar el cursor en forma de mano, lo cual funciona con IE4, IE5 y Opera aunque no es parte de las espec. de W3C. { cursor: help }
firstline
firstletter
pagebreakafter
pagebreakbefore
cursor