Cómo usar las opciones de diseño en el panel de propiedades CSS de Dreamweaver - dummies

En la parte superior del panel Propiedades del Diseñador de CSS, encontrará las propiedades de CSS comúnmente utilizado para crear diseños de página. Utiliza estas opciones para especificar la altura, el ancho, la alineación, el posicionamiento y el espaciado. Estas configuraciones son ideales para crear diseños de página con clase y estilos de ID para hacer cosas como alinear imágenes y etiquetas de posición para crear diseños de múltiples columnas.

Puede usar las opciones de Diseño en el panel Propiedad de CSS para establecer estos valores:

• Ancho: Especifique un ancho para cualquier elemento que pueda tener sus dimensiones especificadas, como una etiqueta. Las opciones de tamaño son pixel (px), punto (pt), pica (pc), porcentaje (%), em, rem, ex y ch.

• Altura: Especifique una altura para cualquier elemento que pueda tener sus dimensiones especificadas.

  • Mín. Y Máx. Ancho: Especifique los anchos mínimo y máximo para las etiquetas y otros elementos del bloque. Estas opciones son útiles cuando especifica el ancho como un porcentaje de la ventana del navegador. Por ejemplo, puede establecer el ancho del diseño en el 80 por ciento de la ventana del navegador, y luego establecer un Ancho máximo de 1000 px para evitar que su diseño se extienda más allá de 1000 píxeles.

  • Altura mínima y máxima: Especifique las alturas mínima y máxima para las etiquetas y otros elementos del bloque.

  • Margen: Establece la cantidad de espacio alrededor de un elemento. Los márgenes se pueden usar para crear espacio entre el borde de un elemento y otros elementos de la página, como entre una imagen y texto o entre dos etiquetas. Puede establecer el margen por separado para la parte superior, derecha, inferior e izquierda. El relleno se mide en píxeles, puntos, pulgadas, centímetros, milímetros, picas, ems, exs y porcentajes.

  • Relleno: Establece la cantidad de espacio dentro de los bordes de un elemento. Por ejemplo, puede usar relleno para crear espacio entre los bordes de una etiqueta y su contenido. Puede configurar el relleno por separado para la parte superior, derecha, inferior e izquierda. El relleno se mide en píxeles, puntos, pulgadas, centímetros, milímetros, picas, ems, exs y porcentajes.

    Establecer el relleno y el espaciado de los márgenes puede ser complicado. Cuando agrega margen y relleno a un elemento, como una imagen o etiqueta, aumenta el tamaño total de ese elemento y la cantidad de espacio que requiere en el diseño.

• Posición: La opción Posición, disponible desde la parte inferior de la sección Diseño del panel Propiedades, altera la forma en que los elementos se posicionan en una página. El posicionamiento puede cambiar drásticamente la forma en que los elementos de nivel de bloque (como tabla, lista, encabezado, párrafo y etiquetas) aparecen en un navegador.

  • Heredar: No necesita especificar esta opción predeterminada. A menos que se seleccione otra opción, cada elemento hereda el posicionamiento de su elemento principal.

  • Estático: Coloque el contenido en su ubicación dentro del flujo del documento. De forma predeterminada, todos los elementos HTML que pueden posicionarse son estáticos.

  • Absoluto: Use las coordenadas superior e izquierda para controlar la posición de un elemento en relación con la esquina superior izquierda de la ventana del navegador o la esquina superior izquierda de un elemento que contiene el elemento.

  • Solucionado: Coloque un elemento relativo a la esquina superior izquierda del navegador. El contenido de un elemento que utiliza un posicionamiento fijo permanece constante incluso si el usuario se desplaza hacia abajo o cruzando la página.

  • Relativo: Use una posición relativa al punto donde inserta el elemento en la página o relativo a su contenedor.

    

  • Float: Alinee los elementos, como las imágenes y las etiquetas, a la izquierda o a la derecha de una página u otro contenedor causando que el texto u otros elementos se envuelvan alrededor. Haga clic en los íconos en el campo Flotante para especificar las siguientes cuatro opciones: Heredar, Derecha, Izquierda o Ninguna.

  • Borrar: Evita que el contenido flotante se superponga a un área a la izquierda oa la derecha, o a ambos lados de un elemento. Esta opción es útil cuando un elemento flotante, como una etiqueta utilizada para crear una barra lateral, se superpone a otro elemento de nivel de bloque, como una etiqueta utilizada para crear el pie de página.

  • Desbordamiento-x y -y: Indique al navegador cómo mostrar el contenido de un elemento si el contenedor, como una etiqueta, no puede ajustarse a la altura o el ancho completo del elemento. Las opciones de desbordamiento son

  • Visibles: Mantener el contenido, como una imagen o texto, visible, incluso si se expande más allá del alto o el ancho definidos de un contenedor.

  • Oculto: Corta el contenido si excede el tamaño del contenedor. Esta opción no proporciona barras de desplazamiento.

  • Desplazar: Agregue barras de desplazamiento al contenedor independientemente de si su contenido excede el tamaño del elemento.

  • Automático: Hacer que las barras de desplazamiento aparezcan solo cuando el contenido de un contenedor excede sus límites.

• Pantalla: Indique si, o cómo, representar un elemento en un navegador. Por ejemplo, puede cambiar la posición de una lista desordenada de horizontal a vertical eligiendo Inline u ocultar un elemento, dejándolo invisible, eligiendo None. Puede usar la opción Visualizar con un lenguaje de scripting para cambiar dinámicamente la visualización de los elementos.

• Visibilidad: Controla si el navegador muestra o no un elemento. Las opciones de Visibilidad son

  • Heredar: El elemento tiene la visibilidad del elemento en el que está contenido (el valor predeterminado).

  • Visible: Se muestra el elemento.

  • Oculto: El elemento no se muestra.

  • Contraer: Para usar con tablas HTML. El colapso se puede usar para eliminar una columna o fila sin afectar el resto del diseño de la tabla.

• Índice Z: Controla la posición de un elemento en la coordenada Z, que controla el orden de apilamiento de los elementos entre sí.Los elementos con un número más alto se superponen con los elementos de menor numeración.

• Opacidad: Controle el nivel de opacidad para un elemento de 0. 0 (totalmente transparente) a 1. 0 (totalmente opaco). Por ejemplo, si ingresas. 5 en el campo de opacidad, la opacidad de un elemento se reducirá al 50 por ciento.