Unidades de Medida
Uno de
los elementos más importantes del diseño web son las medidas porque tiene un
gran efecto en la accesibilidad de un sitio web.
En CSS el valor de una propiedad, tal cómo font-size, se puede expresar en
unidades de longitud o en unidades de porcentaje. veamos las unidades que
tenemos disponibles:
Unidades de longitud
1. 1-
Unidades absolutas
2.
2-Unidades relativas
3. 3-
Unidades de porcentaje
La mejor es em
Con este tipo de medidas el autor mantiene un
control relativo ya que, en relación con el tamaño de fuente por defecto
del usuario, puede especificar cuanto mas grande o mas pequeña se ha de
visualizar la letra de la página.
¿Por qué no utilizar unidades
absolutas?
Las unidades absolutas como px (pixeles), cm
(centímetros), pt (puntos), permiten un control exacto de la apariencia de la
página, siempre y cuando, claro está, que esta se visualice en el entorno
preciso para el que fue
Ejemplos de unidades de medida
.
Utilizando em
Texto normal: 3em, 2em,1em. Utilizando ex
Texto normal: 3ex, 2ex,1ex. Utilizando px
Texto normal: 20px, 15px,10px.
Utilizando in Texto normal: 1in, 0.5in.
Utilizando cm Texto normal: 2cm, 1cm.
Utilizando mm Texto normal: 20mm, 10mm.
Utilizando pt Texto normal: 18pt, 12pt. Utilizando
pc Texto normal: 5pc.
Listas
Personalizadas
Bueno nosotros pudimos encontrar
que Una lista, o listado, es una enumeración de dos o
más elementos y suelen disponerse de tal forma que se facilite la distinción
entre ellos. Las listas originalmente están pensadas para citar,
numerar y definir cosas a través de características, o al menos así lo hacemos
en la escritura de textos. Sin embargo, las listas finalmente se utilizan para
mucho más que enumerar una serie de puntos, en realidad son un recurso muy
interesante para poder maquetar elementos diversos, como barras de navegación,
pestañas etc.
Podemos definir que hay diferentes tipos de listas
· Numerada u ordenada.
· No ordenada.
· Listas de glosario o de definición.
· Menús.
· Usadas con párrafos cortos.
Listas no ordenadas
Probablemente
el tipo de listas más usados en las páginas web son las listas no ordenadas.
Como hemos adelantado antes a modo de ejemplo, este tipo de lista queda
delimitada por la etiqueta <UL>...</UL> (UL proviene de Unordered List, que
significa lista no ordenada). Dentro de estas etiquetas insertaremos cada
elemento con la etiqueta <LI>. Veamos un
ejemplo ligeramente más completo que el anterior:
Mi ordenador tiene las siguientes
características:
<UL>
<LI>Procesador Pentium 166
<LI>CD-ROM 8x
<LI>Tarjeta de sonido 16 bits
<LI>Tarjeta de vídeo con 2 Mb
</UL>
|
Listas ordenadas
Las
listas ordenadas sirven también para presentar información, en diversos
elementos o items, con la particularidad que éstos estarán predecidos de un
número o una letra para enumerarlos, siempre por un orden.
Para
realizar las listas ordenadas usaremos las etiquetas <ol> (ordered list)
y su cierre. Cada elemento sera igualmente indicado por la etiqueta <li>,
que ya vimos en las listas desordenadas.
que se corresponde con el siguiente código:
Un buen equipo adaptado a las nuevas tecnologías consta de:
<OL>
<LI>CPU rápida
<LI>Impresora a color de buena definición.
<LI>Altavoces y cámara de vídeo.
<LI>Módem de velocidad 28K o superior.
</OL>
Listas de glosario o Definicion
Este tipo
de listas es usado, como su nombre indica, para crear glosarios, es decir
listas de definiciones o de descripciones. El principio y final de este tipo de
listas se delimitan con la etiqueta <DL>...</DL > (DL: Definition List, Lista de definición). La
inserción de elemento es ligeramente distinta a la del resto de listas ya que
no se usa la etiqueta <<LI>>. Esto es así porque en este caso
cada uno de los elementos de lista está compuesta de dos partes:
- La palabra que queremos
definir:
para insertar la palabra usaremos la etiqueta <DT> que proviene de Definition
Term (Término de definición). Esta nueva etiqueta funciona de forma muy
similar a <LI> y la instrucción de fin (</DT>) es igualmente optativa.
- La definición o descripción
de esa palabra:
una vez indicada la palabra es hora de poner su definición. Para ello
usamos otra nueva etiqueta: <DD>
Directorios y menús
Las listas vistas hasta ahora son, sin duda, las más usadas, pero existen
otros dos tipos que están algo más olvidadas por los creadores de webs: las
listas de directorio y las listas de menú.
Las listas de menú son usadas cuando los elementos de lista son frases de
una sola línea mientras que las listas de directorio fueron creadas para ser
usadas cuando son términos cortos que pueden ser mostrados en múltiples
columnas.
A continuación mostramos un ejemplo de listas de menú y
listas de directorio
Hojas de Estilo
¿Qué son las hojas de estilo o cascading style sheets?
CSS son las siglas de Cascading Style Sheets - Hojas de Estilo
en Cascada - que es un lenguaje que describe la presentación de los
documentos estructurados en hojas de estilo para diferentes métodos de
interpretación, es decir, describe como se va a mostrar un documento en
pantalla, por impresora, por voz.
¿Para que sirve?
CSS es una especificación desarrollada por el W3C (World Wide
Web Consortium) para permitir la separación de los contenidos de los
documentos escritos en HTML, XML, XHTML, SVG, o XUL de la presentacin
del documento con las hojas de estilo, incluyendo elementos tales como
los colores, fondos, márgenes, bordes, tipos de letra..., modificando as
la apariencia de una página web de una forma más sencilla, permitiendo a
los desarrolladores controlar el estilo y formato de sus documentos.
¿Cómo funciona?
El lenguaje CSS se basa en una serie de reglas que rigen el
estilo de los elementos en los documentos estructurados, y que forman la
sintaxis de las hojas de estilo. Cada regla consiste en un selector y
una declaración, esta última va entre corchetes y consiste en una
propiedad o atributo, y un valor separados por dos puntos.
Se denominan "hojas de estilo en cascada"
porque se pueden definir múltiples hojas y los estilos pueden aplicarse a
todas las páginas (con un sistema predefinido para resolver
conflictos).
Las hojas de estilo pueden utilizarse para:
- lograr una apariencia uniforme de todo el sitio al activar una sola definición de estilo en cada página,
- cambiar un aspecto en todo el sitio Web con tan sólo editar unas pocas líneas,
- hacer que los códigos HTML sean más fáciles de leer ya que los estilos se definen por separado,
- permitir que las páginas se carguen más rápido ya que hay menos cantidad de HTML en cada página,
- posicionar los elementos de la página de una manera más uniforme.
Compatibilidad con los navegadores
A pesar de las recomendaciones de W3C, no todos los navegadores muestran las hojas de estilo de la misma forma. El explorador Microsoft Internet Explorer 3.0
fue el primero que integró hojas de estilo y su uso se hizo más común
con las versiones 4.0 y superiores de Internet Explorer y Netscape
Navigator.
Navegadores que admiten hojas de estilo:
- Microsoft Internet Explorer 3.0 (parcialmente)
- Microsoft Internet Explorer 4 x
- Microsoft Internet Explorer 5 x
- Microsoft Internet Explorer 6 x
- Netscape Navigator 4.x
- Netscape Navigator 6.x
- Netscape Navigator 7.x
- Mozilla x.x
- Firefox x.x
- Opera 5.x
- Opera 6.x
- Opera 7.x
- Camino 0.8x
- Safari 1.xx
