Post on 12-Jun-2015
description
Didier Fabián Granados Muñoz
Sesión 6: CSS - Hojas de Estilo en Cascada
Septiembre 12 de 2009
• Cuenta la leyenda que al construir un documento HTML
se tenía que definir cada una de las propiedades en las
diferentes etiquetas para mejorar su apariencia.
Texto Texto
<font face="Arial" size="3" color="yellow">
Texto
</font>
• Si se quería aplicar la misma apariencia a varios
elementos, había que repetir las instrucciones!
Texto 1 Texto 1<font face="Arial” size="3"
color="yellow">
Texto 1
</font>
…
…
Texto 2 Texto 2
<font face="Arial” size="3"
color="yellow">
Texto 2
</font>
( )n
• Aún peor, si se quería aplicar la misma apariencia a varios elementos envarias páginas, las instrucciones se repiten cada vez más.
• El desarrollador veía tedioso este proceso, pues no había forma alguna deevitar tantas repeticiones.
<font face="Arial” size="3“ color="yellow">
Texto 1
</font>
Texto 1 Texto 1
• Y si era algo más que texto…
• Para organizar el contenido se debía recurrir
únicamente a las tablas.
• No había forma de poner un objeto sobre otro (caso
de los tooltips o regiones con imágenes o tablas).
• Para que los vínculos se vieran agradables, había que
recurrir a imágenes.
• Muchos de los efectos se tenían que realizar con
Javascript, incluso en detrimento del rendimiento del
navegador…
• Etc.
• Así las cosas, se pensó en una estrategia que permitiera
independizar la parte visual del contenido propio del
documento HTML.
• Siglas de Cascade Style Sheets, que quiere decir “Hojas
de Estilos en Cascada”.
• Se trata de una especificación sobre los estilos físicos
aplicables a un documento HTML.
• Trata de dar la separación definitiva de la lógica
(estructura) y la presentación del documento HTML.
Estilos
• El estilo físico no se preocupa de la estructura del
documento, sino por la apariencia final: párrafos con un
cierto tipo de letra, tablas con un determinado color de
fondo, entre otros.
• El estilo lógico, en cambio, se refiere específicamente a la
estructura del documento.
• CSS se ocupa de adaptar el estilo físico al estilo lógico.
¿Por qué usar CSS? (1/2)
• Porque es más limpio tener por separado el contenido
(HTML) de la presentación (CSS).
• Porque para cambiar el formato de un elemento HTML
específico, solo se tendría que definir en la hoja de estilos
una única vez y no tantas veces como dicho elemento
aparezca.
• Porque el HTML es muy limitado para lograr una
maquetación atractiva de las páginas web
(posicionamiento lineal).
¿Por qué usar CSS? (2/2)
• Porque permite mantener una cierta consistencia entre
todas las páginas.
• Porque permite una carga más rápida de las páginas.
• Porque es más accesible que HTML.
• Porque es un estándar y los estándares son el camino
para que se pueda ver internet de la misma manera.
• Porque se trata de definir las características en cascada.
• Porque se pueden definir los estilos utilizando unidades
diferentes a los pixeles.
Sintaxis básica
• CSS utiliza la siguiente sintaxis básica para cada una de
sus instrucciones:
• La propiedad es aquél comportamiento que se desea
agregar al elemento HTML y que posee uno o varios
valores.
• El valor es lo que efectivamente se verá reflejado en la
propiedad a la cual pertenece.
propiedad1: valor1; propiedad2: valor2; ...
• No es lo más recomendable, dado que se debe definir en
un atributo de la etiqueta HTML sobre la que se quiere
aplicar.
• El atributo utilizado es STYLE, de donde la sintaxis sería la
siguiente:
• Ver ejemplo 1.
<etiqueta style="propiedad1: valor1;
propiedad2: valor2; ... propiedadN: valorN">
...
</etiqueta>
• Se desea definir estilos que apliquen a una, varias o todas
las etiquetas del documento.
• Se definen entonces estilos globales, entre las etiquetas
<head> y </head>, de acuerdo a la siguiente sintaxis:
<style type="text-css">
<!—
etiqueta {
propiedad1: valor1;
propiedad2: valor2; ...
} /* Y esto aplica para todas las demás */
-->
</style>
• Otras variantes pueden ser las siguientes:
• Ver ejemplo 2
<style type="text-css">
<!—
etiqueta1, etiqueta2 {
propiedad1: valor1;
propiedad2: valor2; ...
}
etiqueta3 {
propiedadA: valorA;
propiedadB: valorB; ...
}
-->
</style>
• Es lo más recomendado. Los estilos se declaran en un
archivo por aparte, especialmente cuando se trata de
reutilizarlos en todas las páginas.
• Debe declararse entre las etiquetas <head> y </head>.
• La sintaxis sería la siguiente:
• Ver ejemplo 3.
<link rel="stylesheet" type="text/css"
href="ruta_hoja_de_estilos.css" />
• A pesar de esto, desde la etiqueta style o el atributo style
de cada etiqueta HTML, se puede modificar un estilo que
ya estaba predefinido en la hoja de estilos.
Ver ejemplo 4.
• Se tiene la posibilidad de definir, en lugar de un estilo
para una etiqueta, varios estilos que apliquen sobre dicha
etiqueta.
• Por ejemplo, se puede hacer que el color del texto de una
sección en negrita se vea rojo dentro de un párrafo o
verde dentro de una lista.
Ver ejemplo 5.
• Una clase es una definición de un estilo concreto que en
principio no está asociado a alguna etiqueta HTML, pero
que en el documento se pueden asociar a etiquetas
concretas.
• La sintaxis en la hoja de estilos es la siguiente:
.NombreDeLaClase {
propiedad1: valor1;
propiedad2: valor2:
…
}
• Para aplicar el estilo de una clase a una etiqueta concreta,
se utiliza el parámetro CLASS:
• Nótese que se ha invocado la clase en el atributo class,
pero no se le ha puesto el punto antes. El punto es el
identificador de que lo declarado en el CSS es una clase.
Ver ejemplo 6.
<etiqueta class="NombreDeLaClase">...</etiqueta>
• También es posible que un elemento tenga asociada más
de una clase:
• Todas las clases asociadas deben estar dentro del
atributo class separadas por espacios.
Ver ejemplo 7.
<etiqueta class="clase1 clase2 … claseN">...</etiqueta>
• Cualquier etiqueta HTML puede tener asociado el
atributo ID.
• Este “nombreReferencia” debe ser único en todo el
documento HTML, puesto que servirá para tratarla tanto
desde Javascript como desde CSS.
<etiqueta id="nombreReferencia">...</etiqueta>
• Para definir un estilo mediante un ID, se usará la siguiente
notación:
• Es decir, escribiendo #, seguido del nombre del ID
correspondiente en el documento HTML.
#NombreDelId {
propiedad: valor;
...
propiedadN: valorN;
}
• Los ID y las clases pueden también ser combinados,
como se muestra en la siguiente notación:
• Aunque esto es poco común, pero es posible que un
elemento pueda manejar varias clases al tiempo...
#NombreDelId.clase {
propiedad: valor;
...
propiedadN: valorN;
}
• O también pueden ser combinados de la siguiente forma:
• En otras palabras, por una misma clase se pueden definir
diferentes comportamientos para cada elemento con un
ID definido.
Ver ejemplo 8.
.clase#NombreDelId {
propiedad: valor;
...
propiedadN: valorN;
}
• Un selector es la parte de un estilo CSS donde se indica
sobre qué parte del documento (X)HTML se debe aplicar
el estilo, o dicho de otra manera, el nombre del estilo.
• El ejemplo muestra lo que sería un selector básico de
todos: la redefinición de una etiqueta HTML.
• Sin embargo, existen diferentes tipos de selectores.
div { font-size: 18px; }
• Los siguientes son ejemplos de selectores simples, es
decir, aquellos a los cuales solo se les aplica una
característica especial.
• A continuación unos ejemplos y sus mapeos en HTML.
body { ... }
h2.first{ ... }
div#logo { ... }
a:visited { ... }
<body> ... </body>
<h2 class="first"> ... </h2>
<div id="logo"> ... </div>
<a href="link.html“> ... </a>
• Estos selectores afectan a una etiqueta hija de otra en
forma descendiente.
div span { font-size: 18px }
<div><span>Cualquier texto o cosa aquí</span></div>
• Existen 2, el + y el >.
• El + no se aplica ni a padres, ni a hijos, sino a hermanos
(etiquetas contiguas o adyacentes).
• El > es otra manera de representar la herencia.
h2.first > span {
... }
div#logo { ... }
<h2 class="first"> <span>
Texto </span>
<div
id="logo"></div><h3>Texto</h3>
• Se utiliza para todos los elementos del documento HTML,
es decir, si se utiliza este selector, automáticamente todos
los elementos hijos van a tomar las características dadas,
* {
margin: 0px;
padding: 0px;
}
div#header * {
color: #CCCCCC;
text-decoration: none;
}
Vamos a hacerlo con un ejemplo práctico.
Página Oficial de CSS
http://www.w3.org/Style/CSS/
Guías y tutoriales de CSS
http://www.w3schools.com/css
http://www.htmlhelp.com/reference/css/
Validador de CSS
http://jigsaw.w3.org/css-validator/