Propiedad Para Edición CSS

En esta oportunidad he querido citar a los compañeros de “la webera”, quienes de forma clara y precisa nos dan una breve explicación sobre la edición en css.

Este su link; http://www.lawebera.es/manuales/macromedia-dreamweaver/editar-crear-propiedades-css-adobe-dreamweaver.php

Herramientas:

Cuando nos encontremos diseñando una página, es conveniente que el cuadro de “Estilos CSS” se encuentre abierto, de no ser así podemos abrirlo desde el menú “Ventana / Estilos CSS” o con el método abreviado “Mayús+F11”, ya que desde allí podremos crear y modificar todos los estilos, mientras estamos visualizando los resultados.

Edición de reglas CSS existentes:

Esto se aplica a los elementos del diseño que ya han sido creados y que tienen sus reglas y propiedades definidas. Para editarlos se deben seguir los siguientes pasos:

1. Selección del elemento a modificar.

Para seleccionar las reglas CSS a editarse, hay dos métodos que se pueden emplear. El primero es seleccionar el elemento cuyas propiedades se van a editar desde la vista de diseño. Si el elemento es texto o imagen, basta con hacer clic en cualquier parte de los mismos. De inmediato aparecerán las reglas y propiedades que definen al elemento en el cuadro. Si el elemento es una capa (div) o una tabla (table), se debe hacer clic en el borde del elemento. En este caso, aparecerán las reglas que definen a la capa o la tabla, así como las de todos los elementos padre del mismo.

2. Modificación e introducción de propiedades

En la parte superior del cuadro, hay dos pestañas que permiten seleccionar entre ver todas las tablas o la actual (seleccionada). Al seleccionar la última, aparecen tres divisiones iguales a las que se muestran en la imagen. En la división superior aparecen todas las propiedades del elemento, aún aquellas que no están especificadas y tienen valores por defecto.
En la división del centro, se muestran la regla involucrada y todos sus padres, hasta llegar a “body”. En la división inferior aparecen las propiedades que figuran en el archivo CSS a la izquierda, mientras que los valores respectivos aparecen a la derecha. Esta sección es editable, bastando para ello hacer clic en la celda que se pretende editar e introducir los nuevos valores.
En la última fila aparece una celda a la izquierda que dice “Añadir Propiedad”. Haciendo clic en ella es posible introducir una nueva propiedad, escribiendo su nombre o seleccionándola del menú desplegable que aparece allí. Hagamos una prueba de ejemplo. Seleccionaremos la capa del encabezado de la página, haciendo clic en el borde. Luego, en la sección inferior haremos clic en “Añadir Propiedad” y buscaremos las propiedades de borde. Seleccionaremos “border-color” y seleccionaremos el color de borde de la paleta de colores que aparece. Luego introduciremos la propiedad “border-width” a la que le daremos 1px, y la propiedad “border-style”, introduciendo “solid”. Luego de finalizada esta introducción de propiedades, un borde azul debe aparecer alrededor de la cabecera.

Introducción de nuevas reglas

Para introducir una nueva regla, en el ejemplo deberemos crear un elemento nuevo, ya que todos los elementos que se encuentran en la página actual tienen definidas sus reglas y propiedades.

Introduciremos una nueva capa, que será el inicio de un menú sencillo. Haremos un menú horizontal debajo de la cabecera. Para ello deberemos colocar una nueva capa. En la vista de código, haremos clic a continuación de la etiqueta de cierre de la capa del encabezado. Luego daremos “enter” para que se genere una nueva línea en el código, donde introduciremos el nuevo elemento.

Luego haremos clic en “Insertar / Objetos de diseño / Etiqueta div”, abriéndose un nuevo cuadro flotante donde deberemos indicar el lugar donde colocaremos la etiqueta, el nombre de la clase y el Id (o uno solo de los dos, según sea el caso).

Luego de haber rellenado los datos, haremos clic en “Crear nueva regla”, tras lo cual aparece otro cuadro, donde en primera instancia seleccionaremos el tipo de selector que se trata (class, id, una etiqueta html o un selector compuesto) y el lugar donde va a quedar definida la nueva regla.

Tras hacer clic en “Aceptar”, se abrirá el cuadro donde se definen las propiedades de la nueva regla, en el cual colocaremos todas las propiedades que definan a la nueva regla. En este cuadro hay una columna izquierda, donde seleccionaremos la categoría de propiedades que introduciremos. Al hacer clic en ellas, aparecen las distintas propiedades a las cuales podremos ir dando los diferentes valores.

Para el ejemplo, definiremos las siguientes propiedades con los respectivos valores:
• Font-family: Arial, helvética, sans-serif
• Font-size: 12px
• Font-style: normal
• Line-height: 20px
• Font-weight: bold
• Font-variant: normal
• Text-transform: none
• Text-decoration: underline
• Color: #FFF
Luego seleccionaremos “Fondo” a la izquierda e introduciremos el siguiente valor y dejando el resto en blanco:
• Background-color: #06F
Luego iremos a cuadro, donde introduciremos el ancho de la nueva capa (la altura está dada por la propiedad “line-height”) en 99% para que junto al 1% del relleno derecho e izquierdo ocupen todo el ancho del diseño.
El resto de las categorías de propiedades y sus valores los dejaremos en blanco, ya que no serán necesarios para establecer la capa que albergue un menú. Al hacer clic en “Aceptar” volveremos al primer cuadro de creación de nuevas reglas, donde haremos clic en “Aceptar”. De esta forma quedará conformada la nueva capa, que aparecerá con un texto indicándonos que deberemos introducir un contenido.