Programacion y Diseño Web

Hemos migrado nuestro sitio web espera y en seguida te llevaremos al Nuevo Sitio!

SCRIPT BC

Si no te direcciona en 5 seg da clic aquí

martes, 9 de julio de 2013

Referencia con "id" y "class" - CSS3 Lección 3


Referencia con "id" y "class

Almacenar todos nuestros estilos en un archivo externo e insertar este archivo dentro de cada documento que lo necesite es muy conveniente, sin embargo no podremos hacerlo sin buenos mecanismos que nos ayuden a establecer una específica relación entre estos estilos y los elementos del documento que van a ser afectados. Cuando hablábamos sobre cómo incluir estilos en el documento, mostramos una de las técnicas utilizadas a menudo en CSS para referenciar elementos HTML.

Existen varios métodos para seleccionar cuáles elementos HTML serán afectados por las reglas CSS:

  • Referencia por la palabra clave del elemento
  • Referencia por el atributo id
  • Referencia por el atributo class
Mas tarde veremos que hay mucha flexibilidad para referencia elementos con su respecto CSS.

Referencia por Palabra Clave del Elemento


Al declarar las reglas CSS utilizando la palabra clave del elemento afectamos cada

elemento de la misma clase en el documento. Por ejemplo, la siguiente regla cambiará los

estilos de todos los elementos <p>.
p { font-size: 20px }

Todos los textos envueltos en etiquetas <p> tendrán el tamaño de 20 pixeles.

Por supuesto, lo mismo funcionará para cualquier otro elemento HTML. Si especificamos la palabra clave span en lugar de p, por ejemplo, cada texto entre etiquetas tendrá un tamaño de 20 pixeles.


¿Pero qué ocurre si solo necesitamos referenciar una etiqueta específica?, ¿Debemos usar nuevamente el atributo style dentro de esta etiqueta? La respuesta es No.
Como aprendimos anteriormente, el método de "Estilos en Línea" (usando el atributo style dentro de etiquetas HTML) es una técnica en desuso y debería ser evitada. Para seleccionar un elemento HTML específico desde las reglas de nuestro archivo CSS, podemos usar dos atributos diferentes: id y class.


Referenciando con el atributo id

El atributo id es como un nombre que identifica al elemento. Esto significa que el valor de este atributo no puede ser duplicado. Este nombre debe ser único en todo el documento. Para referenciar un elemento en particular usando el atributo id desde nuestro archivo CSS la regla debe ser declarada con el símbolo # al frente del valor que usamos para identificar el elemento:
#texto1 { font-size: 20px }
El siguiente estilo está en un archivo css externo, o en la cabecera del documento dentro de las etiquetas <head>.
La especificación del "id" en el documento html sería:
<!DOCTYPE html>
<html lang="es">
      <head>
           <title>Este texto es el t&iacute;tulo del documento</title>
           <link rel="stylesheet" href="misestilos.css">
      </head>
      <body>
           <p id="texto1">Mi texto</p>
      </body>
</html>
El resultado de este procedimiento es que cada vez que hacemos una referencia usando el identificador texto1 en nuestro archivo CSS, el elemento con ese valor de id será modificado, pero el resto de los elementos, o cualquier otro elemento en el mismo documento, no serán afectados. Esta es una forma extremadamente específica de referenciar un elemento y es normalmente utilizada para elementos más generales, como etiquetas estructurales. El atributo id y su especificidad es de hecho más apropiado para referencias en Javascript


Referenciando con el atributo class

La mayoría del tiempo, en lugar de utilizar el atributo id para propósitos de estilos es mejor utilizar class. Este atributo es más flexible y puede ser asignado a cada elemento HTML en el documento que comparte un diseño similar:
.texto1 { font-size: 20px }
Para trabajar con el atributo class, debemos declarar la regla CSS con un punto antes del nombre. La ventaja de este método es que insertar el atributo class con el valor texto1 será suficiente para asignar estos estilos a cualquier elemento que queramos
<!DOCTYPE html>
<html lang="es">
      <head>
           <title>Este texto es el título del documento</title>
           <link rel="stylesheet" href="misestilos.css">
      </head>
      <body>
           <p class="texto1">Mi texto</p>
           <p class="texto1">Mi texto</p>
           <p>Mi texto</p>
      </body>
</html>
Los elementos en las primeras dos líneas dentro del cuerpo del código en el código anterior, tienen el atributo class con el valor texto1. Como dijimos previamente, la misma regla puede ser aplicada a diferentes elementos en el mismo documento. Por lo tanto, estos dos primeros elementos comparten la misma regla el último elemento conserva los estilos por defecto otorgados por el navegador.

Existen otras formas mas complejas para referenciar estilos de CSS a elementos de HTML, las cuales veremos mas adelante.

Por el momento, por mi parte es todo.
Recuerden Compartir y Darle 
Hasta la Próxima


Con la tecnología de Blogger.