10 mayo 2010 in XHTML/CSS by dacho

Bueno continuo con el curso de HTML y CSS, esta vez especificando mas directamente y deteniendonos en el CSS. En este Articulo veremos básicamente la Agrupación de elementos, el identificador Id, el identificador Class y los Contextos en una hoja de estilos. Conceptos que deben estar claros si queremos que nuestro CSS este completamente limpio y sea realmente facil de leer.

Agrupacion de elementos

Bueno la agrupacion de elementos nos permite darle las mismas propiedades a muchos elementos sin tener que escribirlas muchas veces. Consiste básicamente en llamar a los elementos que corresponden separados por coma (,) y luego colocar los elementos. Como siempre aqui un ejemplo para aclarar:

El HTML

<h1>Estoy aprendiendo a hacer paginas webs</h1>
<h2>Ahora estamos viendo las propiedades de CSS</h2>

Nuestro CSS

 
h1, h2{ color: red; margin: 10px 0 0 0; font-size: 18px; }

Esto basicamente lo que hace es darle color rojo, margen 10px de alto y 0 de margen izquierdo, 0 de margen inferior y 0 de margen derecho y el tamaño de texto en 18px a el elemento h1 y al elemento h2, es una excelente forma de ahorrar codigo y dejar mas claro todo. La forma sin agrupar seria:

 
h1{ color: red; margin: 10px 0 0 0; font-size: 18px; } 
h2{ color: red; margin: 10px 0 0 0; font-size: 18px; }

Lo cual es bastante poco productivo y solo nos sirve para perder tiempo!

El identificador ID

El identificador ID es un identificador unico que se le puede asignar a un elemento. Es decir si asignamos un id a un elemento este debe ser unico en el documento HTML. La forma de asignar un elemento Id a un elemento es escribir id=”nombre_de_id” dentro del tag html y luego la forma de instanciarlo en el CSS es por medio de un # (numeral o almohadilla). Veamos un ejemplo:

El HTML

<h1>Estoy aprendiendo a hacer paginas webs</h1>
<h2>Ahora estamos viendo las propiedades de CSS</h2>
<h2 id="verde">Ya estoy terminando :)</h2>

Ahora utilizando los elementos anteriores podemos darle un formato especifico al id verde, esto lo podemos hacer de la siguiente manera:

 
h1, h2{ color: red; margin: 10px 0 0 0; font-size: 18px; }
h2#verde{ color: verde; font-size:22px; }

Bueno, ¿que logramos con esto? pues logramos que el h2 con id verde se coloque en color verde y el texto tenga un tamaño de 22 px. Por otro lado hereda el margin de 10px en la parte superior, 0px en los otros lados. Si te preguntas porque el tamaño es de 22px y no de 18px como lo indicamos arriba, hay dos motivos: Uno es que si colocamos dos propiedades iguales, con distintos valores para el mismo elemento prevalecerá la que esta en ultimo lugar y por otra parte, en este caso al instanciar un id, si estaría al revés funcionaria del mismo modo, porque el id le asigna un valor mas alto a la instrucción por lo que tiene preferencia!

El identificador Class

Bueno el identificador ID es unico para todo el documento de HTML, es decir que si colocamos el mismo id para dos elementos diferentes estamos violando las normas que nos impone la W3C. ¿Pero como coloco un mismo identificador a muchos elementos? Bueno para eso mismo fue creado el Class. El class es un identificador que puede ser utilizado por varios elementos. Para indicar que un elemento tiene el identificador Class colocamos Class=”nombre-de-class” dentro del elemento HTML y lo instanciamos en el CSS con un . (punto). Veamos un ejemplo:

<h1 class="azul">Estoy aprendiendo a hacer paginas webs</h1>
<h2 class="azul">Ahora estamos viendo las propiedades de CSS</h2>
<h2 id="verde">Ya estoy terminando :)</h2>

Nuestro CSS puede ser por ejemplo:

 
h1, h2{ color: red; margin: 10px 0 0 0; font-size: 18px; }
h2#verde{ color: verde; font-size:22px; }
h1.azul, h2.azul{ color: blue; }

Esto lo que hace es sobreescribir el color de los elementos que tienen el class azul, y asignarles el color azul por medio de la propiedad color. Ademas se pueden combinar elementos class y id para lograr efectos compartidos. Por ejemplo:

<h1 id="principal" class="verde">Estoy aprendiendo a hacer paginas webs</h1>
<p>Me gusta el tutorial de HTML ;) </p>
<h2 class="rojo">Ahora estamos viendo las propiedades de CSS</h2>
<p>El CSS me parece facil pero son muchas cosas que hay que acordarse!</p>
<h2 class="verde">Ya estoy terminando :)</h2>
<p>Aprender todo esto lleva tiempo y mas que tiempo lleva mucha practica</p>

Ahora queremos asignar los colores por medio del class rojo y verde, ademas que el titulo principal sea mas grande. Lo podemos hacer asi:

/*los tamaños de texto*/
h1,h2{ font-size: 14px; }
h1#principal{ font-size: 18px; }
p{ font-size: 12px; }
 
/*ponemos los colores*/
.verde{ color: green }
.rojo{ color: red; }

Bueno, estos elementos combinados con el que viene luego de este párrafo nos dan una gran gama de formas de controlar los elementos del HTML por medio de CSS. Es recomendable de que busquen una buena forma de organizarse y luego de eso seguirla, ya que mientras mas reglas tengas mas facil sera encontrar los elementos cuando debemos modificarlos!

Contextos en CSS

Bueno el contexto es básicamente dar propiedades a los elementos, instanciando y diferenciándolo por medio de los elementos padres dentro del HTML. Esto sin duda es mas facil de explicar en un ejemplo!

<div>
   <p>Soy un p dentro de un div y por eso soy blanco</p>
   <div>
      <p>Soy un dentro de un Div Div y por eso soy rojo</p>
   </div>
</div>

Nuestro CSS sera:

div{ background: black;  padding: 15px; }
div div{ background: white;  padding: 15px; }
 
div p{ color: white;  }
div div p{ color: red;  }

Como pueden ver el contexto de elemento es otra forma de instanciar elementos HTML.

Es importante que se comprenda muy bien todas las formas de instanciar elementos, de esta forma podremos elegir cual es la forma que nos es mas facil de seguir, y la buena combinacion de todas las herramientas anteriores nos permite ahorrarnos de escribir mucho codigo, y tambien ganar mucho tiempo a la hora de cambiar algo en la pagina web!

Entradas Relacionadas: