¿Será posible resumir todo lo que necesitamos saber sobre CSS en un par de líneas? Realmente no pero, voy a tratar de cumplir con un pedido y por lo menos dar una vaga, vaga, muy vaga idea, aún más que eso que alguna vez publiqué con el nombre de CSS Rápido [1] [2]
CSS (Cascading Style Sheets) es la "tecnología" desarrollada por el W3C (World Wide Web Consortium) con el fin de separar el contenido de la presentación en una página web; es decir, colocar el en HEAD las definiciones de cada etiqueta lo que nos permite hacer que las páginas sean más livianas ya que si no, deberíamos agregarles esas propiedades a cada etiqueta, repetirlas una y otra vez cada vez que las quisiéramos usar. De esta manera, definimos el estilo de un sitio completo de una sola vez y luego, si es necesario, agregamos estilos personales.
Algunos, lo consideran un "lenguaje" complicado pero, es bastante simple y no tiene demasiadas reglas aunque la cantidad de propiedades que pueden usarse es realmente enorme.
Para implementar estilos CSS, lo normal es que incrustemos las definiciones dentro del <head>, por medio de la etiqueta <style type="text/css"> pero, en Blogger, además de eso, ya de entrada nos encontramos con algo raro; ninguna plantilla original parece tener esa etiqueta.
Esto es así porque en esa parte, Blogger agrega sus códigos especiales de tal manera que podamos modificar ciertas cosas mediante la opción Fuentes y Colores de la solapa de Diseño. Lo que vemos es más o menos esto:
CSS (Cascading Style Sheets) es la "tecnología" desarrollada por el W3C (World Wide Web Consortium) con el fin de separar el contenido de la presentación en una página web; es decir, colocar el en HEAD las definiciones de cada etiqueta lo que nos permite hacer que las páginas sean más livianas ya que si no, deberíamos agregarles esas propiedades a cada etiqueta, repetirlas una y otra vez cada vez que las quisiéramos usar. De esta manera, definimos el estilo de un sitio completo de una sola vez y luego, si es necesario, agregamos estilos personales.
Algunos, lo consideran un "lenguaje" complicado pero, es bastante simple y no tiene demasiadas reglas aunque la cantidad de propiedades que pueden usarse es realmente enorme.
Para implementar estilos CSS, lo normal es que incrustemos las definiciones dentro del <head>, por medio de la etiqueta <style type="text/css"> pero, en Blogger, además de eso, ya de entrada nos encontramos con algo raro; ninguna plantilla original parece tener esa etiqueta.
Esto es así porque en esa parte, Blogger agrega sus códigos especiales de tal manera que podamos modificar ciertas cosas mediante la opción Fuentes y Colores de la solapa de Diseño. Lo que vemos es más o menos esto:
<b:skin><![CDATA[ /* ----------------------------------------------- Blogger Template Style ....... ----------------------------------------------- */ /* Variable definitions ==================== <Variable name="bgcolor" description="Page Background Color" type="color" default="#FFF" value="#FFFFFF"> ....... */
y recién después de varias líneas logramos ver algo parecido al CSS:
body {
background:$bgcolor;
margin:0;
color:$textcolor;
font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}y todo termina con un misterioso:
]]></b:skin>
Bien, eso es el CSS de la plantilla y si usa <b:skin> </b:skin> es sólo por una necesidad de Blogger, cuando se crea la página, si vemos el código fuente, leeremos:
<style id='page-skin-1' type='text/css'>
Si vamos a definir otras propiedades, podemos agregarlas antes de ]]></b:skin> o encerrarlas entre etiquetas nuevas, en alguna parte del HEAD. Si decimos antes de </head> es porque ese es el lugar más sencillo de encontrar:
<style id='page-skin-1' type='text/css'>
... aquí vendrán las propiedades ...
</style>Pero, no es la única forma, también podemos vincular el documento HTML a la hoja de estilos por medio de una etiqueta especial llamada LINK y también colocarla dentro del <head>:
<link rel=stylesheet type="text/css" href="URL_archivo.CSS">Pero, hay otra manera más que es útil cuando necesitamos usar muchas propiedades pero sólo en posts y no en todo el sitio. En ese caso, como el editor nos impide usar la etiqueta LINK, podemos importar una hoja de estilo externa colocando el siguiente código:
<style type="text/css">@import url(URL_archivo.CSS);</style>Sea cual sea el método empleado, el CSS consiste de dos parte, el nombre y las reglas. Al "nombre" se lo llama selector y las reglas son las propiedades es decir cómo será ese selector, de que color, de que tamaño, etc. La sintaxis general es esta:
selector {regla1: valor; ...; reglaN: valor;}
Es decir, los nombres van delante y las reglas entre llaves y separadas una de otra por un punto y coma.
Hay varios tipos de selectores posibles, pueden ser etiquetas:
p {color:#990000;}
eso, hará que todos los párrafos del sitio tengan un texto de color rojo.
Pueden ser clases que van precedidas con un punto (.) y que no son otra cosa que una manera de darle un nombre a cierto tipo de etiquetas. Imaginemos que, siguiendo el ejemplo anterior, nuestro sitio tiene los párrafos de color rojo pero no todos, de tanto en tanto, queremos que algunos sean de color blanco. Podríamos crear una clase, darle un nombre y establecer la propiedad correspondiente:
p.blanco {color:#FFFFFF;}
entonces, cuando escribimos un código, usamos el atributo CLASS para indicar que esa etiqueta es diferente:
selector {regla1: valor; ...; reglaN: valor;}
Es decir, los nombres van delante y las reglas entre llaves y separadas una de otra por un punto y coma.
Hay varios tipos de selectores posibles, pueden ser etiquetas:
p {color:#990000;}
eso, hará que todos los párrafos del sitio tengan un texto de color rojo.
Pueden ser clases que van precedidas con un punto (.) y que no son otra cosa que una manera de darle un nombre a cierto tipo de etiquetas. Imaginemos que, siguiendo el ejemplo anterior, nuestro sitio tiene los párrafos de color rojo pero no todos, de tanto en tanto, queremos que algunos sean de color blanco. Podríamos crear una clase, darle un nombre y establecer la propiedad correspondiente:
p.blanco {color:#FFFFFF;}
entonces, cuando escribimos un código, usamos el atributo CLASS para indicar que esa etiqueta es diferente:
<p>Esto se verá rojo porque TODO es rojo.</p>
<p class="blanco">Pero esto se verá blanco.</p>Si pusimos p.blanco es para indicar que esa reglas sólo afectará a esa etiqueta P y no a otras. Si quisiéramos usarla en otro tipo no funcionaría, para eso, deberíamos definirla distinto:
.blanco {color:#FFFFFF;}
Ahora, si escribimos:
.blanco {color:#FFFFFF;}
Ahora, si escribimos:
<p>Esto se verá rojo porque TODO es rojo.</p> <p class="blanco">Pero esto se verá blanco.</p> <div class="blanco">Y esto también se verá en blanco.</div>
Así que, el atributo CLASS nos permite crear estilos que se pueden utilizar cuando queramos. Primero definimos una regla en el documento CSS (con el punto inicial obligatorio) y luego podemos aplicar la clase en cualquier etiqueta HTML.
Pero, hay un tipo que también vemos seguido y es similar al anterior excepto que en lugar de usar el punto, usamos el símbolo #:
#contenedor {font-weight: bold;}
que luego, se usará con el atributo ID de las etiquetas:
Pero, hay un tipo que también vemos seguido y es similar al anterior excepto que en lugar de usar el punto, usamos el símbolo #:
#contenedor {font-weight: bold;}
que luego, se usará con el atributo ID de las etiquetas:
<div id="contenedor"> ....... </div>El atributo ID es igual que CLASS pero distinto ya que sólo puede usarse en un único elemento, no puede haber dos elementos con el mismo ID o, mejor dicho, no debería haberlos. Usamos el ID para identificar sectores importantes de nuestra página:
#header {...}
#outer-wrapper {...}
#sidebar-wrapper {...}
Así que, hasta aquí, tenemos ya definidas las reglas sintácticas más importantes de los estilos CSS:
#header {...}
#outer-wrapper {...}
#sidebar-wrapper {...}
Así que, hasta aquí, tenemos ya definidas las reglas sintácticas más importantes de los estilos CSS:
- siempre se empieza con el nombre del estilo: el selector
- el selector va seguido de una llave abierta {
- después, va la regla, seguida de dos puntos :
- le sigue el valor y enseguida un punto y coma ;
- todo termina con una llave de cierre }
Para definir estilos en una parte pequeña de una página se utiliza el atributo STYLE dentro de una etiqueta, por ejemplo, siguiendo con los ejemplos anteriores, ahora quiero poner un texto en color negro, pero sólo lo voy a usar una vez o muy eventualmente así que no quiero crear una clase, entonces:
<p>Esto se verá rojo porque TODO es rojo.</p> <p class="blanco">Pero esto se verá blanco.</p> <p style="color: #000000;">Este texto se verá de color negro.</p>
De esta manera sobrescribimos la regla ¿Y por qué obedece y se pone negro en lugar de rojo? Eso es lo que se llama jerarquía. Si hay varias reglas diferentes que afectan a un mismo elemento, sólo se aplicará una de ellas ¿Cuál?, en este orden:
- la declaración de estilo de un archivo externo
- la declaración de estilo de toda la página (la etiqueta style de la cabecera de la página)
- los estilos definidos en alguna parte de la página (dentro del body)
- los estilos definidos en una etiqueta en concreto (con el atributo style)
¿Más excentricidades?
Cuando hay varios elementos que tienen las mismas propiedades CSS, podemos agruparlos, colocando los selectores uno al lado del otro, separados por comas:
h1, h2, h3, h4, h5, h6 {color: #00FFFF;}
En muchos casos, también es posible agrupar las diferentes reglas que definen a un mismo elemento:
h1 {font: 20px Arial; color: #FF9900;}
h2 {border: 1px solid #CCCCCC;}
Y también agrupar algunas y definir otras por separado:
h1, h2, h3, h4, h5, h6 {color: #00FFFF;}
h1 {font-size: 32px;}
h2 {font-size: 24px;}
h1, h2, h3 {border: 2px solid #CC0000;}
No hace falta que las definiciones sean genéricas, podemos ser muy específicos y definir relaciones de contexto entre elementos. Por ejemplo, si queremos que los elementos en negrita dentro de un párrafo se vean de color azul podríamos poner esta regla:
p strong {color: #0000FF;}
Así que:
Cuando hay varios elementos que tienen las mismas propiedades CSS, podemos agruparlos, colocando los selectores uno al lado del otro, separados por comas:
h1, h2, h3, h4, h5, h6 {color: #00FFFF;}
En muchos casos, también es posible agrupar las diferentes reglas que definen a un mismo elemento:
h1 {font: 20px Arial; color: #FF9900;}
h2 {border: 1px solid #CCCCCC;}
Y también agrupar algunas y definir otras por separado:
h1, h2, h3, h4, h5, h6 {color: #00FFFF;}
h1 {font-size: 32px;}
h2 {font-size: 24px;}
h1, h2, h3 {border: 2px solid #CC0000;}
No hace falta que las definiciones sean genéricas, podemos ser muy específicos y definir relaciones de contexto entre elementos. Por ejemplo, si queremos que los elementos en negrita dentro de un párrafo se vean de color azul podríamos poner esta regla:
p strong {color: #0000FF;}
Así que:
<p>Esto se verá rojo porque TODO es rojo.</p> <p>Pero <strong>esto se verá azul</strong> y no rojo.</p>
REFERENCIAS CSS:
15 comentarios:
Gracias Jorge.
Tienes una técnica didáctica excelente. A mí, que lo que medio he leído es html, me parecía extrañísimo pero ahora lo veo más claro y entiendo ciertas cosas.
Muy buen instructivo, también concuerdo con romer en cuanto a tu didáctica.
Hay algo que quiero modificar en mi blog y no puedo. El atributo "footer" quiero modificarlo en un script particular que inserto (sólo en ese), ya que quiero cambiar el valor de una regla, pero la única manera en que logro modificarlo es cambiando el atributo "footer" para la totalidad del blog, ¿se entiende lo que digo? intenté crear un atributo específico que fuera diferente al de "footer", como una subcategoría de éste, pero no hay forma de modificarlo. Mi último intento fue -siguiendo el instructivo este- es, antes de insertar el código del script vía wysiwyg como si fuera un html más poniendo < script src = "...>, agregarle < p class = "atributo nuevo que quise crear"> (todo con su correspondiente corchete de cierre) pero no hay caso. Tal vez, siendo un script insertado de esa forma, no hay manera de modificarle el footer, es lo que se me ocurre pero en verdad no sé.
Ah, y quería consultarte de qué forma uno puede suscribirse a los comentarios de una entrada sin tener que hacer un comentario ella (ya que recién ahí blogger da la posibilidad de que te envíen un correo con comentarios de seguimiento)
saludos y gracias
Entre tus clases y mi intuición hoy he logrado usar el crosscol para añdirle un widget de texto, enmarcarlo, ponerle fondo, darle un padding, etc. en este blog que he empezado por hoy, casi, casi, por petición popular, jeje.
Me ha costado un poco porqué me daba error de cierre de div y no lo veia, hasta que he comparado el código con el de otro contenedor y he visto que cuando llevan añadido un b:widget, los b:seccion no llevan la barra / de cierre.
La he quitado y ¡voila! ha funcionado.
También he cambiado lo de showaddelement 'no' por un preferred 'yes' para poder añadirle algo más si algún día me apetece.
Solo quería comentártelo, maestro.
Saludos.
Muy bien me a venido este breve resumen sobre el CSS por que llevo poco tiempo en esto.... por cierto me gustaría que me explicaras en un correo, comentario o en una entrada de las tuyas cómo poner para cuando pinchen en mis comentarios la "cajita" para elegir los emoticones cómo lo tienes en esta entrada de "en la bolsa" ya que me ha gustado esta forma de que la gente en vez de poner los símbolos tenga la opción de pinchar directamente en el emoticono deseado.
http://vagabundia.bolsanegra.net/index.php/2008/05/05/gas/
Gracias por adelantado, mi correo es: juanjocostameler@gmail.com
Wiiiiiiiii!!!!!
AL fin entendí qué joraca era CSS.
En el caso del CSS, el artículo de la Wikipedia deja mucho que desear para los que no estamos en el tema.
Con el primer o segundo parrafo me aclaraste todas las dudas que tenía. Al final era ESO :P
Te felicito, excelente post. Y lo más importante, a pesar de que me interesa muy poco el tema del diseño web y esas cosas, me lo leí hasta el final :D Me terminó gustando.
Saludetes!!
Romer:
Me alegro que te haya sido útil, la idea era ver si es posible poner algo de luz a algo que parece tan misterioso :)
Horacio:
Entiendo la idea pero a medias ¿por qué no me envias un mail explicándome en detalle? En principio, lo que quieres hacer parece posible pero no termino de comprenderlo.
Con respecto a suscribirse a los comentarios, sólo conozco dos modos, dejar un comentario y marcar la opción o suscribirse via FeedBurner. No ve otra forma.
Eulalia:
Lo que haces es perfecto. Probar, probar y probar ;)
¡Qué buena idea eso del diccionario!
Juanjo:
El tema de los emoticones es que es algo que en Blogger es imposible ya que no tenemos ninguna forma de manipular los comentarios. Bolsanegra usa WordPress y entonces, esa parte es más sencila de personalizar.
Fede:
Me alegro que te sirviera, amigo. Alguna vez terminaré de convencerte que es útil y venceré tu resistencia a aprender estas cosas. No me resigno y ya hemos avanzado un poco ... por lo menos, esta vez, llegaste hasta el final :D
Comprendo... gracias es un detalle que me respondieras, por cierto deberías decir que los emoticonos son "casi" imposibles de poner porque yo los tengo jeje pero con "el post expandido" gracias a una explicación de "El escaparate de Rosa" que se fijó en uno de tus posts sobre "blogger y los emoticones" me costó lo suyo pero lo conseguí!!!!
Ese post tuyo por lo menos para mi es muy valioso; te felicito ya que ahora tengo el blog mas alegre....
Algo es algo...
Saludos Jmiur!!!
Jajaja, es cierto Juanjo, debí decir "casi" :D
Lo que no podemos, en todo caso, es poner una barra para hacer click.
Ahhh, si usas Firefox, hay un script de Greasemonkey que lo hace ;)
Gracias J.Miur , tube que aprender esto de las clases y las ID por mi mismo , esto si que me hace un nudo en la cabeza aunque sigo prefiriendo CSS y HTML antes que Javascript :D.
Jajaja, sin duda Lacrax, es mucho más sencillo, estoy de acuerdo :)
A estas clases didácticas sólo les falta los ejercicios y la evaluación ;)
Jajaaja, Diós me libre :D
Me alegro que te fuera útil, Marisol :)
Felicitaciones gran aporte, y muchas gracias. Sigue perseverando... ;)
Hoy ando acá, no solo hormiga , sino a los saltos....
Muy bueno, gracias. sabáa algo pero todo mezclado..... :)
¿Quiere dejar un comentario?
recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...
Nota: sólo los miembros de este blog pueden publicar comentarios.
Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.
Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...