trabajo

CSS (Nivel básico)

Curso de CSS3 (Nov/2014)

Presentación
Las siglas CSS (Cascading Style Sheets) significan «Hojas de estilo en cascada» y parten de un concepto simple pero
muy potente: aplicar estilos (colores, formas, márgenes, etc...) de forma masiva a uno o varios documentos.

¿Qué es CSS?
La idea es la de utilizar el concepto de separación de presentación y contenido,intentando que los documentos
HTML incluyan sólo información y datos, relativos al significado de la información a transmitir, y todos los aspectos
relacionados a la presentación (diseño, colores, formas, estilos...) se encuentren en un documento CSS
independiente.
De esta forma, se utiliza un solo documento CSS, y con ello, varias ventajas:
Si necesitamos hacer modificaciones de presentación lohacemos en un sólo lugar y no tenemos que editar
todos los documentos HTML por separado.
Se reduce la duplicación de estilos en diferentes lugares, por lo que la información a transmitir es
considerablemente menor (las páginas se descargan más rápido).
Es más fácil crear versiones diferentes de presentación para otros tipos de dispositivos: tablets, smartphones o
dispositivos móviles, etc...Curso de CSS3 (Nov/2014)

Formas de aplicar CSS
Antes de empezar con CSS, debemos saber las formas en las que podemos incluir contenido CSS en nuestros
documentos HTML. Existen tres formas diferentes principales:

CSS externo
En la cabecera del documento HTML, el bloque

, incluimos una relación al archivo CSS en cuestión:



De esta forma, los navegadores sabrán que deben aplicarlos estilos de este archivo (index.css) al documento HTML
actual. Se aconseja escribir esta línea lo antes posible (sobre todo, antes de scripts), obligando así al navegador a
aplicar los estilos cuanto antes y eliminar la falsa sensación de página no cargada por completo.
Esta es la manera recomendada de utilizar un archivo CSS en nuestros documento y la que utilizaremos
principalmente.También es posible incluir archivos CSS mediante la regla @import (las cuales deberían ir al principio del
documento), pero esta regla sólo es recomendable en ciertas situaciones puesto que su utilización afecta al
rendimiento de carga de la página, así que nos centraremos sólo en la anterior.

CSS interno
Otra de las formas disponibles para incluir estilos en un documento HTML es la de incluirlosdirectamente en la
cabecera HTML del documento:



Título de la página

div {
background:#FFFFFF;
}


...

Este sistema puede servir en algunos casos, pero hay que tener en cuenta que utilizándolo, arruinamos la ventaja
de tener los estilos en un documento independiente, por lo que siempre es preferible guardarlo en un archivo
externo CSS.

CSS embebido
Por último, la terceraforma de aplicar estilos en un documento HTML es hacerlo directamente en las propias

Curso de CSS3 (Nov/2014)

etiquetas, a través del atributo style:
¡Hola amigo lector!

Al igual que en el método anterior, se recomienda no utilizarse, ya que se pierde la independencia de la
presentación y contenido. Sin embargo, es una opción que puede venir bien en algunos casos.
Consejo: Si sóloquieres hacer pruebas con propiedades básicas de CSS, puedes utilizar LiveWeave, un sitio web
que te permite crear contenido HTML5, CSS3 y Javascript y ver la previsualización al vuelo, sin necesidad de
recargar el documento.

Curso de CSS3 (Nov/2014)

Estructura del CSS
Al igual que los documentos HTML, los documentos CSS son archivos de texto donde se escribe una serie de
órdenes y el cliente(navegador) las interpreta y aplica a los documentos HTML asociados.
La estructura CSS se basa en reglas que tienen el siguiente formato:

Sintaxis simple
Selector: El selector es el elemento HTML que vamos a seleccionar del documento para aplicarle un estilo
concreto. Por ejemplo, el elemento p.
Propiedad: La propiedad es una de las diferentes características que brinda el lenguaje CSS...