- Desde
- 4 Feb 2010
- Mensajes
- 706
Por idea del proyecto vBSchools mencionado por Andres Durán hace un tiempo atrás, me gustaría comenzar con un pequeño curso de CSS, en el cuál, es la idea, vayamos aprendiendo juntos. Para los que estén interesados vayamos comentando en el tema.
Este primer tema es más de lectura que practico, una introducción, pero más adelante la idea es ir indagando un poco más en el tema y llevándolo a la practica.
NOTA: CSS es uno de los lenguajes más simples de aprender junto con HTML, por eso deseo comenzar con el, aparte que es muy usado en vbulletin para modificar nuestros skins.
¿Que es CSS?
El CSS es un lenguaje que se utiliza para definir y controlar el aspecto de nuestro sitio, esto mediante hojas de estilo. Es complementario con el HTML/XHTML con la ventaja que nos proporciona más simplicidad al crear una pagina. Imagínense lo tedioso que debe ser crear cada pagina de contenido con HTML y para cada texto, titulo, etc... definir los colores, tamaño y propiedades.
Soporte de los Navegadores
Encontré esta tabla en internet de fácil comprensión sobre como soportan los navegadores, más usados, el CSS.
Según lo que he averiguado, en cuanto a CSS, los más desarrollados son el safari y Opera, aún así Firefox los esta alcanzando a pasos agigantados si es que no esta ya a su nivel o sobre (Firefox Rules! xD). Mientras que Internet Explorer es el más vago y sus versiones anteriores a IE 8 carecen de muchas opciones y contienen muchos bugs.
Información más avanzada y detallada: http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(Cascading_Style_Sheets)
Como funciona CSS: Básico
Ahora entramos a ver el funcionamiento más básico del CSS. Reiterando lo antes dicho el CSS es una opción realmente buena para definir el aspecto en el HTML, por ejemplo un codigo HTML sin CSS sería:
Como se puede ver para cada texto se definió mediante la etiqueta font las características propias. En este ejemplo son solo 2 font, pero imaginemos que tenemos un sitio con 50 lineas de texto y 100 paginas distintas... son 500 etiquetas font, ¿ y si queremos modificar el estilo del sitio? Esto se evita con el CSS, que más adelante veremos como crear hojas de estilo y aplicarse a todo el diseño de nuestro sitio.
Ahora el mismo ejemplo pero con CSS, utilizando el style:
Como podemos ver en el style, hemos definido para todas las etiquetas <h1> y <p> que usemos en nuestra pagina unos valores de estilo prederminados, la utilidad es clara. No deseo extenderme más en este punto.
Incluyendo el CSS en nuestros documentos
Para esto existen 3 formas:
1.- En los elementos: Esta es la menos usada y útil, ya que es prácticamente lo mismo que agregar etiquetas font con el estilo de cada frase:
Pero sirve para darle estilos específicos a frases/palabras únicas, osea que no se volverá a usar el mismo estilo.
2.- En el documento HTML: Se incluye la etiqueta style en un lugar del documento HTML, es usada para definir pocos valores de estilo en un mismo documento, ejemplo:
Como pueden observar en "style" definimos las propiedades del texto p para luego hacer un llamado con la respectiva etiqueta (<p>). La etiqueta <style></style> suele colocarse en entre <head></head>.
3.- CSS Archivo Externo: Esta es la más util y usada, sobre todo en paginas donde se repite el formato en varias paginas. Aca los estilos se incluyen en un archivo aparte con terminación .css , al cual luego hacemos la llamada en el documento mediante la etiqueta "link":
En la llamada al CSS antes mencionada solo varían los atributos href y media, ya que los otros son valores universales y que siempre se usan.
En tanto nuestro archivo CSS tendría la siguiente estructura:
Donde definimos la etiqueta <p>, ejemplo usando el CSS antes definido:
Estructura del CSS
Queda claro no hay mucho que explicar...
Agregar Comentarios
Al igual que otros lenguajes de programación web, el CSS nos permite añadir comentarios antes de definir nuestro estilo personalizado, estos son agregados por cada uno como información, que el navegador ignora, y nos permite recordar de que va el estilo agregado:
No confundir con los comentarios en HTML:
Este primer tema es más de lectura que practico, una introducción, pero más adelante la idea es ir indagando un poco más en el tema y llevándolo a la practica.
NOTA: CSS es uno de los lenguajes más simples de aprender junto con HTML, por eso deseo comenzar con el, aparte que es muy usado en vbulletin para modificar nuestros skins.
¿Que es CSS?
El CSS es un lenguaje que se utiliza para definir y controlar el aspecto de nuestro sitio, esto mediante hojas de estilo. Es complementario con el HTML/XHTML con la ventaja que nos proporciona más simplicidad al crear una pagina. Imagínense lo tedioso que debe ser crear cada pagina de contenido con HTML y para cada texto, titulo, etc... definir los colores, tamaño y propiedades.
Soporte de los Navegadores
Encontré esta tabla en internet de fácil comprensión sobre como soportan los navegadores, más usados, el CSS.
Según lo que he averiguado, en cuanto a CSS, los más desarrollados son el safari y Opera, aún así Firefox los esta alcanzando a pasos agigantados si es que no esta ya a su nivel o sobre (Firefox Rules! xD). Mientras que Internet Explorer es el más vago y sus versiones anteriores a IE 8 carecen de muchas opciones y contienen muchos bugs.
Información más avanzada y detallada: http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(Cascading_Style_Sheets)
Como funciona CSS: Básico
Ahora entramos a ver el funcionamiento más básico del CSS. Reiterando lo antes dicho el CSS es una opción realmente buena para definir el aspecto en el HTML, por ejemplo un codigo HTML sin CSS sería:
PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>vBHispano</title>
</head>
<body>
<h1><font color="red" face="Arial" size="5">Sin CSS es mucho trabajo</font></h1>
<p><font color="gray" face="Verdana" size="2">Ejemplo!</font></p>
</body>
</html>Como se puede ver para cada texto se definió mediante la etiqueta font las características propias. En este ejemplo son solo 2 font, pero imaginemos que tenemos un sitio con 50 lineas de texto y 100 paginas distintas... son 500 etiquetas font, ¿ y si queremos modificar el estilo del sitio? Esto se evita con el CSS, que más adelante veremos como crear hojas de estilo y aplicarse a todo el diseño de nuestro sitio.
Ahora el mismo ejemplo pero con CSS, utilizando el style:
PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>vBHispano</title>
<style type="text/css">
h1 { color: red; font-family: Arial; font-size: large; }
p { color: gray; font-family: Verdana; font-size: medium; }
</style>
</head>
<body>
<h1>Sin CSS es mucho trabajo</h1>
<p>Ejemplo!</p>
</body>
</html>Como podemos ver en el style, hemos definido para todas las etiquetas <h1> y <p> que usemos en nuestra pagina unos valores de estilo prederminados, la utilidad es clara. No deseo extenderme más en este punto.
Incluyendo el CSS en nuestros documentos
Para esto existen 3 formas:
1.- En los elementos: Esta es la menos usada y útil, ya que es prácticamente lo mismo que agregar etiquetas font con el estilo de cada frase:
PHP:
<p style="color: black; font-family: Verdana;">vBHispano.</p>Pero sirve para darle estilos específicos a frases/palabras únicas, osea que no se volverá a usar el mismo estilo.
2.- En el documento HTML: Se incluye la etiqueta style en un lugar del documento HTML, es usada para definir pocos valores de estilo en un mismo documento, ejemplo:
PHP:
<style type="text/css">
p { color: black; font-family: Verdana; }
</style>
<p>vBHispano</p>Como pueden observar en "style" definimos las propiedades del texto p para luego hacer un llamado con la respectiva etiqueta (<p>). La etiqueta <style></style> suele colocarse en entre <head></head>.
3.- CSS Archivo Externo: Esta es la más util y usada, sobre todo en paginas donde se repite el formato en varias paginas. Aca los estilos se incluyen en un archivo aparte con terminación .css , al cual luego hacemos la llamada en el documento mediante la etiqueta "link":
PHP:
<link rel="stylesheet" type="text/css" href="/css/estilos.css" media="screen" />En la llamada al CSS antes mencionada solo varían los atributos href y media, ya que los otros son valores universales y que siempre se usan.
En tanto nuestro archivo CSS tendría la siguiente estructura:
PHP:
p { color: black; font-family: Verdana; }Donde definimos la etiqueta <p>, ejemplo usando el CSS antes definido:
PHP:
<p>vBHispano</p>Estructura del CSS
Un libro CSS dijo:
Queda claro no hay mucho que explicar...
Agregar Comentarios
Al igual que otros lenguajes de programación web, el CSS nos permite añadir comentarios antes de definir nuestro estilo personalizado, estos son agregados por cada uno como información, que el navegador ignora, y nos permite recordar de que va el estilo agregado:
PHP:
/* comentario en CSS */
PHP:
/* comentario
CSS de varias
lineas */No confundir con los comentarios en HTML:
PHP:
<!-- Comentario en HTML -->
. Vayan planteando sus dudas respectivas y pronto vengo con la segunda parte... los selectores.
