• Bases CSS

    Il me semble que certain(e)s, sont effrayé(e)s par les code html/CSS et je voudrais revenir sur le principe de base.

    En html seul, on écrit: "le texte est de couleur noire" et il n'y a aucune animation.<p style="color:black;">Mon texte</p>

    En html/CSS, on écrit: le texte se nomme "nom1" <p id="nom1">Mon texte</p> dans la partie html et

    dans la partie CSS, toujours placée entre: <style>!--  la partie CSS --></style>, afin que le programme sache lire ces lignes et les appliquer à l'élément nommé.

    <style><!--

    #nom1{color:black;}

    #nom1:hover{color:red;}

    --></style>

    :hover signifie: au survol de l'élément.

    Le code devient:

    <p id="nom1">Mon texte</p>

    <style><!--

    #nom1{color:black;}

    #nom1:hover{color:red;}

    --></style>

    et le résultat est:

    Mon texte qui change de couleur au survol.

    Si vous regardez le code source de mon article, j'ai ajouté d'autres paramètres (attributs) que la couleur mais je veux simplifier la démonstration.

    Le principe est de donner un nom à l'élément en html et, en CSS, de dire: cet élément est, au départ de couleur noire et, au survol, de couleur rouge, donc 2 lignes pour cette animation.

    On peut définir d'autres attributs:

    Mon texte qui change de couleur de fond au survol.

    Mon texte qui change de taille au survol.

    Mon texte avec relief au survol.

    Les animations sont ici rapides mais on peut définir le temps de l'animation mais je ne voulais revenir que sur la base.

    N'oublions donc pas que nous devons retrouver, en ligne CSS, le nom de l'élément à animer ou simplement à décorer car on peut ne pas mettre d'animation au survol.

    A suivre si le sujet intéresse...