Definición de propiedades de tipo CSS

Utilice la categoría Tipo del cuadro de diálogo de definición de reglas CSS para definir la configuración básica de la fuente y del tipo de estilo CSS.

1 Abra el panel Estilos CSS (Mayús + F11).
2 Haga doble clic en una regla o propiedad existente en el panel superior del panel Estilos CSS.
3 En el cuadro de diálogo de definición de reglas CSS, seleccione Tipo y, a continuación, configure las propiedades de estilo.

Estilo de Fuente

Font-family Establece la familia de fuentes.

Font-size Define el tamaño del texto.                                                                                                  
Font-style Especifica normal, italic u oblique como estilo de la fuente. 
Line-height Establece el alto de la línea en la que se coloca el texto. Este valor se conoce tradicionalmente como interlineado.

Text-decoration Añade subrayado, sobreimpresión o tachado al texto o hace que el texto parpadee. 

Font-weight Aplica una cantidad específica o relativa de negrita a la fuente. Normal es equivalente a 400; bold (negrita).                                                                                                                                    

Font-variant Establece la variante de versales en el texto.        
Text-transform Convierte en mayúscula la primera letra de cada palabra de la selección o convierte todo en mayúsculas o minúsculas.

Estilo de Fondo

Background-color Establece el color de fondo del elemento.
Background-image Establece la imagen de fondo para el elemento.

Background-repeat Determina si la imagen de fondo se repite y de qué forma lo hace.                        

No-repeat muestra la imagen una vez al principio del elemento.

Repeat forma un mosaico con la imagen en sentido horizontal y vertical detrás del elemento.

Repeat-x y repeat-y muestran, respectivamente, una banda horizontal y vertical de imágenes. Las imágenes se recortan para que quepan dentro de los límites del elemento.

Nota: Utilice esta propiedad para redefinir la etiqueta body y establecer una imagen de fondo que no forma un mosaico ni se repite.

Background-attachment Determina si la imagen de fondo está fija en su posición original o se desplaza con el contenido.  

     

Estilo de Cuadro             

Width y Height Establecen el ancho y alto del elemento.
Float Determina qué lado de otros elementos, como texto, Div PA, tablas, etc., flotará alrededor de un elemento. Otros elementos se ajustan alrededor del elemento flotante de la forma habitual.
Padding Especifica la cantidad de espacio entre el contenido de un elemento y su borde (o el margen si no hay ningún borde). Desactive la opción Igual para todo para establecer el relleno de los distintos lados del elemento. Igual para todo Establece las mismas propiedades de relleno para Top, Right, Bottom y Left, es decir, para las partes superior, derecha, inferior e izquierda respectivamente del elemento al que se aplica.
Margin Especifica la cantidad de espacio entre el borde de un elemento (o el relleno si no hay borde) y otro elemento.

Aplicación de formato a texto y CSS

De forma predeterminada, Dreamweaver utiliza hojas de estilos en cascada (CSS) para aplicar formato al texto. Los estilos que se aplican al texto se incrustan en la sección head del documento.
También puede utilizarse el panel Estilos CSS para crear y editar reglas y propiedades CSS. El panel Estilos CSS es un editor más eficaz y muestra todas las reglas CSS definidas para el documento actual, con independencia de si están incrustadas en la sección head del documento o si están en una hoja de estilos externa.
Adobe recomienda utilizar el panel Estilos CSS como herramienta principal para la creación y edición de hojas de estilos en cascada. Como resultado, el código será más limpio y más fácil de mantener.
Además de los estilos y de las hojas de estilos que cree, puede usar hojas de estilos suministradas con Dreamweaver para aplicarlas a los documentos.

Acerca del panel Estilos CSS
El panel Estilos CSS permite supervisar las reglas y propiedades CSS que afectan al elemento de página seleccionado (modo Actual) o todas las reglas y propiedades que afectan al documento (modo Todo). Un botón situado en la parte superior del panel permite cambiar entre estos dos modos. El panel Estilos CSS también le permite modificar propiedades CSS tanto en modo Todo como en modo Actual.
El panel Estilos CSS en modo Actual
En modo Actual, el panel Estilos CSS muestra tres secciones: un panel denominado Resumen de la selección que muestra las propiedades de CSS de la selección actual del documento, un panel denominado Reglas que muestra la ubicación de las propiedades seleccionadas (o una cascada de reglas para la etiqueta seleccionada, en función de la selección) y un panel denominado Propiedades que permite editar las propiedades CSS de la regla aplicada a la selección.
El panel Estilos CSS en modo Todo
En modo Todo, el panel Estilos CSS muestra tres secciones: un panel denominado Todas las reglas arriba y un panel denominado Propiedades abajo. El panel Todas las reglas muestra una lista de reglas definidas en el documento actual, así como las reglas definidas en las hojas de estilo adjuntas al documento actual. El panel Propiedades le permite editar propiedades CSS para cualquier regla seleccionada en el panel Todas las reglas.

Dreamweaver CS

Es un software fácil de usar que permite crear páginas web profesionales.

Las funciones de edición visual de Dreamweaver CS4 permiten agregar rápidamente diseño y funcionalidad a las páginas, sin la necesidad de programar manualmente el código HTML. Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos JavaScript, etc.., de una forma muy sencilla y visual.

Entorno de trabajo

La barra de la aplicación. Esta barra contiene los siguientes elementos: los menús (en la imagen, en la parte inferior), varios botones propios de la aplicación, el conmutador de espacio de trabajo y una caja de búsquedas para obtener ayuda on line.

Las pestañas de documento. Cada archivo que tengamos abierto, mostrará una pestaña con su nombre, lo que nos permitirá cambiar de uno a otro fácilmente

