JMiur [E]

CSS (Cascading Style Sheets) es un mecanismo para adicionar un estilo (fuentes, colores, etc) a un documento HTML. El proceso es simple, por ejemplo, para establecer que el tag H1 aparezca azul:
H1 { color: blue }

Esto es lo que se llama una regla y consiste en dos partes, la primera (H1) se denomina selector, la segunda (color: blue), declaración. A su vez, esta última tiene dos partes, la propiedad (color) y el valor (blue).

El selector es un vínculo entre el HTML y la hoja de estilo. Todos los elementos de un documento son selectores y cada uno de estos posee un conjunto de propiedades.

Hay cuatro formas de establecer el estilo.

La primera es incluirla dentro del tag STYLE:
<STYLE type="text/css">
H1 { color: blue } /* esto es un comentario */
</STYLE>
la segunda es desde un archivo externo (generalmente de extensión css):
<LINK rel=STYLESHEET tupe="text/css" href="archivo.css">
la tercera es importarla:
<STYLE type="text/css">
@import url(http://style.com/basic);
</STYLE>
y por último, la cuarta, es mediante el atributo style de un tag:
<P style="color: green"> Letras verdes</P>
Para reducir el tamaño de las hojas de estilo, los selectores pueden agruparse separándolos mediante comas:
H1, H2, H3 { font-family: helvetica }
también pueden agruparse las declaraciones separándolas con punto y coma:
H1 { font-weight: bold; font-size: 12pt; font-style: normal; }
además, algunas propiedades poseen una sintaxis propia para agruparse:
H1 { font: bold 12pt/14pt helvetica }
En estos ejemplos se ha establecido que todos los elementos H1 sean de color azul. Supongamos que se pose el siguiente código:
<H1>El título <EM>MAS</EM> importante</H1>
Si no se ha asignado ningún color al tag EM, como se encuentra dentro de otro elemento, también será azul. Para establecer un estilo por defecto debe establecerse un estilo para los elementos superiores, por ejemplo, en el tag BODY:
BODY { color: black; background: url(archivo) white; }
esto funcionará aún cuando se omita el tag BODY en la página HTML.

Como detalle, se muestra una forma de establecer un fondo que, puede ser un archivo url(archivo) o, si la imagen no se encuentra, un color.

Hay casos en que esto no se cumple, por ejemplo, la propiedad background no se hereda.

A menudo, la propiedad es un porcentaje referido a otra propiedad:
P { font-size: 10pt }
P { line-height: 120% } /* relativo a font-size
Para permitir el control sobre los elementos, se ha incluido el atributo class a todos los elementos del BODY. A través de este atributo puede referenciarse el estilo. Por ejemplo:
H1.ejemplo { color: #00FF00 }
.......
<H1 class=ejemplo>Esto es verde</H1>
el nombre del elemento puede omitirse en la definición:
.ejemplo { color: green }
También se ha incluido el atributo id que puede ser accesible precediéndolo con el carácter #:
#ejemplo { letter-spacing: 0.3em }
H1#ejemplo { letter-spacing: 0.5em }
.......
<P id=ejemplo>Texto de ejemplo</P>
Si se quiere que los elementos EM posean otro estilo deberá crearse un estilo para EM. Pero si lo que se quiere es que los EM dentro de los H1 tengan un estilo, puede utilizarse:
H1 EM { color: red }
este tipo de selector se denomina contextual y consisten en una serie de elementos separados por un espacio. Esto puede tener multiples opciones y combinaciones:
UL LI { font-size: small }
UL UL LI { font-size: x-small }
DIV P { font: small sans-serif }
.ejemplo1 H1 { color: red }
#ejemplo2 CODE { background: blue }
DIV.ejemplo3 H1 { font-size: large }
H1 B, H2 B, H1 EM, H2 EM { color: red }
Hay algunas pseudo-classes que son provista por el mismo lenguaje para determinados elementos. Por ejemplo, para el tag A:
A:link { color: red } /* links no visitados */
A:visited { color: blue } /* link visitados */
A:active { color: lime } /* links activos */
Todo elemento A con el parámetro href debe ser definido mediante alguna de estas subclases. Estas pseudo-classes pueden ser utilizadas como selectores contextuales o combinadas con clases comunes:
A:link IMG { border: solid blue }
A.external:visited { color: blue }
Las hojas de estilo permiten incrementar el tamaño de las declaraciones agregando el operador !important:
H1 { color: black ! important; background: white ! important }
P { font-size: 12pt ! important; font-style: italic }

13 comentarios:

Esteban  

Qué quilombito de códigos!!?,no me llevo muy bien con ésto,pero a veces tengo qué tocarlo a la fuerza,jaja!....

Responder
JMiur  

La idea es ir mostrando eso que está ahí y parecen jeroglíficos. Conocerlos un poco es una forma de no hacer lio.

Responder
Anónimo  

Me tengo que poner yo al dia en eso de los codigos, yo tampoco me llevo muy bien. Tiempo al tiempo.

Responder
JMiur  

Esa es la idea. Tomarse las cosas con calma y probar. Es más fácil de lo que parece.

Responder
Fede  

Che, JMiur. No tiene nada que ver con el post (en estas cosas yo no me meto.. no logro entenderlas.. :( ). Pero tengo que avisarte de alguna forma... Diego te nominó para un meme. Si queres lo seguis ;)

Responder
JMiur  

Lo vi. Estoy pensando ... sea lo que sea, habrá respuesta.

Responder
Anónimo  

Buenas lecciones, el saber no ocupa lugar.

Responder
Barbara  

Kri esta kersolvo, lice hai, impest que zel bri, isrudo ini!!! Kriams um tod livalageme ma tod... Volidi yo, khristench jud ha ele chicao? Vedo nessarou or zentamos ocu tempro...

Responder
Doroteo Catalán L.  

Genial.

gracias

Responder
#  

Interesante, debieran poner .css ya hechos para poder facilitar el trabajo de la gente ociosa.

Responder
JMiur  

Cualquier blog ya tiene CSS. Si no se quiere, basta no tocarlo y conformarse con lo que es. Para cualquier cosa distinta, se necesita parender y no usar cosas predigeridas.

Responder
Guadamuz  

Excelente, muy bien explicado el CSS

Responder
Unknown  

how can i learn full tutorial for make template..??
or suggestion me any software for make template..??

Responder

¿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 ...

 
CERRAR