Técnicas imprescindibles
Enviado por alfredobrambila • 10 de Junio de 2015 • Tesis • 1.738 Palabras (7 Páginas) • 210 Visitas
Capítulo 1. Técnicas imprescindibles
El estándar CSS 2.1 incluye más de 100 propiedades de todo tipo para diseñar el aspecto de las
páginas HTML. No obstante, los diseños web más actuales muestran recursos gráficos que no se
pueden realizar con CSS, como sombras, transparencias, esquinas redondeadas y tipografía
avanzada. Por ese motivo, es preciso que los diseñadores web profesionales conozcan las
técnicas imprescindibles para crear diseños web avanzados.
En las próximas secciones se muestran las siguientes técnicas imprescindibles:
▪ Propiedades shorthand para crear hojas de estilos concisas.
▪ La propiedad hasLayout de Internet Explorer, imprescindible para solucionar muchos
errores de ese navegador.
▪ Limpiar floats, para trabajar correctamente con los elementos posicionados de forma
flotante.
▪ Cómo crear elementos de la misma altura, imprescindible para el layout o estructura de las
páginas.
▪ Sombras, transparencias y esquinas redondeadas, que no se pueden crear con CSS 2.1.
▪ Sustitución de texto por imágenes y por Flash, para utilizar cualquier tipografía en el
diseño de las páginas.
▪ Rollovers y sprites CSS para mejorar el tiempo de respuesta de las páginas.
▪ Técnicas para trabajar con el texto y la tipografía.
1.1. Propiedades shorthand
Algunas propiedades del estándar CSS 2.1 son especiales, ya que permiten establecer
simultáneamente el valor de varias propiedades diferentes. Este tipo de propiedades se
denominan "propiedades shorthand" y todos los diseñadores web profesionales las utilizan.
La gran ventaja de las propiedades shorthand es que permiten crear hojas de estilos mucho más
concisas y por tanto, mucho más fáciles de leer. A continuación se incluye a modo de referencia
la definición formal de las seis propiedades shorthand disponibles en el estándar CSS 2.1.
font Tipografía
Valores
( ( <font-style> || <font-variant> || <font-weight> )?
<font-size> ( / <line-height> )? <font-family> ) | caption |
icon | menu | message-box | small-caption | status-bar | inherit
Se aplica a Todos los elementos
Valor inicial Descripción Permite indicar de forma directa todas las propiedades de la tipografía de un texto
CSS avanzado Capítulo 1. Técnicas imprescindibles
www.librosweb.es
5
margin Margen
Valores ( <medida> | <porcentaje> | auto ) {1, 4} | inherit
Se aplica a
Todos los elementos salvo algunos casos especiales de elementos mostrados como
tablas
Valor inicial Descripción Establece de forma directa todos los márgenes de un elemento
padding Relleno
Valores ( <medida> | <porcentaje> ){1, 4} | inherit
Se aplica a
Todos los elementos excepto algunos elementos de tablas como grupos de cabeceras y
grupos de pies de tabla
Valor inicial Descripción Establece de forma directa todos los rellenos de los elementos
border Estilo completo de todos los bordes
Valores ( <border-width> || <border-color> || <border-style> ) | inherit
Se aplica a Todos los elementos
Valor inicial Descripción Establece el estilo completo de todos los bordes de los elementos
background Fondo de un elemento
Valores
( <background-color> || <background-image> ||
<background-repeat> || <background-attachment> ||
<background-position> ) | inherit
Se aplica a Todos los elementos
Valor inicial Descripción Establece todas las propiedades del fondo de un elemento
list-style Estilo de una lista
Valores
( <list-style-type> || <list-style-position> ||
<list-style-image> ) | inherit
Se aplica a Elementos de una lista
Valor inicial Descripción Propiedad que permite establecer de forma simultanea todas las opciones de una lista
Si se considera la siguiente hoja de estilos:
CSS avanzado Capítulo 1. Técnicas imprescindibles
www.librosweb.es
6
p {
font-style: normal;
font-variant: small-caps;
font-weight: bold;
font-size: 1.5em;
line-height: 1.5;
font-family: Arial, sans-serif;
}
div {
margin-top: 5px;
margin-right: 10px;
margin-bottom: 5px;
margin-left: 10px;
padding-top: 3px;
padding-right: 5px;
padding-bottom: 10px;
padding-left: 7px;
}
h1 {
background-color: #FFFFFF;
background-image: url("imagenes/icono.png");
background-repeat: no-repeat;
background-position: 10px 5px;
}
Utilizando las propiedades shorthand es posible convertir las 24 líneas que ocupa la hoja de
estilos anterior en sólo 10 líneas, manteniendo los mismos estilos:
p {
font: normal small-caps bold 1.5em/1.5 Arial, sans-serif;
}
div {
margin: 5px 10px;
padding: 3px 5px 10px 7px;
}
h1 {
background: #FFF url("imagenes/icono.png") no-repeat 10px 5px;
}
1.2. La propiedad hasLayout de Internet Explorer
El navegador Internet Explorer 7 y sus versiones anteriores incluyen decenas de errores
relacionados con CSS. La mayoría de esos errores se pueden solucionar con trucos y técnicas que
aprovechan otros errores o características del navegador. Además, muchos errores se
solucionan gracias a la propiedad hasLayout de Internet Explorer.
En efecto, muchas soluciones de los errores de Internet Explorer consisten en "forzar a un
elemento a que tenga un layout". El motivo es que para mostrar los elementos de una página, el
navegador Internet Explorer divide a todos los elementos en dos grupos:
▪ Los elementos cuyo tamaño y posición dependen de su elemento contenedor.
▪ Los elementos que establecen su propio tamaño y posición.
CSS avanzado Capítulo 1. Técnicas imprescindibles
www.librosweb.es
7
La mayoría de elementos de una página son del primer tipo, ya que sus elementos contenedores
(normalmente el elemento <body>) determinan su tamaño y posición. Los elementos del
segundo tipo son los que Internet Explorer considera que tienen un layout.
Los elementos HTML que por defecto tienen un layout en Internet Explorer son:
▪ <html>,
...