 |
|
|
|
|
|
Portada | Monotemáticos | Secciones | Desarrolladores | Comunidad | Servicios | Servicios profesionales | RSS | |
||
|
||||
|
|
|||
 |
|
 |
||
|
||||
Trucos avanzados con CSS
Vamos a ver una serie de técnicas con hojas de estilo, imprescindibles para utilizar esta tecnología con toda su potencia.
01/1/70 - Las
hojas de estilos son un tema largo del que se han escrito libros enteros.
Nosotros nos centramos en los temas prácticos y por ello vamos a acabar
ya con este capítulo, en unos cuantos puntos
Definir estilos utilizando clases
Las clases nos sirven para crear definiciones de estilos que se pueden utilizar repetidas veces.
Una clase se puede definir entre las etiquetas <STYLE> (en la cabecera del documento), o en un archivo externo a la página. Para definirlas utilizamos la siguiente sintaxis, un punto seguido del nombre de la clase y entre llaves los atributos de estilos deseados. De esta manera:
.nombredelaclase {atributo: valor;atributo2:valor2; ...}
Una vez tenemos una clase, podemos utilizarla en cualquier etiqueta HTML. Para ello utilizaremos el atributo class, poniéndole como valor el nombre de la clase, de esta forma:
<ETIQUETA class="nombredelaclase">
Ejemplo de la utilización de clases
|
<html> <body> <p class=letrasverdes> |
Ver el ejemplo anterior
Estilo en los enlaces
Una técnica muy habitual, que se puede realizar utilizando las hojas de estilo en cascada y no se podía en HTML, es la definición de estilos en los enlaces, quitandoles el subrayado o hacer enlaces en la misma página con distintos colores.
Para aplicar estilo a los enlaces debemos definirlos para los distintos tipos de enlaces que existen (visitados, activos...). Utilizaremos la siguiente sintaxis, en la declaración de estilos global de la página (<STYLE>) o del sitio (Definición en un archivo externo):
Enlaces normales
A:link {atributos}
Enlaces visitados
A:visited {atributos}
Enlaces activos (Los enlaces están activos en el presiso momento en que se pincha sobre ellos)
A:active {atributos}
Enlaces hover (Cuando el ratón está encima de ellos, solo funciona en ieplorer)
A:hover {atributos}
El atributo para definir enlaces sin subrayado es text-decoration:none, y para darles color es color:tu_color.
También podemos definir el estilo de cada enlace en la propia etiqueta <A>, con el atributo style. De esta manera podemos hacer que determinados enlaces de la página se vean de manera distinta
Ejemplo de estilos en enlaces
|
<html> <body> <a
href="http://dominioinexistente.nofunciona.com">Enlace
normal</a> </body> |
Ver el ejemplo anterior
URL como valor de un atributo:
Determinados atributos de estilos, como background-image necesitan una URL como valor, para indicarlas podemos definir tanto caminos relativos como absolutos. Así pues, podemos indicar la URL de la imagen de fondo de estas dos maneras:
background-image: url(fondo.gif) En caso de que la imagen esté en el mismo directorio que la página. background-image: url(http://www.desarrolloweb.com/images/fondo.gif)
Ocultar estilos en navegadores antiguos
En caso de definir dentro de la etiqueta <STYLE> unas declaraciones de estilos debemos asegurarnos que estas no se imprimirán en la página web con navegadores antiguos. Pensar en un navegador que no reconozca la etiqueta <STYLE>, pensará que corresponde con algo que no entiende y se olvidará de la etiqueta. Lo siguiente que encuentra es texto normal y hará que este se vea en la página, como con cualquier otro texto.
Para evitarlo debemos ocultar con comentarios HTML (<!-- esto es un comentario -->) todo lo que hay dentro de la etiqueta <STYLE>. Se puede ver un ejemplo de esto a continuación:
De este modo hemos terminado la primera parte del manual de CSS, que espero pueda ayudar a hacer páginas mejores y más rápidamente. Ahora el manual continua explicando conceptos sobre capas y maquetación CSS, entre otros asuntos.
Quiero recordaros que siempre es útil ver como han hecho sus páginas otros progradores de Internet. Para ver una página definida enteramente con hojas de estilos podemos visitar Web Site Album, que está incluso maquetada con CSS. También podemos visitar la dirección www.guiarte.com, que está maquetada con tablas, pero todos los estilos se aplican con css.
Para ver otros manuales, artículos y enlaces a páginas que enseñan a utilizar las hojas de estilos visitar la sección correspondiente a CSS de nuestro directorio.
+ 1 categoria relacionada
+ 1 comentario (Añadir)
+ 9 comentarios no revisados
| Autoría, licencia y acciones sobre este artículo | ||||||
|
Informe de Miguel Angel Alvarez*
Director de DesarrolloWeb.com Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright. * Para consultas técnicas utilizar la lista de correo.
|
| Los comentarios de los visitantes son para ampliar la información del artículo. Cualquiera puede participar. |
| Se muestra un comentario revisado |
<!--Realizado por Domingo Peña-->
<head>
<style type="text/css">
.imagen{background-image:url('04cwwhr.jpg');
width:477px;height:650px;
background-repeat:no-repeat
;border-color:red;
border-width:5px}
.imagen2{background-image:url('2004_03_17.jpg');
width:500px;height:800px;
background-repeat:no-repeat;border-color:red;
border-width:5px}
</style>
</head>
<body>
<form>
<input type="button" class="imagen" onmouseOver="this.className='imagen2'" style="cursor:hand" onmouseOut="this.className='imagen'">
</body>
</form>
<!--final-->
muy bueno.
 | Añadir un comentario del artículo |
| Comentarios sin revisar |
| Entre los comentarios no revisados puede haber algunos interesantes que se hayan enviado recientemente. |
 | Ver los comentarios no revisados |
| Añadir un comentario del artículo |
| Enlaces: |
| Maestrosdelweb |
Ir arriba
Lectura recomendada  Compra este libro en Agapea, la librería urgente a domicilio. |
||||||||
Tienda DesarrolloWeb
