Clases en css

Css
Hola, hoy vamos a ver las clases en css… anteriormente vimos los objetos en css. que identificábamos 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 así:

 <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 así:


#objeto1{
       color:#f0000;
 }
 #objeto2{
       color:#f0000;
 }
 #objeto3{
      color:#f0000;
 }
 #objeto4{
        color:#f0000;
 }
 #objeto5{
        color:#f0000;
 }

:O demasiado código, 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 código, entonces por eso los genios de css diseñaron las clases, son digámolo así características que se van a repetir, en la vida real una clase podría ser… em… COLOMBIANO, PROGRAMADOR. Entonces sigamos… en css las clases se declaran, anteponiendo un punto “.”, así que quedaría algo así:


.clase{
        (Propiedades)
 }

lo bueno de las clases es que nos evita estar declarando propiedades para cada div, entonces si son características en común de todos esos divs, podemos usar las clases, entonces quedaría algo así:

 .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 código 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 fácil hacer paginas web en css, ya hoy aprendimos lo básico para la próxima seguimos con un poco mas avanzado. bueno muchachos ya saben mi correo andreslara501(arroba)hotmail.com y me escriben o me agregan al messenger. chau!

About these ads
Acerca de

Programador, usuario Linux e hincha de Millonarios de Colombia

Tagged with: , , , , , , , , , , , , ,
Publicado en Css para principiantes, General, manuales, webmaster
4 comments on “Clases en css
  1. l9op0ñp0 dice:

    ^¨-p´-`ç_Ç*´ç-..lomjun .ñ -loloñ.

  2. l9op0ñp0 dice:

    op0obujhbijnkimikuujnhki

  3. Gabriel dice:

    .propiedad{background-color:red}
    input{border-style:none}

    Como se podria combinar en ese caso .propiedad con input en una sola linea?

    Gracias

  4. Gabriel dice:

    “..demaciado codigo, es algo que no se puede dar, recuerda que las aplicaciones tanto web…” como vas a escribir demaciado con “C” y encima dices que estas obsesionado con temas de ortografía? Eres un principiante… mediocre…

Deja un comentario

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

Sígueme en Twitter
Categorías
Flickr Photos
¡Apareció Linux!

Mirando de lado

Café

Más fotos
Seguir

Recibe cada nueva publicación en tu buzón de correo electrónico.

Únete a otros 4.032 seguidores

%d personas les gusta esto: