CSS + loin

classe, span, roll-over, position absolute...

QU'EST-CE QU'UNE CLASSE ?

Une classe est un ensemble de caractéristiques groupées sous un nom qu'on invente soi-même ( ici pour exemple: "fluo"). Cette classe n'est pas liée à une balise particulière, mais disponible seulement quand on l'invoque, attribuée ponctuellement à une balise ou une partie de contenu
(paragraphe, une ligne, un groupe de mots...) ou de site (une page de texte différente des autres, une citation...).

Un exemple tout de suite: pour ce cours, j'utilise deux classe de paragraphes, l'une est "cours", l'autre est "com" comme commentaires, que je convoque ainsi : <p class="cours"> ou <p class="com">. L'une détermine fond blanc, ombre pour décoller de la surface de la page, l'autre pas de fond, à la surface de la page, et accompagnement du petit graphisme de bulle. J'aurais pu ajouter une différence de police...

Une classe permet d'appliquer un réglage différent de ceux mis en oeuvre au dernier cours, qui concernaient directement les balises. Une classe permet de ne convoquer les instructions que quand on les désire. C'est beaucoup plus souple et l'on peut en avoir plusieurs disponibles.
Elle se formule dans la feuille de style avec un point devant son nom :
.fluo { background-color: #00FF00;} et toutes autres spécifications désirées...
On l'appelle ainsi:
<p class="fluo" > ou <span class="fluo"> dans le code html ponctuellement et à volonté pour un paragraphe
Une classe aussi simple fonctionnera avec toutes les balises auxquelles on peut attribuer une background-color;

Avantage direct: si je veux en changer la couleur, je modifie celle-ci dans la feuille de style, et mon site entier adopte le changement, rien à modifier dans le code.

Le surligneur: classe et balise <span>

La Balise <span>...</span> encadre une certaine étendue de texte, en FLUX.
Elle permet de donner des caractéristiques visuelles ponctuelles. On peut l'improviser "à la volée" localement pour donner forme à une étendue de texte, un peu comme on utilise un surligneur fluo sur un imprimé... Span concerne donc une étendue de texte non définie par une balise html, par exemple une phrase importante au sein d'un paragraphe. Voilà une utilisation très pratique de notre classe "fluo".

Autres exemples dans le cours:

Je différencie les lignes de code html du texte d'explication du cours, pour faciliter la lecture et la compréhension (c'est un langage différent), par une instruction CSS sur la balise <code> dans la feuille de style externe . Instruction sur balise, donc.
Mais j'avais besoin différencier aussi la formulation des instructions CSS pour en faciliter la compréhension. La balise code est déjà programmée en vert, il n'y a pas de balise "css". C'est donc une classe qui est créée pour mettre en noir sur lilas les instructions css (j'aurais pu choisir une autre couleur évidemment...).
Cette classe, "appelée" chaque fois que j'en ai besoin, donne une taille supérieure, une police "à chasse fixe" et un fond rose à l'énoncé . Cette classe est définie dans la feuille de style externe :
.css { background-color: rgb(255,230,255); font: normal 90%/100% Courier new, monaco; } et appelée dans le code HTML comme cela :
<span class="css"> blablablabla </span>. Deuxième exemple d'utilisation de la balise <span>, identique donc à l'exemple du surligneur fluo.

C'est tellement pratique qu'une fois la chose comprise, nous pouvons dégager les balises html, au profit de l'utilisation de classes. Ne reste qu'à concevoir des classes dans la feuille de style et appeller la classe désirée en cas de besoin.
EXEMPLE: <p class="paragraphe_ordinaire"> blablabla</p> et
<p class="paragraphe_special"> blublublu</p>.
Vous pouvez systématiser l'utilisation des classes dans le développement de votre site, autant que cela vous est utile. Par un effet d'abstraction, vous pouvez même oublier le détail de ce que vous y avez mis, il suffira de le consulter dans la feuille de style en cas de besoin.

Float: soyons simples...

L'argument float: left; est comme un aimant. Il permet à un conteneur (p, div...) de se caler à gauche, et le reste du contenu, comme aimanté, vient autour, en flux, i.e "habiller" l'image comme dans les logiciels de pré-presse: Exemple Pour tester, redimensionnez la fenêtre et voyez comme le contenu évolue autour de l'image.
Pour la mise en page globale, il reste assez délicat d'utilisation (nombreux effets surprenants et imprévus) EXEMPLE Je conseille de l'utiliser surtout comme dans le premier exemple. Voici une 2e structure de div utilisant float.

