viernes, 12 de octubre de 2012

Selectores En CSS

Bueno hemos comenzado un tema nuevo en la asignatura!! El tema que vamos a ir viendo es de hojas de estilo (css). Tras una explicación introductoria de David (el profesor) el otro día me quede con una duda que el mismo me resolvió y que ahora posteo para los que tengan dicha duda tambien.
 Resulta que llevo un tiempo manejando hojas de estilo para varias paginas web y modificandolas a mi antojo, pero todo esto lo hacia sin saber diferenciar bien los selectores yo manejaba bien los selectores de tipo o de etiqueta que se explicaran mas adelante pero mi gran duda era... ¿Cuando usar selectores id o selectores de clase?
La respuesta es sencilla: El selector id se utiliza cuando queremos aplicar un estilo a un solo elemento de la pagina. Este selector permite seleccionar un elemento a través del valor de su atributo id. El valor de dicho atributo no puede repetirse en dos elementos diferentes de una misma pagina.
 Por otro lado los selectores de clase también se aplican a un elemento de la pagina pero estos se pueden usar varias veces en la misma pagina. Se usan simplemente poniendo dentro del elemento el atributo de la clase.

Ejemplos:
*Selectores de Id:
  Primero definimos el código css del selector:
   #destacado{ color: red; }

   Después aplicamos el selector a la etiqueta html deseada
   <p> Párrafo 1</p>
   <p> Párrafo 2 </p>
   <p id="destacado"> Párrafo 3</p>


*Selectores de clase:
  Para definir un selector de clase creamos en el archivo css una regla con los estilos que se aplicaran al elemento:
   .destacado{ color: red; }
En este caso en vez de llevar # delante del nombre del selecto se utilizara un punto.
 Este selector se interpretara en la pagina como cualquier etiqueta que lleve un atributo class que se llame destacado recibira el estilo de dicho selector: 
   <p> Párrafo 1</p>
   <p> Párrafo 2 </p>
   <p class="destacado"> Párrafo 3</p>


Bueno espero que os haya quedado un poco clara la diferencia entre estos dos selectores. En el proximos post hablare de mas selectores y mas trucos para css. Saludos!!!!


No hay comentarios:

Publicar un comentario