Formater son texte en HTML5 et CSS3

Get Started. It's Free
or sign up with your email address
Formater son texte en HTML5 et CSS3 by Mind Map: Formater son texte  en  HTML5 et CSS3

1. Espace

1.1. Entre les lettres

1.1.1. letter-spacing

1.2. Entre les mots

1.2.1. word-spacing

1.3. Entre les lignes

1.3.1. line-height

2. Retrait

2.1. text-indent

2.1.1. text-indent: 30px;

3. Citation

3.1. <blockquote> </blockquote>

4. Texte en

4.1. majuscule

4.1.1. text-transform: uppercase;

4.2. petite majuscule

4.2.1. font-variant: small-caps;

4.3. minuscule

4.3.1. lowercase

4.4. 1ère lettre Maj

4.4.1. capitalize

4.5. exposant

4.5.1. <sup> </sup>

4.6. indice

4.6.1. <sub> </sub>

5. L'auteur : Olivier Legrand

5.1. Formateur du Web

5.2. Olivier Legrand - Concepteur pédagogique multimédia

6. Image flottante

6.1. Dans le Html

6.1.1. <img src="rose.jpg" alt="rose" class="reiki">

6.1.2. On indique un nom de class="reiki"

6.2. Dans le Css

6.2.1. .reiki { float: left; }

6.2.2. La class reiki est rappelée

6.3. Variante

6.3.1. .reiki { float: right; }

6.3.1.1. Aligné à droite

7. Decoration

7.1. text-decoration

7.1.1. none

7.1.1.1. texte non souligné

7.1.2. underline

7.1.2.1. texte souligné par dessous

7.1.3. overline underline

7.1.3.1. texte souligné par dessus et dessous

7.1.4. line-through

7.1.4.1. texte barré

8. Alignement

8.1. Verticalement en CSS

8.1.1. vertical-align:

8.1.1.1. baseline;

8.1.1.1.1. alignement par défaut

8.1.1.2. sub;

8.1.1.2.1. texte en indice

8.1.1.3. super;

8.1.1.3.1. texte en exposant

8.1.1.4. top;

8.1.1.4.1. plus haut que l'élément parent

8.1.1.5. middle;

8.1.1.5.1. texte au milieu

8.1.1.6. bottom;

8.1.1.6.1. texte au plus bas

8.2. Horizontalement en CSS

8.2.1. text-align:

8.2.1.1. left;

8.2.1.1.1. gauche

8.2.1.2. right;

8.2.1.2.1. droite

8.2.1.3. justify;

8.2.1.3.1. justifier

8.2.1.4. center

8.2.1.4.1. centré

8.2.1.5. auto;

8.2.1.5.1. alignement par défaut

9. Les attributs

9.1. Police

9.1.1. font-family: Times New Roman;

9.1.2. font-family: arial, verdana, sans-serif ;

9.1.3. Pesonnalisée

9.1.3.1. @font-face

9.1.3.2. Le navigateur téléchargera la police

9.1.3.3. Conseils :

9.1.3.3.1. 2 polices personnalisées par site

9.1.3.4. Exemple :

9.2. La taille

9.2.1. font-size

9.2.2. Derivés

9.2.2.1. font-size: x-large;

9.2.2.2. font-size: 1.2em;

9.2.2.3. font-size: 14px;

9.3. Gras

9.3.1. font-weight: bold;

9.4. Souligné

9.4.1. text-decoration: underline;

9.5. Italique

9.5.1. font-style: italic;

9.6. Raccourci

9.6.1. font: italic bold small-caps 20pt Arial;

10. Les puces

10.1. Balises

10.1.1. <ul> </ul>

10.1.1.1. <li> puce </li>

10.1.1.2. simple

10.1.2. <ol> </ol>

10.1.2.1. numérotation

10.1.3. Exemple

10.2. CSS

10.2.1. liste-style-type

10.2.1.1. disc

10.2.1.1.1. cercle plein

10.2.1.2. circle

10.2.1.2.1. cercle vide

10.2.1.3. square

10.2.1.3.1. carré

10.2.1.4. upper-roman

10.2.1.4.1. soit I . II . III etc

10.2.1.5. lower-roman

10.2.1.5.1. soit i, ii , iii etc

10.2.1.6. upper-alpha

10.2.1.6.1. soit A, B, C, D etc

10.2.1.7. lower-alpha

10.2.1.7.1. soit a, b, c, d, etc

10.2.2. Exemple

10.3. Image

10.3.1. list-style-image

10.3.2. .image1 { list-style-image: url(bouton.png);}