An unexpected error occured. Please try again later.
:: My Art ::  // Css
 spanish english 
Buscar:      Búsqueda avanzada
      TUTORIALES  >> INCLUIR HOJA DE ESTILOS (CSS)

 Nivel = Medio
 Autor = Patricia

Las hojas de estilos son muy útiles en la práctica. Ya que en caso de modificar un diseño, con tan sólo modificar este archivo se cambiará la fuente, el color del scrollbar, el estilo de las tablas, formularios, etc del nuevo diseño, sin necesidad de cambiar el estilo página por página.

De manera que tu código usual, con estilo incluido en la misma página sería:

 

Mientras que el código de tu hoja de estilos (extensión .css) sería de la forma siguiente :
(mas todos los códigos que te ofrecemos en otros tutoriales)

Para incluir la hoja de estilo a tAu web, pon el siguiente código entre las etiquetas HEAD de todas las páginas que quieres que posea el estilo de tu hoja creadas. Recuerda que el formato del archivo es .css , por ejemplo style.css

- EXPLICACION:
1-. body {
            background-color: #222679;
            scrollbar-face-color: #787CC3;
    }

body : Aquí indicaremos el estilo que queremos para el contenido que hay entre las ETIQUETAS <body> y </body> de nuestra página html. En concreto en este ejemplo:
    background-color :  Color de fondo de la página. En caso de que quisiéramos poner una imagen como fondo de la página el código sería:

scrollbar-face-color: Un atributo que te explicaré con mayor claridad en el tutorial del color de la barra de desplazamiento.

2-. font,th,td,p : Este sería otro ejemplo del formato que queremos para las etiquetas <font>, <th>, <td> y <p>. Que como podéis ver, comparten el mismo estilo, y por ello ponemos losA nombres separados entre comas.

3- .td.rowpic :Sin embargo, lo anterior sería de una manera muy generalizada y en caso de que queramos tener, por ejemplo, alguna celda con otro estilo, se haría de esta forma. Poniendo la etiqueta y después un punto y el nombre de nuestro formato. Posteriormente para llamarlo desde nuestra web (la cual tiene que incluir el archivo en caso de no estar definido entre las etiquetas HEAD como anteriormente hemos explicado) pondremos dentro de la etiqueta correspondiente class=rowpic

4-. .mainmenu : Formato creado por nosotros, de manera que al no ser una etiqueta le añadimos el punto delante del nombre. A la hora de llamar a este formato pondremos en la zona que queramos este estilo lo siguiente: class=mainmenu dentro de la etiqueta correspondiente. Ejemplo:
 

5-. a.mainmenu:visited : En este caso, el estilo solo funciona para las etiquetas <a> (enlace) donde hay que poner class=mainmenu , en este caso estamos indicando para los enlaces YA visitados. Para mayor información entrar al tutorial de enlaces de CSS.


Webmaster: Patricia ¦ Galería: 4images 1.7.3
Página creada desde el 09.09.03
Todas las imágenes son© de sus respectivos autores (diseño© Patricia, webmaster).         Toda la información de esta página son propiedad de My Art.         Por lo que queda prohibida la copia total o parcial de esta web©.         Por favor si necesitáis algo pedirlo.