alignements

This commit is contained in:
Fred Tempez 2024-02-18 19:57:09 +01:00
parent 362dc44543
commit 6d34f66b37
3 changed files with 191 additions and 0 deletions

View File

@ -0,0 +1,70 @@
---
header: En-tête
footer: Pied de page
---
<style>
header, footer {
color: red;
}
</style>
# Couleurs des en-têtes et pied de page
On utilise une propriété CSS :
`<style>`
`header, footer {`
`color: red;`
`}`
`</style>`
---
# Seconde diapositive
---
<style scoped>
header, footer {
color: orange;
}
</style>
# Troisième diapositive avec des couleurs de l'en-tête et du pied de page personnalisées
On utilise une propriété CSS :
`<style scoped>`
`header, footer {`
`color: orange;`
`}`
`</style>`
---
# Quatrième diapositive
<style scoped>
header {
right: 30px;
text-align: center;
font-size: 40px;
}
footer {
right: 30px;
text-align: right;
font-size: 40px;
}
</style>
Gérer la hauteur du texte et son alignement :
`<style scoped>`
`header {`
`right: 30px;`
`text-align: center;`
`font-size: 40px;`
`}`
`footer {`
`right: 30px;`
`text-align: right;`
`font-size: 40px;`
`}`
`</style>`

47
src/Le texte.md Normal file
View File

@ -0,0 +1,47 @@
---
color: red
---
# Diapo 1
La couleur se définit comme une propriété lorsqu'elle s'applique à toutes les diapositives.
On peut aussi les définir à l'aide de directives pour définir diapositive par diapositive.
`<!-- color: red -->`
---
# Diapo 2
Couleur du texte rouge :
---
<!-- _color: blue -->
# Diapo 3
Couleur du texte d'une seule diapositive, celle fois en bleu avec la directive :
`<!-- _color: blue -->`
---
# Diapo 4
Retour au texte du rouge
<style scoped>
p {
font-size: 45px;
}
</style>
Augmenter la taille du texte avec la propriété font-size :
`<style scoped>`
`p {`
`font-size: 60px;`
`}`
`</style>`

74
src/Les titres.md Normal file
View File

@ -0,0 +1,74 @@
<style>
h1 {
color: green;
}
h2 {
color: olive;
}
</style>
# Titre
## Titre de niveau 2
La couleur des titres ne peut se définir que grâce à une feuille de style placée au début du diaporama.
`<style>`
`h1 {`
`color: green;`
`}`
`</style>`
h1 représente un seul # , h2 deux ##, etc..
---
# Seconde Diapositive
## Titre de niveau 2
---
<style scoped>
h1 {
color: orange;
}
h2 {
color: yellow;
}
</style>
# Troisième diapositive
## Titre de niveau 2
A l'aide de l'instruction `scope` le style ne s'applique que dans la diapositive là où il est défini :
`<style scoped>`
`h1 {`
`color: orange;`
`}`
`h2 {`
`color: yellow;`
`}`
`</style>`
---
# Quatrième diapositive
## Titre de niveau 2
<style scoped>
h1 {
font-size: 60px;
}
</style>
Pour modifier la hauteur des titres on utilise la propriétés font-size suivie d'une taille en pixels :
`<style scoped>`
`h1 {`
`font-size: 150px;`
`}`
`</style>`