Différences

Ci-dessous, les différences entre deux révisions de la page.

--- css [2016/03/22 13:48]
luc
+++ css [2018/10/13 20:32] (Version actuelle)
@@ Ligne 30: / Ligne 30: @@
 }
 </code>
+==== Gestion pure css d'un menu déroulant ====
+<code css>
+	/*nav .sous_menu ul
+	{
+	}
+	nav .sous_menu  li
+	{
+		display: none;
+		width: 250px;
+		border-radius: 5px;
+		box-shadow: 2px 2px 5px #FFA468;
+	}
+	nav li:hover > .sous_menu li
+	{
+		display: block;
+		background-color: #FFE2CC;
+		z-index:2;
+	}
+</code>
+==== galerie en pur CSS ====
+<code css>
+/* Transitions to provide some eye candy */
+    -webkit-transition: all ease-in 0.5s;
+    -moz-transition: all ease-in 0.5s;
+    -ms-transition: all ease-in 0.5s;
+    -o-transition: all ease-in 0.5s;
+display : none ;
+div[id^=image]:target .close { .. }
+div[id^=image]:target { .. }
+div[id^=image]:target .expand { .. }
+div#image-1:target, div#image-2:target, div#image-3:target { left: 200px; }
+</code>
+<code html5>
+<div id="images-box">
+    <div class="holder">
+        <div id="image-1" class="image-lightbox">
+            <span class="close"><a href="#">X</a></span>
+            <img src="1.jpg" alt="earth!">
+            <a class="expand" href="#image-1"></a>
+        </div>
+    </div>
+</code>
+==== CSS Sprite ====
+L'idée est d'avoir une seule image composées de plusieurs petites , et d'en afficher seulement une partie. On limite ainsi les appels et les téléchargements (méthode des années 2000 pour fluidifier le chargement des pages)
+<code css>
+#nav li a {background-image:url('../img/image_nav.gif')}
+#nav li a.item1 {background-position:0px 0px}
+#nav li a:hover.item1 {background-position:0px -72px}
+#nav li a.item2 {background-position:0px -143px;}
+#nav li a:hover.item2 {background-position:0px -215px;}
+</code>
+Par défaut toutes les images sont cachés grâce à notre bon vieux ''display:none'', et nous allons les faire apparaître grâce à :target qui appliquera l’attribut display:block montrant notre bloc sélectionné.
+Ce qu’il faut savoir sur cette classe, c’est que quand vous cliquez sur un second élément avec une pseudo-class :target, les styles appliqués au précédent élément sont annulés.
 -----------------------------------------------
@@ Ligne 310: / Ligne 378: @@
 margin-top:
-CONCEPT : il existe la fusion des marges VERTICALES, cela ne concerne que les BLOCK qui sont jointifs ou parents-enfants et sans
+/* CONCEPT : il existe la fusion des marges VERTICALES,
-autre mise en forme (padding, border...)
+* cela ne concerne que les BLOCK qui sont jointifs ou parents-enfants et sans autre mise en forme (padding, border...)
+*/
-overflow:								Gestion dépassement du texte du bloc
-	visible								(par défaut) le texte est visible, même s'il dépasse les limites du bloc
-	hidden								Si le texte dépasse, il sera caché
-	scroll								si le texte dépasse, il y aura une barre de défilement
-	auto								c'est le navigateur qui décide, et qui mettra si nécessaire la barre de défilement
+/* Gestion dépassement du texte du bloc */
+overflow:
+	visible			/* (par défaut) le texte est visible, même s'il dépasse les limites du bloc            */
+	hidden			/* Si le texte dépasse, il sera caché                                                  */
+	scroll			/* Si le texte dépasse, il y aura une barre de défilement                              */
+	auto			/* c'est le navigateur qui décide, et qui mettra si nécessaire la barre de défilement  */
-display									transforme un type d'élement en un autre (inline -> block)
+/* transforme un type d'élement en un autre (inline -> block) */
-	inline								élement d'une ligne, se placent les uns à côté des autres
+display:
-	block								se placent les uns sous les autres et redimensionnement possible
+	inline	                /* élement d'une ligne, se placent les uns à côté des autres                           */
-	inline-block						se placent les uns à cotés des autres (inline), mais peuvent être redimensionnés
+	block			/* se placent les uns sous les autres et redimensionnement possible                    */
-	none								n'est pas affiché (ex: <head>)
+	inline-block		/* se placent les uns à cotés des autres (inline), mais peuvent être redimensionnés    */
+	none			/* n'est pas affiché (ex: <head>)                                                      */
 vertical-align:
@@ Ligne 334: / Ligne 404: @@
 %
