Ressources::CSS - Historique des versions

Lionel le 7 novembre 2015 à 17:22

2015-11-07T17:22:45Z

Lionel le 7 novembre 2015 à 17:20

2015-11-07T17:20:50Z

Lionel le 7 novembre 2015 à 16:41

2015-11-07T16:41:33Z

Lionel le 7 novembre 2015 à 16:39

2015-11-07T16:39:27Z

Lionel le 7 novembre 2015 à 16:29

2015-11-07T16:29:41Z

Lionel le 7 novembre 2015 à 16:24

2015-11-07T16:24:30Z

Lionel le 7 novembre 2015 à 16:02

2015-11-07T16:02:21Z

Lionel le 7 novembre 2015 à 15:58

2015-11-07T15:58:40Z

Lionel le 6 novembre 2015 à 17:53

2015-11-06T17:53:10Z

Lionel le 6 novembre 2015 à 17:47

2015-11-06T17:47:29Z

@@ Ligne 690 : / Ligne 690 : @@
 Les couleurs affichées par un écran sont définies selon le modèle additif (en opposition au modèle de couleur soustractif que l’on retrouve en impression) et se décomposent en trois couleurs primaires, le rouge, le vert et le bleu, qui associées produisent du blanc. L’absence de couleur équivaut au noir (alors que selon le modèle soustractif, l’addition des couleurs produit du noir et l’absence produit du blanc). Une couleur affichée par un écran peut donc être définie par son niveau de rouge, de vert et de bleu.
-[[Fichier:Synthese+.svg]]
+[[Fichier:Synthese+.svg|300px]]
 Pour définir une couleur (de texte, de bordure, ou de fond), nous avons jusqu’à présent utilisé des valeurs de type "mot clé", par exemple
@@ Ligne 762 : / Ligne 762 : @@
 La saturation spécifie le degré d’intensité de la teinte et s’exprime en pourcentages. Elle permet de faire varier la couleur de la teinte pure vers le gris :
-[[Fichier:TeintesSaturationCercle.png]]
+[[Fichier:TeintesSaturationCercle.png|300px]]
 Et la clarté correspond à l’ajout d’une intensité de blanc à la couleur.  Elle s’exprime également en pourcentage. Elle permet de faire varier la couleur vers le blanc ou vers le noir. Pour retrouver la teinte pure, il faudra régler cette valeur à 50% :
-[[Fichier:Carré TL.png]]
+[[Fichier:Carré TL.png|300px]]
 Pour spécifier le rouge pur utilisé jusqu’ici, on notera donc :

