Cambiar de estilo
En el archivo estilo.css tenemos definidos parte de los estilos de nuestro juego. Por ejemplo los colores de fondo y de texto, tamaños de texto y demás. Podemos modificar estos valores para personalizarlo un poco.
portada-juego {
background : cadetblue ;
button {
width : 70% ;
marging : 2rem auto ;
color : black ;
background : white ;
} Como puedes ver primero se define la etiqueta sobre la que se aplica, y entre llaves se ponen las propiedades que queremos cambiar. En este ejemplo estamos cambiando la portada (portada-juego) y el estilo de los botones (button).
¿Qué significa rem?
rem es una de las unidades de medida de css. Se puede usar con cualquier elemento que tenga tamaño, como el tamaño del texto.
¿Qué es auto?
auto Se usa en márgenes y otras medidas para indicar un tamaño automático. En el ejemplo anterior hace que ponga el mismo espacio a ambos lados del botón.
Algunos estilos
- background: color del fondo.
- color: color del texto.
- font-size: tamaño del texto.
- margin: espacio entre la caja del elemento y otros elementos.
- padding: espacio entre el texto y la caja en la que está.
- border: color, tipo y tamaño del borde.
- border-radius: radio del borde en esquinas redondeadas.
Los colores se pueden escribir en inglés, o se pueden escoger con códigos numéricos para colores.
Imágenes y personajes
Con las hojas de estilo también podemos cambiar las imágenes de personajes y fondos del juego, o añadir otras nuevas:
escenas-juego {
&>paisaje-montañoso {
background-image : url('img/paisaje.png') ;
}
}
diálogo-personajes {
&[data-personaje="Deva"] personaje-actual {
background-image : url('img/deva.png') ;
}
&[data-personaje="Juglar"] personaje-actual {
background-image : url('img/juglar.png') ;
filter : drop-shadow(0 0 1rem white) ;
}
} Para añadir nuevas escenas o personajes solo tienes que copiar esas reglas y cambiar el nombre de personaje o escena, y la dirección de la imagen.
¿Qué significa &>?
El símbolo & se usa en estilos anidados, y se sustituye por elemento padre (en este caso escena-juego). El símbolo > se usa para indicar un hijo directo. Así que la regla se puede traducir como "selecciona un elemento paisaje-montañoso que esté dentro de escenas-juego directamente".
¿Para que se usa &[data-personaje="Juglar"]?
Este código selecciona el elemento que tenga un atributo llamado data-personaje cuyo valor sea Juglar. De esta manera solo mostraremos la imagen de Juglar cuando ese personaje esté hablando. El símbolo & se usa en estilos anidados, y se sustituye por elemento padre (en este caso diálogo-personaje).