L'Aide Mémoire Informatisé du petit Luc

Outils pour utilisateurs

Outils du site

Piste:
css

Différences

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

Lien vers cette vue comparative

Les deux révisions précédentes Révision précédente
Prochaine révision 		Révision précédente
css [2016/03/21 16:13]
luc 		css [2018/10/13 20:32] (Version actuelle)
Ligne 30: Ligne 30:
 } }
 </code> </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 35: Ligne 103:
 ===== Le CSS à partir de zéro ===== ===== Le CSS à partir de zéro =====
  
-Le CSS (Cascade Style Sheet) est un langage qui permet la mise en page d'un code HTML. Le côté HTML se focalise sur le contenu, le CSS sur la forme.+Le CSS (Cascade Style Sheet) est un langage qui permet la mise en page d'un code HTML. Le côté HTML se focalise sur le contenu, le CSS sur la forme.\\ 
 +Concrètement, voici comment ça marche : on sélectionne des bouts de code HTML, on leur applique des propriétés de mise en page avec des valeurs qu'on spécifie.\\ 
 +Par exemple et exprimé en français : "Tous les titres de niveau 2 seront avec du texte de couleur verte, en gras."
  
 ==== Utiliser une feuille de style dans une page HTML5 ==== ==== Utiliser une feuille de style dans une page HTML5 ====
Ligne 152: Ligne 222:
  
  
-==== PARAMETRES COURANTS ====+==== Paramètres courants ====
  
-=== TEXTE ===+=== Pour du texte ===
 <code css> <code css>
-font-size: spécifie la taille du texte +/* spécifie la taille du texte, en valeur absolue ou relative */ 
- 14px spécifie la taille absolue du texte en pixel +font-size: 
- 14mm spécifie la taille absolue du texte en mm, 1.5cm ... + 14px  
- 0.8em spécifie la taille relative, 0,8 fois la taille normale (em) + 14mm  
- xx-small valeur indiquant une taille relative très très petite + 0.8em   /* spécifie la taille relative, 0,8 fois la taille normale (em) */ 
- x-small + xx-small  /* valeur indiquant une taille relative très très petite */ 
- small + x-small  
- medium + small  
- large+ medium  
 + large 
  x-large  x-large
  xx-large  xx-large
  
-font-family: spécifie la police utilisée, +/* spécifie la police utilisée */ 
- Tahoma,Arial,"Times New Roman"; si pas dispo utiliser la 2e, sinon la 3e etc..+font-family: , 
 + Tahoma,Arial,"Times New Roman"; /* si pas dispo utiliser la 2e, sinon la 3e etc.. */
  
-font-style: mettre du texte en italique ou pas+/* mettre du texte en italique ou pas */ 
 +font-style:
  normal  normal
  italic  italic
  
-font-weight: mettre du texte en gras+/* mettre du texte en gras */ 
 +font-weight:
  normal  normal
  bold  bold
  
 text-decoration: text-decoration:
- underline souligné + underline /* souligné        */ 
- line-through barré + line-through /* barré           */ 
- overline ligne au dessus + overline /* ligne au dessus */ 
- blink clignotant + blink /* clignotant      */ 
- none normal+ none /* normal          */
  
 text-align:  text-align: 
Ligne 198: Ligne 272:
 </code> </code>
  
-=== ARRIERE PLAN === +=== L'arrière plan === 
 +<code css>
 background-color: background-color:
  red  red
  #FFFFFF  #FFFFFF
  rgb(240,200,143)  rgb(240,200,143)
- rgba(255,210,200,0.5) rgba permet de définir l'opacité de la couleur de fond+ rgba(255,210,200,0.5) /* rgba permet de définir l'opacité de la couleur de fond */
  
 background-image: background-image:
- url("lien") le lien relatif l'est par rapport au fichier CSS et non au fichier HTML+ url("lien") /* le lien relatif l'est par rapport au fichier CSS et non au fichier HTML */
   
-background-attachment: permet de fixer le fond, on peut voir le texte "glisser" sur l'image, ou pas...+/* permet de fixer le fond, on peut voir le texte "glisser" sur l'image, ou pas... */ 
 +background-attachment:
  fixed  fixed
  scroll (par défaut)  scroll (par défaut)
  
-background-repeat: permet de répéter le fond+background-repeat:
  no-repeat  no-repeat
  repeat-x  repeat-x
Ligne 219: Ligne 294:
  repeat (par défaut)  repeat (par défaut)
  
-background-position: précise la position du fond... +background-position: 
- 30px 50px à 30 pixels de la gauche et 50 pixels du haut+ 30px 50px /* à 30 pixels de la gauche et 50 pixels du haut */
  top  top
- top right par rapport au coin haut gauche de la page+ top right /* par rapport au coin haut gauche de la page (ou du parent ?) */
  
 +/* permet de mettre des éléments en transparence (s'applique à tous les contenus de la balise selectionnée) */
 +opacity:
 +       0.5; /* doit etre comprise entre 0 et 1 */
 +</code>
  
