Incluso cuando se utiliza Cascading Style Sheets (CSS), la construcción de un sitio web funcional (pero aún atractiva) requiere una cuidadosa ejecución y planificación. Aquí hay algunos consejos que harán de su sitio web se destacan.

Permite a los usuarios controlar el tamaño de fuente

Trate de evitar que especifica el cuerpo tamaño de fuente. No hagas esto, por ejemplo:

body {font-size: 24px;}

La gente ha establecer las opciones de su navegador a un tamaño de texto que es legible para ellos. Usted no sabe si ellos tienen una resolución de píxeles de 1680x1050 o 800x600 píxeles. Hay una diferencia. El usuario debe ser el que decida lo grandes que quieren que su texto, no a ti.

Asegúrese de que sus fronteras se presentan

Aquí hay una programación CSS cabeza-scratcher común:

p {border: 12px;}

A pesar de esta regla que escribiste, sin borde aparece alrededor de los párrafos. Se podría pensar lógicamente que especificando un tamaño de borde, verías una frontera. No tan. A menos que se especifique también una frontera estilo, usted no recibe un borde. El estilo por defecto es ninguno, así que cambiarlo para incluir un estilo:

p {border: 12px sólido;}

Cuidado con choque de color

Lo que si especifica un color de texto, pero no puede especificar un color de fondo? Suena inofensivo, pero puede ser un problema. Algunos usuarios emplean hojas de estilo personales, incluyendo sus colores favoritos. ¿Qué sucede si un usuario especifica marrón para sus fondos y blanco para su texto? Digamos que usted especifique marrón para el texto:

BODY {color: marrón-}

El usuario no verá el texto en absoluto, porque su color de fondo y el primer plano (texto) de color son idénticos. ¿La solucion? Siempre especificar un fondo si vas a colorear el texto. Entonces usted tiene control sobre cómo el texto se ve en este contexto:

BODY {color: marrón-background-color: amarillo-}

Timing borrosa y otros efectos

Combine temporizadores, scripting, y filtros para crear un montón de efectos visuales dinámicos. Prueba este efecto fresco en Internet Explorer:

Este es un efecto de desenfoque en el tiempo.

Trate de variar la velocidad del filtro mediante el ajuste del valor 130 en esta línea:

 timerhandle = setInterval ("SizeIt",130)

Encuentra A List Apart

Una fuente de excelentes ideas, ejemplos y artículos - presentado por algunos de los diseñadores de páginas web con más talento de todo - es A List Apart, que cuenta con un foro dedicado a la CSS.

Usando sus propias balas en las listas

Con CSS, diseño de viñetas personalizadas en un programa de gráficos y luego asignarlos a la lista de artículos es fácil. El siguiente código produce el resultado se muestra en la figura que sigue inmediatamente.

primero
segundo
tercera

Especificar ubicaciones gráficos

Si guarda un archivo de gráficos en la misma carpeta que el archivo .htm o .html, el código HTML sólo necesita el nombre del archivo de gráficos, así:

list-style-image: url ("mybullet.jpg")

Sin embargo, si el archivo se encuentra en otra ubicación, debe proporcionar la ruta de acceso a ese lugar, y hace algo de puntuar extraño, así - la adición de un ///, por alguna razón. Este siguiente ejemplo busca este archivo en el directorio raíz de la unidad C:

list-style-image: url ("file: /// C: mause.jpg")

Aquí hay un archivo ubicado en el fotos subdirectorio del f: drive:

list-style-image: url ("file: /// C: Fotos mause.jpg")

Aquí está la puntuacion bizarro adicional (/// ) debe agregar una ubicación de red local:

list-style-image: url ("file: /// Hp servr FOTOS mause.jpg")

Si mantiene sus archivos gráficos en un sitio de Internet, proporcione la dirección URL.

Por último, si el archivo gráfico se almacena en el transbordador espacial, utilice este puntuacion:

"file: /// / ^^^ espacio exterior servr FOTOS mause.jpg"

La misma puntuacion y convenciones se utilizan cuando se especifica el src = atribuir a cargar un gráfico en un archivo HTML elemento.

Es posible que no vea algunos de sus gráficos al mover sus páginas web desde el ordenador local a un servidor para publicarlos en Internet. Si eso ocurre, rutas de archivos de verificación para asegurarse de que los archivos de gráficos se encuentran en el código dice que son. La táctica más simple es seguir todos los archivos de dependencia (como archivos gráficos) en el mismo directorio que el .htm y archivos .css. De esa manera, puede utilizar pariente caminos, lo que significa que no se especifica ninguna ruta para nada en el código, sólo el nombre de archivo. El navegador entiende que debe ser para sus gráficos en el mismo camino que encontró el archivo HTML.

Combinando clases

Usted puede ahorrar un poco de tiempo y problemas mediante la definición de las clases que luego se combinan, al igual que los adjetivos se combinan con sustantivos. Digamos que usted quiere algunos de sus párrafos enmarcado en verde, algunos en azul, y otros en rosa. Se puede crear una clase separada para cada tipo de párrafo, o usted podría ser inteligente y crear una clase general estilo de borde, y tres clases adicionales para la coloración. Así es como funciona. En primer lugar, se crean cuatro estilos, y luego combinar los nombres de clase en los elementos HTML cuando se utiliza el class = atributo:

class = "enmarcada verde"> Usted puede ahorrar un poco de tiempo y problemas mediante la definición de las clases que luego se combinan, al igual que los adjetivos se combinan con sustantivos.
class = "blue enmarcada"> Usted puede ahorrar un poco de tiempo y problemas mediante la definición de las clases que luego se combinan, al igual que los adjetivos se combinan con sustantivos.
class = "enmarcado rosa"> Usted puede ahorrar un poco de tiempo y problemas mediante la definición de las clases que luego se combinan, al igual que los adjetivos se combinan con sustantivos.