leçon sur CSS et HTML

CSS est un langage a part MAIS qui ne veut rien dire sans le HTML qui va avec. Il est issu du constat que HTML qui servait à la fois a l'organisation d'une page web ET au style d'affichage était devenu très (trop !) compliqué et c'était devenu un bazar pas possible. Plutôt que d'ajouter encore et encore des balises (qui mettent en gras, qui change la couleur, la couleur de font, la taille de la police, etc.), le consortium W3C (aka le deep web ;-) a décidé que toutes les balises pourrait avoir un attribut style ou bien à défaut hériterait du style définit pour ce type de balise et qui serait définit dans une feuille de style. La feuille de style écrite en langage CSS est donc un document qui énonce des styles d'affichage et à qui s'applique ces styles.

Il y a donc 2 choses importantes à maitrise dans CSS : les sélecteurs (à quels noeuds vont s'appliquer les styles) et les effets de style (une très longue liste de variables qui peuvent prendre des valeurs, souvent parmi une liste fermée ...)

Selecteurs

Il y a 4 sélecteurs importants à connaitre sur le bout des doigts :

div {background:red} Toutes les balises <div> auront un fond rouge
.gros {background:green} Toutes les balises qui auront l'attribut classe="gros" auront un fond vert
#lecadre {background:blue} L'unique balise qui aura l'attribut id="lecadre" aura un fond bleu
td div {background:yellow}
Toutes les balises <div> qui seront à l'intérieur d'une balise <td> auront un fond jaune


Il y a d'autres sélecteurs (voir https://www.w3schools.com/cssref/css_selectors.asp) mais les plus importants sont là. Je citerai encore le sélecteur avec les crochets utile pour les input puisqu'il assure qu'une balise ait un certain attribut et eventuellement que cet attibut ait une certaine valeur. Ainsi 
input[type='checkbox'] {background:white}
donne un fond blanc a toutes les balises input qui ont un attribut type='checkbox'
div.boite est donc équivalent a div[class='boite']

Il y a aussi le selecteur : qui mérite d'être cité. Il permet de faire des choses un peu interactives. Par exemple 

div {background:white}

div:hover {background:red}

donne une couleur blanche aux balises div MAIS quand on passe avec la souris par dessus cette balise elle devient rouge CAR : permet de mettre une condition.

Alors attention ca va se compliquer un peu. Ces règles se combinent de 3 façons

(A) On peut appliquer un même style a plusieurs trucs en utilisant la virgule div,p {background:white} donne un fond blanc au balises div et aux balise p, pas besoin de faire 2 lignes de style

(B) div#labox p.para {background:purple} a un espace donc s'applique à toutes les balises <p> de class para qui sont dans la div qui a comme id labox!!!!

(C) On peut creer plusieurs lignes de styles qui aux final vont s'appliquer à la même choose 

div {background:red}

.gros {background:green}

mais si on a une balise <div class="gros">...</div> elle aura quelle couleur de fond ? En fait c'est la règle la plus spécifique qui prend le dessus ! La ça devient difficile à suivre mais gardons notre calme. Quand on clique avec le bouton droit sur un élément (dans Chrome ou firefox) on peut demander à inspecter cet élément. Apparait alors l'outil suivant :

inspecteur chrome

On voit en haut que la cellule de table TD que j'inspecte est comprise dans un <TR> qui a la classe "sel" lui-même compris dans un <tbody>dans une table dans un div, dans un div qui a comme id=legendCont qui est dans un autre div, etc.

En dessous nous voyons tous les styles qui s'applique à ce <TD> et ces styles sont classés du plus spécifique(en haut) au plus générique (en bas). Ainsi on voit que le background est un dégradé linéaire de couleur car c'est son element.style. Ca veut dire que la balise <TD> avait carrément style="..." comme attribut (d'ailleurs on le voit au dessus dans l'arbre). 2 lignes en dessous on voit que la couleur d'écriture est du noir pas complètement opaque car à la ligne 82 de style.css les "#legend tr.sel td" ont ce style (= les <TD> qui sont dans un<TR> de classe sel qui sont dans la balise qui a l'identifiant legend). Tiens ça se lit a l'envers. Or si on regarde l'arbre HTML ce TD est bien dans une balise <TR> qui a comme classe sel qui est elle-même dans un truc qui a comme id "legend" (en fait ici c'est la table). Enfin bref on peut faire confiance à Chrome, s'il affiche ce style c'est qu'il s'applique bien à ce qu'on a choisi. D'ailleurs quand on rajoute un style et que ça n'a aucun effet c'est la première choses qu'on vérifie=> l'inspecteur affiche t-il bien ce qu'on vient de rajouter. Ensuite à la ligne du dessous on voit qu'un autre style aurait pu s'appliquer (#legend td) MAIS que son color (un noir très transparent) est barré. Cela veut dire qu'un style plus spécifique (celui dont on vient de parler) est jugé prioritaire. 

On voit en dessous des styles qui s'appliquent dans "user agent stylesheet". Ca veut dire que c'est des styles définis par défaut dans le navigateur web ! (s'il nous plaisent pas on peut les changer facilement)

On voit aussi des styles qui sont dit "hérités". En effet les styles que j'applique à la table (#legend) sont donnés en héritage aux lignes et aux cases (ah bon ?)

Enfin bref il y a tellement de règles CSS qu'il est très difficile de faire bon du premier coup. Il faut toujours avoir cet inspecteur sous les yeux, ajouter une ligne de CSS, reloadé la page, et voir à quel niveau la nouvelle règle s'insère. Quand on a une surprise, on demande a Google...

En conclusion CSS peut-etre beaucoup plus difficile à appréhender que prévu. Les sélecteurs sont super puissants et on les re-utilisera massivement avec jQuery. Les styles il y en a entre 100 et 200 (http://www.css-faciles.com/proprietes-css-liste-alphabetique.php en compte 160) chacun pouvant avoir beaucoup de valeurs possibles, et encore plus de combinaisons de valeurs (ie border: 1px solid red). Impossible de tout apprendre. Je ne vous parle meme pas des animations qu'il est possible de faire en CSS et des interactions. Ce qu'il y a de bien c'est que vous avez tous une connaissance intuitive de ce qui est possible (tout ce que vous avez déjà su sur internet). Soyez patients, construisez vous une liste de site web qui expliquent bien (selon vous) et ne gardez en tete que le vocabulaire nécessaire pour faire une requête google qui vous permettra de retrouver ce que vous cherchez à faire. Le plus important etant d'avoir une méthode bien rodée pour tester les choses sur votre navigateur. connaissez vous jsfiddle (ie http://jsfiddle.net/rpflorence/st3By/)?