TP New Lunch Guía 6

FORMACIÓN PARA LA VIDA Y EL TRABAJO
DISEÑO WEB // DREAMWEAVER

GUÍA N° 6:
»

Hojas de estilo en cascada CCS

1. INTRODUCCIÓN A CCS:
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 lapá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).
El lenguaje CSS ofrece gran flexibilidad y control para lograr el aspecto exacto que desea para la
página. Con CSS, se puede controlar numerosas propiedades deltexto, entre ellas las fuentes y los
tamaños de fuente específicos; negrita, cursiva, subrayado y sombras de texto; color de texto y de
fondo; color y subrayado de vínculos; etc.
Si utilizamos CSS para controlar las fuentes, también conseguiremos un tratamiento más coherente
del diseño y el aspecto de la página en múltiples navegadores.

2. Las reglas CCS
Para definir las características deformato de un documento definiremos reglas. 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,
h1es 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;
}

Las reglas CSS pueden residir en las ubicaciones siguientes:
Hojas de estilos CSS externas: Conjuntos de reglas CSS almacenados en un archivo CSS (.css)
independiente externo (no un archivo HTML). Este archivo se asocia a una o variaspáginas de un
sitio Web mediante un vínculo o una regla.
Hojas de estilos CSS internas (o incrustadas): Conjuntos de reglas CSS incluidos en una etiqueta
style de la sección head de un documento HTML.
De forma predeterminada, Dreamweaver utiliza hojas de estilos en cascada (CSS) para aplicar
formato al texto. Los estilos que se aplican al texto mediante el inspector de propiedades o los
comandosde menú crean reglas CSS que se incrustan en la sección head del documento actual.

3. EL PANEL CCS
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
panelEstilos CSS también permite modificar propiedades CSS tanto en modo Todo como en modo
Actual.

EL PANEL DE 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 unacascada 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.
En modo Actual, 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 definidasen el documento actual, así como las reglas definidas en las hojas de estilo adjuntas
al documento actual.
El panel Propiedades permite editar propiedades CSS para cualquier regla seleccionada en el panel.
Al seleccionar una regla del panel Todas las reglas, aparecen todas las propiedades que se definen
en dicha regla en el panel Propiedades. Posteriormente podremos utilizar el panel Propiedades...