Version | Fecha | Descripcion |
---|---|---|
CSS 1.0 | Propuesto: 1994 Especificacion: 1996 | |
CSS 2.0 | 1998 | No esta completamente inplementada |
CSS 2.1 | Propuesto: 2004 Aun no es una especificacion | Cerca a ser implementada |
CSS 3.0 Modular | Cada modulo tendra sus propios tiempos | Algunos modulos ya estan implementados. |
Algunos de estos trucos son:
Además hay otro aspecto muy importante en CSS y es que separan por completo la información de la presentación de una página de su contenido, con lo que se facilita mucho el diseño y revisión de las páginas, pues se puede variar la presentación de una página, o de todo el conjunto de ellas, sin cambiar una sola línea del código del DOM.
Los beneficios de usar CSS son:
Cada etiqueta tienen sus reglas o comportamiento por defecto, que respetan los navegodres. Así, por ejemplo se define H1 como un texto alineado a la izquierda, un par de puntos mayor que el resto y en negrita.
Con las hojas de estilo podemos cambiar cada una de estas reglas si lo deseamos. Es decir, podemos modificar a nuestro antojo el comportamiento de cada etiqueta.
El formato basico de CSS es el siguiente:
Selector {atributo: valor;}
Este formato puede ser aplicado de tres maneras a nuestras páginas Web:
Podemos usar en nuestras páginas uno, dos o los tres métodos descritos, como se verá más adelante.
Se hace añadiendo el atributo STYLE, que contiene una serie de propiedades, dentro de la etiqueta correspondiente de apertura. Veamos los siguientes ejemplos:
Ejemplo 1: Parrafo de color rojp.
<P STYLE="color: red">
Ejemplo 2: Este es un párrafo con márgenes izquierdo y derecha de 0.4 pungadas, superios e inferior en 0 y letra de color verde.
<P STYLE="margin: 0 0.5in 0 0.5in; color:green">
Obsérvese la sintaxis del atriburo STYLE. Se ponen entre comillas una serie de propiedades (por ejemplo, margin-left), y después de dos puntos se pone el valor de esa propiedad (en este caso, 0.5in o sea, 0.5 pulgadas). Las distintps pares propiedad: valor deberán estar separadas por punto y coma.
Si queremos cambiar la apariencia de una sección entera (que agrupe un conjunto de etiquetas), se puede usar la etiqueta <DIV>, con lo que definimos el estilo globalmente para esa sección.
En el siguiente ejemplo cambiamos el color (a rojo) y el tamaño de la fuente (a 16 puntos) de un bloque de etiquetas por medio de la etiqueta <DIV>, lo que tiene el mismo efecto que si hubiéramos asignado este estilo separadamente a cada una de las etiquetas englobados <P>, <UL> y <LI>):
<DIV STYLE="font-size: 16pt; color: red"> <P>La definición del estilo (rojo y 16 puntos), afecta a todo el bloque de etiquetas. <P>Este texto también es rojo y tiene 16 puntos de altura. <P>Al igual que esta línea. </DIV>
Qué ocurre si a una de las etiquetas englobados por DIV le introducimos un estilo distinto ? Comprobémoslo introduciendo un estilo propio la segunda etiqueta <P>:
<DIV STYLE="font-size: 16pt; color: red"> <P> Veamos si la definición del estilo (rojo y 16 puntos), afecta a todo el bloque de la etiqueta, hasta la etiqueta cierre de DIV. <P STYLE="color: blue">Esta línea es azul, a pesar de estar englobada dentro de DIV, porque tiene su propio estilo. <P>Esta otra cumple con el estilo de DIV, porque no tiene estilo propio. </DIV>
Este es el resultado:
Esta otra cumple con el estilo de DIV, porque no tiene estilo propio.
Como se comprueba en este caso, el estilo dentro de una etiqueta concreta tiene preferencia sobre el estilo del bloque, impuesto por DIV que es su padre.
La preferencia de unos estilos sobre otros, se debe al orden en que estos son activados por el navegador, por este motivo es que se llamen Hojas de estilo en cascada ya que hay una cascada de métodos para aplicar los estilos, teniendo un orden de preferencia riguroso de unos sobre otros.
Este método de introducir el estilo en etiquetas concretas o en conjuntos de etiquetas es sencillo de aplicar y es el adecuado si sólo se desea hacer algún cambio puntual en una página. Sin embargo no es la verdadera potencia de los hojas de estilo.
Se hace poniendo un bloque de instrucciones dentro de los etiquetas <STYLE> y </STYLE>, que deberá estar dentro de la cabecera del documento, después del título, entre las etiquetas </TITLE> y </HEAD>.
<HTML> <HEAD> <TITLE>... </TITLE> <STYLE> [bloque de instruciones de estilo] </STYLE> </HEAD> <BODY> [conjunto de todas las etiquetas que componen la página] </BODY> </HTML>
El formato generico es:
Selector {propiedad: valor;}
Ejemplo 1:
<STYLE> BODY {background: yellow; font-size: 10pt; font-family: Arial; margin-left: 0.5in; margin-right: 0.5in} H1 {background: blue; font-size: 14pt;font-weight: bold; color: red} H2 {font-size: 12pt; font-weight: bold; color: red} DIV {background: URL(nubes.jpg)} </STYLE>
Como se ve en este ejemplo, se ponen las distintas etiquetas a las que se quiere atribuir un estilo (en este caso BODY, H1, H2 y DIV, pero podrían haber sido otras cualesquiera); a continuación del nombre de cada etiqueta, y englobadas por los signos "{" y "}" van las distintas propiedades con sus respectivos valores, separadas unas de otras por un punto y coma.
Si se coloca este bloque en la cabecera del documento HTML, donde se ha indicado antes, veremos que cada vez que se usa una de las etiquetas que tienen una definición de estilo, no se comportará de la forma habitual, sino tal como la hemos definido. El resto de los etiquetas, que no están incluidas en el bloque de definición del estilo, se comportarán de la forma habitual.
Si nuestro sitio de Web está compuesto por muchas páginas, y queremos darles un estilo uniforme a todas ellas, en vez de incluir un bloque de definición de estilo repetido en cada una de ellas (como se ha visto en la sección anterior), se puede establecer un enlace a un archivo de texto que contiene el bloque de definición del estilo. La extencion CSS no es obligatoria, pero si reomendable.
<HTML> <HEAD> <TITLE>... </TITLE> <Link type="text/css" rel="StyleSheet" href="archivo.css"></Link> </HEAD> <BODY> [conjunto de todas las etiquetas que componen la página] </BODY> </HTML>
Aquí se ha supuesto que el archivo hoja.css se ha dejado en el misma carpeta donde están los documentos HTML. Si no es así, es decir, si está en otra carpeta en el servidor, habría que indicar la ruta (por, ejemplo: HREF=ruta/hoja.css).
Dentro de este archivo el formato es exactamente el mismo:Selector {propiedad: valor;}
Un ejemplo de este método lo constituye este manual, en donde todos los capítulos están enlazados con un archivo que contiene la hoja de estilo para todos ellos, llamado hoja.css.
Se llama selector a la sintaxis que define a quien se aplicara un grupo de atributos de estilo. Mas datos aqui.
Se puede asignar el estilo a una tipo de etiqueta concreta de HTML, pero hay que tener en cuenta que afectara a todas las que se usen en la pagina. Para ello, en la declaración de estilos escribimos la etiqueta y entre llaves, las propiedades de estilo que deseemos, seguido de dos puntos y el valor seguido de punto y coma.
body { background: #f0f0f0; color: #333366; }
Podemos aplicar el mismo estilo en un conjunto de etiquetas. Para ello, indicamos las etiquetas seguidas por comas y luego, entre llaves, las propiedades y valores.
h1, p { color: red; }
En este caso se define que los encabezados de nivel 1 y los párrafos, tengan letra roja.
Otro ejemplo:
header, nav, footer{ background-color: #000000; color: #ffffff; border: 1px solid red; }
Podemos usar una clase o mas clases, si deseamos crear un estilo específico, para luego aplicarlo a distintos elementos de la página. Las clases en la declaración de estilos se declaran con un punto antes del nombre de la clase.
.miclase{ color: blue; }
Para asignar el estilo definido por una clase en un elemento HTML, simplemente se añadir el atributo class a la etiqueta que queremos aplicar dicha clase. Por ejemplo:
<p class="miclase">este párrafo tiene el estilo definido en la clase "miclase".
El párrafo anterior se presentaría con color azul. La definición de clases y su uso es sencilla, pero veamos un ejemplo más detallado:
Para la siguiente declaración de estilos:.inverso { background-color: #ffffff; color: #000000; }
Se ha definido un fondo negro y el texto blanco para el cuerpo de la página (body), así como las celdas y los párrafos. Luego se ha declarado una clase, de nombre "inverso", con los colores al revés, es decir, fondo blanco y texto negro.
Ejemplo 3:<body> <p/gt;Hola esto es un parrafo normal</p/gt; <p class="inverso">Párrafo con los colores invertidos</p/gt; <table/gt; <tr/gt; <td class="inverso">INVERSO</td/gt; <td>NORMAL</td/gt; </tr/gt; </table/gt; </body/gt;
Esta página tiene el fondo negro y el texto blanco. El primer párrafo, que es un párrafo normal, sigue esa definición general de estilos, pero el segundo párrafo, al que se ha aplicado la clase "inverso", tiene el fondo blanco y el texto en negro. Por lo que respecta a la tabla, en su primera celda se ha asignado la clase "inverso", por lo que se verá con fondo blanco y color de texto en negro. Mientras que la segunda celda, que no tiene asignada ninguna clase, se presentará como se definió en la regla general.
Se puede definir un estilo especifico para un solo indicador id, para esto el nombre del indicar se preceder de # y en el elemento se asigna el mismo id. Hay que aclara que a diferencia de la clase este estilo solo se puede aplicar una vez.
#queso {text-align: center;}
Se puede usar el hecho de que una etiqueta contenga un atributo especifico como selector. Para su definicion en CSS el atributo debe ir entre corchetes.
Ejemplo: Selecciona todas los elementos que contengan el atributo Title.[Title]{color: red;}
Ejemplo: Selecciona cualquier elemento button sin un atributo DISABLED.
button:not([DISABLED]) {color: red;}
[href$=".pdf"] {color: red;}
Se puede usar el operador > (descendiente), * (todos), not() (negacion)
Ejemplo: Selecciona cualquier elemento p que es descendiente de un elemento li que es hijo de un elemento ol que es hijo de un elemento body.
body > ol > li p {color: red;}
Ejemplo: Selecciona cualquier elemento que no sea un elemento a.
*:not(a) {color: red;}
Una pseudo clase en cuando analizamos el valor de una propiedad.
a:link | Enlace no visitado aun. |
a:visited | Elace ya visitado. |
a:hover | Con el mouse encima. Ojo se puede usar en cuaquier etiqueta. |
a:focus | |
a:activate | Actualmente activa |
:First-Child | El primer hijo. |
:nth-Child() | El hijo n (numerico) o ODD o EVEN |
:Only-Child | El unico hijo. |
:nth-Last-Child() | El hijo n antes del ultimo. |
:Last-Child | El ultimo hijo. |
:First-of-Type | El primero de su tipo. |
:nth-of-Type() | El n del tipo. |
:Only-of-Type | El unico de su tipo. |
:nth-Last-of-Type() | |
:Last-of-Type | El ultimo de su tipo. |
:Empty | Esta vacio. |
:Root | Es la raiz. |
:Target | Es enlace |
:cheched | selecciona elementos input "marcados" |
:disables | selecciona elementos input "desabilitrados" |
:invalid | selecciona elementos input "invalidos" |
:required | selecciona elementos input "requeridos" |
:read-only | selecciona elementos input "solo lectura" |
:read-write | selecciona elementos input sin atributo "solo lectura" |
CSS tambien permiten modificar a voluntad la apariencia de los enlaces, usando como selector una pseudo clases especifica, luego el atributo (color, tamañe fuente, subrayado o no) y finalmente el valor a asignar.
Hay seis tipos de pseudo clase disponibles:
a:link {color: blue;} a:visited {color: green;} a:hover {color: red;}
Si se les aplica la propiedad text-decoration, ajustado al valor none (ninguno), hace que los enlaces no estén subrayados.
Ejemplo: Hace que los enlaces visitados sean de color fucsia y no estén subrayados.
A:visited {color: fuchsia; text-decoration: none}
::First-line | |
::First-letter | |
::Before | |
::After |
Normalmnet estos dos ultimos asociados a un Generator Content.
Ejemplo: En el ejemplo se esta introduciendo un nbsp (codigo unicode 00A0) antes del div.div::before { content: "\00A0"; display: block; width: 0; heigth: 0; border-width: 10px 20px 10px 0; border-style: solid; border-color: transparent; }
Es posible que algunas implementaciones modernas no funcionen igual en todos los navegadores por lo que debes especificar una instruccion para cada navegador en particulor.
-moz- | Firefox |
-webkit- | Chrome o Safari |
-o- | Opera |
#grad { background: red; /* Para navegadores que no soportan gradiente */ background: -webkit-linear-gradient(red, yellow); /* Para Safari 5.1 a 6.0 */ background: -o-linear-gradient(red, yellow); /* Para Opera 11.1 a 12.0 */ background: -moz-linear-gradient(red, yellow); /* Para Firefox 3.6 a 15 */ background: linear-gradient(red, yellow); /* Sintexis estanadar */ }
Como se ha visto anteriormente, existen muchos selectrores para aplicar estilos en cascada.
Ejemplo: Selecciona cualquier elemento h2 que no es un primer hijo de su tipo y que no es un último hijo de su tipo que es hijo de un elemento body.body > h2:not(:first-of-type):not(:last-of-type) {color: red;}
Ejemplo: Selecciona cualquier elemento p sin un atributo class que contiene la palabra section.
p:not(.section) {color: red;}
El orden de preferencia es el siguiente (de mayor a menor):
Esto quiere decir que una orden de estilo, por ejemplo el color del texto, puesta dentro de un etiqueta, prevalecerá sobre la que esté indicada en los otros dos métodos, si es que se usan en esa página.
Lo más práctico es usar el tercer método (enlace a una hoja de estilo), para dar una apariencia consistente a todas las páginas, y si es necesario modificar un aspecto concreto en alguna de ellas, usar el primero o el segundo metodo.
H1 {font: 20pt/22pt bold; color=#00FF00} /*Color verde*/
<STYLE TYPE="text/css"> BODY { background: yellow; font-size: 10pt; font-family: Arial; margin-left: 2cm; margin-right: 2cm } H1 { background: blue; font-size: 14pt; font-weight: bold; color: red } H2 { font-size: 12pt; font-weight: bold; color: red } DIV { background: URL(isla.gif) } </STYLE>
En los navegadores que no implementen las hojas de estilo se ignoraran las etiquetas <STYLE> y </STYLE>, pero podrá ocurrir que aparezca como texto el bloque de definición del estilo.
Para evitar esto, es conveniente englobar dicho bloque de información entre los símbolos <!-- y -->. Por tanto, es conveniente poner el bloque de definición del estilo de esta manera:
<Style Type="text/css"> <!-- BODY { background: yellow; font-size: 10pt; font-family: Arial; margin-left: 2cm; margin-right: 2cm; } H1 { background: blue; font-size: 14pt; font-weight: bold; color: red; } H2 { font-size: 12pt; font-weight: bold; color: red } DIV { background: URL(nubes.jpg) } --> </Style>
<HTML> <BODY> (conjunto de etiquetas que conforman el DOM) </BODY> </HTML>
Como se puede ver, la etiqueta <BODY> engloba a todas las demas. Si se la asigna un estilo determinado a esta etiqueta, todos los elementos que estin dentro de la pagina (tablas, listas, parrafos, etc.) heredaran este estilo.
Por tanto, para establecer un estilo global a la pagina entera, lo mas apropiado es atribuirselo a la etiqueta <BODY>. Por ejemplo:
BODY { font: 10pt/11pt Arial, Helvetica, sans-serif; background: url(isla.gif); margin: 0 2cm 0 2cm; }
Establece para el DOM completo la fuente, separación entre líneas, imagen de fondo y espesor de los margenes. Si se precisa que ciertos elementos concretos dentro del DOM tengan otras caractermsticas distinta a la general, entonces hay que definirlas por separado.
Una pagina con muchos ejemplos es CSS 3 info