Thor 10 de junio de 2008 a las 15.11
   Imprimir artículo
elWebmaster.com

Taller de Adobe Dreamweaver: ¬°M√°s estilos CSS!


Taller Dreamweaver de elWebmaster Hola muchachos y muchachas ¬Ņc√≥mo est√°n? ¬°Me alegro! (espero que hayan respondido “bieeeen”).
Ya estaba extra√Ī√°ndolos. No s√© si se habr√°n dado cuenta, pero la clase pasada, fue una divisi√≥n de la clase de la otra semana anterior, as√≠ que la semana pasada no escrib√≠ el art√≠culo literalmente.

Pero bueno, ya volví y con ¡buenas noticias! Conseguimos espacio para poner una miniclase guía sobre CSS. No vamos a lograr avanzar profundamente en este tema, porque CSS daría para un taller entero. Si bien no es muy difícil, hay muchos tips y ayudas que sólo podría dar una persona con experiencia en el tema.

Estilos CSS

Para encarar este tema vamos a poner un par de ejemplos, y de ahí iremos viendo cómo funcionan los estilos con CSS, de paso pueden darse una idea sobre cómo se puede ir insertándolo dentro de un código HTML.

Vamos a un ejemplo similar al de las clases pasadas, el div de la “nota uno”.

Armemos un código de cómo podría ser un div de una nota X, para tomar de ejemplo:

<div> <h2>Articulo de explicacion: manejo de CSS</h2> <p>El CSS no es muy dificil de aprender, pero requiere paciencia a la hora de usarlo.</p> <h2>Articulos relacionados: </h2> <p>Dw/html taller elwebmaster.com</p> <p>w3c y maquetado correcto del html</p> </div>

Bueno, aquí tendríamos un maquetado de una nota (cortita por cierto jeje), con un pie de página que contendría artículos relacionados.

Bien, el problema aquí es que los artículos relacionados tendrían el mismo estilo que la nota en sí.

Si recuerdan de la clase pasada, nosotros armamos unos estilos en una clase “pieNota” que nos daba algunos par√°metros para nuestro div.

El tema es que en esa clase, .pieNota (recuerden que el punto referenciaba a una clase), afectaba a todos los h2 y todos los p (relean las dos clases anteriores si tienen dudas).
Por lo tanto, seguiríamos teniendo el mismo problema, todos los p y los h2 seguirían siendo iguales.

Hagamos un corte acá y miremos otro código, para ver cómo se podría maquetar. No se asusten si ven cosas que no entienden, se van a explicar más abajo :p

<div id="nota-uno"> <h2>Articulo de explicacion: manejo de CSS</h2> <p>El CSS no es muy dificil de aprender, pero requiere paciencia a la hora de usarlo.</p> <div class="pieNota"> <h2>Articulos relacionados: </h2> <p>Dw/html taller elwebmaster.com</p> <p>w3c y maquetado correcto del html</p> </div> </div>

Bien ¬Ņqu√© tenemos ac√°?

Vemos que aparece una nueva etiqueta “id”.

La etiqueta “id” es otra manera de referenciar a un estilo, al igual que la etiqueta “class”.
√Čsta, en vez de con un “.” se referencia con un “#”.

Una aclaraci√≥n importante, las “id” a diferencia de las “class” solo pueden existir UNA SOLA VEZ en todo el documento HTML.

Es decir, podemos tener muchas referencias a .pieNota, pero solo una etiqueta puede ser #nota-uno.

Para este caso, no creo que podamos tener m√°s de una nota n√ļmero uno, jeje.

Volviendo a los estilos

De esta manera, podemos marcar un estilo general para #nota-uno y luego a los artículos relacionados, cambiarles el estilo con .pieNota.

Entonces nuestros estilos quedarían así:

<style type="text/css" media="screen"> #nota-uno h2, p { color: red; font-size: 16px; } #nota-uno .pieNota h2, p { color:yellow; font-size: 12px; } </style>

