Clase 2 – Aplicando estilos al documento Html con CSS

En la clase 2 hemos aplicado estilos CSS al documento html que editamos en la clase anterior.

Vimos en la primera clase que podemos escribir los estilos CSS directamente en el head de la página html. Lo hacemos, utilizando la etiqueta style, de esta forma:

<style>

etiqueta {regla_css;}

</style>

También es posible aplicar un estilo directamente en la etiqueta que queremos editar:

<p style=»font-weight:bold; color:red;»>Este texto está en negrita y es de color rojo.</p>

Esta no es la forma mas indicada de aplicar los estilos ya que siempre es mas conveniente separar al máximo la parte visual del contenido, aportando mayor flexibilidad y escalabilidad al documento. Por ejemplo, en un futuro quizás se desee cambiar la apariencia de la página si tener que meterse a editar el html. Esto será mucho mas sencillo si tenemos separados los estilos del html.

Para ello, editaremos los estilos en un documento externo al documento html y lo llamaremos utilizando la etiqueta link ubicada también en el head del documento html.

<link rel=»stylesheet» type=»text/css» href=»css/style.css» />

En el ejemplo que os incluyo al final de este artículo os encontraréis que en la carpeta css hay cuatro archivos .css. En el html sólo hacemos llamada a uno de ellos (style.css) que contiene estas tres lineas:

@import url(body.css);
@import url(estructura.css);
@import url(menu_principal.css);

¿Que estamos haciendo aquí?. Estamos importando reglas desde las hojas de estilo body, estructura, menu_principal y footer. Es un modo de mostrar como ordenar de una manera lógica los estilos de las distintas partes que pueden conformar un documento html. En el ejemplo que estamos utilzando quizás no tenga mucho sentido debido a su sencillez, pero cuando nos encontramos con documentos mas complejos puede resultar muy útil separar los estilos de las distintas partes del documento en sus correspondientes hojas de estilo.

En el ejemplo, hemos utilizado estructura.css  para definir las reglas de estilo de estructura del documento. En ella hemos definido la disposición de las distintas capas del documento (header, columnas, footer …). Las reglas de estilo para el menú principal las hemos definido en menu_principal.css.

Prestad atención al potencial del CSS para dotar de «dinamismo» a los elementos. En el menú hemos ocultado los submenus y hemos hecho que aparezcan cuando hacemos un hover sobre el elemento padre. Echadle un vistazo a menu_principal.css.

Vamos a desarrollar los distintos conceptos que hemos visto:

Selectores CSS

Selector de tipo o etiqueta

Selecciona todos los elementos de la página cuya etiqueta HTML coincide con el valor del selector. El siguiente ejemplo selecciona todos los párrafos de la página:

p { …}

Selector descendente

Selecciona los elementos que se encuentran dentro de otros elementos. Un elemento es descendiente de otro cuando se encuentra entre las etiquetas de apertura y de cierre del otro elemento. En el selector descendente, un elemento no tiene que ser descendiente directo del otro.

p span { color: red; }

En el siguiente ejemplo, el selector descendente se compone de cuatro selectores:

p a span em { text-decoration: underline; }

Los estilos de la regla anterior se aplican a los elementos de tipo <em> que se encuentren dentro de elementos de tipo <span>, que a su vez se encuentren dentro de elementos de tipo <a> que se encuentren dentro de elementos de tipo <p>.

Selector de clase

Los estilos se aplican se aplican sobre aquellos elementos que pertenezcan a la clase definida en la regla CSS:

.destacado { color: red; }

El selector .destacado se interpreta como «cualquier elemento de la página cuyo atributo class sea igual a destacado«, por lo que solamente el primer párrafo cumple esa condición.

Selector de ID

El selector de ID permite seleccionar un elemento de la página a través del valor de su atributo id. Este tipo de selectores sólo seleccionan un elemento de la página porque el valor del atributo id no se puede repetir en dos elementos diferentes de una misma página.

El modelo de cajas CSS

En estructura.css es donde hacemos uso del modelo de cajas (box model) de CSS.

Ésta es una característica fundamental del lenguaje  CSS, ya que condiciona el diseño o layout de todas las páginas web.

El modelo de cajas es el comportamiento de CSS que hace que todos los elementos de las páginas se representen mediante cajas rectangulares.

Cada vez que se inserta una etiqueta HTML, se crea una nueva caja rectangular que encierra los contenidos de ese elemento.  Las cajas no muestran ningún color de fondo ni ningún borde por defecto. Esto son propiedades que podrán ser modificadas por CSS.

Las partes que componen cada caja y su orden de visualización desde el punto de vista del usuario son las siguientes:

• Contenido (content): se trata del contenido HTML del elemento (las palabras de un párrafo, una imagen, el texto de una lista de elementos, etc.)
• Relleno (padding): espacio libre opcional existente entre el contenido y el borde.
• Borde (border): línea que encierra completamente el contenido y su relleno.
• Imagen de fondo (background image): imagen que se muestra por detrás del contenido y el espacio de relleno.
• Color de fondo (background color): color que se muestra por detrás del contenido y el espacio de relleno.
• Margen (margin): separación opcional existente entre la caja y el resto de cajas adyacentes.

El padding y el margin son transparentes, por lo que en el espacio ocupado por el relleno se muestra el color o imagen de fondo (si están definidos) y en el espacio ocupado por el margen se muestra el color o imagen de fondo de su elemento padre (si están definidos). Si ningún elemento padre tiene definido un color o imagen de fondo, se muestra el color o imagen de fondo de la propia página (si están definidos).

Si una caja define tanto un color como una imagen de fondo, la imagen tiene más prioridad y es la que se visualiza. No obstante, si la imagen de fondo no cubre totalmente la caja del elemento o si la imagen tiene zonas transparentes, también se visualiza el color de fondo.

Echadle un vistazo al archivo boxModel.html que os incluyo en el enlace con los archivos de ejemplo al final del artículo.

Posicionamiento

Los navegadores crean y posicionan de forma automática todas las cajas que forman cada página HTML. No obstante, CSS permite al diseñador modificar la posición en la que se muestra cada caja.

Utilizando las propiedades que proporciona CSS para alterar la posición de las cajas es posible realizar efectos muy avanzados y diseñar estructuras de páginas que de otra forma no serían posibles.

El estándar de CSS define cinco modelos diferentes para posicionar una caja:

• Posicionamiento normal o estático: posicionamiento por defecto.

• Posicionamiento relativo: Posiciona una caja según el posicionamiento normal y después desplazarla respecto de su posición original.

• Posicionamiento absoluto: la posición de una caja se establece de forma absoluta respecto de su elemento contenedor y el resto de elementos de la página ignoran la nueva posición del elemento.

• Posicionamiento fijo: variante del posicionamiento absoluto que convierte una caja en un elemento inamovible, de forma que su posición en la pantalla siempre es la misma independientemente del resto de elementos e independientemente de si el usuario sube o baja la página en la ventana del navegador.

• Posicionamiento flotante: desplaza las cajas  hacia la izquierda o hacia la derecha de la línea en la que se encuentran. La caja deja de pertenecer al flujo normal de la página, lo que significa que el resto de cajas ocupan el lugar dejado por la caja flotante. Desarrollaremos este tipo de posicionamiento en el siguiente punto por ser de los mas utilizados a la hora de maquetar una página html.

El posicionamiento de una caja se establece mediante la propiedad position:

El significado de cada uno de los posibles valores de la propiedad position es el siguiente:

• static: corresponde al posicionamiento normal o estático. Si se utiliza este valor, se ignoran los valores de las propiedades top, right, bottom y left que se verán a continuación.

• relative:  El desplazamiento de la caja se controla con las propiedades top, right, bottom y left.

• absolute: El desplazamiento de la caja también se controla con las propiedades top, right, bottom y left. El origen de coordenadas del desplazamiento depende del posicionamiento de su elemento contenedor.

• fixed: El desplazamiento se establece de la misma forma que en el posicionamiento absoluto, pero en este caso el elemento permanece inamovible en la pantalla.

La propiedad position no permite controlar el posicionamiento flotante, que se establece con otra propiedad llamada float. Además, la propiedad position sólo indica cómo se posiciona una caja, pero no la desplaza.

CSS define cuatro propiedades llamadas top, right, bottom y left para controlar el desplazamiento de las cajas posicionadas:

En el caso del posicionamiento relativo, cada una de estas propiedades indica el desplazamiento del elemento desde la posición original de su borde superior/derecho/inferior/izquierdo.

Si el posicionamiento es absoluto, las propiedades indican el desplazamiento del elemento respecto del borde superior/derecho/inferior/izquierdo de su primer elemento padre posicionado.

Posicionamiento flotante

Cuando una caja se posiciona con el modelo de posicionamiento flotante, automáticamente se convierte en una caja flotante, lo que significa que se desplaza hasta la zona más a la izquierda o más a la derecha de la posición enla que originalmente se encontraba.

La siguiente imagen muestra el resultado de posicionar de forma flotante hacia la derecha la caja 1:

Figura 5.13 Ejemplo de posicionamiento float de una caja

Cuando se posiciona una caja de forma flotante: * La caja deja de pertenecer al flujo normal de la página, lo que significa que el resto de cajas ocupan el lugar dejado por la caja flotante. * La caja flotante se posiciona lo más a la izquierda o lo más a la derecha posible de la posición en la que se encontraba originalmente.

Si en el anterior ejemplo la caja 1 se posiciona de forma flotante hacia la izquierda, el resultado es el que muestra la siguiente imagen:

Figura 5.14 Ejemplo de posicionamiento float de una caja

La caja 1 es de tipo flotante, por lo que desaparece del flujo normal de la página y el resto de cajas ocupan su lugar. El resultado es que la caja 2 ahora se muestra donde estaba la caja 1 y la caja 3 se muestra donde estaba la caja 2.

Al mismo tiempo, la caja 1 se desplaza todo lo posible hacia la izquierda de la posición en la que se encontraba. El resultado es que la caja 1 se muestra encima de la nueva posición de la caja 2 y tapa todos sus contenidos.

