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/22 12:17]
luc 		css [2016/03/22 14:50]
luc
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 37: Ligne 105:
 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.\\ 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 : "Tous les titres seront avec du texte de couleur verte, en gras."+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 154: 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 200: 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 221: 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 250: 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 277: 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 310: 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 322: 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 378: 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.txt · 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