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.
Cuando Surgió?
Las hojas de estilos aparecieron poco después que el lenguaje de etiquetas SGML, alrededor del año 1970. Desde la creación de SGML, se observó la necesidad de definir un mecanismo que permitiera aplicar de forma consistente diferentes estilos a los documentos electrónicos.
Para qué sirve?
El lenguaje CSS sirve para organizar la presentación y aspecto de una página web.
Qué ventajas ofrece?
Con una Hoja de Estilo podemos modificar la presentación de cada elemento sin modificar el código HTML, ahorrando esfuerzo y tiempo de edición. Así, el mantenimiento del sitio web se hace más sencillo.
El lenguaje CSS ofrece una amplia gama de herramientas de composición más potentes que HTML.
Con CSS se evita tener que recurrir a “trucos” para conseguir algunos efectos.
Las Hojas de Estilo pueden usarse con otros lenguajes de programación (por ejemplo JavaScript) para conseguir efectos dinámicos en las páginas.
Se pueden especificar Hojas de Estilo para distintos navegadores.
Los usuarios con alguna discapacidad pueden definir su propia Hoja de Estilo y la regla !important obligará al navegador a suplantar la Hoja de Estilo del autor de la página.
Cómo se integra en HTML?
Las hojas de estilo en cascada son archivos con extensión .css cuyo contenido está compuesto por partes diferenciadas según una sintaxis precisa llamada reglas. Cada regla asocia un conjunto de propiedades de estilo (con formato, atributo:valor), a uno o varios selectores, los cuales representan o se corresponden con los elementos existentes en el documento HTML. Por lo tanto, la sintaxis que utilizaremos para, por ejemplo, definir el ancho del cuerpo de una página HTML, sería:
BODY { width : 100%; }
donde,
BODY { width : 100%; }, es una regla.
BODY, es el selector, y se realizará una búsqueda en el documento HTML para conocer a cual o cuales elementos se aplicaran las propiedades de estilo.
{ width : 100%; }, es la definición de estilo, la cual puede contener una o varias propiedades de estilo.
width : 100%, es una propiedad de estilo compuesta por el par "atributo:valor".
Estructura de CSS (Selector, propiedad y valor)
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.
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...
Herencia y cascada en CSS
La herencia en CSS es el mecanismo mediante el cual determinadas propiedades de un elemento padre se transmiten a sus hijos. De hecho, se parece mucho a la herencia genética. Si los progenitores tienen los ojos azules, los hijos seguramente también tendrán los ojos azules.
CSS significa cascading style sheets (hojas de estilo en cascada) y, por lo tanto, no debería extrañarnos que la cascada sea un concepto importante. Es el mecanismo que controla el resultado final cuando se aplican varias declaraciones CSS contrapuestas al mismo elemento.
Propiedades básicas 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
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...
Herencia y cascada en CSS
La herencia en CSS es el mecanismo mediante el cual determinadas propiedades de un elemento padre se transmiten a sus hijos. De hecho, se parece mucho a la herencia genética. Si los progenitores tienen los ojos azules, los hijos seguramente también tendrán los ojos azules.
CSS significa cascading style sheets (hojas de estilo en cascada) y, por lo tanto, no debería extrañarnos que la cascada sea un concepto importante. Es el mecanismo que controla el resultado final cuando se aplican varias declaraciones CSS contrapuestas al mismo elemento.
Propiedades básicas 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