lunes, 5 de julio de 2010

Capas 'DIV' y uso de 'SPAN'

logo COEPAUna capa es un contenedor donde se pueden meter elementos html (textos, imágenes, listas, tablas...) y, más capas. Se emplean también mucho para las plantillas html o la maquetación o distribución web.

La forma de "invocar" una capa desde un documento HTML es:

<div>
contenido y elementos html y/o más capas
</div>

Y es posible definir reglas de estilo CSS para los elementos del contenido que irán dentro de una capa determinada, que luego se invocará desde el documento HTML de la siguiente forma:

<div class="nombre_capa_en_css">
contenido y elementos html y/o más capas
</div>

Y para "definir" (declarar o crear) una capa en el documento CSS, se procede de la misma manera que para crear una clase dentro del CSS:

.nombre_capa_en_css{
propiead1: valor1;
propiead2: valor2;
propiead3: valor3;
}

Por ejemplo, una capa típica es una que abarca todo el contenido del documento html, la capa contenedor:

.contenedor{
width: 880px; /* 880 píxeles de ancho para la capa */
height: 100%; /* la altura será el 100% de lo alto de todo el documento */
margin: auto; /* margen externo automático */
}

Comentarios HTML

En el código anterior, los textos que van entre las cadenas de caracteres "/*" y "*/" son comentarios de 'control' para el Webmaster, o sea, no tienen ningún efecto en el "comportamiento" del documento a la hora visualizarlo en un navegador web.

Ya de paso, los comentarios en el documento HTML se ponen entre los caracteres <!-- y -->.

Ejemplo de capas:

Capa 1

Contenido de la capa 1

Capa 2

Contenido de la capa 2

Capa 3

Contenido de la capa 3

Más contenido de la capa 1

Las capas de este ejemplo están definidas en el fichero CSS de este blog con sus colores de fondo, para que muestren los bordes de color negro, y un margen externo de 5 píxeles (width: 5px;)

Algunos enlaces sobre uso de capas, estructura y maquetación HTML, o maquetación web:


Uso de la etiqueta SPAN

La etiqueta <span> se usa para aplicar un estilo diferente a un determinado texto de, por ejemplo, un parrafo:

  • En el fichero CSS
    .rojo {
    color: red;
    font-weight: bold;
    }
  • En el fichero html
    <p>No bebas <span class="rojo">lejía</span> que es perjudicial para la salud.</p>

Al visualizarlo en el navegador:

No bebas lejía que es perjudicial para la salud.

Por otro lado, si queremos que todos los span se muestren de la misma forma -en negrita y de color rojo de color rojo- dentro del documento html, se puede definir una regla para span dentro del fichero CSS:

span {
color: red;
font-weight: bold;
}
IMPORTANTE Observar en este ejemplo, el selector la declaración de la regla "span" no lleva delante el caracter "."

No hay comentarios:

Publicar un comentario