Crea tu Web: Indice de diseño

Ahora también
> HTML versión 5 <
  • Introducción al curso
    • Introducción
    • Requisitos
    • Agradecimiento
  • El HTML
    • Versiones de HTML
    • HTML 2.0
    • HTML 3.0 y 3.2
    • HTML 4.0
    • Estándares en este curso
  • Mi primera página
    • La primera página
    • El código
    • La explicación
    • El cuerpo del documento
  • El documento HTML
    • La página
    • La cabecera
    • El cuerpo
  • Formato del texto
    • Formato básico
    • Formato del párrafo
    • Las 6 cabeceras
    • Cambiando el tipo de letra
    • Formato de frase
    • Otros elemento
  • Tipos de letras
    • Formateo de texto
    • Cambio de color
    • Tamaños del texto
    • Tipo de letra
  • Caracteres especiales
    • Caracteres especiales
    • Caracteres extendidos
    • Caracteres de control
  • Enlaces web
    • Los enlaces
    • La etiqueta <A>
    • Las URLs
    • Anclas
  • Listas
    • Listas
    • Listas desordenadas
    • Listas ordenadas
    • Listas de definiciones
  • Imágenes
    • Imágenes
    • Imágenes y enlaces
    • Alineación respecto al texto
  • Formularios
    • Formularios
    • Cajas de texto
    • Opciones
    • Botones del formulario
    • Otros elemento
  • Formularios avanzados
    • Controles avanzados
    • Etiquetas
    • Agrupación de elementos
    • Desactivación de elementos
  • Mapas
    • Mapas
    • Mapas lado cliente
    • Cómo usar un mapa
  • Tablas
    • Tablas
    • Definir las filas
    • Definir las celdas
    • Título de la tabla
  • Marcos
    • Marcos
    • Etiqueta <FRAMESET>
    • Etiqueta <FRAME>
    • Acceso a otros marcos
  • Hojas de estilo (1)
    • Estilos CSS
    • Clases
    • Etiquetas <SPAN> y <DIV>
  • Hojas de estilo (2)
    • Referencia CSS
    • Propiedades de bloque
    • Propiedades de tipo de letra
    • Propiedades de formato del texto
    • Propiedades de color y fondo
    • Propiedades de clasificación
  • Los scripts
    • Los Scripts
    • Javascript
  • Capas
    • Las capas
    • Definición
    • Propiedades
  • Sonido
    • Sonido en la página
    • Sonido manual
    • Sonido de fondo
  • Trucos
    • Guía de estilo
      • Guía de estilo
      • Contenido
      • Navegación
      • Estructura de las páginas
      • Accesibilidad
      • Diseño
      • Mantenimiento y prueba
    • Enlaces de interés
      • Más HTML
      • Más JavaScript
      • HTML dinámico
      • Otras tecnologías
      Estilos CSS: referencia
      Estilos CSS
      Los estilos CSS son una forma de separar el contenido de la página web de su formato. Es decir por un lado nos preocupamos de dar contenido a la página y por otro de definir como se deberá ver. Es una idea magnífica que nos permite, por ejemplo, cambiar el estilo de diseño de todo un sitio web sin necesidad de reeditar todas sus páginas: solo modificaríamos el archivo donde se desribe el formato de las páginas, como esquemas de color, imágenes de fondo, etc. Pero no todo es perfecto: los navegadores Explorer y Netscape no entienden los estilos exactamente igual por lo que es conveniente probar las cosas en ambos para asegurarnos que todo se verá como nosotros queremos.
      arriba


      Propiedades de bloque

      Cuando hablabamos del formato en las páginas HTML diferenciamos entre elementos de bloque y elementos en linea, Los bloques eran elementos como el <p> (párrafo) o las <div> (capas). Entonces de entrada veamos que propiedades se les puede aplicar a este tipo de elementos:

      Propiedad Significado Valores
      margin-top, margin-right, margin-bottom, margin-left, margin: top right bottom left Márgenes dntro del bloque. Tanto margin como margins() se utilizan para cambiar todos estos atributos a la vez. tamaño, porcentaje o auto. Por defecto es cero.
      padding-top, padding-right, padding-bottom, padding-left,<br/> padding: top right bottom left Distancia entre el borde y el contenido del bloque. tamaño, porcentaje o auto. Por defecto es cero.
      border-top-width, border-right-width, border-bottom-width, border-left-width,<br/> border-width: top right bottom left Anchura del borde de un bloque. numérico
      border-style Tipo de borde de un bloque. none, ruged, solid, 3D,... por defecto ninguno (none).
      border-color Color del borde de un bloque. Código o nombre de color
      width, height Ancho y alto del bloque. tamaño, porcentaje o auto, automático por defecto.
      float Justificación del contenido de un bloque. left, right o none, por defecto ninguna.
      clear Permiso para que otro elemento se pueda colocar a su izquierda o derecha. left, right, both o none, por defecto ninguno.
      arriba


      Propiedades de tipo de letra

      Ahora vamos a examinar las propiedades del tipo de letra que el usuario va a ver. Son las siguientes:

      Propiedad Descripción Posibles valores
      font-family Tipo de letra (que puede ser genérico) que vamos a usar. lista de tipos, ya sean genéricos o no, separados por comas.
      font-size Tamaño del tipo de letra. xx-small, x-small, small, medium, large, x-large, xx-large, tamaño relativo o tamaño absoluto. Por defecto medium.
      font-weight Grosor del tipo de letra (negrita). normal, bold, bolder, lighter o 100-900 (donde 900 es la negrita más gruesa). Por defecto normal.
      font-style Estilo del tipo de letra (cursiva). normal, italic, italic small-caps, oblique, oblique small-caps o small-caps. Por defecto normal.

      Recordemos lo dicho al hablar del tipo de letras: no todos tus tipos tienen que estar en los ordenadores de tus visitantes.

      arriba


      Propiedades de formato de texto

      Nuesto siguiente objetivo van a ser las propiedades de formato del texto que cualquier procesador de textos nos permite cambiar.

      Propiedad Descripción Posibles valores
      line-height Interlineado. número o porcentaje.
      text-decoration Efectos variados sobre el texto. none, underline (subrayado), overline (como subrayado, pero por encima), line-through (tachado) o blink (parpadeante); por defecto ninguno.
      vertical-align Posición vertical del texto. baseline (normal), sub (subíndice), super (superíndice), top, text-top, middle, bottom, text-bottom o un porcentaje. Por defecto baseline
      text-transform Transforma el texto a mayúsculas o minúsculas. capitalize (pone la primera letra en mayúsculas), uppercase (convierte todo a mayúsculas), lowecase (a minúsculas) o none, por defecto no hace nada.
      text-align Justificación del texto. left, right, center o justify
      text-indent Tabulación con que aparece la primera línea del texto. tamaño o porcentaje, por defecto cero.
      arriba


      Propiedades de color y fondo

      También es posible cambiar el color o la imagen de fondo de cualqueir elemento.

      Propiedad Descripción Posibles valores
      color Color del texto. un color (en el formato habitual).
      background Modifica tanto el gráfico el color de fondo. dirección del fichero que contiene la imagen o un color.

      Las direcciones URL (para la imagen de fondo por ejemplo) se expresan del siguiente modo:

      background: url(fondobonito.gif);
      arriba


      Otros

       

      Propiedad Descripción Posibles valores
      display Decide si un elemento es interior (como <I>), un bloque (<P>) o un elemento de una lista (<LI>). inline, block, list y none (que 'apaga' el elemento)
      list-style Estilo de un elemento de una lista, pudiendo incluir un gráfico al comienzo del mismo. disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none o la dirección de un gráfico
      white-space Decide como se manejan los espacios, si de manera normal o como sucede dentro de la etiqueta <PRE>. normal y pre

      Y ahora... ya no hay más... ¡por fín acabamos! Dejadme que respire un poco y ahora continuamos.

      arriba


      Comunidad Virtual. Alojamiento gratis