Usando CSS – Class y ID
Ahora que ya sabes cosas básicas de CSS, te enseñare como implementarlo en un diseño. Recuerda que la idea de CSS es hacer el código HTML mas limpio, y corto. Para eso usaremos dos cosas llamadas Clase y Identificador (Class y ID).
Class
Este es un selector que selecciona grupos y les aplica algún estilo que tu ayas definido. Para declarar una clase en CSS usas el punto y después el nombre.
.miclase { color:#000;background-color:#FFF; }
Para asignarlo necesitas usar el atributo class y el valor miclase.
<h2 class="miclase">Mi Estilo</h2> <p class="miclase">Este es mi estilo!</p>
ID
Identificadores trabajan de igual manera y lo único que cambia es la forma de declarar. En vez de usar un punto, usas un símbolo de numero.
#miID { font-weight:800; }
Si los dos trabajan de la misma manera porque hay dos? En acuerdo con los estándares de W3C, los ID solo se deben de usar un vez en el documento. Y claro tiene razón ya que ID representa Identificación y seria lógico que el ID sea único. Esto se usa en otras áreas de HTML como para enlazar internamente en una pagina usando la etiqueta <a> (en el siguiente ejemplo miraras como trabaja).
Ejemplo
Copia el siguiente código (o escribe lo para que se te quede) y salva lo con extensión .html usando Notepad o tu editor de texto favorito.
#encabezado {background:#333;color:#FFF;font-size:24px;font-weight:800;padding:5px;} .caja {background:#999;margin:5px;padding:5px;} .titulo {font-size:18px;font-weight:800;color:#036;border-bottom:1px solid #036;} .contenido {color:#333;}
<html> <head> <title>Class y ID</title> <style type="text/css"> /* Incluye aquí la caja de arriba */ </style> </head> <body> <div id="encabezado">Class y ID</div> <div class="caja"> <div class="titulo">Hola</div> <div class="contenido">Bienvenidos a este pedazo de la Web.</div> </div> <div class="caja"> <div class="titulo">Class</div> <div class="contenido">Clases se pueden usar multiples veces.</div> </div> <div class="caja"> <div class="titulo">ID</div> <div class="contenido">Identificadores (ID) solo una vez.</div> </div> <a href="#encabezado">Ir arriba</a> </body> </html>
Si te das cuenta en el código HTML se mira mas limpio y nos ahorra estar poniendo el estilo a cada caja. Ademas, incluí un enlace <a> para que observes como apunto a el encabezado, por ejemplo si el documento es largo, con un enlace como ese pueden regresar arriba rápidamente. Es por eso que los ID tiene que ser únicos.
Finalizando
Ahora creo que ya tienes lo básico para armar un estilo y aplicárselo a una pagina de HTML. Si todavía no te quedo claro, vuelve a leer el articulo.
Creo que ahora habrá que enseñar que es lo que CSS posee!
-
dateenero 12, 2012time11:33 AM| #1HTML 5 » Domina La Web
