Diseño con CSS

CSS – Introducción.

Publicada en Publicado el Diseño
Si te gusta, compártelo 🙂Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

CSS

CASCADING STYLE SHEETS

Hojas de estilo en cascada. Introducción.

A medida que las páginas web ganaban popularidad y fue accesible a un mayor público se incrementó la demanda de textos ricos no sólo en contenido sino también en diseño. Se necesitaban herramientas que variasen el color, la forma y otros atributos visuales de los componentes que formaban la web.

Una primera solución la ofreció el propio lenguaje HTML, mediante la exposición de una serie de atributos de estilo, a nivel de etiqueta, esto es, incrustado como atributo dentro de los elementos HTML.

<body bgcolor=“blue”>

Pero había una serie de problemas que se hacían evidentes: los atributos eran insuficientes y había que agregar nuevos con lo que era necesaria una actualización también del propio lenguaje HTML. Además la variación del diseño de los documentos era muy costoso tanto en tiempo como en lo económico.

Es a finales de 1996 cuando se adopta un nuevo lenguaje, el CSS (Cascading style sheets). Inspirado en la regla de separación de funciones, el nuevo lenguaje asume la única tarea de controlar el aspecto (diseño) del documento, dejando la estructuración al ya conocido HTML.

REGLA DE SEPARACIÓN DE FUNCIONES
Divide tu tarea en varias, de acuerdo a la naturaleza del problema, de tal manera que te puedas concentrar en la solución de un aspecto por vez.

Terminología

HTML
<p class=“articulo”>
  • p: elemento
  • class: atributo
  • articulo: valor
CSS
p{color:red;}
  • p: selector -de elemento
  • color: propiedad
  • red: valor

Sintaxis CSS

Se compone de sentencias en las que se establece un atributo de estilo y un valor para el mismo, ambas separadas por el signo de dos puntos ":".

color : red;

Estas sentencias se aplican a las etiquetas HTML estableciendo características propias de su aspecto. Dentro de sus usos distinguimos entre especificación interna y especificación externa.

Especificación Interna

Las sentencias o reglas CSS se encuentran en el mismo documento web donde alojamos el contenido y la estructura propia del lenguaje de etiquetas o HTML. Se distinguen dos tipos de inserción:

Inserción de estilos inline.
Consiste en incluir todas las sentencias de estilo en una línea (dentro de las etiquetas HTML), utilizando para ello el atributo style de la etiqueta.

<p style=“color:red”>
Lorem ipsum...
</p>

Inserción en secciones style
Las sentencias se especificarán con una sección o elemento style, que sueles ser única en el documento web y que, generalmente, se sitúa dentro de la sección o elemento head.

<!-- CABECERA -->
<head>
    <style>
       p{color:red}
    </style>
</head>
<!-- CUERPO -->
<body>
   <p>
      Lorem ipsum...
   </p>
</body>

Especificación Externa

¿En qué consiste?
Consiste en la creación de un archivo independiente del documento web, que contiene sentencias especificando el estilo del mesmo.

¿Cómo se enlaza el archivo externo?
Mediante la etiqueta o elemento link, a la que se le especifican los siguientes atributos: media, rel, type, href.
*En HTML5 podemos simplificar y especificar tan solo el valor href y los demás valores se tomarán por defecto.

<!-- DOCUMENTO HTML -->
<html>
    <head>
       <link href="estilo.css" > 
    </head>

    <!-- CUERPO -->
    <body>
        <p>
            Lorem ipsum...
        </p>
     </body>
</html>
/*ARCHIVO estilo.css*/
p{color:red}
Ventajas de emplear hojas de estilo externas
  • División de tareas (regla de separación de funciones).
  • Un mismo fichero de estilos puede ser empleado por varios documentos web.
  • Mejora el mantenimiento y lectura del estilo por los maquetadores y programadores web.
  • Contribuye a la claridad y a la legibilidad de la página.
  • Se puede cargar css de forma selectiva en función del dispositivo donde se vaya a utilizar la página web.

¿Por qué se llaman en "Cascada"?

Cuando creamos un estilo, las especificaciones que se realicen para un determinado elemento serán aplicables a todos aquellos elementos que se encuentren "por debajo" de él atendiendo a un criterio de herencia. Por ejemplo, si especificamos un tipo de letra para el elemento <body> todos aquellos elementos que puedan heredar las características se presentarán con el mismo tipo de fuente. Así, el elemento <p> heredará el tipo de letra salvo que especifiquemos lo contrario.

También debemos de tener en cuenta que se establece un orden de prioridad para la aplicación de las normas en caso de que resulten contradictorias. El orden de preferencia para aplicar una norma es el siguiente:

- Estilo especificado dentro de la etiqueta (inserción de estilos inline).
- Estilo especificado en la cabecera del documento.
- Estilo definido en un documento independiente al que se enlaza nuestra página.

Si tenemos en cuenta el orden mencionado, lo más razonable es crear una hoja de estilo en un archivo independiente y vincular las páginas a este archivo. Si queremos realizar alguna modificación en un elemento concreto podríamos recurrir a uno de los dos primeros procedimientos que deberían resultar preferentes por ser más específicos.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *