El camino hasta ahora

En el último artículo terminamos de dar formato a nuestro hola mundo. Para ello utilizamos CSS3. Si has accedido a este artículo y tu interés es la programación web en PHP, es interesante que primero te tomes tu tiempo para leer los artículos anteriores:

• CSS3 básico parte 1
• CSS3 básico parte 2
• En php-principiante encontrarás el resto de artículos para la iniciación en PHP orientado a web.

Si lo que buscas es una explicación sobre la sintaxis de CSS3, este artículo y su continuación son en los que debes establecer tu foco de atención.

En esta tercera parte sobre CSS3 hablaré de la estructura y conceptos básicos a tener en cuenta a la hora de crear nuestras hojas de estilo. Esta parte debería haber sido la primera, sin embargo al tratarse de conceptos más «teóricos» me pareció mejor idea mostrar primero lo que se puede hacer con CSS3 y, una vez ya tenemos una idea visual, profundizar en cómo funciona.

La explicación sobre la sintaxis de CSS3 se ha dividido en dos artículos debido a la gran cantidad de información. Es importante tener en cuenta que estos artículos, aunque explican el funcionamiento de CSS, no es un manual sobre CSS3 ya que esa labor es mucho más ambiciosa. Si estás interesado en profundizar en CSS3, existen sitios web como librosweb dónde encontrarás interesantes manuales y, entre ellos, uno sobre CSS

Las Reglas en CSS3

Nuestro código CSS3 no es más que una serie de reglas incluidas en un fichero. La mejor forma de entender una regla es con un ejemplo:

selector {
  declaracion [propiedad: valor;]
}

Bien, eso es una regla; te darás cuenta que durante las dos primeras partes de CSS3 básico hemos estado constantemente creando y editando reglas CSS.

Como puedes observar, una regla se compone de un selector y una declaración que está encerrada entre {} de forma que con la declaración decimos qué tiene que hacerse y es el selector  el encargado de indicar a qué elemento de nuestro HTML se le debe aplicar la declaración.

La declaración es un conjunto de líneas separadas por ; (punto y coma) y cada línea (aunque pueden estar todas seguidas) se compone de una propiedad y un valor de forma que especificamos qué modificación visual queremos realizar (propiedad) y en qué medida (valor).

Los Selectores en CSS3

Hasta ahora hemos utilizado exclusivamente los llamados selectores de tipo o de etiqueta y los selectores descendentes, sin embargo tenemos varios tipos de selectores:

• Selector universal.
• Selector de tipo o etiqueta.
• Selector descendente.
• Selector de clase.
• Selector de ID.
• Selector de hijos.
• Selector de atributos.

Selector universal

Es muy poco utilizado, ya que aplicará el estilo a todas las etiquetas del documento. Sin embargo, es muy interesante a la hora de establecer una serie de valores básicos (como puede ser el color de la fuente, la familia y tamaño)  de forma que se garantice un estilo uniforme y sea en reglas más concretas dónde se apliquen los estilos específicos.

En el CSS de nuestro proyecto, podríamos utilizar el selector universal en la primera regla declarada, por lo que en vez de:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
}

tendríamos:

* {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
}

Selector de tipo o etiqueta

Como su propio nombre indica, el selector de etiqueta se utiliza para aplicar estilos en las etiquetas HTML, es lo que hemos estado realizando constantemente:

etiqueta_html {
  propiedad: valor;
}

Es muy útil para establecer un patrón común de comportamiento, es habitual tener un estilo base para etiquetas como los p (párrafos), div (cajas), h1 (titular nivel1), h2 etc. que luego se ven sobrescritos por otros estilos en casos concretos (como por ejemplo un estilo para los h2 de un artículo y otro para los h2 de los bloques).

p {
  text-align: justify;
}
/* En esta regla utilizamos un selector de etiquetas para indicar que el texto dentro de la etiqueta HTML p se debe pintar justificado */

Selector descendente

El otro de los selectores que utilizamos en nuestro proyecto es el selector descendente. Nos permite establecer un estilo para una etiqueta que se encuentre dentro de otra, pudiendo tener un estilo para las etiquetas h2 que están dentro de un article y otro estilo para los h2 que están dentro de un aside

etiqueta_html etiqueta_html {
  propiedad: valor;
}

Podría asegurarse que es el selector más utilizado y nos proporciona una enorme flexibilidad ya que este selector nos permite tener diferentes estilos para las mismas etiquetas HTML según su jerarquía dentro del documento.

article p {
  text-align: justify;
}
/* En esta regla utilizamos un selector de etiquetas para indicar que el texto dentro de la etiqueta HTML p ubicada dentro de un article se debe pintar justificado */
aside p {
  text-align: right;
}
/* En esta regla utilizamos un selector de etiquetas para indicar que el texto dentro de la etiqueta HTML p ubicada dentro de un aside se debe pintar alineado a la derecha */

Selector de clase

El selector de clase es, sin duda, el rey de los selectores. A las etiquetas HTML podemos ponerle un atributo class y asignarle un valor:

<div class="clase1"></div>

o incluso varios:

<div class="clase1 clase2"></div>

De esta forma vinculamos una etiqueta HTML con una o varias clases. Podemos utilizar las mismas clases para diferentes etiquetas HTML, de forma que esto es válido:

<div class="clase1"></div>
<p class="clase1"></div>

¿Intuyes lo mágico de este selector? Sí; gracias al selector de clase podemos poner un borde de color a unos enlaces concretos y, al mismo tiempo, a todas las imágenes que tengan esa misma clase.

El selector de clase tiene una peculiaridad a la hora de introducirlo en la regla CSS y es que su nombre va precedido por un . (punto) por lo que en nuestro ejemplo sería:

.clase1 {
  propiedad: valor;
}

.clase2 {
  propiedad: valor;
}

Y lo que es más genial aún, podemos combinar un selector de etiqueta con un selector de clase:

img.clase1 {
  propiedad: valor;
}

De forma que este estilo se aplicará a las etiquetas HTML img que tengan la clase «clase1», pero no a cualquier otra etiqueta HTML aunque tenga esa clase asociada!

  <img src="" class="clase1" alt="" title="" /> <!-- a esta etiqueta se le aplicara el estilo -->
  <span class="clase1">text</span> <!-- a esta etiqueta NO se le aplicara el estilo -->

Pero aún hay más… también podemos combinar los selectores de clase con los selectores descendentes:

p img.clase1 {
  propiedad: valor;
}

Esta regla se aplica a las etiquetas img con clase «clase1» que están dentro de una etiqueta p

Otro genial ejemplo de la potencia del CSS:

p.clase2 img.clase1 {
  propiedad: valor;
}

Esta regla se aplica a las etiquetas img con clase «clase1» que están dentro de una etiqueta p con clase «clase2» 😀

Selector de ID

Al igual que una etiqueta HTML tiene un atributo class, existe otro llamado id. Al atributo id sólo se le puede asignar un valor (no como en el class que podemos utilizar varios) y, además, dentro de un documento HTML no pueden existir dos (o más) etiquetas con el mismo id. El id es, como su propio indica, un identificador… y los identificadores tienen que ser únicos!!

IMPORTANTE: Si utilizas el mismo id en varias etiquetas dentro del mismo documento, tu navegador web aplicará los estilos correspondientes a esas etiquetas, pero cuando pases tu código por el validador de la W3C te indicará que existe un error ya que el estándar web especifica que el id es único y tenemos que seguir (siempre que podamos) los estándares… si te ves en la situación de tener que repetir un id… lo suyo es utilizar una clase. Es más!!! Las tendencias actuales de buenas prácticas nos dictan que NO debemos utilizar los IDs en las hojas de estilo, dejando éstos para su uso con JavaScript.

Dicho esto, al igual que a la hora de incorporar nuestra clase a la regla CSS la precedemos por un punto, el ID viene precedido por una almohadilla #

#identificador {
  propiedad: valor;
}
/* Esta regla se aplica a una etiqueta HTML con id igual a identificador, por ejemplo <div id="identificador"></div> */

Podemos combinar nuestro selector ID con los selectores de etiquetas, descendentes e incluso de clase… aunque si necesitas hacerlo deberías plantearte si un selector ID es lo más correcto… la respuesta siempre será no 😉

Selector de hijos

