54 lines
1.8 KiB
Markdown
54 lines
1.8 KiB
Markdown
[English](Home) · **Dansk** · [Bahasa Malaysia](Home-ms)
|
|
|
|
# Colour Vocab
|
|
|
|
En flashcard-side til at lære farverne på spansk, lavet kun med HTML og CSS.
|
|
|
|
|
|
|
|
## Gloser
|
|
|
|
| Spansk | English | Dansk | Bahasa Malaysia |
|
|
| --- | --- | --- | --- |
|
|
| Rojo | red | rød | merah |
|
|
| Azul | blue | blå | biru |
|
|
| Anaranjado | orange | orange | oren |
|
|
| Verde | green | grøn | hijau |
|
|
| Amarillo | yellow | gul | kuning |
|
|
|
|
## Sådan kører du den
|
|
|
|
Åbn `src/index.html` i en vilkårlig browser. Der er intet at installere.
|
|
|
|
## Sådan virker den
|
|
|
|
`index.html` linker til et eksternt stylesheet, `style.css`. Opgavens regel er,
|
|
at alle ændringer sker i CSS og ingen i HTML.
|
|
|
|
1. **Link stylesheetet.** `<link rel="stylesheet" href="./style.css" />`.
|
|
Test linket ved midlertidigt at sætte `body { background-color: pink; }` og
|
|
se, at siden ændrer sig.
|
|
2. **Farv hver titel efter dens betydning.** Hver titel har et `id` (`red`,
|
|
`blue`, `orange`, `green`, `yellow`), så `#red { color: red; }` rammer kun
|
|
*Rojo*. `id`'et er et hint, hvis du ikke kender det spanske ord.
|
|
3. **Gør titlerne normale i vægt.** Alle titler har klassen `color-title`, så
|
|
én regel dækker dem: `.color-title { font-weight: normal; }`.
|
|
4. **Størrelse på billederne.** `img { height: 200px; width: 200px; }` gør alle
|
|
farvefelter lige store.
|
|
|
|
Se et preview efter hvert trin, så en fejl opdages, mens den er lille.
|
|
|
|
### Bemærkning om gul
|
|
|
|
Almindelig `yellow` er svær at læse på hvid baggrund, så *Amarillo* bruger
|
|
`#d4a900`.
|
|
|
|
## Skærmbillede
|
|
|
|
Skærmbilledet er taget med headless Chrome i et 480 px bredt vindue:
|
|
|
|
```bash
|
|
chrome --headless=new --hide-scrollbars --window-size=480,1490 \
|
|
--screenshot=docs/wiki/images/colour-vocab.png file:///sti/til/src/index.html
|
|
```
|