De esta manera, nuestra caja con la nota anterior toma, para toda la caja (div id=”nota-uno”), los h2 y los p van a estar en letra roja y con un tama√Īo de 16 p√≠xeles.
Pero, para la clase .pieNota dentro de la id #nota-uno, los h2 y los p van a tener la letra color amarilla y el tama√Īo de 12 p√≠xeles.

Ahora, si est√°n bien “chispitas” y siguen todas las explicaciones sin trabarse en ning√ļn lado, podr√°n preguntarse:
Por qu√© es necesario poner en los estilos, a .pieNota dentro de #nota-uno (#nota-uno .pieNota) y no poner a .pieNota solo como un elemento individual“.

Bueno, la respuesta sería esta:
De esta manera podemos tener varios tipos de .pieNota, uno para cada lugar del sitio en que este ubicado.

Entonces podr√≠amos tener en nuestro HTML varias clases .pieNota, y dependiendo de la “id” en la que se encuentren actuar√≠an diferente.
De esta manera nuestro código queda bien maquetado y podemos ordenar semánticamente nuestro sitio.
Piensen que para cada cosa que tenga un titulo podr√≠amos tener la clase .titulo y para cada pie podr√≠amos tener la clase .pie, y as√≠ dependiendo en qu√© id (√ļnica) est√°, tendr√≠a un estilo diferente.

Nuestro sitio quedará así resumido a un par de divs con contenido, y a otro par de ids, que van a compartir clases.

Ya van a ver cuando maqueten un sitio ustedes, si siguen los consejos y los temas que vamos viendo día a día acá, que simple y fácil de entender les va a quedar el código, y cuando lo comparen con cosas que hayan hecho antes, les va a causar gracia (o pena :P).

Bueno, no tengo mucho m√°s espacio para seguir escribiendo por hoy, pero en las pr√≥ximas clases tratar√© de “ir mechando” algo de CSS a medida que explico los siguientes temas.

No duden en preguntar vía comentario cualquier problema que puedan tener, así se sacan las dudas e inclusive puedan haber otros usuarios que los ayuden. Y nos ayudamos entre todos, jeje.

Conclusión

Si bien CSS da para mucho más, esta clase pretendió ser una guía de su funcionamiento.
Faltaron muchas cosas que me hubiesen gustado tocar, pero por cuestiones de espacio no se puede (no quiero tener una clase cortada de nuevo).
Los espero la semana que viene con m√°s taller para todos.
Espero que les haya gustado y que sigan leyendo semana a semana las clases que hago exclusivamente para ustedes.

¬°Un saludo!

<< CLASE ANTERIOR  

CLASE SIGUIENTE >>


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (2)

  1. Alvaro dice:

    Hola Thor, excelentes cursos… he aprendido mucho…

    Prob√© el anterior ejercicio y no me da los resultados como usted los explica en este comentario: “De esta manera, nuestra caja con la nota anterior toma, para toda la caja (div id=‚ÄĚnota-uno‚ÄĚ), los h2 y los p van a estar en letra roja y con un tama√Īo de 16 p√≠xeles.
    Pero, para la clase .pieNota dentro de la id #nota-uno, los h2 y los p van a tener la letra color amarilla y el tama√Īo de 12 p√≠xeles.”

    me la muestra de la siguiente manera: el primer h2 de color rojo y tama√Īo 16px y el resto de color amarillo y tama√Īo 12px…

    Espero pueda verificar lo anterior y me diga que esta pasado…

    El c√≥digo lo copi√© tal cual lo escribi√≥ usted arriba en este taller…

    Much√≠simas gracias, yo soy nuevo en este curso…

  2. Enrique dice:

    Hola Thor, mis felicitaciones, excelente tutorial.
    Solo comentarte que, efectivamente como dice Alvaro, existe el problema de los colores que definen los style. Funcionan para los h2 pero no asi para los , aparentemente predomina el √Ļltimo estilo definido para para . Aprop√≤sito, esperando no salirme del tutorial, existe alguna predominancia entre los niveles y/o tag respecto a las definiciones de los style.
    Gracias.

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder