En términos generales, una hoja de estilo es una colección de reglas de formato que controlan la apariencia del contenido web. Puede utilizar CSS en sus páginas de tres maneras diferentes:
En línea: estilos únicos escritos en código.
Incrustado: una hoja de estilo que puede controlar todos los elementos de una página. Externo: una hoja de estilo que puede controlar los elementos de muchas páginas.
De hecho, muchos sitios utilizan una combinación de estos tres métodos según sea necesario.
Una cosa importante a considerar cuando se trabaja con CSS es el hecho de que diferentes navegadores y diferentes versiones del mismo navegador analizan CSS de diferentes maneras. Además de las diferencias en los navegadores web, también debe tener en cuenta que existen muchos otros navegadores, como navegadores para oídos, navegadores basados en TV y dispositivos portátiles como Palm Pilot y TTY (teletipo, máquina de escribir remota).
¿Cuáles son las mejores prácticas?
La mayoría de las tecnologías tienen sus propios estándares acordados. CSS no es una excepción. Si bien no todo el CSS que existe en la web está estandarizado, resulta útil utilizar CSS de acuerdo con los estándares existentes. En general, los desarrolladores deberían separar el contenido de los informes tanto como sea posible. Los beneficios de esto son:
1: Aumentar la vida útil del sitio.
Las hojas de estilo no estándar pueden ser convenientes en ese momento, pero después de que salga la nueva versión del navegador, es probable que ocurran problemas de compatibilidad. En ese momento, modificar el sitio página por página será una tarea que llevará mucho tiempo y también hará que el uso de CSS pierda sentido.
2: Haga que su sitio sea accesible para todos los usuarios y navegadores.
Algunos gobiernos locales han legislado que los sitios web deben ser accesibles para personas con discapacidad. Los dispositivos de navegación diseñados para la concientización sobre la discapacidad, como los navegadores auditivos, tienen requisitos normativos CSS extremadamente estrictos.
3: Facilite las actualizaciones y el mantenimiento del sitio.
Si se usa correctamente, CSS permite que los ajustes que realiza en una página se apliquen rápidamente a todas las páginas.
La primera elección que debes hacer es qué hoja de estilo utilizar. Aquí hay un desglose de las diferentes hojas de estilo en lo que respecta a las mejores prácticas:
CSS en línea, en pocas palabras, debes intentar evitar usarlo; Entre otras desventajas, usar CSS en línea significa que no se aprovecha la ventaja real de CSS, que es que no separa el contenido del formato. DW usa CSS en línea principalmente para posicionar elementos de la página (estos elementos se denominan "capas" en la interfaz de usuario de DW), o para usar un determinado efecto DHTML, que requiere el uso de Javascript de estilo en línea para cambiar las propiedades de un objeto.
CSS integrado: tampoco es ideal porque solo afecta a la página actual. Durante el proceso de actualización, si se pierde una página, el estilo del sitio será inconsistente, además, cuando los usuarios naveguen por su sitio, se deberá descargar la información de la hoja de estilo para cada página;
CSS externo: esta es su primera opción. El CSS externo permite que todas las páginas conectadas mantengan una apariencia y un estilo consistentes; delineelo, cámbielo una vez y actualice fácilmente todas las páginas relacionadas, haga que su página sea más pequeña y navegue más rápido. Otras mejores prácticas se analizan a continuación al analizar características CSS específicas.
Crear una hoja de estilos CSS en DW
Al crear una hoja de estilos CSS en DW (Texto 》Estilo CSS 》Nueva hoja de estilos), en el cuadro de diálogo emergente, tiene dos opciones: Nuevo archivo de hoja de estilos y Solo usado para la página actual (Este documento únicamente). Seleccione "Nuevo archivo de hoja de estilo" y comenzará el proceso de creación de CSS externo. Esta opción requiere que usted asigne un nombre a la hoja de estilo y seleccione una ubicación para guardarla antes del proceso de creación real. La otra opción, Sólo este documento, escribirá el código relevante directamente en la página.
También puede seleccionar una hoja de estilo existente para editar o agregar nuevas definiciones en el cuadro de diálogo Nuevo estilo.
¿Debería conectarse a CSS externo o importarse?
Después de crear la hoja de estilo externa, deberá adjuntarla a cada página (o plantilla). Para hacer esto, haga clic en el botón "Adjuntar hoja de estilo" en el panel CSS. Aparecerá el cuadro de diálogo Vincular hoja de estilo externa, donde podrá buscar su hoja de estilo de destino. Después de encontrar el nombre, puede elegir vincular o importar. esta hoja de estilo externa.
La conexión es el método más utilizado. Seleccione "enlace" para conectar la hoja de estilo a la página. Agregará el siguiente marcado a su página:
La opción de conexión es compatible con todos los navegadores que admiten CSS. Si desea que algunos navegadores antiguos (como Netscape 4.x) "vean" esta hoja de estilo, debe utilizar el siguiente método.
Si selecciona la opción "Importar", las etiquetas utilizadas son:
NetSscape4 ignorará completamente el CSS importado e interpretará la página de acuerdo con el CSS conectado. De esta forma, podemos utilizar las nuevas funciones de CSS sin preocuparnos por problemas de compatibilidad del navegador.
Inspector de propiedades CSS
Puede cambiar fácilmente al modo CSS en el inspector de propiedades de DW. De forma predeterminada, el inspector de propiedades muestra etiquetas de fuente en modo HTML sin formato. Haga clic en la pequeña "A" al lado del menú desplegable Fuentes y verá las hojas de estilo CSS actualmente disponibles en lugar de una lista de etiquetas de fuentes. Al mismo tiempo, puedes volver fácilmente al modo HTML.
Hojas de estilos CSS listas para usar
Una de las características CSS interesantes de DW es que incluye hojas de estilos CSS listas para usar. Los nuevos usuarios de CSS pueden probarlo primero. Seleccione Archivo > Nuevo, seleccione hojas de estilo CSS en el cuadro de diálogo emergente de nuevo documento y aparecerá una lista de todos los CSS disponibles en el cuadro de la derecha. Para practicar lo que llamamos mejores prácticas, elija una marcada como "Accesible".
Guarde el documento en la carpeta del sitio y luego agregue el CSS a su documento utilizando el método descrito anteriormente.
Hojas de estilo de Design Time (hojas de estilo de Design Time)
Esta función de DW le permite aplicar hojas de estilo a las páginas mientras trabaja en la vista de diseño, lo que le brinda una comprensión más intuitiva de la apariencia del sitio. Las hojas de estilo en tiempo de diseño no aparecerán en el sitio. Esta característica es muy útil desde la perspectiva de nuestras mejores prácticas. Si utiliza los métodos de importación y unión (como se describe anteriormente), adjuntar una hoja de estilo en tiempo de diseño le permitirá desarrollar el sitio utilizando cualquiera de ellos. Puede cambiar fácilmente a otra hoja de estilo cuando desee ver cómo se verá la página en otra hoja de estilo.
Las hojas de estilo en tiempo de diseño también son útiles para los desarrolladores que desean aplicar CSS en el lado del servidor (como ASP, PHP o ColdFusion) o en el lado del cliente a través de Javascript. Las hojas de estilo del lado del servidor también son otra forma de lidiar con el soporte deficiente de CSS en los navegadores de los clientes. Pero en versiones anteriores de DW, este método no permitía ver el efecto real de CSS durante la etapa de diseño. Las hojas de estilo en tiempo de diseño le permiten ver los efectos de las hojas de estilo en tiempo real, para que pueda trabajar con una interfaz visual en DW. Otro beneficio es que cuando carga archivos del sitio, ya no tiene que recorrer todo el sitio en busca de hojas de estilo redundantes.
Validación
Ya sea que cree su propia hoja de estilo o edite una existente, la validación garantiza que no haga un mal uso de etiquetas no estándar o código incorrecto. DW en sí no incluye un validador de CSS; puede utilizar el servicio de validación proporcionado por el sitio W3C.
Dentro de DW puede validar etiquetas HTML o DHTML (Archivo > Verificar página > Validar marcado (para HTML) o Archivo > Verificar página > Validar como XML para XHTML). DW proporciona muchas herramientas auxiliares al desarrollar sitios basados en CSS. Con la ayuda de MW MX, junto con un buen conocimiento de CSS, puede desarrollar un sitio que resistirá la prueba del tiempo.