CitarReservado para futura introduccion.
11Likes
Esta es una discusión para el tema CSS-1: Introducción al CSS en el foro Tutoriales de Programación, bajo la categoría Lenguajes de Programación; 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 ...
Página:
URL del LinkBack
Acerca de los LinkBacks
CSS-1: Introducción al CSS
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/Compari...g_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.Código 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>
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.Código 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>
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.Código PHP:<p style="color: black; font-family: Verdana;">vBHispano.</p>
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>.Código PHP:<style type="text/css">
p { color: black; font-family: Verdana; }
</style>
<p>vBHispano</p>
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.Código PHP:<link rel="stylesheet" type="text/css" href="/css/estilos.css" media="screen" />
En tanto nuestro archivo CSS tendría la siguiente estructura:
Donde definimos la etiqueta <p>, ejemplo usando el CSS antes definido:Código PHP:p { color: black; font-family: Verdana; }
Estructura del CSSCódigo PHP:<p>vBHispano</p>
Queda claro no hay mucho que explicar...Iniciado por Un libro CSS
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:
Código PHP:/* comentario en CSS */
No confundir con los comentarios en HTML:Código PHP:/* comentario
CSS de varias
lineas */
Código PHP:<!-- Comentario en HTML -->
Última edición por NkC; 08/10/2010 a las 19:43
Re: CSS-1: Introducción al CSS
Con eso estamos listo en esta primera parte. Vayan planteando sus dudas respectivas y pronto vengo con la segunda parte... los selectores.
Re: CSS-1: Introducción al CSS
Claro por eso quise comenzar con CSS, ya que es un lenguaje muy simple. Y bueno aprenderlo en español con un tema donde plantear las dudas no esta de más.
Y como ya mencione espero más adelante hacerlo más practico para que participemos, ya que leyendo no se aprende verdaderamente porque luego se olvidará.
PD: Además quedará archivado acá por si se nos olvida algo
Re: CSS-1: Introducción al CSS
La verdad, es que viéndolo así parece sencillo. El problema, como dice NkC, es que si no se practica se va olvidando.
Estaré atento a este curso y participaré con vosotros. A ver si así sacamos algo de provecho.
Gracias por compartir con nosotros tus conocimientos...
Re: CSS-1: Introducción al CSS
los selectores class en html es para llamar el valor del css, esto generalmente se usa con una etiqueta <div> por ejemplo.
.ejemplo {
background: #FFF;
border: 1px solid #000;
color: #000;
}
Para usar el css, se usa el selector class asi.
<div class="ejemplo">###CODIGOYCONTENIDO###</div>
Esto como menciona la guia, te ahorra bastante tiempo a la hora de decorar un espacio para darle un tipo de color al fondo, un tipo de color a los bordes, un tipo de color a las letras, etc.
