1. Reglas de abreviatura de atributos de fuente CSS
Generalmente, CSS se utiliza para establecer atributos de fuente:
peso de fuente: negrita;
estilo de fuente: cursiva;
variante de fuente: versalitas;
tamaño de fuente: 1em;
altura de línea: 1,5 em;
familia de fuentes:verdana,sans-serif;
Puedes escribirlos todos en una línea:
fuente: negrita cursiva versalitas 1em/1,5em verdana,sans-serif;
¿No parece esto mucho más simple? Sólo hay una cosa a tener en cuenta: este método abreviado sólo funciona cuando las propiedades de tamaño de fuente y familia de fuente se especifican al mismo tiempo. Además, si no configura el peso de fuente, el estilo de fuente y la variante de fuente, utilizarán valores predeterminados, así que tenga esto en cuenta.
2. Valor predeterminado del borde CSS
Generalmente puedes establecer el color, el ancho y el estilo del borde, como por ejemplo:
borde: 3px sólido #000;
Esto hace que el borde parezca de 3 píxeles de ancho, negro y sólido. Pero, de hecho, aquí solo necesita especificar el estilo.
Si solo se especifica el estilo, se utilizarán los valores predeterminados para otras propiedades. Generalmente, el ancho predeterminado del borde es medio, que generalmente equivale a 3 o 4 píxeles; el color predeterminado es el color del texto. Si este valor es correcto, no es necesario establecer tantas configuraciones.
3. Utilice dos clases para elementos al mismo tiempo.
Generalmente, un elemento se establece en una clase (Clase), pero esto no significa que no se puedan usar dos. De hecho, puedes hacer esto:
<p clase="lado del texto">…</p>
Asigne al elemento P dos clases al mismo tiempo, separadas por espacios, para que todos los atributos del texto y las clases laterales se agreguen al elemento P. Si hay un conflicto entre los atributos de las dos clases, el que se establezca más tarde tendrá efecto, es decir, los atributos de la clase colocada más tarde en el archivo CSS tendrán efecto.
Suplemento: Para una identificación, no puede escribir <p id="text side">…</p> ni puede escribirlo así
4. CSS para impresión de documentos
Muchos sitios web tienen una versión específica para impresión, pero esto no es realmente necesario porque a la impresión se le puede aplicar estilo usando CSS.
En otras palabras, puede especificar dos archivos CSS para la página, uno para visualización en pantalla y otro para impresión:
<tipo de enlace=”texto/css” rel=”hoja de estilo” href=”hoja de estilo.css” media=”pantalla” />
<tipo de enlace=”texto/css” rel=”hoja de estilo” href=”printstyle.css” media=”imprimir” />
La línea 1 es para visualización, la línea 2 es para impresión, preste atención al atributo de medios.
Pero, ¿qué debería escribirse en el CSS de impresión? Puedes configurarlo de la misma manera que diseñarías CSS normal. Mientras diseña, puede configurar este CSS para que muestre CSS y comprobar su efecto. Tal vez utilices el comando display: none para desactivar algunas imágenes decorativas, desactivar algunos botones de navegación, etc.
5. Habilidades de reemplazo de imágenes CSS
Generalmente se recomienda utilizar HTML estándar para mostrar texto en lugar de imágenes, lo que no sólo es más rápido sino también más legible. Pero si desea utilizar algunas fuentes especiales, sólo puede utilizar imágenes.
Por ejemplo, si deseas crear un ícono para vender cosas, usarías esta imagen:
<h1><img src=”widget-image.gif” alt=”Comprar widgets” /></h1>
Por supuesto, esto es posible, pero los motores de búsqueda, en comparación con el texto normal, tienen poco interés en el texto de reemplazo en alt. Esto se debe a que muchos diseñadores ponen aquí muchas palabras clave para engañar a los motores de búsqueda. Entonces el método debería ser así:
<h1>Comprar widgets</h1>
Pero claro, no hay fuentes especiales. Para lograr el mismo efecto, puedes diseñar CSS de esta manera:
h1 {fondo: url(widget-image.gif) sin repetición; altura: altura de la imagen sangría de texto: -2000px}
Preste atención a reemplazar la altura de la imagen con la altura de la imagen real. Aquí, la imagen se mostrará como fondo y, debido a que se establece la sangría de -2000 píxeles, el texto real aparecerá 2000 puntos en el lado izquierdo de la pantalla y será invisible. Pero las personas que apagan la imagen, es posible que no puedan verla en absoluto, así que tengan cuidado.
6. Otra técnica del modelo de caja CSS.
El ajuste de este modelo Box es principalmente para navegadores IE anteriores a IE6, que cuentan el ancho del borde y los espacios en blanco en el ancho del elemento. Por ejemplo:
#box {ancho: 100px; borde: 5px; relleno: 20px}
Llámalo así:
<div id="caja">…</div>
El ancho total del cuadro ahora debería ser de 150 puntos, lo cual es correcto en todos los navegadores excepto IE anteriores a IE6. Pero en navegadores como IE5, su ancho total sigue siendo de 100 puntos. Esta diferencia se puede solucionar utilizando el método de ajuste de Box inventado por personas anteriores.
Pero se puede lograr el mismo propósito con CSS para que se muestren consistentes.
#caja {ancho: 150px}
#box div {borde: 5px; relleno: 20px}
Llamado así:
<div id="caja"><div></div></div>
De esta forma, no importa qué navegador, el ancho es de 150 puntos.
7. CSS establece que los elementos del bloque estén alineados horizontalmente en el centro.
Si desea crear una página web de ancho fijo y desea que la página web esté centrada horizontalmente, generalmente se ve así:
#content {ancho: 700px; margen: 0 automático}
Usarías <div id="content"> para rodear todos los elementos. Esto es simple, pero no lo suficientemente bueno y las versiones anteriores a IE6 no mostrarán este efecto. Cambie el CSS de la siguiente manera:
cuerpo {text-align: center} #content {text-align: izquierda; ancho: 700px margen: 0 auto}
Esto centrará el contenido de la página web, por lo que text-align: left se agrega al Contenido.
8. Utilice CSS para manejar la alineación vertical
La alineación vertical se puede lograr fácilmente usando tablas. Simplemente configure la unidad de la mesa en alineación vertical: medio. Pero esto es inútil con CSS. Si desea configurar una barra de navegación para que tenga 2 em de alto y desea que el texto de navegación esté centrado verticalmente, configurar este atributo es inútil.
¿Qué es el método CSS? Por cierto, establece el alto de línea de estas palabras en 2em: line-height: 2em, y listo.
9. Posicionamiento de CSS dentro del contenedor.
Un beneficio de CSS es que puedes colocar un elemento de forma arbitraria, incluso dentro de un contenedor. Por ejemplo, para este contenedor:
#contenedor { posición: relativa }
De esta forma, todos los elementos del contenedor quedarán posicionados relativamente, lo que se puede utilizar así:
<div id="contenedor"><div id="navegación">…</div></div>
Si desea ubicar 30 puntos desde la izquierda y 5 puntos desde arriba, puede hacer esto:
#navegación { posición: absoluta; izquierda: 30px; arriba: 5px }
Por supuesto, también puedes hacer esto:
margen: 5px 0 0 30px
Tenga en cuenta que el orden de los cuatro números es: arriba, derecha, abajo, izquierda. Por supuesto, a veces es mejor el posicionamiento que los márgenes.
Para obtener más diseños y técnicas de CSS, consulte la gran cantidad de tutoriales en 52CSS.com.
10. Color de fondo directo al final de la pantalla.
El control en dirección vertical está más allá de las capacidades de CSS. Si desea que la barra de navegación vaya directamente al final de la página como la barra de contenido, usar una tabla es muy conveniente, pero si solo usa CSS de esta manera:
#navegación {fondo: azul; ancho: 150px}
Una barra de navegación más corta no llega hasta el final; termina en la mitad del contenido. ¿Qué hacer?
Desafortunadamente, la única forma de hacer trampa es agregar una imagen de fondo a la columna más corta, del mismo ancho que el ancho de la columna, y hacerla del mismo color que el color de fondo establecido.
cuerpo {fondo: url(imagen-azul.gif) 0 0 repetir-y }
No puedes usar em como unidad en este momento, porque entonces el truco se revelará una vez que el lector cambie el tamaño de fuente, y solo podrás usar px.