6.03 - 📹 Modificar Plantillas CSS (básico) - Anki Macrocurso

MÓDULO 6 - Códigos; HTML, CSS, Latex, MathJax y JavaScript - Anki Macrocurso

◁ Lección anterior | Próxima lección ▷

CSS intro

Antes de comenzar, debes tener claro un concepto clave: las plantillas de anverso y reverso de una tarjeta son realmente un documento de texto. En dicho documento se escribe código HTML, con el que se que crea el contenido y, por otro lado, existe el código CSS, que unido al código HTML permite darle forma, color, posición (y otras características visuales) a una documento de texto.

Las siglas CSS (Cascading Style Sheets) significan «Hojas de estilo en cascada» y parten de un concepto simple pero muy potente: aplicar estilos (colores, formas, márgenes, etc...) a uno o varios documentos (generalmente documentos HTML, páginas webs) de forma masiva.

Se le denomina estilos en cascada porque se aplican de arriba a abajo (siguiendo un patrón denominado herencia, que es como una jerarquía).

Para modificar el estilo y la estética de nuestras tarjetas, podemos hacerlo únicamente mediante HTML. Sin embargo, puede ser muy tediosa la tarea de modificar como queremos nuestras tarjetas o un grupo de estas solo mediante HTML y no podríamos alcanzar todas las posibilidades que podríamos si utilizásemos CSS. Por ello, es mucho más eficiente utilizar el lenguaje de programación CSS para estilizar masivamente todas las tarjetas de un mismo tipo de nota, de una sola pasada.

Para esta lección, crearemos un mazo nuevo llamado CSS y un tipo de nota nuevo, al que llamaremos Básico para CSS. Para el tipo de nota, añadiremos el básico y modificaremos los campos para que existan los siguientes apartados: País, Capital, Bandera y Geografía.

Conceptos básicos, anatomía y sintaxis

Pasted image 20220201224814.png|404

Regla: Una regla es el conjunto de propiedades que se van a aplicar a un elemento determinado

Declaración: (las características que le quiero agregar o cambiar).

Selector

El elemento inherente a la tarjeta o el elemento HTML en el que comienza la regla. Esta selecciona los elementos a los que vamos a dar estilo (por ejemplo, los elementos campo {{Anverso}}, <p>, <image>…). Puede ser además un elemento que no esté explícitamente en nuestra parte de HTML, como por ejemplo el selector .card que nos sirve para dar estilo a toda la tarjeta. Para dar estilo a un elemento diferente, solo cambia el selector en el apartado de CSS.

.card – modificamos así todas las tarjetas enteras de todos los tipos de tarjetas que se creen con este tipo de nota. Cualquier parámetro que metamos aquí hará que toda la tarjeta tenga dicho aspecto.

.card1 – solo modificaremos la tarjeta tipo 1 de nuestro tipo de nota. card2 (o 3, 4, 5…)

Pasted image 20220201224841.png

.nombredelcampo – así solo modificamos los parámetros de este campo, no el de los demás.

Ej: para el campo Pais, si queremos cambiar solo el estilo de este campo, que en HTML se vería como {{Pais}}, lo que pondremos en la sección CSS sería .Pais{…} .

Quiero dejar claro desde el principio que existe una jerarquía de prioridades, es decir, que cuanto más específico sea el selector, mayor prioridad tendrá a la hora de dar el estilo. Por ej: .card {text-align: right;} dice derecha pero como en este ejemplo estamos en el tipo tarjeta 1, y .card1{text-align: left;} tiene prioridad ya que el cambio producido por la etiqueta .card1 es más específica al solo involucrar al tipo de tarjeta 1 con respecta a la etiqueta .card que afecta a todos los tipos de tarjetas y, por ende, a todas las tarjetas de todos los tipos de tarjetas.

.card (así le decimos a anki que queremos modificar nuestra tarjeta, tanto anverso como reverso) {
 color: red;
 background: black;
}

Vamos, que lo que hemos escrito es: en todas las tarjetas (.card) queremos modificar las etiquetas color del texto y el fondo (color y background).

Recalco: Todo lo que esté dentro de los corchetes es lo que le dirá a Anki lo que debe hacer para modificar el estilo visual de la tarjeta:

Selectores

.card (todas las tarjetas)

.card1/.card 2… (tarjetas del tipo de tarjeta 1, 2…)

Agrupar texto dentro de una clase (es decir, agrupar tanto texto como campo dentro de una palabra o grupo de palabras).

…

Ej: Pregunta:

Pregunta
. En CSS: .prengunta {}

Se puede dar una combinación de clases, que las veremos en la siguiente lección:

Esto sirve a la hora de que estemos usando anki en modo oscuro pues a veces el fondo oscuro con ciertos colores no se ve bien pero en fondo claro sí y viceversa.

Propiedades básicas de CSS

Comentarios (no es propiedad)

/* Comentarios */ = notas que no actúan de ningún tipo, solo son descripciones que queremos hacer para recordar algo.

Recordad, con las propiedades le decimos a Anki qué queremos que se modifique. Estas propiedades estarán dentro de los selectores, que serán el elemento a modificar.

Propiedad (descripción) – valor de la propiedad

Ahora, veremos las 3 propiedades básicas junto con los posibles valores que les podemos dar y que a su vez se nos permite usar en Anki:

Fuentes (font)

Texto (text)

Fondo (background)

Ej:

.card{
background-image: url("paper.gif");
}

Despedida

Estas son las etiquetas que, aunque básicas, más utilizaremos y, por ello, en esta lección no vamos a indagar mucho más. Para quien quiera aprende un poco más la próxima lección entraremos más en profundidad.

Y para quién esté interesado en aprender mucho más, pues no entraremos en este curso a ver todo lo referente al CSS o HMTL, os dejaré los links y otras referencias para que podáis aprender un poco más. Xao

Bibliografía

◁ Lección anterior | Próxima lección ▷

MÓDULO 6 - Códigos; HTML, CSS, Latex, MathJax y JavaScript - Anki Macrocurso