Claro que lo entiendo. Incluso un niño de cinco años podría entenderlo. ¡Que me traigan un niño de cinco años!

Libros de CSS

8 de enero, 2007

Me gustaría ir creando un listado de libros que sean de interés para aprender CSS. Por supuesto, espero que sea algo que generemos entre todos. Según vayáis poniendo en los comentarios, los agregaré a este post.

  • Título: CSS: The Definitive Guide
    Autor/es: Eric A. Meyer
    Editorial: O’Reilly Media
  • Título: CSS Web Design for Dummies
    Autor/es: Richard Mansfield
    Editorial: Wiley Publishing
  • Título: Cascading Style Sheets: Separating Content from Presentation
    Autor/es: Owen Briggs, Steve Champeon, Eric Costello, Matthew Patterson
    Editorial: Peer Information
  • Título: Diseño con Estándares Web
    Autor/es: Jeffrey Zeldman
    Editorial: Anaya Multimedia

Tags: -

Sintaxis

6 de enero, 2007

Las hojas de estilo están basadas en reglas. Como ya comentabamos antes, estas reglas se van evaluando de forma secuencial, de arriba hacia abajo.

Las reglas están formadas por un selector seguido de un bloque de declaraciones:

Selector {
propiedad : valor;
propiedad : valor;

}

Ejemplo:

body {
color: #999999;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}

Como vemos, cada declaración consta de una propiedad separada de su valor por el carácter “:“. A su vez, se pueden definir varias declaraciones para el mismo selector separadas por el carácter “;“, formando un bloque de declaraciones.

También tenemos la opción de aplicar un mismo bloque de declaraciones a varios selectores:

h1, h2 {color: green }

En el próximo post analizaremos más a fondo cómo pueden ser esos selectores, propiedades y valores.

Tags: -

Diferente CSS según quien nos mire

4 de enero, 2007

Una de las gracias que tiene el CSS es presentar un mismo contenido de diferentes formas. Por tanto, podemos crear diferentes presentaciones dependiendo del dispositivo en el que se vaya a visualizar nuestra página. Por ejemplo, no será lo mismo mostrar una página en un ordenador convencional que en una PDA.

Para ello tenemos una serie de valores que aplicar a las etiquetas <style> o <link> con el parámetro media.

Si a media le damos el valor:

  • all: ese fichero CSS será cargado para todos los dispositivos
  • screen: para monitores de ordenador normales (valor por defecto)
  • print: para impresión
  • aural: sintetizadores de voz
  • handheld: asistentes personales (PDA’s)
  • braille: máquinas capaces de reproducir formato braille para personas invidentes
  • embossed: para imprimir texto en braille
  • projection: proyectores y transparencias
  • tty: terminales
  • tv: televisores

Puede ser un solo valor o varios separados por comas.

Veamos un ejemplo en el que dependiendo de si han accedido a nuestra página a través de un ordenador o a través de una PDA, cargamos una hoja de estilos u otra:

<style type="text/css" media="screen">
  @import "estilos_normal.css";
</style>
<style type="text/css" media="handheld">
  @import "estilos_pda.css";
</style>

Pero también podemos hacer esto dentro de una única hoja de estilos con la regla @media. Ésta permite aplicar diferentes estilos dentro de una misma hoja dependiendo del medio. Ejemplos:

@media print {
body { font-size: 10pt }
}
@media screen {
body { font-size: 12pt }
}
@media screen, print {
body { line-height: 1.2 }
}

Tags: , , , , , ,

¿Cómo tratan los navegadores a las páginas web?

2 de enero, 2007

Con este sugerente título no me voy a poner a hablar de malos tratos hacia el HTML ni nada parecido ;-). No os impacientéis porque ya pronto entraremos en harina, pero antes me gustaría que quedasen claros los conceptos fundamentales.

Uno de esos conceptos es el funcionamiento de los navegadores: ¿cómo tratan éstos a nuestras páginas web?.

En este interesante artículo de Anieto2k se explica lo siguiente:

Un navegador recibe la página web en la que se encuentra la referencia al fichero CSS que debe cargar (aquí explicábamos de cuántas formas se podía incluir ese código CSS).

El navegador carga todo el código HTML y posteriormente pasa a aplicar los estilos CSS. Para ello sigue un orden secuencial leyendo el fichero desde el principio hasta el final y aplicando los estilos según van apareciendo. Por tanto, cada asignación de estilos se sobrepone a la anterior, (es como en las películas de Los Inmortales, el último estilo es el que prevalece sobre los anteriores).

Para verlo más claro tiraremos de ejemplos:

elemento {
border:3px red solid;
border:2px blue solid;
}

Aquí, al elemento se le aplica un borde rojo de 3px y posteriormente otro azul de 2px que será el que se muestre.

Tags:

Maquetando una web

28 de diciembre, 2006

Me ha encantado este gif animado en el que se demuestra perfectamente el poder del CSS.

Primero se comienza generando el contenido (todo el texto que aparecerá en la página) y luego llega el formateo del contenido.

Evolución de una página Web

Ojalá pronto tengamos las nociones de CSS para maquetar una web así.

Visto en Ajaxian.

Tags: ,

¿Cómo aplicamos el CSS?

20 de diciembre, 2006

Existen tres formas de aplicar los estilos a nuestro código HTML:

  1. Directamente sobre un elemento: podemos aplicar el estilo a un bloque concreto de HTML, utilizando el atributo style. Es decir, dentro de una etiqueta definir cómo será su aspecto. Obviamente no es la mejor manera de proceder porque tendríamos que definir bloque por bloque.

    Ejemplo: <p style="font-size: 12pt; color: #000000">. Aquí estamos definiendo sobre este párrafo en concreto que la letra sea de tamaño 12 y de color negro. Esto no se aplicará sobre ningún párrafo más.

  2. En el propio documento: se pueden declarar los estilos en la cabecera del documento para poder utilizarlo en cualquier parte del HTML. Para ello se colocan entre las etiquetas <style>..atributos..</style>
  3. Ejemplo:

    <head>
    ...
    <style type="text/css">
    h1
    {
      border-width: 1;
      text-align: center
    }
    </style>
    </head>

    Aquí hemos definido todas las cabeceras que se encuentre entre la etiqueta <h1>. Como vemos, la etiqueta <style> tiene un atributo denominado type donde se define el tipo de la hoja de estilo. Puede tomar los valores: “text/css” y “text/javascript”.

  4. En un documento externo: creando una hoja de estilos ubicada en un fichero externo con extensión .css. En mi opinión es la forma más elegante puesto que hace que nuestra página HTML quede más simple al no incluir todas las líneas de estilo (sólo sería necesaria la declaración del lugar en el que se encuentra el .css). Además, con esta forma queda aún más clara la separación entre contenido y presentación.

    Para hacer referencia a una hoja de estilos externa desde un documento HTML se pueden utilizar también dos métodos:

    • El elemento <link>. Una vez hecho link, se pueden utilizar los estilos de la misma manera que si estuviesen definidos en el propio documento.
    • Ejemplo:
      <head>
      ...
      <link href="hoja_de_estilos.css" rel="stylesheet" type="text/css">
      </head>

    • El elemento @import. Por ejemplo:

      @import “estilos.css”;
      @import url(“/estilos/estilos.css”);

Tags: , , , , ,

Cerrar
Enviar por e-mail