.  

 

 

.
.

23 / 03 / 2017

Usuarios conectados: 6

Cargando documento...

Buscar:

.

Este Sitio:

Principal

Dreamweaver

Fireworks

JavaScript

CSS

Sonido

Artículos

Links

E-ufemismos

Descargas

Historial

 

Mailing List:

Suscríbete a la lista de correo, No practico spamming y ofrece algunas ventajas.

Pulsa aquí para saber más y suscribirte.

 

Recomendados:

Tecnorama >CSS

 

Introducción a CSS (3)

Versión para imprimir | Translate this page

Otro sistema para definir CSS es usar clases personalizadas. La norma para una clase personalizada tiene este aspecto:

<STYLE>
.textrojo { FONT-SIZE: 12px; COLOR: red }
</STYLE>

Para aplicar este estilo a una etiqueta, simplemente tendrías que llamarlo desde la etiqeuta en la que lo vayas a aplicar. Por ejemplo, si quisiera usarlo en un encabezado y en el párrafo siguiente, escribiría:

<H1 class="textrojo">este texto sería rojo y de 12 píxeles de altura</H1>
<P class="textrojo">Y lo que fuera en este párrafo, también</P>

El navegador se saltaría el formato por defecto de estas etiquetas y aplicaría tu clase personalizada.

Pero incluso se podría conseguir no tener que declararlo en cada una de las etiquetas. Utilizando la etiqueta <SPAN>...</SPAN>, todo lo que vaya entre su apertura y su cierre tendría el estilo. El ejemplo anterior podría ser:

<SPAN class="textrojo">
<H1>este texto sería rojo y de 12 píxeles de altura</H1>
<P>Y lo que fuera en este párrafo, también</P>
</SPAN>


Vamos a añadir algo más:

<STYLE>
.enlaces { FONT-SIZE: 11px; COLOR: #003399; FONT-FAMILY: Arial;TEXT-DECORATION: none }

a:hover { COLOR: #cc3333; TEXT-DECORATION: underline }

H1 { font-family: Verdana; font-size: 16px; color: #CC0000; font-weight: bold}

H2 { font-family: Arial; font-size: 13px; font-weight: bold; color: #000099}

</SYTLE>

Aquí tenemos ya 4 clases:
- Una clase personalizada : .enlaces (o "custom class" en Dreamweaver. ¡no olvidar el punto!)
- 2 etiquetas redefinidas: H1 y H2 (en Dreamweaver: "Redefine HTML tag")
- 1 Pseudo-clase: a. hover, de la que hablaremos más adelante (y que en Dreamweaver aparece como "Use CSS Selector")

Ya se empieza a ver la verdadera fuerza de las clases: Todas las etiquetas H1 de tu sitio tendrían 16 píxeles y serían de color rojo, sin añadir nada de código en el cuerpo del documento. Conseguirías que en vez de tener que escribir:


<H1><font face="Verdana"color="#CC0000" size="2">El texto iría aquí</font></H1>

Usando CSS, quedaría en:

<H1>El texto iría aquí</H1>

Esto reduciría el tamaño de tus páginas, haría más fácil realizar cambios, y tus páginas cargarían más rápido. Si en vez de rojo quisiera que mis encabezados <H1> fueran azules, sólo tendría que modificar el archivo .css, en vez de tener que ir abriendo página por página y cambiando la etiquta <FONT>

Recuerda que cualquier etiqueta HTML puede ser redefinida. Esto significa que podrías cambiar el tamaño de tus textos en negrita (redefiniendo la etiqueta <B>). También podrías hacer que tus listas utilizaran una fuente diferente que el resto del texto simplemente redefiniendo la etiqueta <LI>. Lo que se te ocurra.

E incluso puedes definir varias etiquetas a la vez. Si quieres que todos tus encabezados sean rojos, sólo tendrías que poner:

<STYLE>
...
H1, H2, H3, H4, H5 { COLOR: #CC0000 }
...
</STYLE>

¿Comentarios? 22, de momento. Mostrando 1 ->5

1.- It's good to see someone thiinnkg it through. http://qocjex.com [url=http://uxsctmmi.com]uxsctmmi[/url] [link=http://lqtsghdge.com]lqtsghdge[/link]

2.- This was so helpful and easy! Do you have any arlcetis on rehab?

3.- A little rationality lifts the quality of the debate here. Thanks for cointibutrng! http://lviqouyro.com [url=http://zipzuhb.com]zipzuhb[/url] [link=http://xbmiwt.com]xbmiwt[/link]

4.- The ablitiy to think like that shows you're an expert

5.- Right on-htis helped me sort things right out.

« Previous | 1 - 5 | 6 - 10 | 11 - 15 | 16 - 20 | 21 - 22 | Next »

Añade tu comentario



Escribe el código de la imagen superior:

:

TECNORAMA es simplemente una página personal. No sirve ni de promoción del autor ni cosas por el estilo.
Todos los códigos, textos y tutoriales son de libre uso mientras se mencione al autor (no es mucho pedir)
Este sitio es compatible con IE6/NS6/Mozilla1.0
Para contactar, puedes enviarme un e-mail a tecnorama@hotmail.com