← Version précédente		Version du 7 novembre 2015 à 17:20
Ligne 707 :		Ligne 707 :

	Dans un code hexadécimal de couleur, on utilise le symbole # comme préfixe, suivi de 6 chiffres, qui peuvent donc chacun avoir une valeur entre 0 et F. Pour chaque canal de couleur (rouge, vert et bleu), deux chiffres hexadécimaux sont utilisés. Le code hexadécimal suivant :		Dans un code hexadécimal de couleur, on utilise le symbole # comme préfixe, suivi de 6 chiffres, qui peuvent donc chacun avoir une valeur entre 0 et F. Pour chaque canal de couleur (rouge, vert et bleu), deux chiffres hexadécimaux sont utilisés. Le code hexadécimal suivant :
		+
		+	<pre>#00FF00</pre>
		+
		+	Se décompose en trois valeurs, pour les trois canaux de couleur :
		+
		+	<pre>
		+	rouge : 00
		+	vert : FF
		+	bleu : 00
		+	</pre>
		+
		+	Puisque pour chacun de ces canaux, on a à disposition deux chiffres, allant de 0 à F, on peut donner 256 valeurs différentes à chacun (16 x 16 valeurs), allant de 0 à 255. Pour donner la valeur 16 à un canal, il faudra inscrire la valeur hexadécimale 0F. Pour donner la valeur minimale : 00 et pour donner la valeur maximale (255) : FF.
		+
		+	Chaque couleur pouvant avoir 256 valeurs différentes, il existe 16777216 (256x256x256) valeurs possibles dans un code de couleur hexadécimal. En réalité, les écrans ne sont pas capables d’afficher autant de nuances et la différence entre les couleurs #000000 et #01010101 ne seront pas visibles sur un écran.
		+
		+	l’équivalent de la valeur de type mot clé (red) vue ci-dessus sera, en notation hexadécimale :
		+
		+	<syntaxhighlight lang="css">
		+	color:#FF0000;
		+	</syntaxhighlight>
		+
		+	==Notation rgb==
		+
		+	La notation rgb permet de spécifier les niveau de chaque canal de couleur sans passer par la notation hexadécimale. Comme dans cette dernière, les valeurs peuvent aller de 0 à 255, mais elles peuvent être également notées en pourcentage. La valeur deviendra donc ici :
		+
		+	<syntaxhighlight lang="css">
		+	color:rgb(255, 0, 0);
		+	</syntaxhighlight>
		+
		+	ou
		+
		+	<syntaxhighlight lang="css">
		+	color:rgb(100%, 0%, 0%);
		+	</syntaxhighlight>
		+
		+	On notera la présence des parenthèses nécessaires à la définition de la couleur. Chaque valeur de canal est séparée par une virgule.
		+
		+	==Notation rgba==
		+
		+	La notation rgba est équivalent à la notation rgb mais ajoute un canal supplémentaire au trois canaux existants, correspondant à un degré d’opacité. La valeur de l’opacité s’exprime entre 0 et 1.
		+
		+	Pour spécifier une couleur rouge transparente à 50%, on notera donc :
		+
		+	<syntaxhighlight lang="css">
		+	color:rgba(255, 0, 0, 0.5);
		+	</syntaxhighlight>
		+
		+	Ce type de notation n’est compatible qu’avec les navigateurs web récents.
		+
		+	==Notation hsl==
		+
		+	Apparue récemment dans les notations de couleurs web, et également compatible uniquement avec les navigateurs récents, la notation hsl permet de spécifier une couleur sans préciser la valeur de chaque canal de couleur, mais plutôt en donnant à la couleur une teinte (hue), un degré de saturation (saturation) et un degré de clarté (lightness). La teinte de la couleur s’exprime en degré, de 0 à 360, et fait référence à un cercle de teinte :
		+
		+	La saturation spécifie le degré d’intensité de la teinte et s’exprime en pourcentages. Elle permet de faire varier la couleur de la teinte pure vers le gris :
		+
		+	[[Fichier:TeintesSaturationCercle.png]]
		+
		+	Et la clarté correspond à l’ajout d’une intensité de blanc à la couleur. Elle s’exprime également en pourcentage. Elle permet de faire varier la couleur vers le blanc ou vers le noir. Pour retrouver la teinte pure, il faudra régler cette valeur à 50% :
		+
		+	[[Fichier:Carré TL.png]]
		+
		+	Pour spécifier le rouge pur utilisé jusqu’ici, on notera donc :
		+
		+	<syntaxhighlight lang="css">
		+	color:hsl(360, 100%, 50%);
		+	</syntaxhighlight>
		+
		+	Le symbole % est nécessaire pour les valeurs de saturation et de clarté. Ne pas spécifier l’unité provoquera une erreur.
		+
		+	==Notation hsla==
		+
		+	Enfin, la notation hsla est à la notation hsl ce que la notation rvba est à la notation rvb : l’ajout d’une possibilité d’opacité à la couleur. Elle se spécifie à l’aide d’une quatrième valeur, qui doit s’exprimer entre 0 et 1. Pour diminuer l’opacité du rouge à 50%, on utilisera donc la valeur
		+
		+	<syntaxhighlight lang="css">
		+	color:hsla(360, 100%, 50%, 0.5);
		+	</syntaxhighlight>

← Version précédente		Version du 7 novembre 2015 à 16:41
Ligne 698 :		Ligne 698 :
	</syntaxhighlight>		</syntaxhighlight>

−	Ce type de valeur fait référence à une table de couleurs limitée à 147 nuances, consultable [[http://www.w3schools.com/cssref/css_colornames.asp\|ici]] . Lorsque l’on veut spécifier une couleur qui ne se trouve pas dans cette liste, il existe plusieurs systèmes de notations alternatives.	+	Ce type de valeur fait référence à une table de couleurs limitée à 147 nuances, consultable [http://www.w3schools.com/cssref/css_colornames.asp ici] . Lorsque l’on veut spécifier une couleur qui ne se trouve pas dans cette liste, il existe plusieurs systèmes de notations alternatives.
		+
		+	==Notation hexadécimale==
		+
		+	Le type de notation la plus usuelle pour le web utilise le système numérique hexadécimal. Ce système est utilisé dans de nombreuses applications informatiques et permet une représentation de valeurs binaires facilement lisible pour un être humain. Un chiffre hexadécimal est défini entre 0 et F, à la différence d’un chiffre décimal (système le plus usuel) qui est défini entre 0 et 9. Un chiffre hexadécimal peut donc avoir 16 valeurs :
		+
		+	<pre>0 1 2 3 4 5 6 7 8 9 A B C D E F</pre>
		+
		+	Dans un code hexadécimal de couleur, on utilise le symbole # comme préfixe, suivi de 6 chiffres, qui peuvent donc chacun avoir une valeur entre 0 et F. Pour chaque canal de couleur (rouge, vert et bleu), deux chiffres hexadécimaux sont utilisés. Le code hexadécimal suivant :

← Version précédente		Version du 7 novembre 2015 à 16:39
Ligne 691 :		Ligne 691 :

	[[Fichier:Synthese+.svg]]		[[Fichier:Synthese+.svg]]
		+
		+	Pour définir une couleur (de texte, de bordure, ou de fond), nous avons jusqu’à présent utilisé des valeurs de type "mot clé", par exemple
		+
		+	<syntaxhighlight lang="css">
		+	color:red;
		+	</syntaxhighlight>
		+
		+	Ce type de valeur fait référence à une table de couleurs limitée à 147 nuances, consultable [[http://www.w3schools.com/cssref/css_colornames.asp\|ici]] . Lorsque l’on veut spécifier une couleur qui ne se trouve pas dans cette liste, il existe plusieurs systèmes de notations alternatives.

← Version précédente		Version du 7 novembre 2015 à 16:29
Ligne 685 :		Ligne 685 :

	La première solution est certainement la plus "correcte" dans le sens où l’on garde la mise en forme strictement dans la feuille de style et la structuration du contenu dans la page html. La deuxième solution implique d’insérer un élément de mise en forme directement dans la page html (notre <code><br class="clear" /></code>). Elle peut malgré tout être utile dans certains cas.		La première solution est certainement la plus "correcte" dans le sens où l’on garde la mise en forme strictement dans la feuille de style et la structuration du contenu dans la page html. La deuxième solution implique d’insérer un élément de mise en forme directement dans la page html (notre <code><br class="clear" /></code>). Elle peut malgré tout être utile dans certains cas.
		+
		+	=Couleurs et css=
		+
		+	Les couleurs affichées par un écran sont définies selon le modèle additif (en opposition au modèle de couleur soustractif que l’on retrouve en impression) et se décomposent en trois couleurs primaires, le rouge, le vert et le bleu, qui associées produisent du blanc. L’absence de couleur équivaut au noir (alors que selon le modèle soustractif, l’addition des couleurs produit du noir et l’absence produit du blanc). Une couleur affichée par un écran peut donc être définie par son niveau de rouge, de vert et de bleu.
		+
		+	[[Fichier:Synthese+.svg]]

← Version précédente		Version du 7 novembre 2015 à 16:24
Ligne 555 :		Ligne 555 :

	où l’on précise que le bloc dont l’id est "bloc3" est en position fixe, sortira l’élément (#bloc3) de son conteneur et le placera non plus par rapport à celui-ci mais par rapport au coin inférieur droit de la fenêtre du navigateur.		où l’on précise que le bloc dont l’id est "bloc3" est en position fixe, sortira l’élément (#bloc3) de son conteneur et le placera non plus par rapport à celui-ci mais par rapport au coin inférieur droit de la fenêtre du navigateur.
		+
		+	[[Fichier:Fixed-700x523.png]]
		+
		+	==Positionnement flottant==
		+
		+	Le positionnement flottant se spécifie grâce à la déclaration
		+
		+	<syntaxhighlight lang="css">
		+	float:left;
		+	</syntaxhighlight>
		+
		+	ou
		+
		+	<syntaxhighlight lang="css">
		+	float:right;
		+	</syntaxhighlight>
		+
		+	Il indique dans le premier cas que l’élément se positionnera à gauche de l’élément suivant et dans le second qu’il se positionnera à droite de l’élément suivant. Si le conteneur n’est pas assez large pour que les deux éléments se mettent côte à côte, le deuxième élément s’affichera en dessous du premier.
		+
		+	Le code css suivant :
		+
		+	<syntaxhighlight lang="css" line>
		+	#global{
		+	width:400px;
		+	height:400px;
		+	position:relative;
		+	}
		+
		+	#global div{
		+	width:100px;
		+	height:100px;
		+	margin-top:10px;
		+	float:left
		+	}
		+	</syntaxhighlight>
		+
		+	indique que tous les éléments <code><div></code> contenus dans l'élément dont l'id est "global" tenteront de se placer les uns à côté des autres.
		+
		+	[[Fichier:Float.png]]
		+
		+	Lorsque l’on veut insérer des éléments en dessous d’une ligne d’éléments positionnés en float, il faut indiquer dans l’html que l’on reprend le cours du flux de la page, que l’on sort du positionnement float. Cette indication correspond à la déclaration css
		+
		+	<syntaxhighlight lang="css">
		+	clear:left;
		+	</syntaxhighlight>
		+
		+	ou
		+
		+	<syntaxhighlight lang="css">
		+	clear:right;
		+	</syntaxhighlight>
		+
		+	ou
		+
		+	<syntaxhighlight lang="css">
		+	clear:both;
		+	</syntaxhighlight>
		+
		+	selon le positionnement flottant que l’on veut désactiver, qui se réalisait via float:left (on utilise clear:left) ou float:right (on utilise clear:right), ou si l’on veut désactiver tous les positionnement flottants pour reprendre l’affichage en dessous (on utilise clear:both). Cette propriété doit être attribuée à l’élément qui suit les éléments positionnés en float, donc l’élément à partir duquel il faut passer à la ligne.
		+
		+	<syntaxhighlight lang="css" line>
		+	#global{
		+	width:400px;
		+	height:400px;
		+	position:relative;
		+	clear:both;
		+	}
		+
		+	#global div{
		+	width:100px;
		+	height:100px;
		+	margin-top:10px;
		+	float:left
		+	}
		+	#bloc3{
		+	clear:left;
		+	}
		+	</syntaxhighlight>
		+
		+	Ici, le troisième bloc ne s’affichera donc plus à côté du deuxième mais en dessous :
		+
		+	[[Fichier:Floatclear.png]]
		+
		+	Une autre façon de résoudre ce problème est de se créer un "outil" sous forme de balise à insérer dans la page html à chaque fois qu’il faut revenir à la ligne après des positionnements flottants. Pour ce faire, il faut modifier la page html en insérant cette balise aux endroits où il faut passer à la ligne, donc pour notre exemple :
		+
		+	<syntaxhighlight lang="html5" line>
		+	<html>
		+	<head>
		+	<link href="css/styles.css" rel="stylesheet" type="text/css" />
		+	</head>
		+	<body>
		+	<div id="global">
		+	<div id="bloc1"></div>
		+	<div id="bloc2"></div>
		+	<br class="clear" />
		+	<div id="bloc3"></div>
		+	</div>
		+	</body>
		+
		+	</html>
		+	</syntaxhighlight>
		+
		+	où la balise
		+
		+	<syntaxhighlight lang="html5">
		+	<br class="clear" />
		+	</syntaxhighlight>
		+
		+	sert de passage à la ligne et fonctionne grâce à une classe css (voir [[#Sélecteurs css\|sélecteurs css]]) que l’on ajoute dans la feuille de style, qui devient :
		+
		+	<syntaxhighlight lang="css" line>
		+	#global{
		+	width:400px;
		+	height:400px;
		+	position:relative;
		+	clear:both;
		+	}
		+
		+	#global div{
		+	width:100px;
		+	height:100px;
		+	margin-top:10px;
		+	float:left
		+	}
		+	.clear{
		+	clear:both;
		+	}
		+	</syntaxhighlight>
		+
		+	La première solution est certainement la plus "correcte" dans le sens où l’on garde la mise en forme strictement dans la feuille de style et la structuration du contenu dans la page html. La deuxième solution implique d’insérer un élément de mise en forme directement dans la page html (notre <code><br class="clear" /></code>). Elle peut malgré tout être utile dans certains cas.

← Version précédente		Version du 7 novembre 2015 à 16:02
Ligne 514 :		Ligne 514 :

	[[Fichier:Absolute.png]]		[[Fichier:Absolute.png]]
		+
		+	==Positionnement fixe==
		+
		+	Le positionnement fixe se spécifie dans le css grâce à la déclaration
		+	<syntaxhighlight lang="css">
		+	position:fixed;
		+	</syntaxhighlight>
		+
		+	et permet à l’élément d’être positionné par rapport à la fenêtre du navigateur. Un élément fixe dans la fenêtre ne disparaitra pas en suivant le scroll du navigateur, il restera toujours visible et au même endroit de la fenêtre. Ce positionnement peut-être utilisé pour placer un menu dans une page, qui sera de fait toujours visible. Ce positionnement n’est pas pris en compte par les smartphones et tablettes, ce qui peut engendrer des problèmes d’affichage sur ces appareils.
		+
		+	le code css suivant :
		+
		+	<syntaxhighlight lang="css" line>
		+	#global{
		+	width:400px;
		+	height:400px;
		+	position:relative;
		+	}
		+
		+	#global div{
		+	width:100px;
		+	height:100px;
		+	position:absolute;
		+	}
		+
		+	#global #bloc1{
		+	top:20px;
		+	left:20px;
		+	}
		+	#global #bloc2{
		+	top:20px;
		+	right:20px;
		+	}
		+	#global #bloc3{
		+	position:fixed;
		+	bottom:20px;
		+	right:20px;
		+	}
		+	</syntaxhighlight>
		+
		+	où l’on précise que le bloc dont l’id est "bloc3" est en position fixe, sortira l’élément (#bloc3) de son conteneur et le placera non plus par rapport à celui-ci mais par rapport au coin inférieur droit de la fenêtre du navigateur.

← Version précédente		Version du 7 novembre 2015 à 15:58
Ligne 512 :		Ligne 512 :

	Le code css appliquera donc la mise en forme :		Le code css appliquera donc la mise en forme :
		+
		+	[[Fichier:Absolute.png]]

← Version précédente		Version du 6 novembre 2015 à 17:53
Ligne 443 :		Ligne 443 :

	décalera le deuxième bloc de 20px vers le haut à partir de sa position dans le flux et appliquera la mise en forme :		décalera le deuxième bloc de 20px vers le haut à partir de sa position dans le flux et appliquera la mise en forme :
		+
		+	[[Fichier:Relativepos.png]]

	On peut constater que le décalage opéré sur l’élément dont l’id est "bloc2" n’influe pas le positionnement des éléments qui le suivent dans le flux.		On peut constater que le décalage opéré sur l’élément dont l’id est "bloc2" n’influe pas le positionnement des éléments qui le suivent dans le flux.
		+
		+	==Positionnement absolu==
		+
		+	Le positionnement absolu se spécifie dans le code css grâce à la déclaration
		+
		+	<syntaxhighlight lang="css">
		+	position:absolute;
		+	</syntaxhighlight>
		+
		+	Et permet à l’élément d’être placé à des coordonnées précises par rapport à son bloc conteneur.
		+	Le point d’origine de ces coordonnées se spécifie grâce aux propriétés css
		+
		+	<syntaxhighlight lang="css">
		+	bottom
		+	top
		+	left
		+	right
		+	</syntaxhighlight>
		+
		+	Dans le code css suivant, nous allons attribuer des positions absolues aux éléments se trouvant à l’intérieur de l’élément dont l’id est "global". Le premier bloc (#bloc1) se placera en haut à gauche du conteneur (#global), le second (#bloc2) en haut à droite et le troisième (#bloc3) en bas à droite. Pour placer certains blocs (#bloc2 et #bloc3) en prenant comme références le côté inférieur et le côté droit du conteneur (#global), il va falloir donner des dimensions précises à celui-ci.
		+
		+	<syntaxhighlight lang="css" line>
		+	/*le conteneur a des dimensions précises et est "fixé" dans le flux
		+	grâce au positionnement relatif*/
		+	#global{
		+	width:400px;
		+	height:400px;
		+	position:relative;
		+	}
		+	/*tous les div contenus dans le conteneur #global se positionneront
		+	en absolu et auront des dimensions précises*/
		+	#global div{
		+	width:100px;
		+	height:100px;
		+	position:absolute;
		+	}
		+	/*le div #bloc1 se positionne à 20 pixels du bord supérieur de #global
		+	et 20 pixels du bord gauche*/
		+	#global #bloc1{
		+	top:20px;
		+	left:20px;
		+	}
		+	/*le div #bloc2 se positionne à 20 pixels du bord supérieur de #global
		+	et 20 pixels du bord droit*/
		+	#global #bloc2{
		+	top:20px;
		+	right:20px;
		+	}
		+	/*le div #bloc3 se positionne à 20 pixels du bord inférieur de #global
		+	et 20 pixels du bord droit*/
		+	#global #bloc3{
		+	bottom:20px;
		+	right:20px;
		+	}
		+	</syntaxhighlight>
		+
		+	La déclaration
		+
		+	<syntaxhighlight lang="css">
		+	position:relative;
		+	</syntaxhighlight>
		+
		+	qui est attribuée à l’élément conteneur (#global) est nécessaire pour que les éléments qu’il contient se placent en prenant comme référence sa position. Sans cette déclaration, ces éléments se placeront par rapport à l’élément qui contient le conteneur (#global), dans ce cas, l’élément <code><body></code>.
		+
		+	Le code css appliquera donc la mise en forme :

← Version précédente		Version du 6 novembre 2015 à 17:47
Ligne 416 :		Ligne 416 :

	[[Fichier:Css default pos.png]]		[[Fichier:Css default pos.png]]
		+
		+	Les blocs se placent dans ce que l’on appelle le flux de la page. Les autres types de positionnement sortent les éléments de ce flux par défaut.
		+
		+	==Positionnement relatif==
		+
		+	Le positionnement relatif se spécifie dans le code css grâce à la déclaration
		+
		+	<syntaxhighlight lang="css">
		+	position:relative;
		+	</syntaxhighlight>
		+
		+	La seule différence entre le positionnement relatif et le positionnement par défaut est que le positionnement relatif permet de "fixer" le bloc dans le flux. L’affichage place d’abord le bloc dans le flux, puis, s’il y a des déclarations de positions supplémentaires dans les règles css qui lui sont attribuées, il ajoute ces positions à sa position actuelle dans le flux. Le positionnement relatif peut également servir à positionner des éléments en absolu à l’intérieur d’un autre élément (voir plus bas, positionnement absolu).
		+
		+	Le code css
		+
		+	<syntaxhighlight lang="css" line>
		+	#global div{
		+	width:100px;
		+	height:100px;
		+	}
		+	#global #bloc2{
		+	position:relative;
		+	bottom:20px;
		+	}
		+	</syntaxhighlight>
		+
		+	décalera le deuxième bloc de 20px vers le haut à partir de sa position dans le flux et appliquera la mise en forme :
		+
		+	On peut constater que le décalage opéré sur l’élément dont l’id est "bloc2" n’influe pas le positionnement des éléments qui le suivent dans le flux.