Si existen otras cajas flotantes, al posicionar de forma flotante otra caja, se tiene en cuenta el sitio disponible. En el siguiente ejemplo se posicionan de forma flotante hacia la izquierda las tres cajas:

Figura 5.15 Ejemplo de posicionamiento float de varias cajas

En el ejemplo anterior, las cajas no se superponen entre sí porque las cajas flotantes tienen en cuenta las otras cajas flotantes existentes. Como la caja 1 ya estaba posicionada lo más a la izquierda posible, la caja 2 sólo puede colocarse al lado del borde derecho de la caja 1, que es el sitio más a la izquierda posible respecto de la zona en la que se encontraba.

Si no existe sitio en la línea actual, la caja flotante baja a la línea inferior hasta que encuentra el sitio necesario para mostrarse lo más a la izquierda o lo más a la derecha posible en esa nueva línea:

Figura 5.16 Ejemplo de posicionamiento float cuando no existe sitio suficiente

Las cajas flotantes influyen en la disposición de todas las demás cajas. Los elementos en línea hacen sitio a las cajas flotantes adaptando su anchura al espacio libre dejado por la caja desplazada. Los elementos de bloque no les hacen sitio, pero sí que adaptan sus contenidos para que no se solapen con las cajas flotantes.

La propiedad CSS que permite posicionar de forma flotante una caja se denomina float:

Si se indica un valor left, la caja se desplaza hasta el punto más a la izquierda posible en esa misma línea (si no existe sitio en esa línea, la caja baja una línea y se muestra lo más a la izquierda posible en esa nueva línea). El resto de elementos adyacentes se adaptan y fluyen alrededor de la caja flotante.

El valor right tiene un funcionamiento idéntico, salvo que en este caso, la caja se desplaza hacia la derecha. El valor none permite anular el posicionamiento flotante de forma que el elemento se muestre en su posición original.

Los elementos que se encuentran alrededor de una caja flotante adaptan sus contenidos para que fluyan alrededor del elemento posicionado:

Figura 5.17 Elementos que fluyen alrededor de un elemento posicionado mediante float

La regla CSS que se aplica en la imagen del ejemplo anterior es:

img {
  float: left;
}

Uno de los principales motivos para la creación del posicionamiento float fue precisamente la posibilidad de colocar imágenes alrededor de las cuales fluye el texto.

CSS permite controlar la forma en la que los contenidos fluyen alrededor de los contenidos posicionados mediante float. De hecho, en muchas ocasiones es admisible que algunos contenidos fluyan alrededor de una imagen, pero el resto de contenidos deben mostrarse en su totalidad sin fluir alrededor de la imagen:

Figura 5.18 Forzando a que un elemento no fluya alrededor de otro elemento posicionado mediante float

La propiedad clear permite modificar el comportamiento por defecto del posicionamiento flotante para forzar a un elemento a mostrarse debajo de cualquier caja flotante. La regla CSS que se aplica al segundo párrafo del ejemplo anterior es la siguiente:

La definición formal de la propiedad clear se muestra a continuación:

La propiedad clear indica el lado del elemento HTML que no debe ser adyacente a ninguna caja posicionada de forma flotante. Si se indica el valor left, el elemento se desplaza de forma descendente hasta que pueda colocarse en una línea en la que no haya ninguna caja flotante en el lado izquierdo.

Si se indica el valor right, el comportamiento es análogo, salvo que en este caso se tienen en cuenta los elementos desplazados hacia la derecha.

El valor both despeja los lados izquierdo y derecho del elemento, ya que desplaza el elemento de forma descendente hasta que el borde superior se encuentre por debajo del borde inferior de cualquier elemento flotante hacia la izquierda o hacia la derecha.

Fuente:

http://librosweb.es/css/capitulo_5/posicionamiento_flotante.html

Web Fonts

Fijaros en que en el head también nos encontramos con una llamada a una hoja de estilos algo diferente a la anterior:

<link href=’http://fonts.googleapis.com/css?family=Roboto+Slab:400,300,100,700&#8242; rel=’stylesheet’ type=’text/css’>

Se trata de la carga de una hoja de estilos editada y almacenada en los servidores de Google, concretamente en la url fonts.googleapis.com. En ella se definen las reglas para la carga de la fuente «Robot Slab» y sus variantes.

@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 100;
  src: local('Roboto Slab Thin'), local('RobotoSlab-Thin'), url(http://fonts.gstatic.com/s/robotoslab/v6/MEz38VLIFL-t46JUtkIEgKwsIWd7evfOerjO4J_CQWU.woff) format('woff');
}

@font-face es una regla CSS que permite descargar y utilizar la fuente elegida incluso si ésta no se encuentra instalada en el ordenador del visitante.

En el siguiente post hablaremos de las Web Fonts utilizando el método CSS @font-face.

Os recomiendo este libro Online para profundizar más en los fundamentos de las CSS:

http://librosweb.es/css/

Aquí os dejo el enlace a los archivos del ejercicio:

Ejercicios de la clase 2