-position:								permet le positionnement d'un élément sur la page
+/* permet le positionnement d'un élément sur la page */
-	absolute							positionnement absolu dans la page (on doit ensuite le donner, par exemple en px)
+position:
-	fixed 								identique à absolu, mais toujours visible même si on descend ds la page, c'est plutot un positionnement absolu dans l'écran
+	absolute		/* positionnement absolu dans la page (on doit ensuite le donner, par exemple en px) */
-	relative							par rapport à sa position normale
+	fixed 			/* identique à absolu, mais toujours visible même si on descend ds la page,          */
+                                /* c'est plutot un positionnement absolu dans l'écran                                */
+	relative	        /* par rapport à sa position normale                                                 */
 Exemple_de_positionnement_absolu
@@ Ligne 346: / Ligne 418: @@
 }
-z_index:								permet d'organiser l'affichage d'élément se superposant
+/* permet d'organiser l'affichage d'élément se superposant */
-									le plus élevé est sur le dessus, il sera donc affiché par dessus les autres
+z_index:
+			/* le plus élevé est sur le dessus, il sera donc affiché par dessus les autres       */
+</code>
-==== TABLEAUX ====
+==== Tableaux ====
+Ils peuvent servir à la mise en forme plus globale, sans bordure (même si de nos jours on préférera un Framework css comme bootstrap), pas seulement pour présenter qques résultats façons tableau excel.
+<code css>
+les propriétés propres aux tableaux sont les suivantes
 table
 {
-	propriété: valeur;					les propriétés propres aux tableaux sont les suivantes
+    /* gestion des bordures (intérieures et extérieures) du tableau */
-}
+    border-collapse:
+    	collapse		/* les bordures sont collées entre elles */
+	seperate		/* les bordures sont séparées            */
-border-collapse:						gestion des bordures (intérieures et extérieures) du tableau
+    /* définit l'emplacement du titre par rapport au tableau */
-	collapse							les bordures sont collées entre elles
+    caption-side:
-	seperate							les bordures sont séparées
+	top
+</code>
+En fin de compte, les tableaux ne m'ont pas tant inspiré que ça :/
-caption-side:
+==== Les Listes ====
-	top									définit l'emplacement du titre par rapport au tableau
+<code css>
-==== LISTES ====
 list-style-type:
-	none								permet de supprimer les puces des listes
+	none			/* permet de supprimer les puces des listes */
+</code>
-/*** GESTION DU MENU DEROULANT ***/
-	/*nav .sous_menu ul
-	{
-	}
+==== Transition ====
-	nav .sous_menu  li
-	{
-		display: none;
-		width: 250px;
-		border-radius: 5px;
-		box-shadow: 2px 2px 5px #FFA468;
-	}
+On peut faire des transitions dynamiques lors du passage d'une mise en forme à une autre (par exemple au passage de la souris par dessus l'élément).
+C'est schönn ;)
-	nav li:hover > .sous_menu li
-	{
-		display: block;
-		background-color: #FFE2CC;
-		z-index:2;
-	}
-==== galerie CSS, transition.. ====
+<code css>
 /* Transitions to provide some eye candy */
     -webkit-transition: all ease-in 0.5s;
@@ Ligne 402: / Ligne 461: @@
     -ms-transition: all ease-in 0.5s;
     -o-transition: all ease-in 0.5s;
-display : none ;
+</code>
-div[id^=image]:target .close {
-div[id^=image]:target {
-div[id^=image]:target .expand {
-div#image-1:target, div#image-2:target, div#image-3:target { left: 200px; }
-<div id="images-box">
-    <div class="holder">
-        <div id="image-1" class="image-lightbox">
-            <span class="close"><a href="#">X</a></span>
-            <img src="1.jpg" alt="earth!">
-            <a class="expand" href="#image-1"></a>
-        </div>
-    </div>
-==== CSS Sprite : une seule image, on déplace le fond visible ====
+On reviendra là-dessus plus tard, ok ?
-#nav li a {background-image:url('../img/image_nav.gif')}
-#nav li a.item1 {background-position:0px 0px}
-#nav li a:hover.item1 {background-position:0px -72px}
-#nav li a.item2 {background-position:0px -143px;}
-#nav li a:hover.item2 {background-position:0px -215px;}
-Par défaut toutes les images sont cachés grâce à notre bon vieux display:none, et nous allons les faire apparaître grâce à :target qui appliquera l’attribut display:block montrant notre bloc sélectionné.
-Ce qu’il faut savoir sur cette classe, c’est que quand vous cliquez sur un second élément avec une pseudo-class :target, les styles appliqués au précédent élément sont annulés.
-opacity: 0.5;

L'Aide Mémoire Informatisé du petit Luc

Outils pour utilisateurs

Outils du site

Différences

Outils de la page