Infoforall

Identification

Infoforall

Résumé 3 - RAPPELS SUR LE CSS


Lien vers l'activité : Rappels sur le CSS

Dernière modif. : 13 01 2021

1 - Couleurs en CSS

1.1 - Fournir une couleur

Il existe plusieurs façons de fournir la couleur qu'on veut afficher :

  • en donnant le nom d'une couleur prédéfinie :
    • style="background-color:grey;"
  • en donnant les intensités R G et B en décimal (entre 0 et 255) :
    • style=background-color:rgb(255,255,0);" pour du jaune
  • en donnant les intensités R G et B en hexadécimal (entre 00 et FF) :
    • style=background-color:#FFFF00;" en jaune
  • en donnant les intensités R G et B en pourcentage (entre 0% et 100%) :
    • style=background-color:rgb(20%,50%,30%);"

1.2 - Hexadécimal

Comme le décimal mais avec 16 chiffres :

  • les mêmes de 0 à 9
  • A vaut 10, B vaut 11, C vaut 12, D vaut 13, E vaut 14 et F vaut 15
  • On a donc FF > FE > FC > ... > F0 > EF ... > A0 > 9F > 9E > 9D ... > 9A > 99 > 98 ... > 00

2 - Création d'un fichier CSS

2.1 - Adresse du fichier à télécharger : balise link

<link rel="stylesheet" href="style_1.css" />


  • Cette balise linkest à placer dans la balise head
  • Elle possède les attributs :
    • rel permettant de préciser stylesheet (feuille de style)
    • href permettant de fournir l'adresse du fichier CSS

2.2 - Codification des propriétés CSS

Un exemple de code CSS agissant sur la balise nav

1 2 3 4
nav /* Voilà un commentaire : c'est ici qu'on modifie la forme de nav */ { background-color:#AAAA00; }


Un exemple de codification double, même effet CSS sur deux balises.

1 2 3 4 5
header, footer /* Les deux auront les mêmes effets de forme */ { background-color:#AAAA00; color:#5555AA; }


En CSS, l'espacement et la tabulation n'est qu'une affaire de clarté visuelle. Ce code est totalement valide :

1
body { color:rgb(100,100,100); }

3 - Attribut class

Si on agit sur p en CSS, on modifie l'apparence de toutes les balises p.

L'attribut class va permettre d'agir en CSS sur les balises qui possèdent cette classe. Cela permet ainsi de mettre en couleur certaines balises p mais pas toutes par exemple.


  • Dans le fichier HTML, on aurait un code de ce type par exemple
1 2 3 4
<p>Paragraphe 1 : Ce paragraphe est affiché comme un paragraphe classique.</p> <p class="mon_premier_type">Paragraphe 2</p> <p class="mon_premier_type">Paragraphe 3 .</p> <p class="mon_second_type">Paragraphe 4.</p>


  • Dans le fichier CSS, on aurait un code de ce type par exemple
1 2 3 4 5 6 7 8 9 10
.mon_premier_type { font-style: italic; background-color: grey; color : white; } .mon_second_type { text-decoration : line-through; background-color: silver; }


On notera que l'indication d'une classe commence par un point dans la codification CSS.

Si on agit sur toutes les balises, on donne juste le nom du type de balise.

4 - Quelques autres propriétés CSS

Nous avons déjà vu les propriétés

  • color pour la couleur du texte et
  • background-color pour la couleur du fond.

Mais il existe toutes une multitude de propriétés CSS utilisables. Par exemple :

  • text-align permet d'indiquer si le texte doit être à gauche, à droite, centré ou justifié
    • exemple : text-align: justify;


  • text-decoration permet de souligné, barré ...
    • exemple : text-decoration: underline;


  • font-size permet de modifier la taille du texte par défaut
    • exemple : font-size: x-large;


  • font-weight permet d'écrire le texte en gras
    • exemple : font-weight: bold;

Pour les balises de type block et inline-block (comme les images), on peut définir la largeur et la hauteur avec les propriétés suivantes :

  • width permet de définir la largeur de la balise
    • exemple width: 300px;


  • height permet de définir la hauteur de la balise
    • exemple height: 300px;

Attention :

  • ces deux derniers attributs ne fonctionnent pas avec les balises de type inline.
  • il existe également un attribut HTML width et un attribut HTML height

Balises génériques div et span

Pour différencier les effets graphiques sur plusieurs autres balises, on peut utiliser une classe sur une balise de type conteneur.

  • la balise div est la balise conteneur générique de type block (avec passage à la ligne)
  • la balise span est la balise contenueur générique de type inline (sans passage à la ligne)


1 2 3 4 5 6 7 8
<div class="mon_premier_type" > <p>"Lorem ipsum dolor .</p> <p>"At ipsum vitae est lacinia.</p> <p>"Morbi dictum. Vestibulum .</p> <p>"Phasellus placerat purus vel mi. </p> </div>


1
<p>Lorem <span class="mon_premier_type">sit ipsum dolor</span> elit </p>