blogdown: Creación de sitios web con R Markdown

B.2 CSS

El lenguaje Cascading Stylesheets (CSS) se utiliza para describir el aspecto y el formato de los documentos escritos en HTML. CSS es responsable del estilo visual de su sitio. CSS es muy divertido de jugar, pero también puede robar tu tiempo fácilmente.

En el marco de Hugo (https://gohugo.io/tutorials/creating-a-new-theme/), CSS es uno de los principales archivos “sin contenido” que da forma a la apariencia de su sitio (los otros son imágenes, JavaScript y plantillas Hugo). ¿Qué significa el “aspecto y tacto” de un sitio? “Buscar” generalmente se refiere a componentes de estilo estático que incluyen, entre otros,

paltetas de color,
imágenes,
diseños/márgenes, y
fuentes.

mientras que “sentir” se relaciona con componentes dinámicos con los que el usuario interactúa como

menús desplegables,
botones, y
formas.

Hay 3 formas de definir estilos. El primero está en línea con HTML. Por ejemplo, este código

<p>Marco! <em>Polo!</em></p>

produciría texto que se parece a esto: Marco! Polo!

Sin embargo, este método generalmente no es preferido para razones numerosas.

Una segunda forma es definir internamente el CSS colocando una sección de estilo en su HTML:

<html>
<style> 
#favorite {
    font-style: italic;
}
</style>
<ul id="tea-list">
  <li>Earl Grey</li>
  <li>Darjeeling</li>
  <li>Oolong</li>
  <li>Chamomile</li>
  <li id="favorite">Chai</li>
</ul>
</html>

En este ejemplo, solo el último té enumerado, Chai, está en cursiva.

El tercer método es el más popular porque es más flexible y el menos repetitivo. En este método, usted define el CSS en un archivo externo que luego se referencia como un enlace en su HTML:

<html>
    <link rel="stylesheet" href="/css/style.css" />
</html>

Lo que va dentro del documento CSS vinculado es esencialmente una lista de reglas (la misma lista podría aparecer internamente entre las etiquetas de estilo, si está utilizando el segundo método). Cada regla debe incluir un selector o un grupo de selectores, y un bloque de declaraciones dentro de llaves que contenga uno o más pares property: value;. Aquí está la estructura general para una regla:

/* CSS pseudo-code */
selectorlist {
    property: value;
    /* more property: value; pairs*/
}

Los selectores pueden basarse en tipos o atributos de elementos HTML, como id o class (y combinaciones de estos atributos):

/* by element type */
li { 
    color: yellow; /* all <li> elements are yellow */
}

/* by ID with the # symbol */
#my-id { 
    color: yellow; /* elements with id = "my-id" are yellow */
}

/* by class with the . symbol */
.my-class { 
    color: yellow; /* elements with class = "my-class" are yellow  */
}

Debido a que cada elemento HTML puede coincidir con varios selectores diferentes, el estándar CSS determina qué conjunto de reglas tiene prioridad para cualquier elemento dado y qué propiedades heredar. Aquí es donde el algoritmo de cascada entra en juego. Por ejemplo, tome una lista desordenada simple:

<ul id="tea-list">
  <li>Earl Grey</li>
  <li>Darjeeling</li>
  <li>Oolong</li>
  <li>Chamomile</li>
  <li>Chai</li>
</ul>

Ahora, digamos que queremos resaltar nuestros tés favoritos nuevamente, así que usaremos un atributo de clase.

<ul id="tea-list">
  <li>Earl Grey</li>
  <li class="favorite">Darjeeling</li>
  <li>Oolong</li>
  <li>Chamomile</li>
  <li class="favorite">Chai</li>
</ul>

Podemos usar este atributo de clase como un selector en nuestro CSS. Digamos que queremos que nuestros tés favoritos estén en negrita y tengan un color de fondo amarillo, por lo que nuestro CSS se vería así:

.favorite {
  font-weight: bold;
  background-color: yellow;
}

Ahora, si desea que cada elemento de la lista se ponga en cursiva con un fondo blanco, puede configurar otra regla:

li { 
  font-style: italic;
  background-color: white;
}

Si juega con este código (que puede usar fácilmente usando sitios como http://jsbin.com, https://jsfiddle.net o https://codepen.io/pen/), verá que el segundo té favorito sigue resaltado en amarillo. Esto se debe a que la regla de CSS sobre .favorite como clase es más específica que la regla sobre elementos de tipo li. Para anular la regla .favorite, debe ser tan específico como sea posible al elegir su grupo de selectores:

ul#tea-list li.favorite {
  background-color: white;
}

Este ejemplo solo araña la superficie de cascada y herencia.

Para cualquier tema de Hugo que instale, puede encontrar el archivo CSS en la carpeta themes/. Por ejemplo, el tema predeterminado de litio se encuentra en: themes/hugo-lithium-theme/static/css/main.css. Una vez que esté familiarizado con CSS, puede comprender cómo funciona cada conjunto de reglas para dar forma al estilo visual de su sitio web, y cómo modificar las reglas. Para algunos temas (es decir, el tema académico), tiene la opción de vincular a un CSS personalizado que puede utilizar para personalizar aún más el estilo visual de su sitio.

Algunos ejemplos de una línea ilustran cómo las simples reglas de CSS se pueden usar para hacer cambios dramáticos:

Para hacer imágenes circulares o redondeadas, puede asignar una clase img-circle a imágenes (e.g., <img class="img-circle" src="foo.png" />) y definir el CSS:
```
.img-circle {
  border-radius: 50%;
}
```
Para hacer tablas de rayas, puede agregar colores de fondo a las filas impares o pares de la tabla, e.g.,
```
tr:nth-child(even) {
  background: #eee;
}
```
Puede agregar o anteponer contenido a elementos a través de pseudo-elementos ::after y ::before. Aquí hay un ejemplo de cómo agregar un período después de los números de sección: https://github.com/rstudio/blogdown/issues/80.