Diez consejos para el diseño de hojas de estilo CSS

1. Reglas de abreviatura de fuentes CSS

Al definir fuentes usando CSS, puedes hacer esto:

De hecho puedes abreviar estas propiedades:

fuente: 1em/1.5em negrita cursiva verdana, serif

Es mucho mejor ahora, pero hay una cosa a tener en cuenta: para utilizar este método abreviado, al menos debes especificar los atributos de tamaño de fuente y familia de fuentes. Si hay otros atributos (como peso de fuente, estilo de fuente, fuente). variante) no se especifican, se utilizarán automáticamente. El valor predeterminado se utilizará automáticamente.

2. Usa dos clases al mismo tiempo

Por lo general, solo especificamos una clase para el atributo, pero esto no significa que solo pueda especificar una. De hecho, puede especificar tantas como desee, por ejemplo:

<p class="text side">...</p>Al usar dos clases al mismo tiempo (separadas por espacios en lugar de comas), este párrafo aplicará las reglas especificadas en ambas clases. Si alguna de las normas se superpusiera, prevalecerá esta última.

3. Valor predeterminado del borde en CSS

Al escribir una regla de borde, normalmente se especifica el color, el ancho y el estilo (en cualquier orden). Por ejemplo: borde: 3px sólido #000 (borde sólido negro de 3 píxeles de ancho. De hecho, el único valor que debe especificarse en este ejemplo es el estilo). Si especifica el estilo como sólido, entonces se utilizarán los valores predeterminados para el resto de los valores: el ancho predeterminado es medio (equivalente a 3 a 4 píxeles; el color predeterminado es el color del texto en el borde); . Si esto es exactamente lo que desea, no es necesario que lo especifique en CSS.

4. !Importante será ignorado por IE

En CSS, normalmente la última regla especificada tiene prioridad. Sin embargo, para navegadores distintos de IE, cualquier declaración marcada con !important tendrá prioridad absoluta, por ejemplo: margin-top: 3,5em !important; margin-top: 2em en todos los navegadores excepto IE El margen superior es siempre 3,5em, mientras que IE es 2em. A veces esto es útil, especialmente cuando se usan valores de margen relativos (como este ejemplo), para mostrar las diferencias sutiles entre IE y otros navegadores. (Muchas personas también pueden notar que IE también ignora los subselectores de CSS)

5. Habilidades de reemplazo de imágenes.

A menudo es más prudente utilizar HTML estándar en lugar de imágenes para mostrar texto, además de acelerar las descargas y mejorar la usabilidad. Pero si está decidido a utilizar una fuente que tal vez no esté disponible en la máquina de su visitante, sólo puede elegir imágenes.

Por ejemplo, desea utilizar el título "Comprar widgets" en la parte superior de cada página, pero también desea que los motores de búsqueda lo descubran. Si utiliza una fuente poco común por motivos estéticos, debe utilizar una imagen para mostrar. eso.

<h1><img src="/widget-image.gif" alt="Comprar widgets" /></h1>

Esto es ciertamente cierto, pero hay evidencia de que los motores de búsqueda valoran el texto real mucho más que el texto alternativo (porque muchos sitios web ya usan texto alternativo como palabras clave), por lo que tenemos que usar otro método: <h1><span >Comprar widgets< /span></h1>, ¿qué pasa con tus hermosas fuentes? El siguiente CSS puede ayudar:

Ahora tiene una imagen hermosa y una buena ocultación del texto real: con la ayuda de CSS, el texto se coloca a 2000 píxeles del lado izquierdo de la pantalla.

6. Otra opción para hackear el modelo de caja CSS

El truco del modelo de cuadro CSS se utilizó para resolver problemas de visualización del navegador antes de IE6. Las versiones anteriores a IE6.0 incluirían el valor del borde y el valor de relleno de un elemento dentro del ancho (en lugar de agregarlo al valor del ancho). Por ejemplo, podría utilizar el siguiente CSS para especificar las dimensiones de un contenedor:

