En la primera parte de nuestra mirada en el uso de CSS en Dreamweaver , que proporcionan un resumen de algunos fundamentos claves, tales como qué estilos son, cómo funcionan, qué son las hojas de estilo. Recuerde, un estilo (también llamada "regla") es simplemente una colección de propiedades de formato, y una hoja de estilo es una lista de estilos.

Also in Part One, we discussed how to create Redefined HTML Elements, a CSS rule type. Recall that we weren't creating anything new per se, we were simply redefining what was already present on our page. This not only means that you don't have to apply your formatting manually to any content (since your content already exists on your page), but also that you're changing all instances of the HTML element that you've redefined. Now, you may not want that -- you may not want to redefine all paragraphs, for example; maybe only the first paragraph. And this is where class rules come into play.

With class rules, we name and create the rule completely from scratch, then go and apply the formatting where ever it's needed on our page. If you're familiar with styles from other applications, like Word, Pages, InDesign, and Quark, then you're already familiar with how class rules work.

Lo bueno es que podemos aplicar las reglas de clase a cualquier elemento HTML: tablas, divs, encabezados, el cuerpo, las barras horizontales, las listas de las obras ...! Esto nos permite llegar realmente a nuestra página y nuestro formato bajo control. Así que echemos un vistazo a la creación de una dominación de clase, entonces podemos discutir la forma de aplicarlos.

He aquí cómo crear un dominio de clase ...

Paso - 1

En la parte inferior del panel Estilos CSS, haga clic en el icono de Nueva regla CSS.

Paso - 2

En el cuadro de diálogo Nueva regla CSS que aparece, seleccione la clase (puede aplicarse a cualquier elemento HTML) en el menú desplegable Tipo de selección desplegable.

Paso - 3

En el campo Nombre de selección, escriba un nombre para la nueva clase.

Porque estamos básicamente la creación de reglas de la clase a partir de cero, podemos nombrarlas lo que queramos, pero asegúrese de no usar espacios o caracteres especiales en los nombres de clase de regla. Por ejemplo, si va a crear una regla de clase para controlar los gráficos, es posible que el nombre de su regla de "ImageController" o "PictureFixerUpper". Si va a crear una barra lateral, entonces el nombre de su regla de "barra lateral". Nombre 'em como más te guste, y utilizar un nombre que es útil y significativo!

Paso - 4

En la parte inferior del cuadro de diálogo, decida si desea guardar la regla en una hoja de estilo interna "Sólo este documento" o en una hoja de estilo externas "Nuevo archivo de hoja de estilos".

Paso - 5

In the CSS Rule Definition dialog box, go nuts and have some fun setting some CSS properties. The properties that you decide to use really depend on what it is you want your new class rule to do. Here are a few ideas to consider: If you're controlling images, you might want to apply a border, a margin, and perhaps a float setting. If you're creating a sidebar for some text, head for the Type category and possibly the Block category. Maybe throw on a background color and some padding too. Again, it really depends on what you have in mind, what you want to create, and how you want it to look.
When you're done, click OK.

Tenga en cuenta que la nueva regla en la parte superior del panel Estilos CSS. Nótese también que el nombre de su gobierno es precedida por un período / punto. Los nombres de clase regla debe estar siempre precedida de un período, si no se pone uno en cuando se está nombrando a su gobierno (como lo hicimos en el paso 3), Dreamweaver se pegará el período en forma automática.

Ahora que ha creado una regla de clase, es el momento de su aplicación a través de su página. Como se mencionó anteriormente, a diferencia de redefinir los elementos HTML, las reglas de clase tienen que ser aplicados manualmente en el documento. Dependiendo de cómo se aplica la regla, ya sea a nivel de bloque o en línea los elementos HTML, obtendrá resultados diferentes en su página. Vamos a echar un vistazo a algunas formas de hacer esto.

He aquí cómo aplicar el formato a los elementos de bloque HTML:

Paso - 6

En su página, con un solo clic en el objeto que desea aplicar el formato. Por ejemplo, si se trata de un título o un párrafo que desea dar formato, simplemente introduce el cursor en el texto. Si se trata de una tabla, div, o la imagen, asegúrese de seleccionar el objeto. A veces, usando el selector de etiquetas en la barra de estado en la esquina inferior izquierda es muy útil cuando usted está tratando de seleccionar los elementos más grandes. Sea lo que sea que desee dar formato, la idea aquí es para seleccionarlo.

Paso - 7

En el menú de clases en el inspector de propiedades, elija su dominio de clase. Esto se aplica la regla de clase para el objeto seleccionado. Tenga en cuenta que el selector de etiquetas indica ahora el elemento HTML que hayas seleccionado, así como el nombre de su dominio de clase, precedido por un período. Por ejemplo, . Si fuéramos a ver este ejemplo en la vista Código, que se vería así:

. Notice that the rule name in code is not proceeded by a period.

Paso - 8

Rather than single-clicking within some text, try selecting a word, phrase, or sentence. If you're coming from the print world, this is the equivalent to character formatting (as opposed to paragraph formatting).

Paso - 9

Al igual que antes, elegir su dominio de clase del inspector de propiedades. La diferencia ahora es que sólo la palabra seleccionada o de la pena se formateará. Echa un vistazo a el selector de etiquetas, y voy a contar lo que pasa. Ahora se lee seguido por un punto y el nombre de su dominio de clase es, por ejemplo . En la vista Código, se leería . A es un elemento en línea. Como puede ver, el atributo HTML se utiliza la misma (de clase), y la sintaxis es exactamente la misma que era antes, pero tenemos un resultado muy diferente en nuestra página.

Conocer y comprender, no sólo cómo crear reglas de clase, sino también las dos formas de aplicarlos realmente mejorar su capacidad de construir y desarrollar los grandes sitios que buscan. Stylin feliz "!

Profundizar en CSS con CSS Exploración .