Sortir de float

Pour se "dégager" du float, pour rendre son indépendance à au contenu en aval, il faut lui ajouter <p style="clear: left"> ou <p style="clear: both;"> si float:left; et float:right; ont été utilisés;

FRIANDISE: Roll-Over couleur de liens

Pour la balise de lien <a href="fichier.htm"> lien </a>, voici des raffinements très intéressants et très utilisés : les "pseudo classes"de lien, qui vont permettre d'en finir avec les sempiternels liens bleus et soulignés, si on a une bonne raison.
On définir 4 états visuels différents pour les liens. Il faut toujours rédiger les quatre, et dans cet ordre précis :
a:link { font-family: verdana, arial, geneva; color: blue; text-decoration: none; }
text-decoration: none; supprime le soulignement automatique du lien, "underline" ;
Autres valeurs disponibles pour text-decoration : overline(ligne au-dessus), line-through (barré), cumulables.
a:visited { color: purple; }
Une fois cliqué, donc visité, le lien devient pourpre. Ce qui permet de faire tout de suite la différence entre les liens visités ou "vierges" d'une page qui en propose beaucoup.
a:hover { color: red; background-color: lime; }
Quand la souris survole le lien il devient rouge sur fond lime.
a:active { color: black; background-color: white; }
quand on clique sur le lien il passe en noir sur fond blanc.
ATTENTION à L'ORDRE DE FORMULATION QUI NE DOIT PAS CHANGER sous peine de mauvais fonctionnement: respecter a.link/a.visited/a.hover/a.active .
Moyen mnémotechnique : link,visited,hover,active = lvha = LoVeHAte... si on se base sur les phalanges de Robert Mitchum dans "La nuit du chasseur" ;-) Sa première main est tatouée "LOVE", la deuxième main est tatouée "HATE".
Si le roll-over coloré (changement de couleur au passage de la souris) ne fonctionne pas, vérifiez d'abord que vous avez les 4 états, dans le bon ordre
Passer la souris sur le lien "phalanges de Robert Mitchum" pour se débarrasser de l'image.
Il est possible aussi de changer la taille, la couleur de background, bordure ou pas,image ou pas etc...selon l'état (survolé, actif, cliqué, visité) et d'animer réellement la page.
Le petit gag de la page 53.htm fonctionne comme cela : Touchez la poignée de la porte de l'immeuble... a.hover { font-size: 24px; }, taille double des autres états du lien (voir le détail dans le <head> de la page 53.htm).

Cette petite blague visuelle avec la photo de robert Mitchum introduit les "mouse events" (événements de souris) avec lesquels on va bien s'amuser ;-)

DIV: la boîte par excellence.

