Reglas CSS

Unas pequeñas palabras de la explicación de las reglas CSS.

Una regla CSS consisten en dos partes.
Tienes el “Selector”, que es un término como una etiqueta body, P, Table, H1, un nombre de clase o un id.
En el ejemplo tu tienes “body” como un Selector.

Y tienes la Declaración. La Declaración define las propiedades de estilo.
La Declaración consiste en dos partes:
Tienes las Propiedades y tienes los valores.
La Declaración es colocada entre {}, nosotros lo llamamos declaración bloque.
En el ejemplo de abajo tienes “color-fondo” como la “Propiedad” y “# CCCC66” como el “Valor”.
Entre la propiedad y el valor de la declaración, hay un punto.
Y un punto y coma al final de la declaración del valor.

Puedes tener tantas declaraciones en un bloque de declaración situado y tienes la posibilidad de colocar múltiples selectores en una regla CSS.
Escribe una coma entre los diferentes selectores.
En el ejemplo de abajo tienes selectores “body”, “td” y “th” y las declaraciones “font-family’, ‘font-size” y “color”.

Estas son las bases para el CSS
Aveces esto puede ser un poco confuso porque por ejemplo la etiqueta body es usada dos veces (ver imagen de la página previa).
Pero lo que realmente es, es esto:
El primer selector es un compuesto de muchos “selectores” (por ejemplo etiquetas). Tienes la etiqueta “body”, la etiqueta “td” y la etiqueta “th”. La etiqueta “td” y la etiqueta “th” respectivamente son para la tabla cells y la tabla headers.
Entonces esas propiedades, font family, font size y color son aplicadas a todas esas etiquetas.

La propiedad del segundo selector (“body”), el color de fondo, es sólo aplicado a la etiqueta “body”.

Dreamweaver hace todo automaticamente cuando creamos estilos CSS, pero es interesante conocer lo que Dreamweaver esta haciendo en el fondo, si has planeado tus propias reglas CSS.

 

De Interno a Externo CSS

La ventaja de un estilo externo CSS es que podemos usarlo en diferentes páginas.
Tenemos dos posibilidades de crear hojas de estilo externos.
Una primera posibilidad es hacer una única hoja de estilo en una hoja de estilo externa.
La segunda posibilidad es hacer una hoja de estilo externa de la nada.

La primera cosa que voy a platicar es crear una hoja de estilo externo desde una hoja de estilo interna.

Hemos ya visto como una hoja de estilo interna es añadida a nuestra página en lecciones pasadas.

Para usarlas en otras páginas de nuestro sitio, las hacemos como CSS externas.

Abre la página donde tu estilo CSS interno es creado.
Haz click en la flecha que apunta hacia abajo a un lado del panel CSS, escoge los estilos CSS y haz click en la pestaña “Todos”.
Si todos los estilos aplicados no son visibles, des encarpetalo haciendo click en el signo de más a un lado de “Estilo”.
Selecciona todos los estilos aplicados primero presionando la tecla shift y seleccionado el último estilo.
Haz click derecho en los estilos seleccionados y escoge “Mover Regla CSS” en el menu desplegable.

Esto abre el diálogo “Mover a hojas de estilo externos”.
En este diálogo tenemos dos opciones.
Tenemos “Hoja de Estilo” y tenemos “Una nueva hoja de estilo”.
Porque no tengo hojas de estilos disponibles, escojo la segunda opción.
Si ya tienes una hoja de estilo, escoge la primer oopción y busca la página CSS. Esto agregará nuevos estilos a tus hojas de estilo existentes.
Haz click en el botón Aceptar.

Entonces si tienes escogida la primer opción, eso abre el cuadro de diálogo “Guardar Archivo Hoja de Estilo Como”.
En esta caja de diálogo, selecciona la carpeta en tu sitio donde quieras guardar la página CSS, da un nombre al archivo y haz click en el botón “Guardar”.

Para este ejemplo he creado una nueva carpeta “CSS_Styles” para mantener todo un poco más ordenado y nombre el archivo CSS como “My Style”.

Haz click en el botón “Guardar” cuando termines.

Esto coloca la nueva carpeta “CSS_Styles” con el nuevo archivo CSS “mystyle.css” en el mapa de sitio.

.

 

 

 

 

 

 

Si ahora buscas en vista código en tu página, verás que el estilo CSS se ha ido y ha reemplazado el código con el vínculo al estilo CSS externo.

Alternativamente puedes eliminar las siguientes líneas.
Esos son las líneas desde 7 a 10 en el diagrama de abajo.

¡Atención!
En previas versiones de Dreamweaver, esto consumía mas tiempo.
Primero haz click en “Archivo” en la barra de menu, y escoge “Exportar” desde el menu desplegable.
Después guarda las hojas de estilo CSS. Después haz vínculo a la hoja de estilo CSS guardada a la página y después manualmente elimina la CSS interna.

Demasiado para aquellos con CSS externos, es quizá, mucho más usual para actualizar a la versión CS3 or CS4

En la siguiente lección veremos esta hoja de estilo externa vinculada a otra página.

 

Cursos

• Downloading iPad Apps
• Lesson 1: Introduction to Publisher
• Lesson 65: File Formats