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 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
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.
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. |
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.
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. |
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);
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.
|