Página 1 de 46
Cascade Style Sheets Las CSS (hojas de estilo en cascada) suponen un gran avance en la autoría de sitios Web. Mejoran las posibilidades de diseño y presentación de documentos en la red, facilitando además su mantenimiento, ya se trate de un unico archivo HTML, o de grandes sitios, con multitud de páginas. La filosofía de las CSS responde a la idea de separar al máximo forma y fondo. Las páginas, idealmente, tendrán únicamente etiquetas html con información acerca de la estructura y contenido del documento (párrafos, cabeceras, listas etc) sin ninguna información sobre la apariencia del documento. Esta apariencia, la forma en que ese documento debe ser visualizado, se dicta por una serie de reglas, que se definen separadamente (en una sección separada de la página o incluso en un archivo separado), de forma que podemos cambiar la forma en que el documento es visualizado sin tocar ni una sola línea de contenido ni cambiar las etiquetas html, simplemente introduciendo unos pocos cambios en la definición de estilo. Un solo archivo de estilo puede controlar la presentación de un número ilimitado de páginas, facilitando mantener un aspecto homogéneo en todas ellas, ampliando las posibilidades de edición que ofrece HTML (sangrados, márgenes, tabuladores, fuentes), y en general, posibilitando mayor control al autor sobre la apariencia y el posicionamiento de cada elemento de la página. Como beneficio adicional, un correcto uso de las CSS hará que una misma página tenga menor tamaño, reduciendo tiempos de descarga. Las reglas de estilo se escriben y leen en un lenguaje inteligible, similar al lenguaje cotidiano (naturalmente, en inglés), utilizando términos habituales en el área de diseño gráfico, lo que permite un rápido aprendizaje. Las hojas de estilo en cascada (CSS1) responden a un standard definido por la organización W3C [http://www.w3.org/TR/REC-CSS1.html] [traducción [http://html.conclase.net/w3c/css1-es.html] ], y este standard, al menos en su nivel 1, "se supone" ha de funcionar correctamente con las versiones mas recientes de los navegadores gráficos mas populares, por lo que hace tiempo que ha dejado de tener carácter experimental.
Primeros Conceptos Una 'hoja de estilo' es una plantilla, o guia, o conjunto de instrucciones, que dicta al navegador como debe mostrar el contenido de una o varias páginas Web. Cualquier cambio en la plantilla de estilo se refleja en un cambio inmediato en la apariencia de las páginas relacionadas, sin necesidad de modificar fisicamente estas. El creador de la página define estilos (tamaño de letra, color, tipo de fuente, margenes etc) que se visualizarán con preferencia a los definidos por defecto en el propio navegador. Si despues desea cambiar la apariencia (nuevos margenes etc) bastará que cambie la definicion de estilo. El documento en si no se modifica. En el origen de la www, la principal preocupación fue asegurar la portabilidad y legibilidad de los documentos entre distintas plataformas. El standard HTML, al menos en sus comienzos, no mostraba especial preocupación por el diseño; por la apariencia. En la edición HTML estaban ausentes diversos recursos, habituales en cualquier editor de textos: encabezamientos, márgenes, tabulaciones, tamaño de la fuente, textos sobre fondos específicos, escritura en columnas etc. Para lograr estos efectos, debían utilizarse sistemas alternativos, normalmente acudiendo a la creación de tablas, blockquotes, texto preformateado, inserción de gráficos transparentes, etc. Formulada la primera recomendación CSS1 en Diciembre de 1996, las hojas de estilo traen a la edición Web una relativa libertad de diseño, ampliando el control sobre la apariencia y posicionamiento de todos los elementos de la página, efectos tipográficos, fuentes, colores, backgrounds, compatibilidad entre navegadores y sistemas operativos, y páginas con código mas reducido, de mas rápida descarga. Mas aún, los valores asignables mediante CSS son manipulables mediante scripts (Javascript, JScript, VBScript) lo que condujo al nacimiento del HTML dinámico, DHTML.
Página 2 de 46
Navegadores que admiten CSS1 CSS 1 alcanzó el status de recomendación en el año 1996. Las reglas CSS1 tienen un soporte adecuado en prácticamente todos los navegadores modernos: cualquier ordenador basado en Gecko (Mozilla, Firefox), Opera, Internet Explorer, por citar los mas conocidos. Las reglas CSS 2 alcanzaron el status de recomendación en el año 1998. Como conjunto, no son reconocidas por ningún navegador, aunque los de última generación, como Mozilla a partir de su versión 1.0, Firefox, Opera 7 o internet Explorer 6 si soportan algunas de sus reglas. CSS2 ha tenido una recepción por parte de los desarrolladores de navegadores mucho menos entusiasta que CSS1, lo que justifica su escasa implantación. Posiblemente para incentivar su adopción, en el año 2003 se lanzó una revisión simplificada: CSS2 revisión 1. Por lo que a compatibilidad se refiere, Internet Explorer reconoce reglas CSS1 desde la versión 3.0 Beta 2 y posteriores. El navegador Netscape Communicator admite CSS1 desde la versión 4.0 Beta 2 y posteriores. Sin embargo, debe tenerse en cuenta que ninguna de estas versiones reconocía plenamente todas las características de las CSS1 incluidas en el standard W3, ni la visualización que ofrecen de las características admitidas es totalmente idéntica. Cada uno, por su parte, añade sus propias 'extensiones' al standard. Ha sido un largo camino desde 1996, y hoy en dia las ultimas versiones, tanto de iexplorer como de netscape/mozilla y opera, cubren prácticamente la totalidad de la especificación css1. Las diferencias que aun existen en el rendimiento de las CSS1 en los distintos navegadores no deben desanimar al autor a incluir estilos en sus páginas, ya que las ventajas exceden indudablemente a los inconvenientes. El rendimiento que ofrecen I.E. y Navigator, ampliamente difundidos en sus ultimas versiones, puede considerarse suficientemente homogéneo (al menos tan homogeneo como cuando visualizan html puro), y los resultados de la aplicación de estilos son relativamente precedibles por el autor, que podrá trabajar perfectamente con ellos con la precaución de probar y visualizar su trabajo en las diversas versiones de ambos navegadores. Aquellos navegadores que no admiten CSS visualizarán las páginas usando sus propias opciones por defecto, ignorando las reglas de estilo como si no existieran. Para evitar que estos navegadores en versiones antiguas, o con la opción CSS desactivada, visualicen como texto las reglas de estilo definidas 'dentro' de la propia página, conviene encerrar las líneas CSS dentro de comentarios HTML, del mismo modo que ocurre, por ejemplo, con el Javascript.
¿por que el nombre de Hojas de Estilo en Cascada ? La organización W3C, al emplear la expresión de 'hojas de estilo en cascada', alude a la posibilidad de utilizar 'en hojas separadas' (archivos separados de la pagina) varios estilos que controlen su apariencia. Los estilos se definen mediante reglas (rules) que el ordenador del usuario ejecuta. Como veremos, los estilos se pueden asignar para una misma página desde distintos orígenes simultaneamente, por lo que estas reglas pueden -y de hecho se busca de intento- entrar en conflicto. El standard CSS1 establece los criterios ('orden en cascada') que deciden que estilo se aplica preferentemente, con lo cual es sencillo especificar estilos generales para el conjunto de páginas y subestilos de aplicación a elementos o secciones determinadas. Un mismo elemento, como el encabezamiento H1 de la página puede estar definido en un estilo externo para aparecer como texto azul; en la propia página, definirlo como texto rojo. Y el lector puede querer verlo en verde. El programa de navegación tiene que optar por uno u otro estilo. La especificación W3 marca las pautas de preferencia que debe respetar un navegador compatible.
Página 3 de 46
Sintaxis Una hoja de estilo se compone de reglas de visualización (reglas de estilo). Cada regla consta de un SELECTOR, que es el que indica a que elemento o parte de la página se aplica el estilo; normalmente los selectores son etiquetas HTML (p.e. h1 sería un selector que permitiría aplicar estilos a las cabeceras ). A cada selector debe seguir una DECLARACION del estilo que ha de serle aplicado (p.e. color:blue). Toda declaración tiene dos partes: PROPIEDAD (por ejemplo, color) y VALOR (por ejemplo, blue). El enunciado de reglas constituye la forma usual de declarar estilos, y deben ajustarse a la sintaxis definida por la especificación CSS; si el navegador encuentra un selector que no entiende, ignorará la entera declaración. Si encuentra dentro de la declaración una propiedad o valor que no comprende ignorará esta parte de la declaración, pero deberá procesar el resto. Los selectores disponibles son, como queda dicho, todas las etiquetas HTML. A cualquier etiqueta HTML se le puede asignar un estilo; además como veremos en la página siguiente, puedes crear selectores propios. Las propiedades disponibles son las enunciadas como tales en el standard CSS; y los valores son asimismo los asignados en dicho standard. O dicho de otro modo: solo pueden utilizarse propiedades y valores contemplados en el standard, no siendo posible crear tus propias propiedades y valores. Los estilos, entonces, se definen así: selector { propiedad:valor } h1 {color : blue}
Los selectores se escriben omitiendo las llaves < y >, es decir, simplemente h1, h2, etc. La declaración {propiedad : valor} ha de ir encerrada en llaves { }. Pueden asignarse varias propiedades a un mismo selector, separadas por punto y coma: Selector { propiedad1: valor1; propiedad2: valor2 } h1 {color: yellow; background-color: red }
Tambien se pueden asignar propiedades de forma conjunta a varios selectores: Selector1, Selector2, {propiedad1:valor1;propiedad2:valor2}
Como ejemplo, veamos una definición de un estilo para los elementos (Selectores) h1 y h2: h1 { font-size: x-large; color: red; } h2 { font-size: large; color: blue; }
Donde indicamos al navegador que deberá visualizar los encabezamientos (textos insertados entre etiquetas ) en letra roja y tamaño extra grande; mientras que los de nivel se visualizarán en tamaño grande y color azul. Del mismo modo, si ambos selectores tuvieran las mismas propiedades, podríamos haber escrito: ...
Página 4 de 46
h1, h2 { font-size: x-large; color: red; }
Y si queremos que alguno de los selectores que comparten propiedades tenga alguna en solitario, basta con duplicar una declaración para ese solo selector: ... h1, h2 { font-size: x-large; color: red; } h2 {font-family:garamond;}
Las recomendaciones del standard CSS del W3 contienen las definiciones oficiales de todas las propiedades y valores que deben ser interpretados por un navegador para considerarlo como compatible con CSS. Mas adelante se incluye un listado de valores y propiedades.
Conflictos y Herencias En el standard CSS está previsto que pueda aplicarse de forma simultánea mas de una hoja de estilo. Si estas definiciones de estilo no están en conflicto, todas ellas son aplicadas. Si por el contrario dos o mas reglas regulan de forma diferente la misma propiedad o elemento, surge un conflicto de estilos, que será resuelto en el orden jerárquico predeterminado en el standard. La regla general es que los estilos declarados por el autor del documento prevalecen sobre los estilos declarados por el usuario, y tanto los diseñados por el autor como por el usuario prevalecen sobre los estilos por defecto del navegador. Las hojas de estilo enlazadas o importadas prevalecen unas sobre otras, en cascada, en el orden en que son llamadas. La resolución de conflictos de estilo mediante reglas jerárquicas predeterminadas posibilita que el autor busque de propósito estos conflictos para controlar en detalle la visualización del documento. origen
Con carácter general, las reglas de estilo del autor de la pagina prevalecen sobre las reglas del usuario que la visita, y estas a su vez prevalecen sobre los estilos por defecto del navegador. peso: !important
Una regla de estilo puede ser definida (por el autor o por el usuario) como importante y en tal caso cambia el orden de precedencia; se aplicará en primer lugar la regla 'importante' del usuario, con precedencia sobre la del autor La sintaxis es la siguiente: p {background:red !important;}
El standard CSS1 preveia que una regla importante del autor prevalecia sobre la regla importante del usuario. Actualmente con CSS2 es a la inversa y la regla importante del usuario toma precedencia.
Página 5 de 46
Lo especifico vence a lo generico
Cuanto mas especifica sea una regla (cuanto mas identificado esté el elemento al que se aplica) tendrá mas preferencia. Por eso una regla de un elemento contenedor se heredará por los elementos hijos salvo que estos tengan su propia regla (que se les aplicará mas especificamente) Las etiquetas HTML siguen un orden jerárquico, de anidamiento (BODY se anida dentro de la etiqueta HTML; los elementos UL, P, definen bloques anidados dentro de BODY, etc) y esta estructura repercute en la definición de estilos, segun un orden de herencia. La etiqueta principal es seguida de la etiqueta , que contienen todas las demas, y asi sucesivamente. Si se asignan estilos a la etiqueta todas las tablas, listas, párrafos y cualquier otro elemento incluido en el BODY heredará el estilo definido, ya que usualmente todas las propiedades son heredables, y por tanto todos los sub-elementos descendentes tomarán los valores de las propiedades del elemento superior, salvo que tengan asignado su propio valor. Para establecer estilos genéricos que se apliquen en toda la página, basta por tanto asignarlos al selector Atendiendo a esta jerarquia entre etiquetas, las reglas de estilo mas específicas se aplican con precedencia a las mas genéricas orden
Si un conflicto entre reglas no puede resolverse con los criterios anteriores, prevalece la 'leida' en ultimo lugar por el navegador. Las reglas de estilo externas son leidas antes que las internas (si hay varias enlazadas externamente, son leidas en el orden de los enlaces). Despues se leen las declaraciones de estilo incluidas en la seccion HEAD de la página y por ultimo las declaraciones 'in line'. En definitiva, en caso de conflicto que no pueda ser resuelto de otra manera, las declaraciones in line tendrán preferencia (salvo que colisionen con reglas definidas !important;)
Sintaxis más estricta Los navegadores son bastante tolerantes con los errores en las etiquetas html; no ocurre lo mismo con las reglas css. Una regla mal escrita será ignorada. Estas son algunas de las reglas a tener en cuenta:
Los selectores aunque sean elementos html se escriben sin Puedes usar minusculas o mayusculas las declaraciones para cada selector van encerradas en llaves {} Cuando establezcas varias declaraciones para un mismo selector, separalas por ; Cuando uses unidades de medidas, no emplees espacios entre el numero y la unidad: 2cm Puedes añadir lineas y espacios en blanco entre declaraciones para mejorar la legibilidad. En las hojas de estilo externas el único formato de comentario admisible es /* */
Formas de añadir estilos a las páginas Web. Las formas de incluir estilos en un documento HTML son variadas. Veamos un ejemplo: título de la pagina
Página 6 de 46 @import url("http://miweb/otroestilo.css"); h1 { color: red; }
La cabecera es roja
mientras esta línea es verde.
El ejemplo enseña hasta cuatro formas de combinar estilo y HTML: 1. Mediante links, es decir enlazando a un archivo .css externo. Este es el sistema mas ortodoxo, segun la filosofía de las CSS, pues separa totalmente lo que es contenido (en el documento HTML) de lo que es forma (en el archivo CSS). 2. Incluyendo la definición de los estilos dentro de la propia página Web, en la cabecera ( .... Este método, que tambien respeta la separación de forma y contenido, es el indicado cuando se quiere definir un estilo para una sola página. 3. Mediante definición de estilos singulares dentro de la página HTML, que definen la apariencia de una sola etiqueta HTML, o de un grupo de etiquetas, o de un párrafo, dentro de la página. Este método se denomina inline 4. Importando estilos definidos fuera de la pagina. Similar al link, la instrucción @import se incluye dentro de las etiquetas STYLE, en primer lugar, y antes de cualquier otra regla de estilo que queramos incluir.
Los métodos posibles no son excluyentes, ya que pueden combinarse, estableciendo un archivo con estilos genéricos para todo el sitio Web, y estilos particulares para páginas o párrafos determinados, dentro de los archivos HTML. A continuación, los veremos con mas detalle.
Enlazar el estilo desde un archivo externo Para definir el estilo de una página web desde un archivo externo, debe crearse un archivo de texto, conteniendo las definiciones, y archivarlo sin formato, con la extensión *.css. Una vez creado, basta incluir un link a ese archivo .css desde cada página que deba seguir ese estilo. De esta forma, una misma librería de estilos puede aplicarse a cualquier número de paginas web, simplemente incluyendo en cada una de ellas el link correspondiente. Como cualquier link, la localización del archivo CSS puede ser absoluta o relativa, dependiendo de su ubicación dentro del propio sitio web, o en otra dirección. El link siempre debe insertarse dentro de las etiquetas HEAD del encabezamiento de la página Web: ....
Donde miestilo.css es el archivo que contiene las definiciones de estilo. En este caso se trata de un link relativo, ya que se supone que 'miestilo.css' está ubicado en el mismo sitio y directorio que las páginas a las que afecta. Tambien son posibles los links absolutos:
Página 7 de 46
....
Vamos a diseccionar nuestro link: El atributo rel se usa para definir la relación entre el archivo enlazado y el documento HTML. El atributo opcional type se usa para especificar el tipo de archivo: "text/css" para una hoja de estilo en cascada normal, "text/javascript" si es un script, etc. Con ello permitimos a los navegadores omitir los tipos de archivo que no soportan. El link puede tener otro atributo opcional: media, que especifica el medio o medios al que se aplica la hoja de estilo. Los valores posibles mas importantes son "screen" (pantalla, valor por defecto), y "print", para salida a una impresora El archivo *.css es de texto simple, por ello necesitaremos un editor capaz de escribir texto sin formato. Dentro de nuestro archivo css NO deben incluirse las llaves de las etiquetas HTML. Los comentarios encerrados entre los caracteres /* ... */ si son admisibles, pero no puedes incluir comentarios html:
Estilos para una sola página Si simplemente queremos definir reglas de estilo para una sola página, podemos usar, en lugar del link externo, las etiquetas al comienzo del documento, dentro de las etiquetas ...< /head>. La etiqueta style tiene el atributo type, que permite al navegador identificar el tipo de instrucciones que siguen. Por defecto se usa "text/css" Dentro de las etiquetas style se incluirá un comentario HTML (), para evitar problemas de visualización en navegadores que no soportan CSS. La razón es que los navegadores antiguos ignoran aquellas etiquetas HTML que, por ser de versiones posteriores, les son desconocidas (, por ejemplo, o ) pero visualizan el texto encerrado entre estas etiquetas. Al encerrar las declaraciones de estilo dentro de un comentario, se consigue que los navegadores que ignoran la etiqueta style ignoren también y no muestren en pantalla como texto las definiciones de estilo. Dentro de las etiqueta puede incluirse cualquier número de definiciones de estilo, y debe terminarse con una etiqueta de cierre . El siguiente ejemplo especifica estilos para las etiquetas (selectores) , , , y
:
Página 8 de 46
aqui el contenido de la pagina
Estilos importados Una hoja de estilo importada es una hoja que puede ser llamada (y combinada) con otra hoja. Esto permite, por ejemplo, crear un archivo *.css con las definiciones de estilo básicas que deberán aplicarse a todo un sitio Web, y otros archivos *.css con estilos parciales, para aplicar a elementos (o paginas) específicas que requieran estilos adicionales. En definitiva, se pueden combinar y aplicar en una misma página estilos provenientes de distintas fuentes. Para importar una hoja de estilo se emplea la instrucción @import dentro de la etiqueta STYLE o de un archivo css enlazado. La instrucción @import debe preceder a cualquier otra declaración de estilo. Si se importan varias hojas de estilo, estos se aplican "en cascada", en el orden en que son importadas; es decir, las definiciones de estilo incluidas en la última hoja de estilo importada prevalecen sobre las anteriores. Sintaxis: @import url(http://www.miweb.com/parcial1.css); @import url(http://www.miweb.com/parcial2.css); .... otras definiciones de estilo singulares, si se desean ....
Estilos para zonas de una página: estilo en línea Existen varias formas de actuar sobre zonas concretas del documento (secciones, párrafos, palabras, letras, y elementos de una página): style
Puede determinarse el estilo de una etiqueta HTML, en un unico punto del documento, sin mas que añadir dentro de la misma el modificador style, seguido de la definición del estilo, que afecta exclusivamente al texto o elementos incluidos dentro de la etiqueta definida Esta linea es roja y el tamaño es menor.
Notese que la definición de estilo se hace exclusivamente dentro de la propia etiqueta afectada. Nada hay que escribir en la cabecera HEAD. Ha de observarse tambien que la definición del estilo va entrecomillada. El estilo definido no afecta al texto incluido en la siguiente etiqueta. Si un estilo designado para una etiqueta individual entra en conflicto con un estilo general de toda la página, o con un estilo definido externamente, el estilo particular prevalece para el caso concreto al que ha sido asignado. En el ejemplo anterior, podriamos haber decidido un estilo genérico para todos los elementos en negrita de la página, y un estilo distinto inline para una concreta etiqueta, definiendo este estilo dentro de la etiqueta a la que quisieramos aplicarlo. div
Tambien pueden asignarse estilos particulares a secciones enteras (aunque incluyan distintas etiquetas HTML) usando para encerrar esta sección la etiqueta ... , definiendo estilos que solo se aplicarán a esa sección.
Página 9 de 46
El siguiente ejemplo cambia el color y tamaño de punto de un bloque de texto usando la etiqueta . El mismo resultado se obtendría asignando el estilo definido a cada una de las etiquetas HTML incluidas dentro de dicha sección (en el ejemplo incluimos etiquetas
,
, - etc. El estilo definido afecta a toda la parte de la pagina incluida dentro de las etiquetas div.
Este texto es rojo, y tiene 10 pt. Tambien éste.
En el siguiente ejemplo hay una nueva definición de estilos usando las etiquetas , pero contiene una excepción, por el estilo definido individualmente para una concreta etiqueta, en este caso, - , que se superpone al estilo de la sección La especificación de este estilo abarca al contenido de toda la pagina Web hasta la etiqueta div de cierre, excepto para el segundo punto de la lista, que tiene su propio estilo..
Este texto es rojo y tiene 10 pt. - Este texto es azul y tiene 10 pt.
span La etiqueta es similar a la etiqueta en el sentido de que carece de significado propio, sirviendo para delimitar en abstracto secciones o trozos del documento, con la diferencia de que no es formadora de bloque (no se insertan automaticamente lineas en blanco delante y detrás) y suele usarse para elementos mas pequeños de una página (letras, palabras, en lugar de párrafos o secciones).
Si queremos, por ejemplo, que una sección de texto, dentro de una línea, aparezca con otro tipo de fuente, lo encerraremos entre las etiquetas y Aqui tenemos el ejemplo. Nota que a diferencia de div, span no implica salto de línea. span no interrumple el flujo del texto, mientras que div convierte a todo lo que encierra en un bloque aparte (poniendo un salto de línea tanto al comienzo como al final).
ID El atributo ID se utiliza para asignar un único valor a un elemento, en todo el documento. Debe definirse en la cabecera HEAD del documento, dentro de las etiquetas STYLE, empleando el signo #: este texto sería de 1.3 ems
Página 10 de 46
El uso del elemento ID y de otros estilos singulares no es muy aconsejable, en cuanto las CSS estan diseñadas, precisamente, para dotar al documento de una estructura lógica; estructura que se rompe al especificar estilos por elementos. La utilidad esencial de ID es que identifica un elemento único en toda la página, lo que permite luego operar con él, por ejemplo, mediante scripts.
Estilos alternativos el enlace a la hoja de estilo externa no necesita por lo general el atributo title. Sin embargo, si establecemos dos enlaces a dos hojas de estilo externas, y uno de los enlaces tiene atributo title, esa segunda hoja no se aplicará junto a la primera, sino que supone un estilo 'alternativo' que puede ser escogido por el usuario /* hoja de estilo por defecto */ /* hoja de estilo alternativa. No se muestra si no es escogida */ /* hoja de estilo alternativa. No se muestra si no es escogida. Como tiene el mismo titulo, se combinan ambos archivos */
Los selectores Hasta ahora hemos visto la posibilidad de usar etiquetas html como selectores. De esta forma podemos diseñar estilos para cabeceras, enlaces, párrafos ... pero no es una solución lo suficientemente flexible. Enseguida querremos, por ejemplo, establecer distitos estilos segun los tipos de párrafos, por ejemplo para distinguir un menú del contenido de la página, o para distinguir el encabezado del resto de texto, por lo que el selector p se quedará corto. Mediante las clases podremos definir estilos abstractos, que se podrán aplicar a cualquier etiqueta html. Mediante otros selectores aun mas específicos podemos alterar el estilo de partes muy concretas. Variantes de selectores:
etiquetas html: cada etiqueta es un posible selector. Por ejemplo un estilo para parrafos y otro para listas. clases: selectores abstractos aplicables a cualquier elemento, por ejemplo un estilo aplicable a algún parrafo y/o alguna lista selectores contextuales o descendentes, para elementos que esten dentro (desciendan) de otro elemento selectores hijos, para elementos que sean directamente hijos de otro elemento selectores adyacentes, para elementos que estén próximos a otros Selectores por identidad, para un elemento individual pseudoclases y pseudo elementos: links, primera letra, primera linea etc
class Mediante la definición de 'clases' se establecen estilos que pueden aplicarse a cualquier selector HTML o elemento de la página. El estilo definido en una clase no está vinculado a una etiqueta o elemento concreto sino a una 'clase', y esta clase se puede anudar a cualquier etiqueta HTML o grupo de ellas.
Página 11 de 46
Titulo h1.miclase { color:blue; } .miotraclase {color:green;} esto aparecería en azul esto aparecería como cabecera H1 normal esto aparecería en verde y este párrafo, tambien en verde
vease [http://www.ignside.net./man/css/ejemplos/ejemplo1.html]
Pueden definirse clases para cualquier selector o etiqueta HTML: h1.verde {color:green;}
o pueden asignarse clases independientemente de las etiquetas HTML a las que pueda afectar. En este último caso se omite en el selector el nombre de etiqueta: .verde {color:green;}
Por ejemplo: .Piepagina { font-size: small; }
La clase "piepagina" (definida en la cabecera de la pagina o en archivo externo) puede usarse con cualquier elemento, y visualizara con tipo de letra pequeña el texto al que afecte:
La clase asi definida puede usarse en cualquier elemento o selector: en el primer caso, afectaría al texto dentro del párrafo
; en el segundo, a la cabecera h1; en el tercero, a todo el bloque div (cualquiera que fueran las etiquetas que incluya); y en el cuarto, al bloque span Solo una clase se puede especificar a la vez para cada etiqueta HTML. P.miclase.miotraclase
sería inválido. Pero si pueden establecerse clases separadas. Una misma etiqueta HTML puede tener diferentes "clases", permitiendo que un mismo elemento ofrezca diferentes estilos: h1.roja {font: 15pt/17pt; color: red;} h1.verde {font: 15pt/17pt; color: green;} h1.azul {font: 15pt/17pt;color: blue;}
y usar una clase u otra en la Página Web como sigue: Este es un encabezamiento rojo ... Este es azul ...
Página 12 de 46
Y este .... verde
Cuando aplicamos una sintaxis del estilo elementohtml.clase esa regla de estilo solo se aplicará a ese elemento html que tenga asignada esta clase. Finalmente, tambien podemos asignar mas de una clase a una misma etiqueta: .mitexto { color: yellow } .mifondo { background-color: blue } ... titulo en amarillo, fondo azul color amarillo; fondo: el que herede de la pagina.
Selector ID Mediante el atributo id podemos establecer una identidad única para un único elemento de la página. La sistaxis html sería por ejemplo primer parrafo del capitulo
segundo parrafo del capitulo
Si queremos dar estilo solo al primer párrafo, que es el primer hijo del elemento div, lo especificamos así: p:first-child { estilo }
O asi, si mas exactamente, queremos señalar solo al párrafo primer hijo de cada capitulo, y no al párrafo primer hijo de otro elemento cualquiera:
Página 16 de 46
div.capitulo > p:first-child { estilo }
Selectores adyacentes Con estos selectores podemos aplicar estilos a elementos html próximos a otros. En el ejemplo Capitulo 1: El retorno del Jedi de George Lucas
las etiquetas strong y cite son adyacentes Podriamos aplicar un estilo a cite indicando: strong + cite { estilo }
donde el estilo se aplicaria al elemento cite siempre que fuese adyacente, apareciera despues de un elemento strong
Seleccionando segun el atributo Podemos también seleccionar etiquetas html solo si contienen determinado atributo, o si este tiene determinado valor. Veamoslo con el elemento img que como sabemos, puede contener los atributos alt y title. img [alt] { estilo } /* selecciona imagenes con atributo alt */ img [alt="mis vacaciones"] { estilo } /* selecciona imagenes con atributo alt cuyo valor sea "mis vacaciones" */
Junto a estas dos variantes principales, [atributo ~="valor"] identifica la etiqueta que contenga "valor" como uno de sus valores de atributo separados por espacios; y la sintaxis [atributo|="valor"] identifica a la etiqueta que contenga el atributo indicado con el valor "valor" en una lista separada por guiones.
Selector universal El asterisco sirve para seleccionar cualquier elemento html .green * {estilos}
identifica cualquier elemento html descendente de otro elemento con la clase "green". Aqui tienes ejemplos [http://www.ignside.net./man/css/ejemplos/ejemplo36.html] de algunos selectores condicionales.
A tener en cuenta Los selectores 'class' y 'id' son excepción a la regla de que en CSS puedes utilizar minusculas y mayusculas. class="piepagina" no es igual a class="PiePagina". Ninguno de estos dos selectores puede comenzar su denominación con un número. Asimismo, en la primera versión de CSS2, los guiones_bajos estaban prohibidos, y aunque posteriormente se admitieron, su soporte por algunos navegadores es errático, por lo que conviene evitarlos.
Página 17 de 46
Propiedades de las Fuentes CSS1 define las propiedades 'font-family', 'font-style', 'font-variant', 'font-weight', 'font-size', y 'font'. La posibilidad de manejar las fuentes es una de las mas apreciadas en las "hojas de estilo"; pero recuerda ...
Existen diferencias en el modo en que los navegadores interpretan las reglas de estilo. Este es un principio general que tambien, por desgracia, se aplica a las reglas de estilo relativas a las fuentes. Existen muchas diferencias entre los valores que admite un tipo de fuente u otro. Por ejemplo: veremos que se pueden especificar hasta nueve valores de negrita o bold , pero muchas fuentes estan diseñadas de tal forma que solo permiten ser visualizadas en dos valores: normal o negrita. De nada sirve que especifiquemos una fuente especial, y maravillosa, si el usuario no la tiene instalada en su ordenador.
'font-family' Valor: a esta propiedad pueden asignarsele como valores una lista jerárquica de tipos de letra específicos o genéricos. Los valores deben ir separados por comas, para indicar que son alternativos: body { font-family: verdana, helvetica, "sans-serif"; }
Lo usual es especificar como valor primero los tipos de letra de elección del autor y dejar como última alternativa una "familia genérica". Hay cinco familias genericas de fuentes. Enumeramos los nombres de estas familias, y entre paréntesis un ejemplo de fuente perteneciente a la misma: serif (Times), sans-serif (Arial, Helvetica), cursive (Comic Sans), fantasy (Ransom) y monospace (Courier). Dentro de cada familia, la elección del tipo específico dependerá de los tipos que el ordenador tenga instalados, pero usando como última elección una 'familia generica' aseguras al menos que el documento se visualizará con una fuente semejante (de la misma familia) que la designada. Ejemplo [http://www.ignside.net./man/css/ejemplos/ejemplo3.html] Los nombres de fuentes que contengan espacios en blanco deben especificarse entre comillas. Si se omiten las comillas, el navegador ignorará los espacios en blanco antes y despues del nombre de fuente, y cualquier número de espacios en blanco "dentro" del nombre de fuente se convertirá en un solo espacio. Si la fuente se define in line, deben usarse comillas simples: texto ...
'font-style' Este es un texto en italic y sin embargo este otro es oblique La propiedad 'font-style' permite elegir como valor un tipo de fuente normal , italic o oblique . El valor normal visualiza una letra normal. El valor italic visualiza letra en cursiva . El valor oblique visualiza una fuente aún mas inclinada que la cursiva. La diferencia entre italic y oblique pasará desapercibida en la mayor parte de las fuentes. Típicas fuentes oblique son "oblique", "slanted" o "incline"; etiquetadas como italic, "italic", "cursive" o "kursiv". h1, h2, h3 { font-style: italic; } h1 em { font-style: normal; }
Página 18 de 46
'font-variant' valores: "normal", o "small-caps". Estas últimas son letras mayúsculas de un tamaño mas pequeño que el normal. Si el tipo de fuente seleccionado no tiene versión smalls-caps, el navegador visualizará el texto en mayúsculas ordinarias. Ejemplo: h3 { font-variant: small-caps; }
Y ahora un ejemplo: ESTO DEBERÍA VERSE EN SMALL-CAPS y esto EN MAYUSCULAS NORMALES.
'font-weight' Valores: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900. El valor 'font-weight' determina el grosor de la fuente. Los valores 100 a 900 indican una secuencia jerárquica, donde cada número indica un grosor secuencialmente mas oscuro como su predecesor. El valor "normal" equivale a 400. 'Bold' equivale a 700. p { font-weight: normal; } /* 400 */ h1 { font-weight: 700; } /* bold */
Este texto tiene un valor 200 Este es un texto normal; Este es texto weight 700 o 'bold'; Este tiene un valor 900. Los anteriores son valores absolutos; junto a ellos tenemos dos valores relativos: 'bolder' y 'lighter' seleccionan grosores de fuente mayores o menores en relación al grosor "heredado" del elemento del que dependen. No existe certeza sobre el grosor exacto con que un navegador determinado puede visualizar una fuente. Por ejemplo, algunas fuentes solo admiten dos valores (normal y bold).
'font-size' La propiedad font-size determina el tamaño de la fuente. Los valores pueden especificarse
de forma absoluta de forma relativa en porcentaje expresando su unidad de medida
de forma absoluta Al especificar el tamaño de la fuente en valores absolutos, el autor de la página se remite a la tabla de tamaños de fuentes predeterminados en la base de datos del ordenador del usuario. Son valores admisibles xx-small, x-small, small, medium, large, x-large, y xx-large . Medium es el tamaño de fuente por defecto, y cada uno de los valores absolutos supone un incremento o disminución de tamaño en un valor constante. Este valor constante de aumento o disminución de tamaño, segun la especificación CSS1, es de 1.5; sin embargo, en el standard CSS2 es de 1.2.; algunas familias de fuentes tienen un incremento o disminución de tamaño segun un valor propio; y finalmente los navegadores
Página 19 de 46
pueden ofrecer un tratamiento del tamaño distinto del especificado. Pero en cualquier caso, los diferentes valores absolutos siempre respetarán sus proporciones entre ellos. Una fuente x-large será siempre mas grande que una fuente large. Un ejemplo:
xx-large x-large large medium small x-small xx-small
A título de ejemplo, font-size 'x-large' se visualiza con tamaño equivalente a 28 puntos en Communicator (Windows o Macintosh), a 24 puntos en el IE 4 (Windows y Macintosh), y 18 puntos en el IE 3.0 para Windows 95. de forma relativa La segunda forma de especificar el tamaño de la fuente es usando valores relativos. Los valores admitidos son smaller o larger, y hacen la fuente mas pequeña o mas grande comparada con el valor que tenía inicialmente. Si la fuente venía definida por un valor absoluto, el empleo de un valor relativo hace que el valor absoluto se incremente o decrezca un grado: si la fuente tenía un tamaño large, dandole un valor relativo smaller pasa a ser el equivalente a medium. Si el valor inicial no está expresado de forma absoluta, la expresión de un valor relativo smaller o larger empequeñece o engradece la letra a criterio del navegador. Ejemplos:
xx-large smaller smaller smaller smaller smaller smaller
larger
larger
Página 20 de 46
larger
larger
larger
larger larger El ejemplo comienza con un valor absoluto xx-large; se reduce seis veces asignando sucesivamente el valor relativo smaller (la última linea smaller es teóricamente equivalente a xx-small) y luego se incrementa con el valor relativo larger siete veces, lo que determina que la última orden visualice la letra a un tamaño mas grande que xx-large. ATENCION: se advierte que Netscape Navigator visualizaba en sus anteriores versiones la fuente larger verdaderamente grande .... En porcentaje La expresión del tamaño de fuente en porcentaje funciona de forma similar al tamaño relativo. Cada valor en porcentaje visualiza la fuente en un tamaño superior o inferior porcentualmente al valor inicial, de la siguiente forma:
Double Normal
Half.
En este caso a la primera palabra hemos asignado un valor porcentual de 200% (doble) que el normal, y a la tercera un valor 50% (mitad). Para el ejemplo, el valor normal se ha definido de forma absoluta como xlarge. En unidades Finalmente puede designarse el tamaño de la fuente con su valor en unidades: cm, in, pt, px.
'font' Valores: font-style, font-variant, font-weight, font-size, line-height, font-family. La propiedad 'font' permite definir de forma agrupada valores para 'font-style' , 'font-variant' , 'font-weight', 'font-size', 'line-height' y 'font-family' en una sola regla. Es decir, ademas de las ya examinadas propiedades de las fuentes, line-height , que en realidad es una propiedad de texto y alude al espacio entre líneas, es decir, distancia entre la parte superior e inferior de las letras de dos lineas contiguas. No es necesario especificar valores para todas las propiedades, sino solo para aquellas que se deseen cambiar. Las propiedades grosor (weight), estilo (style) y variant se pueden especificar en cualquier orden; seguidas por el tamaño (size), seguidas por una barra o slash "/" y la altura de linea (line-height), seguidas por la familia (family). asi,
Página 21 de 46
p { font: italic bold 12pt/14pt Times, serif; }
especifica párrafos con negrita (bold) e itálica (italic), fuente Times o serif con un tamaño de 12 puntos y
Espaciado de palabras (word-spacing) y espaciado de letras (letterspacing) Las propiedades word-spacing y letter-spacing pueden ser usadas para añadir espacio extra entre palabras o letras. e s t e e s s p a c i n g
u n
e j e
m p l o
d e
l e t t e r
este es un ejemplo de word spacing Los valores que admite la propiedad word-spacing son "normal" o unidades de longitud. Los valores pueden ser negativos. Igualmente, la propiedad letter-spacing admite valor "normal" y expresado en unidades. Tambien pueden ser valores negativos.
'text-decoration' La propiedad text-decoration se refiere a la decoración de un elemento (aunque si el elemento carece de texto, la propiedad no surte efecto alguno), proporcionando un subrayado ( underline ), sobrerrayado (nos entendemos, overline ), tachado ( line through ), parpadeo ( blink ) o ninguno (none). Este ultimo es el que se usa para quitar el subrayado a los links. El color requerido para el elemento "decorativo", es decir, el subrayado, es tomado del color del texto. Esta propiedad no es hereditaria, pero los elementos suelen igualar a aquellos de los que dependen (parents), y en este caso la linea permanecerá del mismo color aunque los elementos herederos (child) tengan diferentes valores de color. El ejemplo a continuación muestra como eliminar el subrayado característico de los links: A:link { text-decoration: none; }
'vertical-align' Esta propiedad permite controlar la posición vertical de texto o imágenes en relación a su elemento parent. Los posibles valores son:
top , alinea la parte superior del elemento con el elemento parent mas alto en la línea. bottom alinea la parte inferior del elemento con el elemento parent inferior en la línea. text-top alinea la parte superior del elemento con la parte superior de las fuentes (letras) del elemento parent. text-bottom alinea la parte inferior del elemento con la parte inferior de la letra o fuente del elemento parent. baseline coloca en línea el elemento con el elemento parent. middle alinea el punto medio del elemento con el punto medio del elemento parent. sub coloca al elemento en subscript, y super en superscript.
este texto es normal; esto es sub y esto super . ¿gran cosa, no?
'text-transform'
Página 22 de 46
La propiedad text-transform convierte texto a mayúsculas (valor uppercase), minúsculas (valor lowercase), o solo convierte a mayúscula la primera letra de cada palabra (capitalize). El valor text-transform : none visualiza el texto normalmente, ignorando cualquier otro valor text-transform heredado. Los valores admitidos son, entonces, "capitalize", "uppercase", "lowercase" y "none" capitalize Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit. UPPERCASE: EODEM MODO TYPI, QUI NUNC NOBIS VIDENTUR PARUM CLARI, FIANT SOLLEMNES IN FUTURUM. lowercase: Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.
'text-align' La propiedad text-align se aplica a texto dentro de un bloque (por ejemplo, texto dentro de las etiquetas P o DIV, que forman un bloque) y determina la alineación del bloque. Los valores son alinear con margen izquierdo, derecho, justificado o centrado (left, right, justify, center). Se recuerda que la alineación es con el margen, no con el borde de la página
'text-indent' La propiedad text-indent se usa para tabular (indent, sangria de texto) la primera línea dentro de un bloque. Los valores admitidos son unidades de longitud, o porcentaje. Admite valores negativos. Este párrafo tiene este estilo.
'line-height' La propiedad line-height (que se podía especificar dentro de la propiedad font) señala la distancia vertical entre líneas, medida entre las bases de cada linea. La base de una linea es la señalada por la parte inferior de un tipo de letra "no descendente"; por ejemplo, una "a", y no una "j". Los valores se asignan mediante un número (si indicamos line-height: 2 decimos al navegador que la distancia entre lineas ha de ser el valor font-size multiplicado por 2). Puede tambien señalarse con unidades de longitud; o por porcentaje (referido tambien al valor font-size). Este es un ejemplo de párrafo con la propiedad line height, que hemos dejado fijada en el valor font-size multiplicado por dos.
No se permite valor line-height negativo.
Espacios La propiedad white-space permite el control de los espacios dentro del elemento. Esta propiedad toma uno de tres valores:
normal (contrae múltiples espacios en uno) pre (no contrae múltiples espacios) nowrap (no permite el ajuste de línea sin una etiqueta
)
display La propiedad display se usa para definir un elemento con uno de cuatro valores:
Página 23 de 46
block (muestra un salto de línea antes y después del elemento) inline (ningún salto de línea antes o después del elemento) list-item (igual que block, salvo que se agrega un marcador de ítems de lista) none (sin visualización)
A diferencia de la propiedad visibility que veremos al tratar del posicionamiento, y que también permite ocultar elementos html, cuando un elemento tiene la propiedad display con valor none, es como no existiera, no se reseva el espacio que ocupaba. Normalmente las propiedades display, white-space y list se suelen estudiar bajo el apartado de 'clasificación', aunque para mayor claridad nosotros mostramos las dos primeras dentro de las propiedades de texto, dejando una página aparte para las listas. una distancia entre líneas (o altura de linea) de 14 puntos.
Unidades y Medidas LLevamos un tiempo refiriendonos a medidas en longitud y porcentaje. LLegado es el momento de echar un vistazo mas de cerca. En ocasiones, como hemos mencionado, el valor de una propiedad se puede expresar por unidades de longitud. Por ejemplo, los valores de font-size y text-indent. Las unidades de longitud consisten en un número seguido de una unidad de medida (cm, em, in, pt, px). Hay dos tipos de unidades: absolutas y relativas.
Unidades absolutas:
pulgadas (in). Una pulgada=2.54 cm. centímetros (cm). milímetros (mm) puntos (pt). Un punto=1/72 de pulgada. picas (pc). Una pica=12 puntos
Unidades relativas
em ex px
La unidad em es igual a la altura (font-size) de la letra del elemento en el que se usa. Por ejemplo si para un párrafo especificamos un indentado de 2em, el largo de la sangría será igual a dos veces el tamaño de la letra de ese párrafo. Cuando empleamos la unidad de medida 'em' para especificar el tamaño de la letra (font-size) entonces el valor de 'em' viene dado por el tamaño de la fuente del elemento padre. p { font-size:11px;text-indent: 2em; }
Este ejemplo equivale a un indentado de 22 px para el párrafo a que se aplica div { font-size:15px;} p { font-size:1.2em;}
En este ejemplo, si el párrafo está contenido en un elemento div, el tamaño de la letra sería un 20% mayor que el especificado para dicho div. O si no estuviera contenido en un div, un 20% mayor que el tamaño de letra del elemento del que descienda (por ejemplo, body).
Página 24 de 46
Recuerda que no hay que dejar espacios en el valor de longitud y la unidad de medida No es lo mismo expresar las medidas en una unidad u otra. Unidades "absolutas" como pixels, centímetros, puntos, permiten un control exacto de la apariencia de la página, siempre claro está, que esta se visualice en el entorno preciso para el que fue diseñada. Por ejemplo, la unidad 'pixel' tiene un valor diferente dependiendo de la resolución de la pantalla y el tipo de ordenador del usuario. Así, normalmente un sistema operativo Windows mantiene una equivalencia de 96px por pulgada, y un Macintosh 72px por pulgada. Si en lugar de pixels se utiliza la medida de puntos (pt) el tamaño del punto depende de la resolución de la pantalla del usuario. Esta es la razón por la que se recomienda el uso de unidades de medida 'relativas', y dentro de estas, el uso de 'em'. En origen la unidad 'em' era el equivalente a la altura (height) de la ´M´mayúscula. En la actualidad, sin embargo, la unidad 'em' alude simplemente al tamaño de la fuente instalada. Con este tipo de medidas el autor mantiene un control relativo ya que, en relación con el tamaño de fuente por defecto del usuario, puede especificar cuanto mas grande o mas pequeña se ha de visualizar la letra de la página. Ademas la unidad 'em' puede utilizarse para cualquier propiedad CSS que admita medidas (márgenes, sangrías ...) lo que permite un diseño proporcionado al sistema del usuario. La unidad ex es igual a la altura de la letra x minúscula (la propiedad 'x-height' de la fuente utilizada. En muchos tipos de fuentes existe la siguiente proporción: un "em" equivale a 1.5 "ex". La unidad px es un pixel. La unidad pixel tiene valores distintos en términos de visualización en pantalla, y en términos de impresión. La unidad pixel no es muy aconsejada, pues los elementos que la utilicen se visualizaran de forma diferente en un monitor dependiendo del tamaño de pantalla y resolución; otras unidades responden mejor a estos diferentes entornos. Vamos a ver algunas comparaciones.
3em 2em
,1em:: texto normal ::3ex, 2ex,1ex :: texto normal ::20px, 15px,10px
,
1in
,
1cm, 10mm, 12pt, 3pc
Unidades de porcentaje Un valor de porcentaje se forma por un número y el signo %. No hay espacios en un valor de porcentaje. Los valores de porcentaje se fijan en relación a otro. Generalmente, el valor de porcentaje es relativo al tamaño de fuente del elemento:
200%
:: texto tamaño normal :: 50% - 100% -
Página 25 de 46
Color y background Estas propiedades describen el color y fondo de un elemento, por ejemplo, el color del texto (color, foreground color) y el color del fondo (background-color). La propiedad background permite asignar como fondo un color o una imagen. Tambien permite determinar el posicionamiento de la imagen; si ha de repetirse y como; y si se desplazará con el texto en caso de scroll o permanecerá fija.
'color' Esta propiedad describe el color de un elemento. Hay varias formas de identificar el color: por su nombre, cuando está admitido en el standard; o por su valor RGB: Todo es rojo: em { color: red; } em { color: rgb(255,0,0) } em { color: #FF0000; }
aqua black blue fuchsia gray green lime maroon navy olive purple red silver teal white yellow
El atributo color asigna al texto un color, especificado por su nombre o valor RGB. Se pueden designar los 16 colores arriba representados por su nombre (es la lista básica que todo navegador entenderá, pero hay muchos mas colores que pueden indicarse por su nombre), o especificar cualquier otro con su valor hexadecimal (RGB, red green y blue).
'background-color' Con CSS y la propiedad background-color podemos controlar el fondo de cualquier elemento HTML, no solamente la propia página o las celdas de una tabla.. Mediante esta propiedad podemos decidir si asignamos un color o una imagen; el modo en que esta ha de repetirse o no; si se desplazará con la página o permanecerá fija. Podemos especificar un 'color' de fondo para cualquier elemento con background-color : color, o asignar un valor 'transparent'. Es muy recomendable que si especificas el background para un elemento, especifiques tambien su color, para evitar sorpresas con otros estilos declarados o heredados.
'background-image'
Página 26 de 46
Podemos especificar una imagen de fondo, indicando su direccion por medio de una url, o señalar que no hay ninguna (none). Cuando se especifica una imagen de fondo es también conveniente especificar un color de fondo alternativo. Ejemplo [http://www.ignside.net./man/css/ejemplos/ejemplo31.html] : body { background-image: url(/imagenes/fondo.gif) } Fijate que por defecto salvo contraorden la imagen se repite para ocupar todo el fondo del elemento ... en este caso todo el BODY
'repeat' Por medio del parámetro background-repeat y sus valores: repeat, repeat-x, repeat-y, no-repeat [http://www.ignside.net./man/css/ejemplos/ejemplo32.html] podemos determinar si la imagen de fondo ha de repetirse (si no ocupa toda la pantalla), y la forma de hacerlo. Si se especifica 'repeat', la imagen se repetirá horizontal y verticalmente. Los valores 'repeat-x [http://www.ignside.net./man/css/ejemplos/ejemplo33.html] ' y 'repeat-y [http://www.ignside.net./man/css/ejemplos/ejemplo34.html] ' hacen que la imagen se repita horizontal o verticalmente, respectivamente, creando una banda de imagenes de un lado a otro. Con el valor de 'no-repeat', la imagen no se repite. body { background: red; url(fondo.gif); background-repeat:repeat-y; }
'background-attachment' Valores: scroll [http://www.ignside.net./man/css/ejemplos/ejemplo29.html] , fixed [http://www.ignside.net./man/css/ejemplos/ejemplo30.html] . Si se especifica una imagen de fondo, el parámetro 'background-attachment' especifica si permanecerá fija o acompañará al contenido si deslizamos la página con la barra de scroll. body { background: red url(fondo.gif); background-repeat: repeat-y; background-attachment: fixed; }
'background-position' La propiedad background-position controla la ubicación inicial de la imagen, utilizando los valores top, left, right, bottom y center. Tambien admite valores absolutos, y porcentajes La forma más sencilla de asignar una ubicación de fondo es con palabras clave: Palabras clave horizontales (left, center, right) Palabras clave horizontales verticales (top, center, bottom) También pueden usarse porcentajes y longitudes para asignar la posición de la imagen de fondo. Los porcentajes son relativos al tamaño del elemento. Al usar porcentajes o longitudes, la posición horizontal se especifica primero, seguida de la posición vertical. Un valor como 20% 65% especifica que la imagen se colocará 20% a la derecha y 65% abajo del elemento. Un valor como 5px 10px especifica que la esquina superior izquierda de la imagen se colocará 5 pixels a la derecha y 10 pixels abajo de la esquina superior izquierda del elemento. Si solo se da el valor horizontal, la posición vertical será 50%. Se permiten combinaciones de longitudes y porcentajes, ya que son posiciones negativas. Por ejemplo, 10% -2cm está permitido. Sin embargo, porcentajes y longitudes no pueden combinarse con palabras clave.
Página 27 de 46
Las palabras clave son interpretadas como sigue; top left [http://www.ignside.net./man/css/ejemplos/ejemplo20.html] = left top = 0% 0% top [http://www.ignside.net./man/css/ejemplos/ejemplo21.html] = top center = center top = 50% 0% right top [http://www.ignside.net./man/css/ejemplos/ejemplo22.html] = top right = 100% 0% left [http://www.ignside.net./man/css/ejemplos/ejemplo23.html] = left center = center left = 0% 50% center [http://www.ignside.net./man/css/ejemplos/ejemplo24.html] = center center = 50% 50% right [http://www.ignside.net./man/css/ejemplos/ejemplo25.html] = right center = center right = 100% 50% bottom left [http://www.ignside.net./man/css/ejemplos/ejemplo26.html] = left bottom = 0% 100% bottom [http://www.ignside.net./man/css/ejemplos/ejemplo27.html] = bottom center = center bottom = 50% 100% bottom right [http://www.ignside.net./man/css/ejemplos/ejemplo28.html] = right bottom = 100% 100%
'background' Valores: background-color, background-image, background-repeat, background-attachment, backgroundposition. Se trata simplemente, de la posibilidad de especificar todos los valores del background en una sola propiedad, de forma similar a lo que ocurría con 'fonts'.
listas Las CSS1 tambien especifican algunas propiedades para las listas: list-style-type, list-style-image y list-style-position, y su propiedad resumida asociada, list-style. Los valores posibles de list-style-type son disc, circle, square, decimal, lower-roman, upperroman, lower-alpha, upper-alpha, none. Los valores posibles de list-style-image son url o none. La sintaxis es url (ruta/hacia/el/archivo) Finalmente los valores de list-style-position son inside o outside. La siguiente hoja de estilo, por ejemplo, define reglas de estilo para un elemento de lista ordenada y lista desordenada