Html & Css

Effets sur les caractères

La mise en forme des textes permet de changer les polices de caractères, de mettre en gras, en couleur, en italique, de souligner et beaucoup d'autres choses encore :

  • font-size permet de préciser la taille de police utilisée. Il existe deux types d'unités :
    • les unités absolues : px (pixels), cm (centimètres), ...
    • les unités relatives : % (par rapport à la taille de police du conteneur), em, ...
  • font-family permet de spécifier la famille de police pour le texte.
    Comme une police donnée n'est pas nécessairement présente sur le poste de l'utilisateur, on précise en général plusieurs choix séparés par des virgules.
  • font-weight permet de définir la graisse de la police (valeurs possibles) ;
  • font-style permet d'afficher du texte en italique ;
  • text-decoration permet de souligner l'élément sélectionné ;
  • font-variant permet d'afficher du texte en petites majuscules.

Bac à sable : Mettre en forme les textes

Dans ce bac à sable, les dimensions sont en pixels.

Ci-contre, on peut modifier à loisir l'apparence du texte du paragraphe.


18




Code Css :

p {                                 /* Mise en forme des paragraphes */
    color : #000000;                /* Couleur du texte */
    font-size : 11px;               /* Taille de la police en pixels */
    font-family : Times New Roman;  /* Police de caractère */
    font-weight : normal;           /* Graisse de la police */
    font-style : normal;            /* Apparence de la police */
    text-decoration : none;         /* Décoration de la police */
    font-variant : normal;          /* Affichage de la police */
    }			

Bac à sable : Les ombres

Dans ce bac à sable, on peut attribuer une ombre au texte ou bien au conteneur du texte (ici le paragraphe).

L'homme qui tire plus vite que son ombre !












Code Css :

p {                                     /* Mise en forme des paragraphes */
    text-shadow: 6px -6px 2px #000000;  /* Ombre du texte */
    line-height: 1.5;                   /* Hauteur de ligne */
    box-shadow: -4px 7px 5px #0000FF;   /* Ombre du conteneur */
    }			

Dans le fichier qui suit, sans toucher au code Html :

  • Encadrer par une bordure verte chacune des listes.
  • Mettre sous fond jaune le dernier item de chaque liste.
  • Écrire en italique le premier item de chaque liste.
  • Écrire en petite majuscule l'élément d'identifiant id="important".
  • Écrire en gras les éléments d'attribut class="coucou".
  • Une piste ?
  • Affichage à obtenir ?
  • Une solution ?
En plus du pseudo-élément :nth-of-type(), on peut utiliser les sélecteurs :first-of-type et :last-of-type pour cibler respectivement le premier et le dernier élément d'un conteneur parent.