Utilización del CSS

miércoles, 25 de noviembre de 2009

¿Como se utiliza el CSS?

El CSS se utiliza haciendo un llamado a un documento con extensión .css que el que se encarga de todo. Dentro del CSS uno crea Clases, IDs y Caracteristicas a las etiquetas lógicas.

Pero ¿Para que sirve eso?
Sirve para dar los estilos necesarios a cada parte del sitio. Por ejemplo queremos poner un H1 en el sitio, osea, un encabezado que es el título principal del sitio.
Nosotros podemos poner el H1 asi dentro del sitio, pero este no contiene un estilo o simplemente no va con el estilo general que tiene nuestra web. Entonces necesitamos asignarle un estilo a este. Eso se hace a traves del CSS. En el CSS nosotros asignamos el tamaño, tipo de fuente, color, decoracion etc.
El CSS para etiquetas logicas se cita la siguiente manera:
h1{
atributo:caracteristicas;
}

Con eso en el CSS nosotros decimos que TODOS los H1 del sitio van a responder a esas caracteristicas.
Luego existen los ID o etiquetas que damos a ciertas partes de nuestro sitio. En xHTML ya se estila a nombrar cada parte del sitio, dandole un nombre. Por ejemplo, la seccion que conteneria la cabecera del sitio le llamamos: cabecera.

¿Para que nos sirve esto?
Primero que nada, para que vos desarrollador y/o diseñador entiendan donde esta que cosa. Ya que si buscamos una etiqueta con el nombre "pie", significaria que es el pie del sitio.

¿Pero como ponemos el ID en un CSS y en el HTML?
En el html llamamos de esta forma

< id="NombreDeID">Contenido
< / div >

Listo, ahora nuestro HTML tiene el nombre que queremos, ¿pero como le ponemos estilo? Con el CSS haciendo el "llamado" a ese ID.
#ElNombreDelID{
atributo:caracteristicas;
}

A los ID dentro del CSS los llamamos con "#" + el nombre del ID. (como se ve en el ejemplo).
Ahora, tenemos tambien dentro de los sitios las Clases.
¿Que son las clases? Practicamente lo mismo que los ID. Funcionan de la misma forma, pero no se los llaman igual:
.Clase{
}

Todas las clases se llaman con un punto al inicio y este se declara en el HTML de esta forma:
< class = "Clase"> < / div>

Pero si ambos son practimente la misma cosa: ¿Cual es la diferencia?
Los IDs, asi como en programacion o base de datos, son unicos y no se tiene que duplicar dentro del sitio. Las clases pueden repetirse cuantas veces sea necesario. Ejemplo

< id ="contenido">
< class = "columnas">< / div > < class = "columnas">< / div > < class = "columnas">< / div >
< / div >

Ahora, ¿que pasa si es que repetimos IDs dentro de un sitio?
Nada. Absolutamente nada.
Entonces ¿para que demonios se usan los IDs únicos si no tienen importancia en como se vera el sitio?
Primero que nada es para el entendimiento del sitio, o sea, para el desarrollador. Esto facilita mucho la vista del codigo y sus ajustes.
Segundo: Es semánticamente correcto. Hoy en días los sitios son "semanticos", osea, "leibles, entendibles" y correctamente desarrollados sobre los estandares webs que pone la W3C
Tercero: Esto es más que utilizado al usar lenguajes mas complejos como PHP, ASP, Javascritp entre otros.

Existe una caracteristica mas dentro de los estilos que se llaman selectores, que es la forma de juntar todo lo otro citado arriba, haciendo una web mas compleja. Pero eso no tocaremos en este post.

¿Porque utilizar CSS en vez de los viejos metodos?
Si sos el creador del sitio, creeme que esto apela a tu sanidad mental. Nada más.

2 COMENTARIOS:

Anónimo dijo...

Your blog keeps getting better and better! Your older articles are not as good as newer ones you have a lot more creativity and originality now keep it up!

Anónimo dijo...

miley cyrus nude [url=http://www.ipetitions.com/petition/mileycyrus]miley cyrus nude[/url] paris hilton nude [url=http://www.ipetitions.com/petition/parishilt]paris hilton nude[/url] kim kardashian nude [url=http://www.ipetitions.com/petition/kimkardashian45]kim kardashian nude[/url] kim kardashian nude [url=http://www.ipetitions.com/petition/celebst]kim kardashian nude[/url]

javascript:void(0) Borrar cambios