-opacity: permet de mettre des éléments en transparence (s'applique à tous les contenus de la balise selectionnée) +=== Les Bordures === 
- 0.5; doit etre comprise entre 0 et 1 +<code css> 
- +/* super-propriété, regroupe les propriétés width/color/style (doit comprendre 3 valeurs) */ 
-=== BORDURES === +border:  
-border: super-propriété, regroupe les propriétés suivantes (doit comprendre 3 valeurs) :+
 border-width: border-width:
 border-color: border-color:
-border-style: qui peut prendre les caractéristiques : +border-style:  
- none pas de bordure (par défaut) + none /* pas de bordure (par défaut) */ 
- solid trait simple + solid /* trait simple                */ 
- dotted pointillés + dotted /* pointillés                  */ 
- dashed tirets + dashed /* tirets                      */ 
- double border double + double /* border double               */ 
- groove en relief + groove /* en relief                   */ 
- ridge autre relief + ridge /* autre relief                */ 
- inset effet 3D enfoncé + inset /* effet 3D enfoncé            */ 
- outset effet 3D surélevé + outset /* effet 3D surélevé           */ 
-EXEMPLE :+ 
 +/* EXEMPLE */
 balise balise
 { {
Ligne 248: Ligne 328:
 } }
  
-border-top/bottom/left/right: Ce sont aussi des superpropriétés+/* Ce sont aussi des superpropriétés */ 
 +border-top/bottom/left/right:
  
 +/* bordure arrondie */
 border-radius: border-radius:
- 10px bordure arrondie + 10px  
- 20px / 10px permet de faire des ellipses + 20px / 10px /* permet de faire des ellipses */ 
- 10x 20 px 15px 8 px pour que chaque angle possède des arrondis différents (hautgauche hautdroite basdroite basgauche)+ 10x 20 px 15px 8 px /* chaque angle possède des arrondis différents (hautgauche hautdroite basdroite basgauche) */ 
 +</code>
  
-=== OMBRES ===+=== Les Ombres === 
 +<code css> 
 +/* ombre sur tout le bloc (décalage horizontal, décalage vertical, dégradé, couleur) */
 box-shadow: box-shadow:
- 6px 6px 0px black ombre sur tout le bloc (décalage horizontal, décalage vertical, dégradé, couleur)+ 6px 6px 0px black
  
 +/* ombre sur le texte, sur chacun des caractères */
 text-shadow: text-shadow:
- 6px 6px 6px red; ombre sur le texte, sur chacun des caractères + 6px 6px 6px red;  
 +</code>
   
-==== MISE EN FORME DES BLOCS ====+==== Mise en forme des blocs ==== 
 +Les contenus sont dans 2 types de contenants différents : 
 +  * les blocs qui prennent toute la largeur disponible (impossible de mettre quelque chose à côté d'un bloc ! ) 
 +  * et les inline qui ne prennent que la largeur nécessaire, on peut les juxtaposer
  
-width: définit la largeur du bloc (par exemple d'un p) +<code css> 
- 50% +/* définit la largeur du bloc (par exemple d'un p aragraphe) */ 
- 250px +width:  
 + 50%       /* par rapport au parent !*/ 
 + 250px   /* valeur absolue en pixels */
   
 +/* la hauteur, mêmes réglages que la largeur */
 height: height:
  
Ligne 275: Ligne 367:
 max-height: max-height:
  
-padding: marge intérieure du bloc+/* marge intérieure du bloc */ 
 +padding:
  50px  50px
  
-margin: marge extérieure du bloc+/* marge extérieure du bloc */ 
 +margin:
  10px  10px
- auto centre horizontalement le bloc dans la page+ auto /* centre horizontalement le bloc dans la page */
  
 margin-top: 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:  vertical-align: 
Ligne 308: Ligne 404:
  50%  50%
  
-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 Exemple_de_positionnement_absolu
Ligne 320: Ligne 418:
 } }
  
-z_index: permet d'organiser l'affichage d'élément se superposant +/* permet d'organiser l'affichage d'élément se superposant */ 
- 1 le plus élevé est sur le dessus, il sera donc affiché par dessus les autres+z_index:  
 + 1 /* 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 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: 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 */ /* Transitions to provide some eye candy */
     -webkit-transition: all ease-in 0.5s;     -webkit-transition: all ease-in 0.5s;
Ligne 376: Ligne 461:
     -ms-transition: all ease-in 0.5s;     -ms-transition: all ease-in 0.5s;
     -o-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;  
  
  
  
css.1458576799.txt.gz · Dernière modification: 2018/10/13 20:32 (modification externe)

Outils de la page

Sauf mention contraire, le contenu de ce wiki est placé sous les termes de la licence suivante : CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki