Informatique / Programmation objet et evenementielle en JavaScript / JavaScript et les styles CSS (French)

JavaScript et les styles (CSS)
Styles en HTML
* Tendance actuelle: séparer le fond de la forme
* Fond = information proprement dite
* Forme = manière de présenter l'information
* Combinaison des langages HTML et CSS
* HTML = Fond
* CSS = Forme
* CSS = Cascading Style Sheet
* Style = apparence
* Permet de décrire l'apparence
* D'une balise
* D'un type de balise
CSS et HTML
* En HTML, utilisation de l'attribut "style"
* Cet attribut contient du code CSS
* <p style="color: blue">c'est en bleu</p>
* Code CSS peut être placé dans l'entête
<head>
<style type="text/css">
...
</style>
</head>
* Peut être placé dans un fichier ".css"
* Inclusion: <link rel="stylesheet" href="nom_fichier"/>
Définir un style (1/3)
* Style par défaut pour un type d'éléments
type {
propriété1: valeur1;
propriété2: valeur2;
...
}
* Exemple
<html>
<head>
<style type="text/css">
p {
color: blue;
}
</style>
</head>
<body>
<p>c'est en bleu</p>
<p>là aussi</p>
</body>
</html>
Définir un style (2/3)
* Style pour une famille (classe) d'éléments
* Dans CSS: .classe { ... }
* Dans HTML: <balise class="classe" ...>...</balise>
* Exemple
<html>
<head>
<style type="text/css">
.en-bleu {
color: blue;
}
</style>
</head>
<body>
<p class="en-bleu">c'est en bleu</p>
<p>pas là, c'est la couleur par défaut</p>
</body>
</html>
Définir un style (3/3)
* Style pour un objet précis
* Dans CSS: #identifiant { ... }
* Dans HTML: <balise id="identifiant" ...>...</balise>
* Exemple
<html>
<head>
<style type="text/css">
#paragraf {
color: blue;
}
</style>
</head>
<body>
<p id='paragraf'>c'est en bleu</p>
</body>
</html>
Propriétés modifiables par le style
* Apparence d'un élément
* Texte
* Fonte, taille, famille, alignement...
* Cadre
* Bordure, espacement (interne et externe)...
* Fond
* Couleur, image...
* Positionnement
* Disposition, dimension...
* ...
* Liste des propriétés
* http://www.w3schools.com/css/
Avec JavaScript, l'attribut "style" (1/2)
* Représente l'attribut "style" des éléments HTML
* Tous les éléments visibles ont cet attribut
* <p id="pg" style="color: green">
* document.getElementById("pg").style.color = "green";
* Convention de nommage des propriétés
* En CSS
* En minuscules
* Mot composé: mots séparés par un "-"
* Exemple: background-color
* Avec JavaScript
* En minuscules (à l'exception des mots composés)
* Mot composé: mots collés avec première lettre en majuscule
* Exemple: backgroundColor
Avec JavaScript, l'attribut "style" (2/2)
* Déplacer un élément
* document.getElementById("element").style.left = 500;
* document.getElementById("element").style.top = 10;
* Modifier la taille d'un élément
* document.getElementById("element").style.width = 200;
* document.getElementById("element").style.height = 300;
* Modifier les couleurs d'un élément
* document.getElementById("element").style.backgroundColor
= "blue";
* document.getElementById("element").style.color = "white";
Placement des éléments HTML (1/2)
* Eléments de type bloc
* <h1> ... <h6>
* <p>
* <ul>, <ol>, <li>
* <blockquote>
* <pre>
* <table>
* ...
* Elément bloc générique: <div>
* Elément vierge
* Sans propriétés au départ
* Placement par défaut
* Succession verticale de haut en bas
* Jamais deux blocs sur une même ligne
Placement des éléments HTML (2/2)
* Eléments de type en-ligne
* <a>
* <img>
* <em>, <strong> (remplaçants de <i> et <b>)
* <cite>
* <code>
* ...
* Elément en-ligne générique: <span>
* Elément vierge
* Sans propriété au départ
* Placement par défaut
* Succession horizontale de gauche à droite
* Plusieurs éléments sur la même ligne
* Alignement
* Horizontal: conditionné par "text-align" de son conteneur
* Vertical: conditionné par son propre "vertical-align"
Contrôler la position des éléments
* Plusieurs méthodes de positionnement
* Toutes utiles en fonction des besoins
* Positionnement statique
* Comportement par défaut
* Positionnement relatif
* Translation par rapport à la position par défaut
* Positionnement flottant
* Placement le plus à gauche ou droite possible
* Positionnement absolu
* Placement par rapport à la position de son conteneur
Positionnement relatif
* Exemple: 3 éléments en-ligne
* Sortie du flux normal de placement
* style="position: relative;"
* La zone du placement par défaut est conservée
* Translation par rapport à la position initiale
* Propriétés: left, right, bottom ou top
* Ici: style="position: relative; left: npx; top: mpx;"
Positionnement flottant (1/3)
* Sortie du flux normal de placement
* style="float: left;"
Placement le plus à gauche possible
* style="float: right;"
Placement le plus à droite possible
* Exemple: 4 éléments blocs normaux
Positionnement flottant (2/3)
* Exemple: un élément flottant
* Exemple: deux éléments flottants
Positionnement flottant (3/3)
* Exemple: trois éléments flottants
* Exemple: propriété "clear"
* style="clear: left/right/both;"
* Signifie pas de flottant à gauche et/ou à droite de l'élément
Positionnement absolu
* Exemple: élément contenu dans un autre
* Sortie du flux normal de placement
* style="position: absolute;"
* Translation par rapport au niveau supérieur
* Propriétés: left, right, bottom ou top
* Au conteneur si il est positionné
* "position: absolute" ou "position: relative"
* A la page si le conteneur n'est pas positionné
* "position: static" ou "float: left/right"
Chevauchement: profondeur des éléments
* Des éléments peuvent se chevaucher
* Comment contrôler qui est devant l'autre ?
* Notion de profondeur
* Attribut "z-index"
* Plus la valeur est grande, plus l'élément est en avant
* Ordre de superposition par défaut
* Non positionné (position: static)
* Flottant
* Position relative
* Position absolue
* Modifiable uniquement pour les éléments positionnés
(position relative ou absolue)
Cacher un élément HTML
* Attribut "visibility"
* Cache l'élément mais son espace reste visible
* Masquer l'élément
* document.getElementById("element").style.visibility = "hidden";
* Démasquer l'élément
* document.getElementById("element").style.visibility = "visible";
* Attribut "display"
* Cache l'élément ainsi que son espace
* Masquer l'élément
* document.getElementById("element").style.display = "none";
* Démasquer l'élément
* document.getElementById("element").style.display = "";