Découvez les bases du CSS dans ce tutoriel.
word-spacing : 10px;
La taille peut être exprimée en px, pt, in, cm, mm, pc, em, ex %
Exemple
Ecart entre les mots de 20 px
Code CSS
.ecart-entre-les-mots{
word-spacing : 20px;
}Code HTML
<p class="ecart-entre-les-mots">Ecart entre les mots de 20px</p>
letter-spacing : 10 px;
Exemple
Ecart entre les lettres de 10 px
Code CSS
.ecart-entre-les-lettres{
letter-spacing : 10px;
}Code HTML
<p class="ecart-entre-les-lettres">Ecart entre les lettres de 10px</p>text-align : center;
text-align peut prendre ces différentes valeurs : left, center, right, justify
Exemple
Texte aligné au centre
Code CSS
.texte-aligne-au-centre{
text-align : center;
}
Code HTML
<p class="texe-aligne-au-centre">Texte aligné au centre</p>
text-indent : 50 px;
La propriété de feuille de style css text-indent permet de spécifier le décalage la premiére ligne d'un texte.
La propriété de feuille de style text-indent css peut pendre une valeur
La propriété de feuille de style css text-indent est applicable sur l'ensemble des balises HTML ou XHTML de type "bloc".
Exemple
La propriété de feuille de style css text-indent est applicable sur l'ensemble des balises HTML ou XHTML de type "bloc".La propriété de feuille de style css text-indent est applicable sur l'ensemble des balises HTML ou XHTML de type "bloc".
Code CSS
.decalage-texte-bloc{
text-indent : 50px;
}Code HTML
<p class="decalage-texte-bloc">La propriété de feuille de style css text-indent est applicable sur l'ensemble des balises HTML ou XHTML de type "bloc".La propriété de feuille de style css text-indent est applicable sur l'ensemble des balises HTML ou XHTML de type "bloc".</p>
display : inline;
La propriété de feuille de style css display permet de spécifier la maniére dont un élément est affiché.
La propriété de feuille de style display css peut prendre la valeur de :
- none, le bloc ne sera pas affiché.
- inline, le bloc sera considéré comme étant un seule ligne (sauf nets version <6)
- block, spécifie un bloc.
- inline-block correspond à un élément inline avec un comportement bloc (non w3c). Compatible avec Internet Explorer, Opéra et Safari pour FireFox < 2 utiliser -moz-inline-box.
- list-item le bloc sera affiché sous forme de liste, attention les versions netscape <6 font un décalage
- run-incrée un bloc ou une ligne, selon le contexte, ne semble pas implémenté sauf pour le navigateur opéra et safari.
- compact crée un bloc ou une ligne, selon le contexte, ne semble pas implémenté sauf pour le navigateur opéra et safari.
- marker crée un marqueur pour les listes par exemple ou les feuilles de styles auditives peut être considéré comme inline
- table correspond à 'table'
- inline-table correspond à 'table'
- table-row-group correspond à 'tboby'
- table-header-group correspond à 'thead'
- table-footer-group correspond à 'tfoot'
- table-row correspond à 'tr'
- table-column-group correspond à 'colgroup'
- table-column correspond à 'col'
- table-cell correspond à 'td', 'th'
- table-caption correspond à 'caption'
Exemple avec 2 blocs de paragraphe sur la même ligne
Texte 1
Texte 2
Code CSS
.bloc-inline{
display:inline;
margin:5px;
background-color: #FCF
}
Code HTML
<p class="bloc-inline">Texte 1</p> <p class="bloc-inline">Texte 2</p>