div = Division. Cette balise produit une "boîte" à laquelle on peut donner toutes caractéristiques, et qui peut contenir toutes sortes de choses. Une sorte de tupperware visible ou invisible (couleur bg ou pas) qui sera désormais le contenant par excellence, idéal pour contenir, par exemple, un titre h2, h3, une image, un § p. Il va nous permettre de définir des "blocs"
Par défaut les <div> se calent à gauche de la page et vont à la ligne: le 2e div est après le premier, donc, dans le flux, en dessous (ils prennent tous les draps de la largeur de l'écran disponible si on ne leur donne pas de width précise).
On l'utilisera comme contenant chaque fois que nous avons à contrôler des éléments multiples, à les regrouper.

id et positionnement absolu

HORS FLUX

Rompant avec notre perspective de prise en charge globale de la mise en page du site, nous pouvons maintenant nous occuper des exceptions, et les définir dans la feuille de style: des id, donnant à un élément des caractéristiques particulières pour une identité particulière. Par exemple une position au pixel près. L'id servira beaucoup dans le cas d'éléments dynamiques, se déplaçant ou changeant de forme ou de place dans la page. L'id sert à repérer et appeler un élément. On formule ainsi, avec # qui est la marque de l'id comme le point est la marque de la classe:
#taratata {position: absolute; top: 150px; left: 200 px; et même en profondeur z-index: 2 ; } ce qui permet de superposer des éléments en cas de besoin. C'est ainsi qu'est positionnée la photo de Robert Mitchum, en milieu de page, par-dessus (au point que c'en est gênant, délibérément) alors qu'en FLUX elle devrait être tout simplement après le paragraphe qui en parle.

Plus simple pour commencer: l'id de l'élément ci-dessous est #postit. Une ID est toujours formulée par "#" à installer bien sûr... dans la feuille de style.css
#postit { font-family: georgia ; font-size: 16px ; color: rgb(250,240,10); font-weight: bold ; padding: 10px ; padding-left: 20% ; background-color: rgb(255,120,*); border-style: solid ; border-color: crimson ; border-left-width: 3em; margin : 10% }
...Même système que pour les ancres (leçon 2+). On "marque" l'élément en question dans la page html sous la forme:<div id="postit">
Voici venir le code du petit postit jaune qui se promène en haut de la page, qui est un div, qui utilise le positionnement absolu, et une id.
<div id="postit"> <h3>Css Comme<br> Simplification<br> & Souplesse!<br><h3> </div>.

°° le code est ici:

Css Comme Simplification et Souplesse

Le bloc div "post-it" étant écrit ici devrait donc normalement être affiché ici, au lieu d'être en haut de la page. Structurellement, c'est sa place dans le flux, et c'est ainsi qu'il sera "lu" par les moteurs: position non principale, non prioritaire, dans le cours du flux de la leçon. alors que, pour les humains, il est positionné visuellement en "premier" et en plus par-dessus les autres éléments.

Possibilités de présentation illimitées

Autocollant

L'autocollant "html" est écrit ici, en bas de la page. C'est une img dans un div id="sticker" La position: fixed; permet de le garder collé au même endroit #sticker { position: fixed; bottom: 50px; right: 10px; z-index: 5;} par dessus de contenu de la page, et il reste en place même si on "scrolle" les ascenseurs de la page! Il pourrait être un menu...

Evidemment un élément en positionnement absolu à left: 100opx, devient invisible sur un écran de 800px ! Hors champ ! Heureusemement on peut aussi, en pensant aux petits écrans, formuler en %. Néanmoins, attention aux téléscopage: si vous réduisez beaucoup la fenêtre vous verrez que ces exemples se superposeront au texte.
NB: j'évoque la contrainte des petits écrans, je ne vous oblige pas à un parfait développement "responsive" qui demanderait plus de temps.

Elément de compréhension pour plus tard : l'Id est importante aussi pour permettre à un script de reconnaître et donner un comportement à l'élément, dans le cadre de l'HTML dynamique. On pourra ainsi le faire traverser la page, ou apparaître et disparaître dans un menu dynamique...Le javascript dépasse le programme de ce TD où mais nous utiliserons des "préfabriqués".

Un exemple personnel d'une utilisation avancée d'html (dhtml, dynamic html) où les conteneurs transparents sont des balises div pourvues d'id, repérées et mises en mouvement par du javascript, et contenant de simples images gif animées.

Css toujours plus loin...

Vous pouvez maintenant de vos propres ailes aller encore plus loin avec de récentes et épatantes nouvelles possibilités Css3, qui ne fonctionnent pas avec les vieux navigateurs, mais on ne s'en souciera guère.

Nous pouvons maintenant lever le tabou sacré de la feuille de style distante ;-) Ponctuellement il sera parfois plus pratique dans vos recherches de placer les instructions de style dans la partie head de la page, ou même, pour tester une fonction, parfois de mettre les instructions dans les balises html directement. Allez voir par là comment on fait
ATTENTION pas de malentendu: une fois les développements testés, rapatriez les instructions css dans le feuille distante, c'est sur son caractère unique et son contenu que vous serez finalement notés.

CSS3: animations, transitions

Après avoir bien assimilé et mis en œuvre ces notions, vous pouvez regarder un peu du côté des instructions CSS 3. Elles ne fonctionnent qu'avec les navigateurs récents, mais elles ouvrent de grandes possibilités: multicolonnage pour le texte, déformations, transitions, animations pour les éléments html. Ces développements deviennent facultatifs, mais regardez tout de même, certains peuvent devenir utiles. Ils sont rangés parmi toutes les fonctions avancées.