El selector de hijos es muy parecido al descendente, pero con una importantísima diferencia. Un selector descendente aplica un estilo a una etiqueta (clase, etc) que está contenida en otra, esto significa que este estilo:

div img {
  border: 0;
}

se aplicaría para la etiqueta img en estos tres casos:

<div>
  <img src="url imagen" alt="texto alternativo" title="titulo imagen" />
  <p>
    <img src="url imagen2" alt="texto alternativo2" title="titulo imagen2" />
  </p>
  <img src="url imagen3" alt="texto alternativo3" title="titulo imagen3" />
</div>

En nuestros proyectos veremos que es muy habitual tener listas dentro de listas y querer aplicar un estilo sólo a la lista de primer nivel. Para esto tenemos el selector de hijos.

Un selector de hijos aplicará el estilo a la etiqueta contenida dentro de otra si es hija de primer nivel, es decir, está justo dentro y sólo dentro de esa etiqueta, así pues este CSS:

div > img {
  border: 0;
}

en nuestro ejemplo:

<div>
  <img src="url imagen" alt="texto alternativo" title="titulo imagen" />
  <p>
    <img src="url imagen2" alt="texto alternativo2" title="titulo imagen2" />
  </p>
  <img src="url imagen3" alt="texto alternativo3" title="titulo imagen3" />
</div>

sólo se aplicaría al primer img y al tercero, al tratarse de etiquetas img hijas (en primer nivel) de div

Este selector, junto con las pseudo-clases y el selector de atributos son básicos en la maquetación moderna 😉

Selector de atributos

Este tipo de selector busca dar un plus de concreción al selector de elementos. Es un selector muy utilizado a la hora de agregar estilos a los elementos de un formulario permitiéndonos maquetar (sin tener que especificar un class) todos los inputs de tipo texto, todas las cajitas donde solemos poner cosas como nuestro nombre… las cajas de texto de una línea (no las áreas).

El selector de atributos se construye colocando el nombre de la etiqueta y, entre corchetes, el nombre del atributo + el grado de concreción sobre el atributo, lo que significa que tiene varias formas de usarse:

input[type="text"] {
  border: 1px solid #000000;
}

input[class] {
  border: 1px solid #000000;
}

input[class^="clase"] {
  border: 1px solid #000000;
}

input[class$="_hover"] {
  border: 1px solid #000000;
}

input[class*="text"] {
  border: 1px solid #000000;
}

• La primera regla se aplica a todos los input de tipo text.
• La segunda regla se aplica a todos los input que tengan definido el atributo class (independientemente de su valor).
• La tercera regla se aplica a todos los elementos que tienen un valor para ese atributo que empieza por la cadena indicada.
• La cuarta regla se aplica a todos los elementos que tienen un valor para ese atributo que termina por la cadena indicada.
• La quinta regla se aplica a todos los elementos que tienen un valor para ese atributo que contiene la cadena indicada.

Existen más formas de declarar reglas con selectores de atributo, aunque los más habituales son los indicados.

Desafortunadamente, sólo las dos primeras reglas tienen un buen soporte en los navegadores, por lo que utilizar el resto de reglas no siempre será posible en nuestros proyectos.

En la próxima entrega

Hasta aquí llegamos con las reglas y los diferentes selectores de CSS3. Es muy importante tanto comprender el funcionamiento del CSS3 como familiarizarse con su uso; todos los proyectos web utilizan CSS (y a partir de ahora CSS3) para establecer el pintado de nuestro HTML.

Si eres programador web seguramente te tocará maquetar los diseños, así que el CSS3 es vital para ti.

Si eres diseñador web, tus diseños tienen que ser maquetables con HTML5, CSS3 y JavaScript. Si no conoces CSS3 no sabrás diseñar correctamente para web. Además, al maquetarse con estilos y no con imágenes los bordes redondeados, sombras, etc tendrás que indicarle al encargado de realizar la maquetación los valores a utilizar en estilos.

Junto con lo visto en este artículo, en CSS3 también tenemos pseudo-clases y pseudo-elementos. Éstos son un pilar importante para realizar las maquetaciones de los diseños modernos y será en el próximo artículo dónde nos adentraremos en estos flexibles elementos de CSS3