Tag: CSS

Los lenguajes que existieron antes que CSS

Me parece fascinante el artículo The Languages Which Almost Became CSS. Pura arqueología web en la que se detallan algunas de las propuestas que se desarrollaron antes de que CSS se convirtiese en el estándar para definir la presentación de las páginas web.

Algunas de las propuestas fueron:

RRP

@BODY fo(fa=he,si=18)

 

PWP

(BODY fontSize=normal
BGColor=white
FGColor=black
(H1 fontSize=largest
BGColor=red
FGColor=white)
)

 

FOSI

<outspec>
<docdesc>
<charlist>
<font size=”12pt” bckcol=”white” fontcol=”black”>
</charlist>
</docdesc>
<e-i-c gi=”h1″><font size=”24pt” bckcol=”red”, fontcol=”white”></e-i-c>
<e-i-c gi=”h2″><font size=”20pt” bckcol=”red”, fgcol=”white”></e-i-c>
<e-i-c gi=”a”><font fgcol=”red”></e-i-c>
<e-i-c gi=”cmd kbd screen listing example”><font style=”monoser”></e-i-c>
</outspec>

 

DSSSL

(element H1
(make paragraph
font-size: 14pt
font-weight: ‘bold))

 

Y muchos otros que se desarrollaron y desaparecieron.

Uso de variables en CSS

En CSS variables are finally landing in Chrome to help you clean up your code nos cuentan que Google Chrome 49 ya incorpora las variables de CSS, que permiten hacer cosas como esto:

:root {
 --main-color: #06c;
}
#foo h1 {
 color: var(--main-color);
}

Esto ya se podía hacer con el uso de SASS o LESS, preprocesadores de CSS. Ahora se puede hacer lo mismo, pero directamente en el navegador.

¿Se puede usar ya? Por ahora no es una buena idea, porque ni Opera ni Microsoft Edge lo soportan, pero seguro que en unos meses todos los navegadores modernos lo soportarán.

Más información en CSS Variables: Why Should You Care?

Maquetación de páginas web

CSS: la web única (one web):

[kml_flashembed movie=”http://www.youtube.com/v/PoJ3234Y4Nw” width=”560″ height=”315″ wmode=”transparent” /]

 

CSS: diseño adaptable, adaptativo o flexible:

[kml_flashembed movie=”http://www.youtube.com/v/4-LaxnCKxHw” width=”560″ height=”315″ wmode=”transparent” /]

 

CSS: creación de un diseño adaptable, adaptativo o flexible (parte 1):

[kml_flashembed movie=”http://www.youtube.com/v/ktGF7Dda0wI” width=”560″ height=”315″ wmode=”transparent” /]

 

CSS: creación de un diseño adaptable, adaptativo o flexible (parte 2):

[kml_flashembed movie=”http://www.youtube.com/v/96U4zPbyq9c” width=”560″ height=”315″ wmode=”transparent” /]

 

CSS: creación de un diseño adaptable, adaptativo o flexible (parte 3):

[kml_flashembed movie=”http://www.youtube.com/v/cbtJ4udg7sM” width=”560″ height=”315″ wmode=”transparent” /]

CSSOM

Recientemente he aprendido una nueva palabra, CSSOM, CSS Object Model. Ya existe una propuesta de recomendación del W3C: CSS Object Model (CSSOM), W3C Working Draft 5 December 2013.

El resumen dice:

CSSOM defines APIs (including generic parsing and serialization rules) for Media Queries, Selectors, and of course CSS itself.

Traducido: es un API para que se pueda acceder a las hojas de estilo, para consultarlas, crearlas, modificarlas, etc. Es decir, como el DOM, que es para el HTML, pero para el CSS.

CSS: definir el estilo de una lista (2)

Un nuevo vídeo de iDESWEB que se ofrecerá a través de la iniciativa Actívate patrocinada por Google.

[kml_flashembed movie=”http://www.youtube.com/v/hz731_o6gcU” width=”560″ height=”315″ wmode=”transparent” /]

Transcripción:

Hola, soy Sergio Luján Mora, profesor de informática de la Universidad de Alicante, y en este vídeo que forma parte del curso “Introducción al desarrollo web”, te voy a explicar las principales propiedades de CSS que se existen para definir el estilo del texto.

En la primera parte de este vídeo, vimos la principales propiedades que comienzan con el prefijo font: font-family, font-size, font-weight, font-style y font-variant.
En este vídeo vamos a ver unas propiedades de CSS que comienzan con el prefijo text-.

En concreto, vamos a ver las propiedades text-align, text-indent, text-decoration y text-transform.

La propiedad text-align se emplea para definir la justificación o alineación del texto.

Esta propiedad puede tomar los valores left, a la izquierda, right, a la derecha, center, centrado y justify, justificado, es decir alineado a la izquierda y a la derecha a la vez.

En este ejemplo podemos ver el mismo párrafo alineado a la izquierda y a la derecha.

Y en este otro ejemplo, el primer párrafo está centrado y el segundo justificado, está alineado a la izquierda y a la derecha.

La propiedad text-indent especifica la sangría de la primera línea de un bloque de texto.

La sangría se puede indicar utilizando las unidades de medida que se emplean para indicar el tamaño del texto con la propiedad font-size.

En este ejemplo, el primer párrafo no posee sangría en la primera línea, mientras que en el segundo se ha definido una sangría de un 1cm.

En este otro ejemplo, la primera línea posee una sangría relativa del 50%, el 50% del ancho disponible para mostrar el texto.

La propiedad text-decoration se emplea para definir algunos adornos que se pueden añadir al texto.

Esta propiedad puede tomar los valores none, ninguno, underline, subrayado, overline, para el subrayado por la parte superior, line-through para el tachado y blink para el parpadeo.

En este ejemplo se muestra el uso de la propiedad text-decoration con cuatro valores: underline, overline, line-through y blink.

Por último, la propiedad text-transform se emplea para convertir en mayúsculas o minúsculas un texto.

Esta propiedad puede tomar los valores capitalize, uppercase, lowercase y none.

En este ejemplo se muestra el uso de la propiedad text-decoration con los valores capitalize, uppercase y lowercase.

El valor capitalize coloca en mayúsculas la primera letra de cada palabra, mientras que uppercase transforma a mayúsculas todo el texto y lowercase a minúsculas.

Ya para terminar, me gustaría recordarte algunos de los sitios web en los que puedes encontrar más información sobre mí y sobre mi trabajo, y dos formas de contactar conmigo, a través de mi correo electrónico sergio.lujan@ua.es y a través de mi cuenta en Twitter @sergiolujanmora.

Recuerda que este vídeo forma parte del curso “Introducción al desarrollo web” que está disponible en la dirección idesweb.es.

Muchas gracias por tu atención.