Luego aplicar en html:

<div id="caja">...</div>

El ancho total del cuadro es de 150 píxeles en casi todos los navegadores (ancho de 100 píxeles + dos bordes de 5 píxeles + dos rellenos de 20 píxeles), excepto en los navegadores anteriores a IE6, sigue siendo de 100 píxeles (el valor del borde y el valor del relleno están incluidos en el valor de ancho), el truco del modelo de caja está diseñado para resolver este problema, pero también causará problemas. Una forma más sencilla es la siguiente:

Esto dará como resultado que el ancho total del cuadro sea de 150 píxeles en cualquier navegador.

7. Centrar el elemento del bloque.

Suponiendo que su sitio web utilice un diseño de ancho fijo, con todo el contenido colocado en el centro de la pantalla, puede usar

El siguiente CSS:

Puede colocar cualquier elemento dentro del cuerpo del HTML y el elemento obtendrá automáticamente valores de límite izquierdo y derecho iguales para garantizar una visualización centrada. Sin embargo, esto sigue siendo un problema en los navegadores anteriores a IE6 y no estará centrado, por lo que se debe modificar de la siguiente manera:

Configurar el cuerpo hará que el contenido principal esté centrado, pero incluso todo el texto estará centrado. Probablemente este no sea el efecto que desea. Por esta razón, el div de #content también debe especificar un valor: text-align: left.

8. Utilice CSS para lograr el centrado vertical.

Centrar verticalmente es pan comido para las tablas, simplemente especifique la celda como vertical-align: middle, pero esto no funciona en el diseño CSS. Supongamos que establece la altura de un menú de navegación en 2 em y luego especifica las reglas de alineación vertical en CSS, el texto aún estará organizado en la parte superior del cuadro, no hay ninguna diferencia.

Para resolver este problema, simplemente establezca la altura de la línea del cuadro para que sea la misma que la altura del cuadro. En este ejemplo, la altura del cuadro es 2 em, luego simplemente agregue otra altura de línea: 2 em al CSS. !

9. Posicionamiento de CSS dentro del contenedor.

Una de las mayores ventajas de CSS es que los objetos se pueden colocar en cualquier parte del documento y también dentro de un contenedor. Simplemente agregue una regla CSS al contenedor:

Luego, cualquier elemento dentro del contenedor se coloca en relación con el contenedor. Supongamos que utiliza la siguiente estructura HTML:

Si desea colocar la navegación dentro del contenedor a 30 píxeles del borde izquierdo y a 5 píxeles de la parte superior, puede utilizar la siguiente declaración CSS:

10. Color de fondo que se extiende hasta la parte inferior de la pantalla.

Una de las desventajas de CSS es la falta de control vertical, lo que provoca problemas que el diseño de una tabla no encuentra. Suponga que configura una columna en el lado izquierdo de la página para colocar la navegación de su sitio web. La página tiene un fondo blanco, pero desea que la columna de navegación tenga un fondo azul. Simplemente use el siguiente CSS:

El problema es que el elemento de navegación no se extiende hasta el final de la página y, naturalmente, su color de fondo tampoco se extiende hasta el final. Entonces, el fondo azul de la columna izquierda se corta a la mitad de la página, desperdiciando su diseño. ¿Qué debemos hacer? Desafortunadamente, solo podemos usar el engaño, es decir, especificar el fondo del cuerpo como una imagen del mismo color y ancho que la columna de la izquierda.

La imagen de fondo debe ser una imagen azul de 150 píxeles de ancho. La desventaja de este método es que em no se puede utilizar para especificar el ancho de la columna izquierda. Cuando el usuario cambia el tamaño del texto y el ancho del contenido se expande, el ancho del color de fondo no cambiará en consecuencia.

Al momento de escribir estas líneas, esta es la única solución a este tipo de problema, por lo que solo puede usar valores de píxeles para la columna de la izquierda para obtener un color de fondo diferente que se expande automáticamente.