Abra el inspector de propiedades (Ventana > Propiedades), si no está abierto ya, y seleccione la opción CSS en la esquina izquierda del panel.
Última actualización el
20/12/2021
Aprenda a usar el inspector de propiedades de texto para aplicar formato HTML o CSS en Dreamweaver.
Puede utilizar el inspector de propiedades de texto para aplicar formato HTML o formato de hoja de estilo en cascada (CSS). Cuando aplicas formato HTML, Dreamweaver añade propiedades al código HTML en el cuerpo de tu página.Cuando aplicas formato CSS, Dreamweaver escribe propiedades en el encabezado del documento o en una hoja de estilo independiente.
Al crear estilos en línea CSS, Dreamweaver añade código de atributos de estilo directamente al cuerpo de la página.
Acerca del formato del texto (CSS frente a HTML)
Aplicar formato al texto en Dreamweaver es similar al uso de un procesador de textos estándar. Puede establecer estilos de formato predeterminados (Párrafo, Encabezado 1, Encabezado 2, etc.) para un bloque de texto, cambiar la fuente, el tamaño, el color y la alineación del texto seleccionado, o aplicar estilos de texto como negrita, cursiva, código (monoespaciado) y subrayado.
Dreamweaver tiene dos inspectores de propiedades, integrados en uno: el inspector de propiedades CSS y el inspector de propiedades HTML. Cuando utilice el inspector de propiedades CSS, Dreamweaver aplica formato al texto mediante hojas de estilo en cascada (CSS). CSS ofrece a los diseñadores y desarrolladores web un mayor control sobre el diseño de páginas web, al tiempo que proporciona funciones mejoradas de accesibilidad y un tamaño de archivo reducido. El inspector de propiedades CSS le permite acceder a estilos existentes, así como crear otros nuevos.
Usar CSS es una forma de controlar el estilo de una página web sin comprometer su estructura. Al separar los elementos del diseño visual (fuentes, colores, márgenes, etc.) de la lógica estructural de una página web, CSS ofrece a los diseñadores web control visual y tipográfico sin sacrificar la integridad del contenido. Además, definir el diseño tipográfico y el diseño de página desde un único bloque de código distinto, sin tener que recurrir a mapas de imagen, etiquetas de fuente, tablas y GIF de espaciado, permite descargas más rápidas, mantenimiento simplificado del sitio y un punto central desde el que controlar los atributos de diseño en múltiples páginas web.
Puedes almacenar estilos creados con CSS directamente en el documento o, para mayor potencia y flexibilidad, puedes almacenar estilos en una hoja de estilo externa.Si adjuntas una hoja de estilo externa a varias páginas web, todas las páginas reflejan automáticamente cualquier cambio que hagas en la hoja de estilo.Para acceder a todas las reglas CSS de una página, utilice el panel Estilos CSS (Ventana > Estilos CSS). Para acceder a las reglas que se aplican a una selección actual, utilice el panel Estilos CSS (modo Actual) o el menú emergente Regla de destino en el inspector de propiedades CSS.
Si lo prefieres, puedes usar etiquetas de marcado HTML para aplicar formato al texto en tus páginas web.Para usar etiquetas HTML en lugar de CSS, aplique formato al texto utilizando el inspector de propiedades HTML.
Puede combinar formato CSS y HTML 3.2 en la misma página. La aplicación de formato se realiza de forma jerárquica: el formato HTML 3.2 tiene prioridad sobre el formato aplicado mediante hojas de estilo CSS externas y el estilo CSS incrustado en un documento tiene prioridad sobre el estilo CSS externo.
Editar reglas CSS en el inspector de propiedades
Siga uno de estos procedimientos:
- Coloque el punto de inserción dentro de un bloque de texto al que se haya aplicado formato mediante una regla que desee editar. La regla aparece en el menú emergente Regla de destino.
- Seleccione una regla del menú emergente Regla de destino.
- Haga clic en Editar regla.
Realice cambios en la regla usando las diversas opciones
en el inspector de propiedades de CSS.
Regla de destino
Es la regla que está editando en el inspector de propiedades de CSS. Cuando tengas un estilo existente aplicado al texto, la regla que afecta el formato del texto aparece cuando haces clic dentro del texto en la página.También puedes usar el menú emergente Regla dirigida para crear nuevas reglas CSS, nuevos estilos en línea o aplicar clases existentes al texto seleccionado.Si está creando una nueva regla, necesitará completar el cuadro de diálogo Nueva regla CSS. Para obtener más información, consulte los vínculos al final de este tema.
Editar regla
Abre el cuadro de diálogo Definición de regla CSS para la regla seleccionada.Si selecciona Nueva regla CSS del menú emergente Regla marcada y hace clic en el botón Editar regla, Dreamweaver abre el cuadro de diálogo Nueva definición de regla CSS en su lugar.
Diseñador CSS
Abre el panel CSS Designer y muestra las propiedades para la regla seleccionada en la vista actual.
Fuente
Cambia la fuente de la regla de destino.
Tamaño
Establece el tamaño de la fuente para la regla de destino.
Color del texto
Establece el color seleccionado como color de fuente en la regla de destino. Seleccione un color web seguro haciendo clic en el cuadro de color, o introduzca un valor hexadecimal (por ejemplo, #BB5153) en el campo de texto adyacente.
Negrita
Añade la propiedad de negrita a la regla de destino.
Cursiva
Añade la propiedad de cursiva a la regla de destino.
Alineación a la izquierda, al centro y a la derecha
Alinea la regla marcada a la izquierda, centro o derecha.
Las propiedades de Fuente, Tamaño, Color del texto, Negrita, Cursiva y Alineamiento siempre muestras las propiedades correspondientes a la regla que afecta a la selección actual de la ventana de documento. Al cambiar alguna de estas propiedades, los cambios que realice afectarán a la regla de destino.
Editar el color del texto mediante el inspector de propiedades
Si no se ha aplicado ninguna regla específica al texto, puede modificar su color directamente desde el inspector de propiedades. En el siguiente ejemplo, tome nota del color del texto antes de editarlo. El campo adyacente al selector de color muestra blanco, indicando el color del texto donde has colocado el cursor.
Para editar el color del texto, seleccione el texto que desee editar. Haga clic en el selector de color y seleccione un color a su elección. Vea la siguiente imagen donde el inspector de propiedades muestra el nuevo color.
Establecer formato HTML en el inspector de propiedades
Abra el inspector de propiedades (Ventana >
Propiedades), si no está ya abierto, y haga clic en el botón HTML.
Selecciona el texto que deseas formatear.
Defina las opciones que desea aplicar al texto seleccionado:
Formato
Establece el estilo de párrafo del texto seleccionado. Párrafo aplica el formato predeterminado para una etiqueta <p>, Encabezado 1 agrega una etiqueta H1, etc.
ID
Asigna una ID a la selección. El menú emergente ID (si corresponde) enumera todos los ID declarados no utilizados del documento.
Clase
Muestra el estilo de clase que se aplica actualmente al texto seleccionado. Si no se han aplicado estilos a la selección, el menú emergente muestra Sin estilo CSS. Si se han aplicado varios estilos a la selección, el menú aparece en blanco.
Utilice el menú Estilo para realizar cualquiera de las siguientes acciones:
Seleccione el estilo que desea aplicar a la selección.
Seleccione Ninguno para quitar el estilo seleccionado actualmente.
Seleccione Cambiar nombre para cambiar el nombre del estilo.
Selecciona Adjuntar hoja de estilos para abrir un cuadro de diálogo que te permite adjuntar una hoja de estilos externa a la página.
Negrita
Aplica <b> o <strong> al texto seleccionado según la preferencia de estilo establecida en la categoría General del cuadro de diálogo Preferencias.
Cursiva
Aplica <i> o <em> al texto seleccionado según la preferencia de estilo establecida en la categoría General del cuadro de diálogo Preferencias.
Lista sin ordenar
Crea una lista con viñetas del texto seleccionado. Si no hay texto seleccionado, se inicia una nueva lista con viñetas.
Lista ordenada
Crea una lista numerada del texto seleccionado. Si no hay texto seleccionado, se inicia una nueva lista numerada.
Blockquote y Quitar Blockquote
Aplique sangría o quite la sangría del texto seleccionado aplicando o quitando la etiqueta blockquote. En una lista, aplicar sangría crea una lista anidada y quitar la sangría elimina el anidamiento de la lista.
Vínculo
Crea un vínculo de hipertexto del texto seleccionado. Haga clic en el icono de carpeta para examinar un archivo en su sitio; escriba la URL; arrastre el icono Señalar a archivo a un archivo en el panel Archivos; o arrastre un archivo del panel Archivos al cuadro.
Título
Especifica el texto de información sobre una herramienta para un vínculo de hipertexto.
Destino
Especifica el marco o la ventana en la que se cargará el documento vinculado:
_blank carga el archivo vinculado en una nueva ventana del explorador sin nombre.
_parent carga el archivo vinculado en el conjunto de marcos o ventana principal del marco que contiene el vínculo. Si el marco que contiene el vínculo no está anidado, el archivo vinculado se carga en toda la ventana del explorador.
_self carga el archivo vinculado en el mismo marco o ventana que el vínculo. Este destino está implícito, por lo que generalmente no necesita especificarlo.
_top carga el archivo vinculado en toda la ventana del explorador, eliminando así todos los marcos.
Cambiar el nombre de una clase desde el inspector de propiedades HTML
Dreamweaver muestra todas las clases disponibles para tu página en el menú Clase del inspector de propiedades HTML.Puedes cambiar el nombre de estilos en esta lista seleccionando la opción Cambiar nombre al final de la lista de estilos de clase.
En el panel Inspector de propiedades, seleccione la lista desplegable Clase.
En la lista que aparece, selecciona Renombrar al final de la lista.
Selecciona el estilo que quieras renombrar desde el menú emergente Renombrar estilo.
Introduzca un nuevo nombre en el campo de texto Nuevo nombre y haga clic en Aceptar.
Crear sitios web atractivos en Dreamweaver
Diseña, codifica y gestiona sitios web dinámicos en una potente herramienta todo en uno.
