Trucos CSS

Truco 1: Para manejar las propiedades de las fuentes

En vez de crear estilos con frases individuales para font-size, font-family, font-weight, etc., se pueden condensar las reglas referidas a las propiedades de las fuentes en una sola línea. Por ejemplo, las deficiciones

font-size: 10px;
line-height: 15px;
font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-family: arial,sans-serif;

podrían transformarse en:

font: 10px/15px bold italic small-caps arial,sans-serif

hay que especificar los dos atributos font-family y font-size en esta regla resumida, pero los otros atributos son opcionales.

CSS además de la forma condensada par ala propiedad font posee formas condensaras para otras propiedades (Background, Border Border-width, Border-style, Border-color, Font, List-style, Margin, Outline, Padding)

Truco 2: dos clases juntas

Se puede asignar más de un atributo de clase a una marca de elemento dado. Por ejemplo, el siguiente DIV obtiene su estilo de las clases contenido y producto.

<div>...</div>

Nota: un error común es creer que Internet Explore no soporta múltiples clases, lo cual no es del todo verdad. IE no tiene problema con los atributos de clase múltiple aplicados a una marca de elemento dado.

Truco 3: el valor del border por defecto en CSS

La propiedad border abreviada te permite especificar un estilo de borde, color y ancho (en cualquier orden). El atributo Style se necesita, pero se pueden omitir los atributos color y width si quieres usar sus valores por defecto. El ancho por defecto es medium, y el color por defecto es el mismo color que el texto.

Todas las propiedades abreviadas funcionan igual: cualquier atributo no especificado coje los valores por defecto.

Truco 4: IE no ignora el !important

Un truco en evolv.org hablaba de que se peude añadir el tributo !important a una declaración, para permitir que esa declaración sea preferente (inicluso si una regla posterior la contradice)
El truco asegura que IE ignora al !important y que esa característica se puede usar popr los diseñadores web para crear estilo que funcionen diferente en IE y en los demás navegadores. Por ejemplo:

margin-top: 3.5em !important; margin-top: 2em

Nota: lo cierto es que si probamos esto en IE, verdaderamente nop parece funcioanr, pero se no se debe a una mala interpretación del !improtant, sino a un fallo de IE al procesar múltiples declaraciones de una determinada propiedad dentro del mismo estilo.

Truco 5: la técnica del remplazar texto por imágenes

Nos referimos al dilema que se nos plantea a menudo en cuanto a usar texto con etiquetas HTML y aplicarle el conjunto de escasas fuentes que tiene el sistema por defecto, frente a usar un fichero de imagen con el texto adornado con las fuentes y efectos visuales que el diseñador quiere.

la técnica de reemplazar texto por imágenes nos permite conservar el texto HTML en el documento (con las ventajas que ello implica para los motores de búsqueda) y de cara al navegador, reemplazar el texto por una imagen.

Hay varias técnicas para realizar esto, pero exceden el cometido de esta guía rápida. En evolg.org se pueden ver algunos.

Truco 6: modelado con boxes en IE

Generalmente cuando realizamos un diseño con boxes, IE las presenta en pantalla con otros tamaños.

El truco consiste en añadir un DIV extra anidado en la etiqueta y aplicar estilos separados a los DIVs inner y outer para así conseguir el efecto de un sólo box de tamaño y características deseados. El outer DIV ajusta el size del box (y el margin, si es necesario) y el inner DIV ajusta el border y el padding.

La verdad es que esta es una de tantas ñapas que se aplican sólo a efectos de presentación con IE. Algunos diseñadores puristas pueden estar en desacuerdo en cuantoa añadir código y etiquetas extras sólo por propósitos visuales/de presentación, pero visto de forma práctica, se resuelve el problema.

Truco 7: Centrar horizontalmente un elemento de bloque

Este truco muestra cómo centrar un elemento bloque de anchura fija en una ventana de navegador.

Si se usa el atributo auto para los margin derecho e izquierdo se centrará un DIV en la mayoría de los navegadores actuales, incluido IE6. Por ejemplo, este código centrará horizontalmente un DIV de 700 px de ancho.

#content { width: 700px; margin-left:auto; margin-right:auto; }

Nota: si tienes que usar necesariamente versiones anteriores al IE6 es necesario emplear otro truco. Se puede eplicar un estilo al tag body con la regla text-align: center, que centra cualqueir elemento contenido en el tag BODY, incluyendo el contenedor DIV. EL problema es que también centra toda la “descendencia” del tag BODY. Esto se soluciona añadiendo para tal efecto el estilo text-align: left a un DIV que rodee al contenido de la página, tal como muestra el siguiente código:

body {
text-align: center;
}

#content {
text-align: left;
width: 700px;
margin-left:auto;
margin-right:auto;
}

Truco 8: Centrar verticalmente un elemento de bloque

Para centrar verticalmente dentro de un BOX una línea de texto hay que poner el valor line-height igual al height del BOX. Por ejemplo, el siguiente código centra el texto dentro de un BOX de 30x100px

#button {
width: 100px;
height: 30px;
font-size: 10px;
line-height: 30px;
text-align: center;
}

Truco 9: Posicionamiento CSS dentro de un contenedor

Además de ser capaces de posicionar un elemento de manera absoluta en cualquier sitio de un documento, CSS permite posicionar un elemento dentro de un contenedor. Para usar esta técnica, hay que asignar position: relative al elemento contenedor para posicionar cualquier elemento de manera relativa al contenedor, en vez de relativa a la página. Luego, se puede usar el position:absolute y las propiedades top, left, bottom, right para posicionar un elemento dentro del contenedor.

Nota: se puede obtener casi siempre el mismo resultado omitiendo las propiedades del position y usando ,argins para posicionar el elemento dentro del contenedor. El margins está mejor soportado y testeado que el position:relative, por lo que se conseguirán resultados mejores a menudo.

Truco 10: Color de fondo en background que completa hasta el final de la pantalla.

La idea es crear una columna vertical con un color de fondo que se extienda hasta rellenar la altura completa de la pantalla Si creamos un DIV con un estilo con el apropiado color de fondo no lo conseguiremos, puesto que el background color se para al final del contenedor.

Para rellenar una columna con un color específico de background, añadiremos una imagen backgroung al tag BODY o a un elemento contenedor. La imagen debe ser del ancho y color correcto como para crear esa columna de fondo que queremos crear. Luego, la repetiremos verticalmente todo lo que sea necesario como para rellenar el espacio. Luego, posicionaremos el contenedor de la columna sobre el background.

Por ejemplo, el código siguiente creará una columna de altura completa de 150 px de ancha (suponiendo que el fichero imagen.gif tenga el ancho y color correcto).

body { background: url(image.gif) 0 0 repeat-y; } #column { width: 150px; }

Truco 11: Estilos diferentes par alos links de una misma página.

Puedes crear una o varias clases y llamarlas desde los links a los que se desee dar ese aspecto.

a:link { font-family: Tahoma, Verdana, Arial; color: #003366; text-decoration: none}
a:visited { font-family: Tahoma, Verdana, Arial; color: #0099CC; text-decoration: none}
a:hover { font-family: Tahoma, Verdana, Arial; color: #996600}
a:active { font-family: Tahoma, Verdana, Arial; color: #996633; text-decoration: none}

a.estilo2:link { font-family: Tahoma, Verdana, Arial; color: #993300; text-decoration: none}
a.estilo2:visited { font-family: Tahoma, Verdana, Arial; color: #CC9933; text-decoration: none}
a.estilo2:hover { font-family: Tahoma, Verdana, Arial; color: #996666}
a.estilo2:active { font-family: Tahoma, Verdana, Arial; color: #993300; text-decoration: none}

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *