¿Que es CSS?
El CSS (hojas de estilo en cascada) es un lenguaje que define la apariencia de un documento escrito en un lenguaje de marcado (por ejemplo, HTML). Así, a los elementos de la página web creados con HTML se les dará la apariencia que se desee utilizando CSS: colores, espacios entre elementos, tipos de letra, ... separando de esta forma la estructura de la presentación.
Esta separación entre la estructura y la presentación es muy importante, ya que permite que sólo cambiando los CSS se modifique completamente el aspecto de una página web. Esto posibilita, entre otras cosas, que los usuarios puedan usar hojas de estilo personalizadas (como hojas de estilo de alto contraste o de accesibilidad).
¿Cuando Surgió?
CSS fue propuesto por primera vez por Håkon Wium Lie el 10 de octubre de 1994. Al mismo tiempo, Lie trabajaba con Tim Berners-Lee en el CERN. Muchos otros lenguajes de hojas de estilos fueron propuestos al mismo tiempo, y las discusiones en las listas de correo públicas dentro del W3C dieron lugar a la primera Recomendación CSS por el W3C (CSS1) en 1996. En particular, la propuesta de Bert Bos fue influyente; él fue el coautor de CSS1 y es reconocido como el cocreador de CSS.
Las hojas de estilo han existido de una forma u otra desde los comienzos del Standard Generalized Markup Language (SGML) en la década de los 80s, y CSS fue desarrollado para proveer hojas de estilos para la web.Un requerimiento para un lenguaje de hoja de estilos web era que las hojas de estilo vinieran en diferentes estilos en la web. Por lo tanto, los lenguajes de hojas de estilos existentes como DSSSL y FOSI no fueron adecuados. CSS, por otro lado, permite al documento ser influido por múltiples hojas de estilo por medio de los estilos en «cascada».
¿Para que sirve?
CSS es un lenguaje de estilo que define la presentación de los documentos HTML. Por ejemplo, CSS abarca cuestiones relativas a fuentes, colores, márgenes, líneas, altura, anchura, imágenes de fondo, posicionamiento avanzado y muchos otros temas. ¡Espera unos segundos y ya verás!
Es posible usar HTML, o incluso abusar del mismo, para añadir formato a los sitios web. Sin embargo, CSS ofrece más opciones y es más preciso y sofisticado. CSS está soportado por todos los navegadores hoy día.
Ventajas
CSS fue toda una revolución en el mundo del diseño web. Entre los beneficios concretos de CSS encontramos:
- control de la presentación de muchos documentos desde una única hoja de estilo.
- control más preciso de la presentación.
- aplicación de diferentes presentaciones a diferentes tipos de medios (pantalla, impresión, etc.).
- numerosas técnicas avanzadas y sofisticadas.
Formas de agregarlo a HTML
En este caso, todos los estilos CSS se incluyen en un archivo de tipo CSS que las páginas HTML enlazan mediante la etiqueta <link>. Un archivo de tipo CSS no es más que un archivo simple de texto cuya extensión es .css Se pueden crear todos los archivos CSS que sean necesarios y cada página HTML puede enlazar tantos archivos CSS como necesite.
Incluir CSS en el mismo archivo HTML:
Los estilos se definen en una zona específica del propio documento HTML. Se emplea la etiqueta <style> de HTML y solamente se pueden incluir en la cabecera del documento (sólo dentro de la sección <head>).
El último método para incluir estilos CSS en documentos HTML es el peor y el menos utilizado, ya que tiene los mismos problemas que la utilización de las etiquetas <font>.
Estructura de CSS
La estructura CSS se basa en reglas que tienen el siguiente formato:
- Selector: El selector es el elemento HTML que vamos a seleccionar del documento para aplicarle un estilo concreto. Por ejemplo, el elemento p. Realmente, esto es mucho más complejo, pero ya dedicaremos una serie de capítulos exclusivamente a este tema.
- Propiedad: La propiedad es una de las diferentes características que brinda el lenguaje CSS e iremos aprendiendo.
- Valor: Cada propiedad CSS tiene una serie de valores concretos, con los que tendrá uno u otro comportamiento.
¿Que es minificar CSS?
Normalmente, al codificar en CSS se lucha con dos factores clave:
Legibilidad: Correcta indentación que facilite la legibilidad de las propiedades y valores por separado, favoreciendo la velocidad de modificación e introducción de cambios.
Tamaño: Cuanto más texto tenga un archivo CSS (espacios incluídos), más grande será el tamaño final del archivo, por lo que más tiempo tardará en descargarse.
En archivos CSS muy grandes esto suele influir de forma considerable, por lo que lo ideal es utilizar los llamados Minify (Minificadores) para reducir el tamaño del archivo CSS condensando toda la información, eliminando espacios, retornos de carro, etc... (y por consiguiente, haciéndolo menos legible). Esto es un paso totalmente opcional, que se realiza sólo para reducir el tamaño de los archivos CSS, por lo que no es algo que sea totalmente imprescindible, pero se considera una buena práctica.
Existen incluso algunas herramientas que se encargan de analizar el código y suprimir propiedades repetidas o inútiles. Veamos un ejemplo de un mismo archivo CSS con su contenido sin minificar y minificado:
Ejemplo de código CSS legible (index.css): 114 bytes
Herencia y Cascada en CSS
Legibilidad: Correcta indentación que facilite la legibilidad de las propiedades y valores por separado, favoreciendo la velocidad de modificación e introducción de cambios.
Tamaño: Cuanto más texto tenga un archivo CSS (espacios incluídos), más grande será el tamaño final del archivo, por lo que más tiempo tardará en descargarse.
En archivos CSS muy grandes esto suele influir de forma considerable, por lo que lo ideal es utilizar los llamados Minify (Minificadores) para reducir el tamaño del archivo CSS condensando toda la información, eliminando espacios, retornos de carro, etc... (y por consiguiente, haciéndolo menos legible). Esto es un paso totalmente opcional, que se realiza sólo para reducir el tamaño de los archivos CSS, por lo que no es algo que sea totalmente imprescindible, pero se considera una buena práctica.
Existen incluso algunas herramientas que se encargan de analizar el código y suprimir propiedades repetidas o inútiles. Veamos un ejemplo de un mismo archivo CSS con su contenido sin minificar y minificado:
Ejemplo de código CSS legible (index.css): 114 bytes
#main {
background-color: black;
color: white;
padding: 16px;
margin:4px;
border:2px solid blue;
}#main{background-color:#000;color:#fff;padding:16px;margin:4px;border:2px solid #00f}Herencia y Cascada en CSS
HERENCIA:
Este es uno de los conceptos que se deben entender a la perfección “sí o sí”.
Como hemos visto antes, existe una relación de parentesco entre los elementos del documento. Pues bien, esta relación permite heredar propiedades CSS de padres a hijos.
Por ejemplo, si un elemento padre tiene especificado el color rojo, sus hijos automáticamente también tendrán el color rojo sin necesidad de especificar esta propiedad de forma explícita. Está claro que la herencia nos ayuda a escribir menos y de eso modo ahorrar código. Ahora bien, existen algunas normas a tener en cuenta a la hora de hablar de herencia:
· No todas las propiedades CSS se heredan.
· La herencia afecta a cualquier elemento descendente. Es decir, un hijo hereda de su padre pero a su vez, un nieto hereda del hijo de su padre, etc. Esto es así hasta que alguien rompa la herencia. Por ejemplo, si el hijo decidió tener el color amarillo (en vez del rojo que heredó de su padre), ahora el nieto heredará el color amarillo. En realidad, en caso de tener varios valores heredados (lo que pasa al nieto que hereda tanto del padre como del abuelo)siempre se aplica el valor más cercano en el parentesco.
¿Cómo saber si una propiedad es heredable?
Pues está el método “ensayo-error” que no recomiendo, y luego está el método científico que es leer la especificación de w3c y por cada propiedad hay una bonita información que nos dice si es o no heredable. Por ejemplo background-color no es heredable, pero font-size si es heredable.
Además, en la especificación también nos dice a qué elementos se puede aplicar qué propiedad, cuál es su valor inicial, etc.
Para terminar de ilustrar la herencia veamos un ejemplo basado en el anterior.
Si tenemos la siguiente hoja de estilos:
<style type="text/css">
#Div1 { color: Red; }
#Div1_2 { color: Green; }
</style>
El color de Div1_2_1 ¿De qué color será? Veamos, hereda el color rojo (Red) de Div1 (abuelo) y también el color verde (Green) de Div1_2 (padre), así que su color finalmente será… Verde, que es el color más cercano en el parentesco.
Aquí también aprovecho para meter la cuña de Firebug, ese “indispensable” complemento de Firefox que nos ayuda a entender el CSS (entre otras muchas cosas). Como vemos, la lista de estilos se lee de “abajo a arriba” y nos indique qué propiedades heredó el elemento y de quién.
CASCADA
Este concepto es un poco más duro de asimilar. De hecho, CSS es el acrónimo deCascading Style Sheets. Como vemos la palabra Cascada (Cascading) está en el propio nombre de CSS así que digo yo que es importante pero ¿Qué es exactamente la cascada?
Antes de comenzar veamos un ejemplo para darnos cuenta de su importancia.
<style type="text/css">
#Div1
{
color: Red;
font-size: 12px;
}
</style>
<div id="Div1">
<h1 id="H1">Título 1</h1>
<div id="Div1_1">Div1_1</div>
</div>
Viendo este código cualquiera pensaría que tanto el elemento H1 como el elemento Div1_1 será rojos y tendrán un tamaño de fuente de 12px (ambas propiedades heredadas desde Div1), pero al verlo en acción nos damos cuenta que el elemento H1 heredó el color pero no el tamaño de fuente ¿Por qué?
Para ambos elementos, Firebug muestra:
Sin embargo, en la pestaña “Calculado” vemos que el elemento H1 tiene un valor de24px para font-size:
Si habilitamos “Mostrar CSS del agente de usuario”:
Ahora ya podemos ver lo siguiente:
Principales Propiedade de CSS
El lenguaje CSS que estamos usando actualmente es la versión 2.1 que es estándar y la 3.0 que todavía no está terminada de definir pero ya se está usando. La versión 3.0 agrega nuevas propiedades, que se suman a las anteriores. A continuación describo las principales propiedades:
Font-family:
Define la familia tipográfica. Es conveniente poner una lista de dos o tres tipografías separadas por coma, porque si el usuario no tiene instalada la tipografía que nosostros elegimos, el navegador opta por mostrar la siguiente que debería ser una similar, si tampoco la tiene instalada, mostrará la tipografía por defecto.
Tenemos 3 opciones para definir la elección de la familia tipográfica:1) usar una de las fuentes más comunes (web safe fonts) que muy probablemente tenga instalada el usuario (Arial, Verdana, Trebuchet, Georgia, san serif, Times), 2) subir nuestra propia fuente con una propiedad nueva que se llama @font-face, o 3) usar una fuente de Google Font, que en este momento es lo más recomendable. El sitio es: http://www.google.com/fonts/.
Font-size:
Define el tamaño de la fuente y el valor se puede escribir en pixels o en ems. En este momento se recomienda usar ems. Los dos son valores relativos, el pixel es un valor relativo a la resolución de la pantalla, pero el em es relativo al tamaño de la fuente definida por el usuario. Si el usuario no cambió la configuración, el valor por defecto de los textos en todos los navegadores es de 16px. Entonces 1em = 16px.
Color:
Define el color de la tipografía. Los colores se pueden escribir de 3 formas distinas: con sistema hexadecimal, por ejemplo: #FF0000 (es rojo). Con los nombres de los colores (más limitado) por ejemplo: black, red, green. O usando RGB, esta paleta permite agregar el canal alfa para hacer transparencias.
Width:
Define el ancho de un elemento, el valor se puede escribir en pixels, ems o porcentaje.
Max-width o min-width:
Definen el ancho máximo o mínimo de un elemento. Muy importante en sitios adaptables
Height:
Define el alto de un elemento, el valor se puede escribir en pixels, ems o porcentaje.
Max-height o min-height:
Definen el alto máximo o mínimo de un elemento. Muy importante en sitios adaptables
Padding:
Es la distancia desde el borde de un elemento hasta su contenido.
Margin:
Es la distancia entre un elemento y otro (desde el borde de un elemento hacia afuera)
Border:
Define el borde de un elemento, su color, su estilo y grosor.
Background:
Define los fondos de un objeto. El fondo puede ser una imagen o un color. El color puede ser pleno o degradado. La imagen se puede repetir formando una trama (es lo que ocurre por defecto) o se puede especificar que no repita y que se coloque en determinada posición.
No hay comentarios:
Publicar un comentario