Ci-dessous, les différences entre deux révisions de la page.
Les deux révisions précédentes Révision précédente Prochaine révision | Révision précédente | ||
css [2016/03/22 13:42] luc |
css [2018/10/13 20:32] (Version actuelle) |
||
---|---|---|---|
Ligne 30: | Ligne 30: | ||
} | } | ||
</ | </ | ||
+ | |||
+ | ==== Gestion pure css d'un menu déroulant ==== | ||
+ | <code css> | ||
+ | /*nav .sous_menu ul | ||
+ | { | ||
+ | |||
+ | } | ||
+ | |||
+ | nav .sous_menu | ||
+ | { | ||
+ | display: none; | ||
+ | width: 250px; | ||
+ | border-radius: | ||
+ | box-shadow: | ||
+ | |||
+ | } | ||
+ | |||
+ | nav li:hover > .sous_menu li | ||
+ | { | ||
+ | display: block; | ||
+ | background-color: | ||
+ | z-index: | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | ==== galerie en pur CSS ==== | ||
+ | <code css> | ||
+ | /* Transitions to provide some eye candy */ | ||
+ | -webkit-transition: | ||
+ | -moz-transition: | ||
+ | -ms-transition: | ||
+ | -o-transition: | ||
+ | |||
+ | display : none ; | ||
+ | div[id^=image]: | ||
+ | div[id^=image]: | ||
+ | div[id^=image]: | ||
+ | div# | ||
+ | |||
+ | </ | ||
+ | |||
+ | <code html5> | ||
+ | |||
+ | <div id=" | ||
+ | <div class=" | ||
+ | <div id=" | ||
+ | <span class=" | ||
+ | <img src=" | ||
+ | <a class=" | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | </ | ||
+ | |||
+ | ==== CSS Sprite ==== | ||
+ | L' | ||
+ | |||
+ | <code css> | ||
+ | #nav li a {background-image: | ||
+ | #nav li a.item1 {background-position: | ||
+ | #nav li a: | ||
+ | #nav li a.item2 {background-position: | ||
+ | #nav li a: | ||
+ | </ | ||
+ | Par défaut toutes les images sont cachés grâce à notre bon vieux '' | ||
+ | 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 266: | Ligne 334: | ||
border-radius: | border-radius: | ||
10px | 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) */ |
</ | </ | ||
=== Les 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; |
+ | </ | ||
- | ==== 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, | ||
- | width: | + | <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 290: | Ligne 367: | ||
max-height: | max-height: | ||
- | padding: | + | /* marge intérieure du bloc */ |
+ | padding: | ||
50px | 50px | ||
- | margin: | + | /* 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: | + | |
- | 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' | + | |
+ | /* Gestion dépassement du texte du bloc */ | ||
+ | overflow: | ||
+ | visible / | ||
+ | hidden / | ||
+ | scroll / | ||
+ | auto /* c'est le navigateur qui décide, et qui mettra si nécessaire la barre de défilement | ||
- | display transforme un type d' | + | /* transforme un type d' |
- | 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: < | + | inline-block /* se placent les uns à cotés des autres (inline), mais peuvent être redimensionnés |
+ | none /* n'est pas affiché (ex: < | ||
vertical-align: | vertical-align: | ||
Ligne 323: | Ligne 404: | ||
50% | 50% | ||
- | position: | + | /* 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 | + | absolute /* positionnement absolu dans la page (on doit ensuite le donner, par exemple en px) */ |
- | relative par rapport à sa position normale | + | fixed |
+ | /* c'est plutot un positionnement absolu dans l' | ||
+ | relative /* par rapport à sa position normale | ||
Exemple_de_positionnement_absolu | Exemple_de_positionnement_absolu | ||
Ligne 335: | Ligne 418: | ||
} | } | ||
- | z_index: | + | /* permet d' |
- | 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 | ||
+ | </ | ||
- | ==== 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; | + | /* gestion des bordures (intérieures et extérieures) du tableau */ |
- | } | + | border-collapse: |
+ | collapse / | ||
+ | seperate / | ||
- | border-collapse: | + | /* définit l' |
- | collapse les bordures sont collées entre elles | + | |
- | seperate les bordures sont séparées | + | top |
+ | </ | ||
+ | En fin de compte, | ||
- | caption-side: | + | ==== Les Listes |
- | top définit l' | + | <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 |
- | + | </ | |
- | /*** GESTION DU MENU DEROULANT ***/ | ||
- | /*nav .sous_menu ul | ||
- | { | ||
- | } | + | ==== Transition ==== |
- | + | ||
- | nav .sous_menu | + | |
- | { | + | |
- | display: none; | + | |
- | width: 250px; | + | |
- | border-radius: | + | |
- | box-shadow: | + | |
- | } | + | 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' |
- | + | C'est schönn | |
- | nav li:hover > .sous_menu li | + | |
- | { | + | |
- | display: block; | + | |
- | background-color: | + | |
- | z-index: | + | |
- | } | + | |
- | + | ||
- | + | ||
- | + | ||
- | ==== galerie CSS, transition.. ==== | + | |
+ | <code css> | ||
/* Transitions to provide some eye candy */ | /* Transitions to provide some eye candy */ | ||
-webkit-transition: | -webkit-transition: | ||
Ligne 391: | Ligne 461: | ||
-ms-transition: | -ms-transition: | ||
-o-transition: | -o-transition: | ||
- | display : none ; | + | </code> |
- | div[id^=image]: | + | |
- | div[id^=image]: | + | |
- | div[id^=image]: | + | |
- | div# | + | |
- | <div id=" | + | |
- | <div class=" | + | |
- | <div id=" | + | |
- | <span class=" | + | |
- | <img src=" | + | |
- | <a class=" | + | |
- | </ | + | |
- | | + | |
- | ==== CSS Sprite : une seule image, on déplace le fond visible ==== | + | On reviendra là-dessus plus tard, ok ? |
- | #nav li a {background-image: | ||
- | #nav li a.item1 {background-position: | ||
- | #nav li a: | ||
- | #nav li a.item2 {background-position: | ||
- | #nav li a: | ||
- | |||
- | Par défaut toutes les images sont cachés grâce à notre bon vieux display: | ||
- | 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; | ||