CSS

¿Qué es CSS3?

El nombre hojas de estilo en cascada viene del inglés Cascading Style Sheets, del que toma sus siglas. CSS es un lenguaje usado para definir la presentación de un documento estructurado escrito en HTML o XML (y por extensión en XHTML).

¿Para qué sirve?

El CSS sirve para definir la estética de un sitio web en un documento externo y eso mismo permite que modificando ese documento (la hoja CSS) podamos cambiar la estética entera de un sitio web, el mismo sitio web puede variar totalmente de estética cambiando solo la CSS, sin tocar para nada los documentos HTML o jsp o asp que lo componen. 

CSS es un lenguaje utilizado para dar estética a un documento HTML (colores, tamaños de las fuentes, tamaños de elemento, con CSS podemos establecer diferentes reglas que indicarán como debe presentarse un documento. Podemos indicar propiedades como el color, el tamaño de la letra, el tipo de letra, si es negrita, si es itálica, también se puede dar forma a otras cosas que no sean letras, como colores de fondo de una pagina, tamaños de un elemento (por ejemplo el alto y el ancho de una tabla. 

Formas de Aplicar CSS

En linea

Esta forma se basa en utilizar el atributo style que las etiquetas HTML permiten. Dentro de este atributo style se colocaría nuestro código CSS3. Ejemplo:

Interna

Para dar solución a los problemas del estilo online, se empezó a generalizar el uso de la etiqueta style. La etiqueta style permite poner en su interior todo el código CSS3 que necesitamos. Puede ser colocada en cualquier parte de nuestro documento HTML y será interpretada por los navegadores, pero tiene que colocarse en nuestro head.

Externo

La etiqueta link sirve para informar de muchas cosas en nuestro HEAD, una de ellas es para indicar al navegador web que tenemos un código CSS3 en un fichero externo que debe ser utilizado para pintar nuestra página.

Con esto conseguimos la independencia entre el HTML y el CSS3, de forma que podemos utilizar el mismo fichero .css para múltiples páginas HTML y cualquier cambio en este fichero CSS se aplicaría a todas las páginas a la vez.

Comentarios en CSS

CSS permite incluir comentarios entre sus reglas y estilos. Los comentarios son contenidos de texto que el diseñador incluye en el archivo CSS para su propia información y utilidad. Los navegadores ignoran por completo cualquier comentario de los archivos CSS, por lo que es común utilizarlos para estructurar de forma clara los archivos CSS complejos.

El comienzo de un comentario se indica mediante los caracteres /* y el final del comentario se indica mediante */, tal y como se muestra en el siguiente ejemplo:

/* Este es un comentario en CSS */

Los comentarios pueden ocupar tantas líneas como sea necesario, pero no se puede incluir un comentario dentro de otro comentario:

/* Este es un
   comentario CSS de varias
   lineas */

Modelo de Cajas en CSS

El modelo de cajas o "box model" es seguramente la característica más importante del lenguaje de hojas de estilos CSS, ya que condiciona el diseño de todas las páginas web. El modelo de cajas es el comportamiento de CSS que hace que todos los elementos de las páginas se representen mediante cajas rectangulares.

Las cajas de una página se crean automáticamente. Cada vez que se inserta una etiqueta HTML, se crea una nueva caja rectangular que encierra los contenidos de ese elemento. La siguiente imagen muestra las tres cajas rectangulares que crean las tres etiquetas HTML que incluye la página:

Los navegadores crean y colocan las cajas de forma automática, pero CSS permite modificar todas sus características. Cada una de las cajas está formada por seis partes, tal y como muestra la siguiente imagen:

Elementos en Linea y de Bloque

Los elementos de bloque ("block elements" en inglés) siempre empiezan en una nueva línea y ocupan todo el espacio disponible hasta el final de la línea. Por su parte, los elementos en línea ("inline elements" en inglés) no empiezan necesariamente en nueva línea y sólo ocupan el espacio necesario para mostrar sus contenidos.

Propiedades Abreviadas en CSS3

Propiedades abreviadas son propiedades CSS que permiten asignar el valor de muchas otras propiedades de CSS al mismo tiempo. Usando una propiedad abreviada ('shorthand'), se pueden escribir hojas de estilo más concisas (y a menudo más legibles), ahorrando tiempo y energía.

Herencia, Cascada y Especificidad en CCS

Herencia

La herencia en CSS es el mecanismo mediante el cual determinadas propiedades de un elemento padre se transmiten a sus hijos. De hecho, se parece mucho a la herencia genética. Si los progenitores tienen los ojos azules, los hijos seguramente también tendrán los ojos azules.

Cascada

CSS significa cascading style sheets (hojas de estilo en cascada) y, por lo tanto, no debería extrañarnos que la cascada sea un concepto importante. Es el mecanismo que controla el resultado final cuando se aplican varias declaraciones CSS contrapuestas al mismo elemento.

Especificidad

La especificidad es algo que todos los autores de CSS deben comprender y tener en cuenta. Puede considerarse una medida de cuán específico es el selector de una regla. Un selector de especificidad baja puede dar como resultado muchos elementos (como *, que da como resultado todos los elementos del documento), mientras que un selector con una especificidad elevada puede que sólo dé como resultado un único elemento de una página (como #nav, que sólo da como resultado el elemento con una id de nav).

Minificar Recursos en CSS

Se entiende por "minificación" el proceso mediante el cual se eliminan datos innecesarios o redundantes de un recurso sin que se vea afectada la forma en que los navegadores lo procesan. Por ejemplo, eliminar comentarios y formato innecesario, retirar código que no se usa, emplear variables y nombres de funciones más cortos, etc.

FlexBox en CSS30 

Hasta hace relativamente poco, podríamos incluso decir “todavía” si tu desarrollo requiere de una alta compatibilidad en versiones antiguas de navegadores, maquetar módulos adaptables para web tales como listados en filas de N bloques suponía crear una larga lista de estilos css que cambiaban según la resolución de los diferentes dispositivos. En ocasiones “flotábamos” los elementos y nos las veíamos con los márgenes laterales, en otras aplicábamos “inline-block” y utilizábamos alguna técnica extraña para no contar con la separación que se creaba entre capas por arte de magia, añadíamos una capa vacía al final del listado para poder justificar el conjunto, y un largo etcétera de desventajas que Flexbox viene a solucionar.

 

Qué es Flexbox y cómo se utiliza.

Flexbox viene de “Flexible Box Layout“, que se puede traducir como “Diseño de caja flexible“, y nos aporta una magnífica solución para todos nuestros desarrollos “responsive”. Lo que nos permite es crear un conjunto de elementos flexibles que se adaptan automáticamente a su contenedor y con el que podemos controlar parámetros tales como la alineación, dirección (horizontal/vertical), ajuste de la fila según tamaños y multitud de posibilidades que vamos a presentar en este artículo.

En cuanto a compatibilidad, Flexbox es actualmente compatible con los navegadores web más importantes y diferentes versiones de los mismos, si bien en algunos debemos utilizar prefijos css para su buen funcionamiento (ver en caniuse.com). Si tenéis problemas con algunas versiones antiguas, podéis probar a utilizar “Autoprefixer“. En los siguientes ejemplos utilizaremos el código css tal cual, sin añadidos, así que espero que vuestro navegador esté actualizado.

La última definición conocida sobre Flexbox del W3C es del 26 de Mayo de 2016 en el momento de escribir este artículo. En el enl