ABC HTML CSS 2

Nous avons vu la base de l'écriture d'un code en html: les attributs sont alignés, dans n'importe quel ordre, derrière style=".."

Avec le CSS, nous allons trouver une écriture différente pour parfois (sans animation), un résultat similaire.

Nous conserverons une partie html, dans laquelle nous placerons notre élément, auquel nous donnerons un nom ... et pi c'est tout !

exemple: <p id="zz1">Bonjour</p>  l'identification d'un élément (paragraphe, span, image...) se fait en écrivant id="nom choisi entre guillemets"

Nous ajouterons, dans des lignes à part, avant ou après les lignes html, les attributs que nous destinons à l'élément identifié.

Afin que le programme reconnaisse ces lignes, elles seront écrites entre: <style><!--   et, à la fin --></style>

Nous écrirons, avant  le nom de notre élément, le signe # (hashtag) obtenu en cliquant en même temps sur AltGr et la touche fonction 3 du clavier.

Les attributs seront écrits entre deux accolades: {  }  Alt Gr et fonction 4 ou dernière à droite

Ce qui donnera quelque chose comme:

<p id="zz1">Bonjour;</p>

<style><!--

#zz1{attribut1; attribut2;...}

--></style>

ce qui pourrait donner:

Bonjour

<style><!--
#zz2{font-size:30pt; font-weight:bold; color:yellow; text-shadow:1px 1px black;}
--></style>
<p id="zz2">Bonjour</p>

Ce qui nous donne un résultat similaire à un code simple HTML.

Par contre, nous pouvons ajouter une animation au survol, par exemple: changeons la couleur du texte et le sens de l'ombre:

Coucou

<p id="zz3">Coucou</p>
<style><!--
#zz3{transition:all 1s linear; width:180px; font-size:30pt; font-weight:bold; color:yellow; text-shadow:1px 1px black; }
#zz3:hover{color:lime; text-shadow:-1px 1px black;}
--></style>

De la même façon qu'en html, les possibilités sont multiples, nous pouvons réaliser de nombreux montages grâce à ce principe de base.

On peut provoquer une action au survol (hover), au clic (focus) et au clic maintenu (active).

Je ne peux vous proposer de code "clef en main" mais si vous avez des exemples à essayer, je peux peut-être vous conseiller.