Hola, hoy vamos a ver las clases en css… anteriormente vimos los objetos en css. que identificabamos con un #, pero para hoy vamos a colocar un caso en particular:
tengo que hacer 5 divs que digan HOLA MUNDO en color rojo.
:O supuestamente tengo que crear 5 objetos para cada div, algo asi:
<div id=”objeto1″>HOLA MUNDO</div>
<div id=”objeto2″>HOLA MUNDO</div>
<div id=”objeto3″>HOLA MUNDO</div>
<div id=”objeto4″>HOLA MUNDO</div>
<div id=”objeto5″>HOLA MUNDO</div>
Y el codigo css seria asi:
#objeto1{
color:#f0000;
}
#objeto2{
color:#f0000;
}
#objeto3{
color:#f0000;
}
#objeto4{
color:#f0000;
}
#objeto5{
color:#f0000;
}
:O demaciado codigo, es algo que no se puede dar, recuerda que las aplicaciones tanto web como de escritorio o cualquier software, debe ser lo mas liviano posible, de hecho el programa que en menos pasos logre solucionar un problema es aquel que esta mejor programado. aun mas en aplicaciones web donde necesitamos menor codigo, entonces por eso los genios de css diseñaron las clases, son digamolo asi caracteristicas que se van a repetir, en la vida real una clase podria ser… em… COLOMBIANO, PROGRAMADOR. Entonces sigamos… en css las clases se declaran, anteponiendo un punto “.”, asi que quedaria algo asi:
.clase{
(Propiedades)
}
lo bueno de las clases es que nos evita estar declarando propiedades para cada div, entonces si son caracteristicas en comun de todos esos divs, podemos usar las clases, entonces quedaria algo asi:.clase_texto_rojo{
color:#f0000;
}
si ves… la diferencia… desde declarar en cada uno el color, pasamos a crear una sola clase, es mucho el codigo que nos ahorramos, ahora bien veamos como se le indica a un div que cargue una clase:
<div class=”clase_texto_rojo”>HOLA MUNDO</div>
<div class=”clase_texto_rojo“>HOLA MUNDO</div>
<div class=”clase_texto_rojo“>HOLA MUNDO</div>
<div class=”clase_texto_rojo“>HOLA MUNDO</div>
<div class=”clase_texto_rojo“>HOLA MUNDO</div>
Si notamos, siempre se carga con class=”nombre_de_la_clase” , class en ingles es clase.
Vess!!! es facil hacer paginas web en css, ya hoy aprendimos lo basico para la proxima seguimos con un poco mas avanzado y pa ma;ana pongo un taller jaja. bueno muchachos ya saben mi correo andreslara501(arroba)hotmail.com y me escriben o me agregan al messenger. chau!
