Evitar navegación.
Principal

Trucos para tus hojas de estilo (CSS)

Tamaño del texto sin usar pixeles

Si aún no sabes cómo los diseñadores pueden trabajar en sus hojas de estilos usando como unidad "em" en vez de "px":

body { font-size: 62.5% }

Simplemente especifica un porcentaje para el tamaño del texto y ya puedes empezar a utilizar "em" como medida para el tamaño de las fuentes.

Por ejemplo el estilo para un parrafo quedaría:

p { font-size: 1.2em; line-height: 1.5em; }

Haz el código de fácil lectura

Os propondo esta manera de organizar tus hojas de estilo para facilitar su lectura:

h1 {}
h1#logo { font-size: 2em; color: #000; }
h2 {}
h2.title { font-size: 1.8em; font-weight: normal; }

De esta manera unicamente tendrás que buscar las principales etiquetas y de ellas colgarán las demas etiquetas relacionadas, es altamente recomendable esta forma de organización para tus hojas de estilo.

Separa el código en bloques

Es de sentido común pero la gran mayoria de los diseñadores no lo tienen en cuenta, es muy útil para aquellas hojas de estilos que se desarrollan durante bastante tiempo, puesto que será más sencillo encontrar los diferentes bloques.

/* Estructura */
/* Tipografia */
/* Enlaces */
/* Listas,imágenes */

No escribas código redundante

Muchas veces se tiende a escribir una y otra vez similares etiquetas como “margin: 0; padding: 0;” para cada una de nuestros elementos, es innecesario y tiene una fácil solución simplemente utilizalas como etiquetas por defecto de esta manera:

* { margin: 0; padding: 0; }

Solamente deberás definir estas etiquetas en aquellos elementos que tengan una configuración diferente.

Enlaces Relacionados


codigo redundante?

Bueno y en el caso ese que has puesto:
* { margin: 0; padding: 0; }

¿no es precisamente el valor por defecto?

Lo veo mucho puesto y no se por quí© es necesario. :)

No es codigo redundante

porque 0 no es el valor por defecto...

Mira la especificacion

Mmmmm
Según la especificación el valor "Initial", o sea el por defecto
hasta que se indique otra cosa, es 0. Mira:

http://www.w3.org/TR/REC-CSS1#box-properties

Y coincide con mis pruebas, pero yo hace poco que estoy aprendiendo
diseño web, seguro que tú tienes más experiencia ¿de donde sacas
que no es el valor por defecto? ¿Cual es entonces? ¿He leí­do mal la
especificación?

Enviar un comentario nuevo

El contenido de este campo se mantiene como privado y no se muestra públicamente.
  • Las direcciones de las páginas web y las de correo se convierten en enlaces automáticamente.
  • Etiquetas HTML permitidas: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Saltos automáticos de líneas y de párrafos.

Más información sobre opciones de formato