 |
|
|
|
|
|
|
|
|
|
|
 |
 |
|
||||||||
 |
|
|||||||||
 |
 |
 |
 |
 |
 |
 |
 |
|
||
 |
 |
|
||||||||
 |
 |
|
||||||||
Procedimiento:
Abrir la ventana de estilos CSS (ventana / estilos CSS) / 
para crear un estilo / darle un nombre, es importante conservar el punto del
inicio del nombre. Comencemos por crear un estilo personal: elijamos esa opción, y abajo marcar si el estilo será un nuevo archivo de hoja (si es que se desea aplicarlo a varias páginas, en este caso nos pedirá guardarlo y habrá que guardarlo dentro de la carpeta del sitio), o si no elegir sólo este documento.
A continuación definir los parámetros del estilo, por ejemplo en la categoría tipo se puede crear un estilo para los textos, eligiendo la fuente, color, etc. / aceptar.
Para aplicar este estilo por ejemplo a un texto, seleccionar este texto y oprimir sobre el estilo en la ventana de estilos CSS, si se le desea dar el estilo a un párrafo completo, posicionarse en el inicio y oprimir el estilo. Si se desean redefinir los parámetros del estilo, hacer doble clic sobre él en la ventana de estilos CSS.
Si es que guardaron el estilo en un archivo de hoja para aplicarlo a otra página, y desean hacer eso, ir a la página en la que quieran aplicarlo y en la ventana de estilos CSS oprimir el botón 
(adjuntar hoja de estilos), y seleccionar el archivo donde lo guardaron. Ahora
aparecerá en la ventana de estilos CSS y podrán utilizarlo desde ahí.
Creación de estilos que redefinen una etiqueta html: Este es el segundo tipo de estilo CSS que podemos crear, ir a la ventana de estilos CSS / / En tipo elegir: redefinir etiqueta html / La parte de arriba cambiará para que elijamos la etiqueta que queremos modificar. Por ejemplo la etiqueta <a> que es la etiqueta de los enlaces / Aceptar / En decoración elegimos: ninguna.
Con esto lo que hemos hecho es que los vínculos no aparezcan subrayados.
Usar selector CSS: esta es la tercera opción que veremos al crear un estilo CSS: ir a la ventana de estilos CSS / / En tipo elegir: Usar selector CSS. Ahora como ejemplo crearemos uno en que
cuando pase el puntero del ratón sobre el vínculo, éste se subraye. Para ello en selector elegir: a:hover / aceptar / en la ventana que se abrirá elegir en decoración la opción subrayado. Y listo!! Como anteriormente le habíamos dado a la etiqueta <a> que no estuviera subrayada y ahora usamos este selector CSS con el efecto de subrayado, el vínculo solo se subrayará al pasar sobre él.
Lo útil de utilizar las hojas de estilo CSS es que modificándolas, cambian automáticamente todas las páginas que la estén utilizando.
Nota: si creaste un estilo solo para una página pero ahora deseas aplicarlo para otra, oprimir con el botón derecho sobre el estilo en la ventana de estilos CSS / exportar hoja de estilos.
Dar efectos a vínculos por estilos CSS: para elegir los atributos de los vínculos, crear un estilo con la opción: redefinir etiqueta html, y elegimos la etiqueta: a. En el estilo dar todos los atributos que queramos que tengan los vínculos, por ejemplo subrayados o no, fuente, tamaño, etc. Para definir los atributos de los vínculos una vez que pasemos sobre ellos crearemos otro estilo usando la opción: Usar selector CSS, y en selector elegimos: a:hover, y ahora todas las propiedades que elijamos serán para cuando pasemos sobre los vínculos, por ejemplo cambiar la fuente, que se subraye, que le aparezca un fondo (para ello ver la categoría Fondo y dar un color de fondo), etc.
Hacer que el tamaño de letra no cambie al cambiar el tamaño de letra del navegador:
Para esto deberemos crear un estilo en el cual el tamaño de letras esté dado por puntos (y no por pixeles, cm, %, etc.) Por ej: en la ventana de estilos css / + / crear estilo personal / en la categoria tipo, en tamaño dar un número y elegir puntos.
Hasta aquí llega este tutorial de estilos CSS en Dreamweaver, el cual es solamente introductorio al tema de las hojas de estilo en cascada, pero como ya te podras dar cuenta son muchisimas las posibilidades.
Elementos relacionados en WebProgreso:
WebProgreso | Acerca de | Contáctanos | Sitio por Sebastián Largo |
| df |