La barra de estado. Esta barra la encontramos debajo de la ventana de documento, y nos da información sobre el mismo.

La barra de herramientas estándar. Contiene iconos para realizar las acciones más habituales del menú Archivo y Edición

La barra de herramientas de documento. contiene iconos que nos permiten cambiar entre las distintas vistas de edición y la vista en vivo, acceder cómodamente al título de la página, o realizar las distintas opciones de validación que nos ofrece el programa.

El inspector de Propiedades El inspector de Propiedades muestra las opciones propias del objeto o texto seleccionado, permitiéndonos editarlas, por lo que se convierte en uno de los elementos más utilizados en Dreamweaver. Por ejemplo, cuando el elemento seleccionado sea una imagen, mostrará su ubicación, dimensiones, peso, clase, etc...

Estilos en cascada

El término en cascada indica la forma en que finalmente un navegador muestra los estilos para elementos concretos de una página Web. Los estilos que se ven en una página Web proceden de tres fuentes: la hoja de estilos creada por el autor de la página, las opciones de estilo personalizadas elegidas por el usuario (si las hay) y los estilos predeterminados del propio navegador.

El aspecto final de una página Web es el resultado de las reglas aplicadas por estas tres fuentes en conjunto (o “en cascada”) para representar la página Web de forma óptima.

Este concepto se ilustra bien con una etiqueta común: la etiqueta de párrafo, o etiqueta <p>. De manera
predeterminada, los navegadores se suministran con hojas de estilos que definen la fuente y el tamaño del texto del párrafo (es decir, el texto situado entre etiquetas <p> en el código HTML). En Internet Explorer, por ejemplo, todo el texto del cuerpo, incluido el texto de los párrafos, se muestra de manera predeterminada con la fuente Times New Roman, Mediana.
Sin embargo, como autor de una página, puede crear una hoja de estilos que anule el estilo predeterminado del navegador para la fuente de párrafo y el tamaño de fuente. Por ejemplo, puede crear la siguiente regla en su hoja de estilos:
p {
font-family: Arial;
font-size: small;
}
Cuando un usuario carga la página, la configuración de fuente de párrafo y de tamaño de fuente establecida por usted como autor de la página anula la configuración de texto de párrafo del navegador.

APLICACIÓN DE LA HERENCIA

La herencia es otro aspecto importante de los estilos en cascada. Las propiedades de la mayoría de los elementos de una página Web son heredadas: por ejemplo, las etiquetas de párrafo heredan determinadas propiedades de las etiquetas de cuerpo, las etiquetas de lista de viñetas heredan determinadas propiedades de las etiquetas de párrafo, etc.

Por consiguiente, si crea la siguiente regla en su hoja de estilos:

body {
font-family: Arial;
font-style: italic;
}
Todo el texto de los párrafos de la página Web (así como el texto que hereda propiedades de la etiqueta de párrafo) será Arial cursiva porque la etiqueta de párrafo hereda estas propiedades de la etiqueta de cuerpo. No obstante, puede hacer que sus reglas sean más específicas creando estilos que anulen la formula estándar de herencia. Por ejemplo, si crea las siguientes reglas en su hoja de estilos:
body {
font-family: Arial;
font-style: italic;
}
p {
font-family: Courier;
font-style: normal;
}

Todo el texto de cuerpo será Arial cursiva excepto el texto de los párrafos (y su texto heredado), que se mostrará como Courier normal (sin cursiva).

 

Creación de páginas con CSS

Aspectos básicos de las hojas de estilos en cascada

Hojas de estilos en cascada
Las hojas de estilos en cascada (CSS) son un conjunto de reglas de formato que determinan el aspecto del contenido de una página Web. La utilización de estilos CSS para aplicar formato a una página permite separar el contenido de la presentación. El contenido de la página (el código HTML) reside en el archivo HTML, mientras que las reglas CSS que definen la presentación del código residen en otro archivo (una hoja de estilos externa) o en otra parte del documento HTML (normalmente, en la sección head).

La separación del contenido y la presentación hace que resulte mucho más fácil mantener el aspecto del sitio desde una ubicación central, ya que no es necesario actualizar las propiedades de las distintas páginas cuando se desea realizar algún cambio. La separación del contenido y la presentación también depura y simplifica el código HTML, lo que disminuye el tiempo de carga en los navegadores y agiliza la navegación.

Reglas CSS
Una regla de formato CSS consta de dos partes: el selector y la declaración (o, en la mayoría de los casos, un bloque de declaraciones). El selector es un término (por ejemplo p, h1,un nombre de clase o un identificador) que identifica el elemento con formato; el bloque de declaraciones define cuáles son las propiedades de estilo. En el siguiente ejemplo, h1 es el selector y el código comprendido entre las llaves ({}) es el bloque de declaraciones:

h1 {
font-size: 16 pixels;
font-family: Helvetica;
font-weight:bold;
}
Cada declaración consta de dos partes: la propiedad (por ejemplo, font-family) y el valor (por ejemplo, Helvetica). En la regla CSS anterior, se ha creado un estilo concreto para las etiquetas h1: el texto de todas las etiquetas h1 vinculadas a este estilo tendrá un tamaño de 16 píxeles, fuente Helvetica y negrita.

El estilo (que procede de una regla o un conjunto de reglas) reside en un lugar independiente del texto al que se aplica el formato (normalmente en una hoja de estilos externa o en la sección head de un documento HTML).

 

 

 

 

 

Estructura del código

  Se inicia con:

<style type=”text/css”>

selector #cabecera {

declaración

1. height: 200px;
2. width: 900px;
3. background-color: #009933;

}

Termina con:

</style>