miércoles, 9 de septiembre de 2009

Conceptos Básicos de CSS

Una hoja de estilo es un conjunto de especificaciones que declara cómo deben mostrarse los componentes de una página web, es decir, cómo debe interpretar el navegador, a efectos de presentación visual, los distintos elementos presentes en una página web. El formato de cada elemento de una página web se especifica mediante declaraciones de estilo denominadas reglas.

Los estilos de css se definen en forma de clases, se supone que los estilos que definamos deben estar sincronizados con las definiciones html de la pagina web.

2. Definiciones

Una definicion CSS se compone de tres partes:

  1. Selector (Clase o codigo)
  2. Propiedad
  3. Valor


Una definicion simple organiza los tres componentes anteriores de acuerdo a la siguiente estructura:

selector {propiedad: valor;}

Por ejemplo, la siguiente definición dice que todos los coponents h1 de la pagina deben tener un grosor normal (de tener un grosor grande sería equivalente a que estuvieran en negritas los textos):

h1 { font-weight: normal; }

Una definicion puede contener más de una propiedad con sus respectivos valores, separadas entre ellas por punto y coma (se considera una buena práctica añadir también punto y coma al final). Ejemplo:

h1 { font-weight: normal; color: red;}

Una definicion puede dar formato a más de un elemento o componente a la vez, separando estos mediante comas. Ejemplo:

h1, h2, h3, h4 { font-weight: normal; color: red; }

3. Declaración

Las definiciones de las hojas de estilo se pueden declarar en tres sitios distintos:

  1. En la página web
  2. En un archivo externo
  3. En un elemento

En la página web


Este tipo de declaraciones no son recomendadas ni se consideran buenas prácticas dentro de la programación web y por eso no voy a explicarlas.

En un elemento

Este tipo de declaraciones no son recomendadas ni se consideran buenas prácticas dentro de la programación web y por eso no voy a explicarlas.

En un archivo externo

Las declaraciones se escriben en un archivo de texto con extensión .css sin ningún tipo de preámbulo y deben ser referenciados al principio de las páginas web, específicamente entre los tags <head> </head>.


<link rel="stylesheet" href="estilo.css" type="text/css" />

Como se puede ver, el atributo rel (relation) advierte que se trata de una hoja de estilo, href aporta el nombre (y el camino si fuera necesario) del archivo y type indica que se trata de un archivo de texto que contiene una hoja de estilo que sigue la norma CSS.

4. Cajas

Desde el punto de vista de CSS, todo lo que hay en una página web es una caja. Lo que hace un selector es identificar la caja a la que se aplica el formato.

Las cajas tienen:

  • Contenido (content). El contenido de la caja: texto, imagen, etc.
  • Relleno (padding). La distancia entre el contenido y el borde.
  • Borde (border). El borde de la caja.
  • Margen (margin). La distancia entre el borde y el elemento contenedor (p.e. body) u otro elemento adyacente.

El siguiente diagrama muestra modelo oficial de cajas de CSS según el W3C:

Los componentes de la caja se pueden dividir en cuatro partes: top, bottom, right y left. Por tanto, en la ilustración anterior, las siglas LM, RM, etc., significan LeftMargin, Right Margin, etc.

Las hojas de estilo pueden aplicar formato (p.e. color, anchura, tipo de línea, etc.) a cualquiera de los componentes de esta caja, así como permite posicionar estas cajas en el conjunto de la página.

De este modo, si queremos que un elemento muestre el borde en forma de puntos de color azul, podemos generar esta declaración:

p { border-style: dotted; border-color: blue}

A partir de lo anterior, este código en la página:

<p>Ejemplos de hojas de Estilo</p>

Se mostrará así:

Si queremos ampliar el relleno entre el contenido y el borde así como tener un tamaño de punto más pequeño podemos modificar la regla anterior acudiendo a las propiedades de borde (border) y de margen (padding):

p { border-style: dotted; border-width: 2px; border-color: blue; padding: 15px; }

Ahora, el navegador lo mostrará así:

5. Herencia

Las cajas están contenidas dentro de otras cajas y heredan los estilos de la caja contenedora si no hay una regla de nivel específico. Por ejemplo, si declaramos un tipo de letra para el elemento body, todos los elementos que están dentro, como h1, h2, p, etc. heredarán este tipo de letra. En el siguiente ejemplo declaramos un color de letra para body y otro distinto para h2. De este modo, todos los elementos, excepto h2, tendrán el color declarado para body, mientras que h2 tendrá su propio color. Veamos. Primero la declaración de reglas CSS:

body { color: blue }
h2 { color: red }

Ahora el código html de la página:

<h1>Esto es un elemento h1</h1>
<p>Este es un párrafo</p>
<h2>Esto es h2</h2>
<p>Más texto marcado como párrafo</p>
<h3>Esto es h3</h3>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<p>Apuesto a que todo es azul en esta página menos uno de los elementos</p>

6. Tipos de selectores

