alignements
This commit is contained in:
parent
362dc44543
commit
6d34f66b37
70
src/En-tête et pied de page.md
Normal file
70
src/En-tête et pied de page.md
Normal 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
47
src/Le texte.md
Normal 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
74
src/Les titres.md
Normal 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>`
|
||||
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user