Aprenda a usar el panel Diseñador de CSS para crear o adjuntar hojas de estilo, consultas de medios y selectores, y configurar propiedades CSS.
El panel Diseñador de CSS (Ventana > Diseñador de CSS) es un inspector de propiedades de CSS que permite crear “visualmente” archivos y estilos CSS, así como definir propiedades y consultas de medios.
Las siguientes secciones están disponibles en la interfaz de Diseñador de CSS:
Usando el Diseñador de CSS, puede editar reglas individuales en una hoja de estilos CSS (utilice la ficha Actual del Diseñador de CSS) o, si lo prefiere, puede trabajar directamente en la hoja de estilos CSS (utilice la ficha Todo del Diseñador de CSS).
En el panel Fuentes del panel Diseñador de CSS, haga clic en 
y, a continuación, haga clic en una de las siguientes opciones:
En función de la opción que elija, aparecerá el cuadro de diálogo Crear un nuevo archivo CSS o Adjuntar archivo CSS existente.
Haga clic en Examinar para especificar el nombre del archivo CSS y, si está creando un CSS, la ubicación en la que guardar el nuevo archivo.
Siga uno de estos procedimientos:
(Opcional) Haga clic en Uso condicional y especifique la consulta de medios que desea asociar al archivo CSS.
En el panel Diseñador de CSS, haga clic en una fuente de CSS en el panel Fuentes.
Haga clic en 
el panel @Medios para añadir una nueva consulta de medios.
Aparecerá el cuadro de diálogo Definir consulta de medios con todas las condiciones de consulta de medios que admite Dreamweaver.
Seleccione las Condiciones según sus necesidades.
Asegúrese de especificar valores válidos para todas las condiciones que seleccione. De lo contrario, las consultas de medios correspondientes no se crearán correctamente.
Solo se puede usar la operación "Y" cuando hay más de una condición.
Si agrega condiciones de consulta de medios mediante código, solo se completarán las condiciones admitidas en el cuadro de diálogo Definir consulta de medios. El cuadro de texto Código del cuadro de diálogo, sin embargo, mostrará el código completamente (incluidas las condiciones no admitidas).
Si hace clic en una consulta de medios en la vista de Diseño/en vivo, la ventana gráfica cambia para que coincida con la consulta de medios seleccionada. Para ver la ventana gráfica a tamaño completo, haga clic en Global en el panel @Medios.
En el panel Diseñador de CSS, seleccione una fuente de CSS en el panel Fuentes o una consulta de medios en el panel @Medios.
En el panel Selectores, haga clic en . Dependiendo del elemento seleccionado en el documento, el Diseñador de CSS lo identificará automáticamente y le solicitará el selector correspondiente (hasta tres reglas).
Puede realizar una o varias de las siguientes acciones:
Nota: la opción Duplicar en consulta de medios solo está disponible cuando la fuente del Selector seleccionado contiene consultas de medios. No se puede duplicar un selector de una sola fuente en la consulta de medios de otra fuente.
Ahora puede copiar estilos de un selector y pegarlos en otro. Puede copiar todos los estilos o copiar solamente categorías específicas de estilos, como diseños, textos y bordes.
Haga clic con el botón derecho en un selector y elija entre las opciones disponibles:
Haga clic en el selector que quiera y arrástrelo a su nueva posición dentro del panel Selectores.
Las propiedades se agrupan en las siguientes categorías y se representan mediante distintos iconos en la parte superior del panel Propiedades:
Antes de editar las propiedades de un selector CSS, identifique los elementos que tiene asociados mediante la inspección inversa. Al hacerlo, podrá saber si todos los componentes resaltados durante la inspección inversa requieren realmente cambios.
Seleccione la casilla de verificación Mostrar conjunto para ver solo las propiedades establecidas. Para ver todas las propiedades que se pueden especificar para un selector, anule la selección de la casilla de verificación Mostrar conjunto.
Para definir una propiedad, como por ejemplo width o border-collapse, haga clic en las opciones requeridas que se muestran junto a la propiedad en el panel Propiedades.
Las propiedades que se han anulado aparecen tachadas.
Los controles de cuadro del panel Propiedades del Diseñador de CSS le permiten definir rápidamente márgenes, rellenos y propiedades de posición. Si prefiere usar código, puede especificar el código abreviado de margen y relleno en los cuadros de edición rápida, como se puede ver en este ejemplo.
Haga clic en los valores y escriba el valor en cuestión. Si desea que los cuatro valores sean iguales y cambien simultáneamente, haga clic en el icono de vínculo en el centro.
Cuando quiera, podrá deshabilitar o eliminar valores específicos, por ejemplo, el valor de margen izquierdo, conservando los valores derecho, superior e inferior.
Las propiedades de Control de bordes se organizan en fichas lógicas para ayudarle a ver o modificar las propiedades de forma rápida.
Si prefiere usar códigos, puede especificar el código de la forma abreviada para los bordes y los radios de bordes en los cuadros de edición rápida.
Para especificar las propiedades de Control de bordes, establezca primero las propiedades de la ficha “todos los lados”. Posteriormente, se activarán las demás fichas y se reflejarán las propiedades definidas en la ficha “todos los lados” en cada uno de los bordes.
Cuando cambie una propiedad en las fichas de los distintos bordes, el valor de la propiedad correspondiente en la ficha “todos los lados” pasará a “no definido” (valor predeterminado).
En el siguiente ejemplo, el color de borde se definió en negro y luego se cambió a rojo para el borde superior.
El código que se inserta se basa en la configuración de preferencias para la forma abreviada o sin abreviar.
Durante la inspección, las fichas se examinan en función de la prioridad de las fichas “definidas”. La máxima prioridad recae en la ficha “todos los lados”, seguida de las fichas “superior”, “derecha”, “inferior” e “izquierda”. Por ejemplo, si solo se define el valor superior de un borde, el modo calculado se concentra en la ficha “superior” e ignora la ficha “todos los lados” porque esta no se ha definido.
La función Deshabilitar/Activar propiedad CSS le permite convertir en comentarios partes del código CSS desde el Diseñador de CSS sin tener que realizar cambios directamente en el código. Al convertir en comentarios partes del código CSS, podrá comprobar los efectos que provocan en la página determinadas propiedades y valores.
Al deshabilitar una propiedad CSS, Dreamweaver añade etiquetas de comentario CSS y una etiqueta [disabled] a la propiedad CSS que ha deshabilitado. Posteriormente podrá volver a activar o eliminar fácilmente la propiedad CSS deshabilitada conforme a sus preferencias.
El Diseñador de CSS permite desactivar o eliminar todas las propiedades.
La siguiente captura de pantalla muestra los iconos para deshabilitar y eliminar la propiedad width. Estos iconos son visibles al pasar el ratón sobre la propiedad.
También puede usar los controles de eliminación y desactivación en el nivel de grupo Control de bordes para aplicar estas acciones a todas las propiedades.
Puede añadir o eliminar selectores y propiedades de CSS mediante métodos abreviados de teclado. También puede desplazarse entre los grupos de propiedades en el panel Propiedades.
|
Método abreviado |
Flujo de trabajo |
|
CTRL + Alt + [Mayús =] |
Añade un selector (si el control está en la sección del selector). |
|
CTRL + Alt + S |
Añade un selector (si el control está en cualquier lugar de la aplicación). |
|
CTRL + Alt + [Mayús =] |
Añade una propiedad (si el control está en la sección de la propiedad). |
|
CTRL + Alt + P |
Añade una propiedad (si el control está en cualquier lugar de la aplicación). |
|
Seleccionar + Supr |
Elimina el selector si está seleccionado. |
|
CTRL + Alt + (RePág/AvPág) |
Cambia de sección en el subpanel de propiedades. |
La mayoría de las veces hay un solo selector CSS asociado a varios elementos de página. Por ejemplo, el texto del contenido principal de una página, un encabezado y el texto de un pie de página pueden asociarse al mismo selector CSS. Cuando edite las propiedades del selector CSS, todos los elementos asociados al selector se verán afectados, incluidos los que no va a cambiar.
El Resaltado en vivo le ayuda a identificar todos los elementos asociados a un selector CSS. Si desea cambiar un solo elemento o varios elementos, puede crear un nuevo selector CSS para dichos elementos y luego editar las propiedades.
Para identificar los elementos de página asociados a un selector CSS, pase el ratón sobre el selector de Vista en vivo (con Código en vivo en “desactivado”). Dreamweaver resalta los elementos asociados con líneas de puntos.
Para bloquear el resaltado de los elementos, haga clic en el selector. Los elementos se resaltan con un borde azul.
Para eliminar el resaltado azul alrededor de los elementos, haga clic de nuevo en el selector.
El Resaltado en vivo está activado de forma predeterminada. Para desactivar el Resaltado en vivo, haga clic en Opciones de Vista en vivo en la barra de herramientas Documento y haga clic en Desactivar resaltado en vivo.
Si edita una hoja de estilos CSS externa, todos los documentos vinculados a esa hoja se actualizarán para reflejar los cambios.
Puede exportar los estilos CSS de un documento para crear una nueva hoja de estilos CSS, así como adjuntar o vincular dichos estilos a una hoja de estilos externa para aplicarlos.
Puede adjuntar a las páginas cualquier hoja de estilos que cree o copie en el sitio.
Abra el panel Diseñador de CSS mediante uno de estos procedimientos:
En el Diseñador de CSS, haga clic en el icono + situado junto a Fuentes y seleccione Adjuntar archivo CSS existente.
Siga uno de estos procedimientos:
Haga clic en el botón Vista previa para verificar que la hoja de estilos aplica los estilos que desea en la página actual.
Si los estilos aplicados no tienen el efecto que esperaba, haga clic en Cancelar para eliminar la hoja de estilos. La página recuperará su aspecto anterior.
Haga clic en OK.
