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.

Introducción CSS

Inicialmente la Web entre los años 1990 al 1993 en las primeras versiones se utilizaban HTML, su lenguaje era fácil de aprender, contaba con un lenguaje de marcado (tags) reducido así como también en su estructura; todo esto cambió al haber un incipiente surgimiento de los primeros navegadores ya que estos fueron capaces de representar varios recursos gráficos que se añadían a la información redactada.

En ese lapso el número de sitios web tuvo un mayor crecimiento y con el mismo implicaba que también creciera el número de tags, ya que los sitios tenían que ir mejorando su atractivo visual, esto llevó a que HTML tuviera que incluir nuevos tags para conseguir diferentes efectos visuales.

El CSS
(son las siglas (Cascade Style Sheet) o Hoja de Estilo en Cascada)
surgió cuando la W3C (World Wide Web Consortium) desarrollo la idea de separar la estructura de un sitio, del documento. En el HTML4 y común, la idea se basaba en hacer todo en un mismo documento. O sea, todo lo que hacemos es cargar el estilo del sitio en un solo documento haciendo el trabajo muy difícil de hacer, modificar y darle soporte.

Imaginemos que tenemos un sitio común, donde tenemos un menú con todas las secciones del sitio. Ahora pensemos que el sitio es grande, y ese menú se repite en varias páginas. Ahora decidís que no te gusta mas que ese menú sea azul y lo queres hacer rojo. Normalmente lo cambiaríamos uno a uno, lo que sería ingresar a cada documento y cambiarlos, esto nos daría mucho trabajo al intentar cambiar algo tan simple. Entonces es ahi donde nace el CSS, para subsanar esos errores ya facilitarnos el trabajo en el diseño.

Fuentes:

  • http://www.manualdecss.com/manualcss/introduccion-css.html
  • http://www.webestilo.com/css/css00.phtml
  • http://htmlhelp.com/es/reference/css/font/

Ahora sigueme al Rincón del Geek

sábado, 3 de enero de 2009


Sigueme en El Rincon Del Geek Este blog ya no lo uso más
Now follow me at El Rincon Del Geek I don't use this blog anymore..

javascript:void(0) Borrar cambios