Practica 2 de CSS
Bueno, continuaremos con los ejemplos de CSS … ya era tiempo ¬¬ tenias q aparecer…
En esta ocasión, veremos sobre:
*Selectores
*Clases Especiales o Pseudo-Clases
O_O wooow 
-Selectores
Ya habiendo explicado sobre “Las Clases e Identificadores” podemos usar la definición de clases para explicar los selectores, en el caso de las clases teniamos que podiamos definirlas como “.<nombre_clase>“ de forma generica para cualquier etiqueta, bien ahora podemos hacer clases distinta pero para una misma etiqueta etiqueta lo que se come como que? ¬¬ es decir:
Una clase generica *.clase o .clase es aplicable a todas aquellas etiquetas donde se les invoque de la forma <etiqueta class=”clase”>
Una clase especifica seria aquella que se define <etiqueta>.<clase> y solo se le podria invocar en las etiquetas para la q se definio, siempre usando <etiqueta class=”clase”>
Recordemos q a una etique le podemos colocar estilo mediante <etiqueta> {<definicion de estilo>} pero esto se aplicaria todo el documento, y si queremos colocarle estilo diferentes en ciertas regiones podemos aplicar las clases, pero si siempre se usara el mismo formato, seria muy repetitivo estar invocando con el parametro class=”<nombre>”, es en este caso donde se hace uso de los selectores tanto solo para decir eso? es para que entiendas :p
Bien, suponemos q tenemos una la etiqueta de parrafo (p) la cual en el documento queremos que sea un texto azul, azul? como mi color y nombre? ¬¬ … continuando, suponemos que tendremos muchas tablas, y queremos que el texto en ellas sean de color verde, pero no queremos invocar la clase por cada tabla, entonces hacemos lo siguiente:
<html>
<head>
<title>Ejemplo N°1 - Selectores</title>
<style>
p { color:blue; /*El texto sera azul*/
}
table p { color:green; /*El texto sera verde en tablas*/
}
body {background:grey;}
</style>
</head>
<body>
<p>Texto linea 1</p>
<table border="1">
<tr>
<td><p>Tabla N° 1</p></td>
</tr>
<tr>
<td><p>Celda 1 - con etiqueta p</p></td>
<td>Celda 2 - sin etiqueta p</td>
</tr>
</table>
</body>
</html>
Bien, no es la maravilla de página, pero espero les sirva de ejemplo ^_^ Wooow… a probarlo
-Clases Especiales o Pseudo-clases
Ahora veremos las clases especiales, son clases talento? no ¬¬, son clases para algunos elementos que por su naturaleza tienen un comportamiento especial, ejemplo de ello, los hipervínculos (la etiqueta “a”) la etiqueta A tiene comportamiento? Si, por ejemplo, pueden notar que cuando no han dado click en un hipervínvulo o enlace, este por defecto es azul y cuando ya lo han visitado es de color violeta, mmmm si es cierto
Bien es por que para la etiqueta <a> estan los comportamientos de:
*Link: Formato del enlace cuando es “No Visitado”
*Active: Formato del enlace cuando es el Activo (Sobre el que se ha hecho clic) pero es notado cuando se usan frame, por lo general no se logra percibir.
*Visited: Formato del enlace “Visitado”
*Hover: Formato del enlace cuando el ráton está situado sobre el enlace (esto es parte de CSS, algunos navegadores en sus versiones antiguas no lo soportan pero si usan Firefox o Iceweasel actualizado si lo soportan ^_^)
Para cada uno de estos comportamientos, llamados tambien “modificadores”, podemos definir un estilo, o para cualquier otra etiqueta que posea modificadores:
<etiqueta>:<modificador> {estilo css…}
O_O y eso como se come? ok, espera, lo veremos con un ejemplo. wiiiiiiiii \o/
Suponemos que el enlace se comporte de la siguiente forma:
-No Visitado (Link) sea de color verde y un tamaño de letra 15, sin subrayado
-Activo (Active) sea de color rojo y tamaño de letra 15, texto tachado
-Visitado (Visited) sea de color gris y tamaño de letra 8, texto tachado
-Al pasarle el mouse (Hover) cambie a color cyan y tamaño de letra 25, texto subrayado
Bien creemos nuestro codigo HTML con estilo
<html>
<head>
<title>Ejemplo N°2 - Clases Especiales</title>
<style>
a:link {
color:orange;
font-size:15pt;
decoration:none; /*quitamos la linea del enlace*/
}
a:active {
color:orange;
font-size:15pt;
text-decoration:line-through; /*linea tachando*/
}
a:visited {
color:grey;
font-size:8pt;
text-decoration:line-through; /*linea tachando*/
}
a:hover {
color:cyan;
font-size:25pt;
text-decoration:underline; /*Linea abajo*/
}
</style>
</head>
<body>
<p>Este es un parrafo normal<p>
<a href="#">Este es un enlace</a>
</body>
</html>
Con esto tendrian su segundo ejemplo, pueden hacer mezclas con las clases-especiales y los selectores, eso se les dejo ya a ustedes ^_^ Wooow, ok lo copiare y lo probare ^_^ y no te pierdas… jejeje lo intentare ^_^
/**/
Diciembre 2, 2009 a 9:36 am
¡ESooo! no te perdas ^^
Saludos niño!