Existen dos grandes categorías de selectores:

  • Elementos: son los nombres correspondientes a elementos del lenguaje (X)HTML como body, h1, p, table, etc.
  • Nombres propios: son nombres que puede crear el autor de la hoja de estilo. De esta clase de selectores, existen, a su vez dos tipo: de clase (class) y de identidad (id). Por tanto, en realidad tenemos en total tres tipos de selectores que examinaremos a continuación.

6.1. Selectores de elemento

Se declaran utilizando como selector un elemento (X)HTML, p.e.:

h1 { color: blue }

De este modo, el aspecto de todos y cada uno de los elementos que forman el lenguaje (X)HTML puede ser modificado mediante un regla. Cabe recordar que los navegadores disponen de una hoja de estilo interna que es la que otorga formato a los elementos (X)HTML cuando no hay ninguna hoja de estilo específica. Por ejemplo, aún sin hoja de estilo la mayor parte de los navegadores aplican negrita a los elementos marcados como strong, así como un tipo de letra superior + negrita a los elementosmarcados con h1, etc.

6.2. Selectores de clase

Estos selectores se declaran mediante una palabra propia que asigna el autor de la hoja de estilo. Esta palabra va precedida por un punto. Por ejemplo: supongamos que se necesita una clase de selectores para formatear títulos de películas (pongamos que se trata de una web sobre cinema). El autor de la hoja de estilo puede crear el selector con el nombre tituloFilm para formatear de la misma forma los títulos de los films. Para ello, escribe esta regla:

.tituloFilm { font-size: 1.5em; font-family: Times New Roman; color: blue;}

Se aplica mediante el atributo class seguido por el nombre del selector (sin el punto). Por ejemplo, en el siguiente código fuente solo a uno de los dos elementos de párrafo (p) se le ha añadido esta clase de selector:

<p class="tituloFilm">2001: Una odisea del espacio</p>
<p>La obra de Kubrick marcó un punto de inflexión en el género de la ciencia-ficción</p>

La declaración solamente afectará a uno de ellos y el resultado es que el primer párrafo tendrá un aspecto muy distinto de los demás:

6.3. Selectores de identidad

Los selectores de identidad se nombran mediante una palabra propia precedida por el símbolo # (almohadilla). Por ejemplo:

#navegacion { background-color: LightGrey; }

Los selectores de identidad solo se pueden aplicar a un elemento en cada página. Dicho al revés, y tomando el ejemplo anterior: en cada página solamente puede haber un elemento #navegacion (en cambio, podemos tener múltiples elementos de clase en una misma página).

En este caso, hemos supuesto que queremos dar un estilo propio a la zona de navegación de cada página. Se supone que deseamos destacar la barra de navegación mediante un fondo gris y queremos que la fuente del texto en esa zona sea un poco más pequeña. La declaración sería la siguiente:

#navegacion { background-color: LightGrey; font-size: 0.8em }

El código fuente en la página sería el siguiente:

<div id="navegacion">
<ul>
<li><a href="item1.htm">Item 1</a></li>
<li><a href="item2.htm">Item 2</a></li>
<li><a href="item3.htm">Item 3</a></li>
</ul>
</div>

Se supone que Item 1, Item 2, etc., son opciones de menú. El resultado sería este:

7. Uso de div y span

El lenguaje (X)HTML dispone de dos elementos con gran potencialidad cuando se utilizan junto con las hojas de estilo, y cuya característica principal, a diferencia de elementos como body, p, h1, etc., es que no poseen ningún significado intrínseco. Son los siguientes:

  • div
  • span

Mientras el elemento div es de bloque, el elemento span es de línea. Recordemos que los elementos de bloque tienen un salto de línea integrado. El ejemplo más conocido es p. Un elemento de línea, por el contrario no genera ningún espacio a su alrededor, sino que se mantienen en la misma línea que lo contiene. Un buen ejemplo puede ser strong.

Tanto div como span pueden utilizarse para mejorar la apariencia de una página, pero además contribuyen a añadir valor semántico a la misma.

7.1. div

En concreto, div ayuda a crear la estructurar básica de la página. Por ejemplo, podemos imaginar un sitio web cuyas páginas se estructuran en tres grandes secciones, como muestra la figura siguiente:

Con una estructura como la anterior, el código fuente de cada página puede contener cuatro elementos div, cada uno de ellos identificado con un

atributo id diferente, de este modo:

<body>
<div id="tituloPag">
</div>
<div id="navegacion">
</div>
<div id="contenido">
</div>
<div id="piePag">
</div>
</body>

La estructuración anterior permitirá definir estilos para las cuatro secciones de la página sin perjuicio de aplicar estilos más específicos mediante selectores de elemento, de clase, etc. Esta estructuración facilitará el mantenimiento de los estilos del sitio y, en caso necesario, el posicionamiento de los mismos en la página.

7.2. span

El elemento span suele utilizarse también combinado con id o con class para especificar con tanto nivel de detalle el aspecto de cualquier elemento de la página. Por ejemplo, podemos desear marcar y tratar de forma distinta el apellido de una lista de nombres, para lo cual podemos usar span de este modo. Definimos un selector de clase apellido para el cual declaramos un estilo:

.apellido { font-style: italic; font-weight: bold }

Aplicamos entonces span y class a los componentes (li) de la siguiente lista:

<h1>Realizadores de los años 90</h1>
<ul>
<li>Martin <span class="apellido">Escorsese</span></li>
<li>James <span class="apellido">Cameron</span></li>
<li>Pedro <span class="apellido">Almodóvar</span></li>
</ul>

El resultado en el navegador será el siguiente:

8. Posicionamiento

Las hojas de estilo proporcionan propiedades que permiten posicionar de forma fija, absoluta o relativa (fixed, absolute, relative) las cajas en una página web. Estas propiedades, junto con los selectores de clase y de identidad que permiten identificar y clasificar las cajas respectivamente, proporcionan al diseñador un dominio total de la estructura de la página sin necesidad de recurrir, por ejemplo, al uso de tablas.

A título ilustrativo, mostramos un ejemplo típico de código de estilo con indicaciones de posicionamiento:

#navegacion { position: absolute; top: 0; left: 0; width: 30%; }

#contenido { width: 70%; margin-left: 30%; }

El código anterior generaría dos secciones como las que muestra la figura siguiente:


Lo cierto es que el posicionamiento mediante CSS merece un capítulo aparte y por ello escapa a los objetivos de esta presentación. Pero no hemos querido dejar de señalar su importancia con el fin de animar a todo aquel que, precisamente, quiera avanzar en estos temas.


Buenas prácticas

1. Declarar la hoja de estilo en un archivo separado (mejor que en la hoja de estilo, salvo necesidad específica).

2. Utilizar medidas relativas (tanto por ciento en lugar de píxeles, o unidades em en lugar de puntos, etc.).

3. Usar elementos semánticos (h1, h2, blockquote, etc.) para organizar los contenidos de la página, no para conseguir una determinada apariencia de la misma.

4. Modificar la apariencia de la página exclusivamente mediante estilos (y no con elementos o atributos desaconsejados como font, center, etc. o usando elementos fuera de lugar).

5. Limitar al máximo declarar estilos dentro de elementos individuales (es decir, evitar el uso del atributo style dentro de elementos).
Continuar leyendo...
Publicado por Alejandro Sanchez 2 comentarios

Como definir una propiedad en flex actionscript

  1. En este artículo vamos a ver como definir una propiedad en flex, pero primero debemos conocer ¿qué es una propiedad?.

Una propiedad es una variable que define a una clase, es decir, son variables que se definen al momento de crear una clase para que formen parte de esta, por ejemplo: Si definimos la clase Mesa probablemente le definamos las propiedades altura, anchura, profundidad, etc.

Este concepto se aplica a todos los lenguajes de programación orientada a objetos, vamos a ver como sería la definición de esta clase ejemplo en actionscript:



 public class Mesa
 {
  public function Mesa()
  {
  }
  
  public var profundidad: String;
  public var altura : Number;
  public var anchura : Number;
  
 }


Otra cosa que debemos saber es la utilizacion de los metodos get y set para tener mucho mas control sobre las propiedades de una clase.

¿Qué son los metodos get y set?
En el lenguaje de la programacion orientada a objetos se estila mucho la utilización de metodos que te permitan asignar y obtener valores a las propiedades, para explicar mejor les explico implementando los metodos get y set para la clase mesa:


 public class Mesa
 {
  public function Mesa()
  {
  }
  
  private var _color : String;
  private var _altura : Number;
  private var _anchura : Number;
  
  public function get color() : String
  {
   return this._color;
  }
  
  public function set color(value : String) : void
  {
   this._color = value;
  }
  
  public function get altura() : String
  {
   return this._altura;
  }
  
  public function set altura(value : String) : void
  {
   this._altura = value;
  }
  
  public function get anchura() : Number
  {
   return this._anchura;
  }
  
  public function set anchura(value : String) : void
  {
   this._anchura = value;
  }
 }


¿Qué ventajas tiene utilizar los métodos get set?
  1. Puedo controlar el acceso a las variables de la clase, por ejemplo pudiera no definir un metodo "set" para una de las variables y de esta manera cualquier instancia de este tipo de clase tendria esa variable de solo lectura.
  2. Puedo colocar propiedades calculadas, por ejemplo cuando en un arreglo hacemos arreglo.length, a nosotros nos devuelve el numero de elementos del arreglo pero en realidad lo que hace la clase es recorrer todos los items y los cuenta para luego decirnos cuantos fueron. En esta clase Mesa un ejemplo de propuedad calculada seria la propiedad "volumen", que viene siendo la multiplicacion de ancho * alto * profundidad.
  3. Puedo realizar acciones cuando cambie la propiedad. Como la unica manera de modificar el varlor de esta variable es a través del metodo set, entonces puedo contruir el metodo con sentencias extra o validaciones antes de asignar el valor recibido a la variable, por ejemplo:



  public function set altura(value : String) : void
  {
   if(value>0)
    this._altura = value;
  }


En este caso solo asignamos el valor introducido por el usuairo a esta varible, en el caso en que sea mayor a cero, despues de todo, una altura no puede ser menor que 0, ya que sino la mesa no se visualizaria.
Continuar leyendo...
Publicado por Alejandro Sanchez 0 comentarios
Suscribirse a: Entradas (Atom)