1. Reglas de abreviatura de fuentes cs s <br />Cuando utilices css para definir fuentes, puedes hacer esto:
| tamaño de fuente: 1em; altura de línea: 1,5 em; peso de fuente: negrita; estilo de fuente: cursiva; variante de fuente: versalitas; familia de fuentes: verdana,serif; |
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, debe especificar al menos las propiedades font-size y font-family. Si hay otras propiedades (como font-weight, font-style, font-. 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:
| <div class="noticias candentes"> contenido </div> |
Al utilizar dos clases al mismo tiempo (separándolas con 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 recibirá prioridad absoluta, por ejemplo:
| margen superior: 3,5 em! importante; margen superior: 2 em |
El margen superior es de 3,5 em en todos los navegadores excepto IE y de 2 em en IE. A veces esto es útil, especialmente cuando se utilizan valores de margen relativos (como este ejemplo), para mostrar la diferencia entre IE y otros navegadores.
(IE aquí se refiere a: IE6 y versiones anteriores, excluyendo IE7. De hecho, IE7 admite el atributo! Importante, y lo mismo ocurre con los subselectores 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.
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:
Compra widgets, pero ¿qué pasa con tus hermosas fuentes? El siguiente CSS puede ayudarte:
| h1 { fondo: URL (widget-image.gif) sin repetición; } intervalo h1 { posición: absoluta; izquierda: -2000px; } |
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 el truco del modelo de caja CSS. El truco del modelo de caja CSS se utiliza para resolver problemas de visualización del navegador antes de IE6 . Las versiones anteriores a IE6.0 incluirán el valor del borde y el valor de relleno de un elemento dentro del ancho (en lugar de agregarlo). el valor del ancho). Por ejemplo, podría utilizar el siguiente CSS para especificar las dimensiones de un contenedor:
| #caja { ancho: 100px; borde: 5px; relleno: 20px; } |
Luego aplicar en html:
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:
| CSS: #caja { ancho: 150 px; } #caja div { borde: 5px; relleno: 20px; } HTML: ... |
Esto dará como resultado que el ancho total del cuadro sea de 150 píxeles en cualquier navegador.
7. Elementos del bloque central
Suponiendo que su sitio web utiliza un diseño de ancho fijo y todo el contenido está colocado en el centro de la pantalla, puede utilizar el siguiente CSS:
| #contenido { ancho: 700px; margen: 0 automático; } |
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:
| cuerpo { alineación de texto: centro; } #contenido { alineación de texto: izquierda; ancho: 700px; margen: 0 automático; } |
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 2em, luego solo necesita agregar otra altura de línea: 2em al CSS. ¡Centrado vertical logrado!
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:
| #recipiente { posición: relativa; } |
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:
| #navegación { posición: absoluta; izquierda: 30px; arriba: 5px; } |
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:
| #navegación { fondo: azul; ancho: 150 px; } |
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.
| cuerpo { fondo: url(imagen-azul.gif) 0 0 repetir-y; } |
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.