Ci-dessous, les différences entre deux révisions de la page.
Prochaine révision | Révision précédente | ||
css [2016/02/15 19:15] luc créée |
css [2018/10/13 20:32] (Version actuelle) |
||
---|---|---|---|
Ligne 1: | Ligne 1: | ||
+ | ====== CSS ====== | ||
+ | |||
+ | Cette page est antichronologique, | ||
+ | |||
+ | |||
+ | ===== Astuces ===== | ||
+ | |||
+ | ==== centrer verticalement ==== | ||
+ | |||
+ | On va utiliser la propriété '' | ||
+ | L' | ||
+ | |||
+ | <code html> | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | ... | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | <code css> | ||
+ | .blocVide { | ||
+ | display: inline-block; | ||
+ | height: 100%; | ||
+ | vertical-align: | ||
+ | } | ||
+ | .ElementAcentrer { | ||
+ | display: inline-block; | ||
+ | vertical-align: | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | ==== 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. | ||
+ | |||
+ | |||
+ | |||
+ | ----------------------------------------------- | ||
+ | |||
+ | ===== 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.\\ | ||
+ | Concrètement, | ||
+ | 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 ==== | ||
- | ---------------------------------------------------- | ||
- | - UTLISER UNE FEUILLE DE STYLE DANS UNE PAGE HTML5 - | ||
- | ---------------------------------------------------- | ||
Inclure une feuille de style dans le < | Inclure une feuille de style dans le < | ||
- | <link rel=" | + | <code html5> |
+ | < | ||
+ | < | ||
+ | < | ||
+ | | ||
+ | </ | ||
+ | ... | ||
+ | </ | ||
+ | </code> | ||
+ | ==== La syntaxe de base ==== | ||
- | /* ... */ Commentaires au milieu d'une feuille de style CSS | + | La syntaxe du CSS est grossièrement la suivante : |
+ | <code css> | ||
+ | /* Ceci est un commentaire (multi-lignes) | ||
+ | sélecteur | ||
+ | { | ||
+ | propriété; | ||
+ | } | ||
+ | /* | ||
+ | * On notera les accolades pour délimiter la description lié à un sélecteur | ||
+ | * le ; pour terminer la description d'une propriété | ||
+ | * le : pour séparer à gauche le nom de la propriété, | ||
+ | */ | ||
+ | </ | ||
+ | ==== Sélectionner les balises HTML ==== | ||
- | ---------------------------- | + | <code css> |
- | - SELECTIONNER DES BALISES - | + | /* permet d' |
- | ---------------------------- | + | balise1 |
- | balise1 permet d' | + | |
{ | { | ||
| | ||
Ligne 21: | Ligne 148: | ||
} | } | ||
- | balise1, balise2 les 2 balises auront les propriétés décrites | + | /*les 2 balises auront les propriétés décrites |
+ | balise1, balise2 | ||
{ | { | ||
propriete: valeur; | propriete: valeur; | ||
} | } | ||
- | balise1 balise2 selectionne les balises 2 incluses dans les balises 1 | + | /* selectionne les balises 2 incluses dans les balises 1 */ |
+ | balise1 balise2 | ||
{ | { | ||
propriete: valeur; | propriete: valeur; | ||
} | } | ||
- | class=" | + | /* Sélectionne tous les éléments ayant la même classe HTML : */ |
- | .ExempleStyle selectionne ttes les balises ayant pour class ' | + | /* code html : <a Href=" |
+ | .ExempleStyle | ||
{ | { | ||
paramètre: | paramètre: | ||
} | } | ||
- | id="" | + | /* Sélectionne l' |
- | #id selectionne la balise ayant un ' | + | /* code html : <a Href="lien" |
+ | #identifiant | ||
{ | { | ||
paramètre: | paramètre: | ||
} | } | ||
- | balise[attribut] selectionne | + | /* Sélectionne |
+ | balise[attribut] | ||
{ | { | ||
} | } | ||
- | balise[attribut=" | + | /* l' |
+ | balise[attribut=" | ||
{ | { | ||
} | } | ||
- | balise[attribut*=" | + | /* la valeur de l' |
+ | balise[attribut*=" | ||
{ | { | ||
} | } | ||
- | body s' | + | /* au survol, la propriété est appliqué au survol avec la souris */ |
+ | balise: | ||
{ | { | ||
} | } | ||
- | balise:hover au survol, la propriété | + | /* au moment du clic */ |
- | { | + | balise:active |
- | } | + | |
+ | /* lorsque l' | ||
+ | balise: | ||
+ | |||
+ | /* lorsque | ||
+ | balise: | ||
+ | |||
+ | /* permet d' | ||
+ | balise: | ||
+ | |||
+ | |||
+ | /* Et maintenant des sélecteurs un peu particuliers */ | ||
+ | |||
+ | /* ira chercher tous les elem2 parmi les enfants directs de elem1, sans aller plus loin dans les sous-enfants */ | ||
+ | elem1 > elem2 | ||
+ | |||
+ | /* sélectionnera tous les elem2 situés tout de suite après un elem1 */ | ||
+ | elem1 + elem2 | ||
+ | |||
+ | /* pour chaque elem1, on va chercher tous les éléments elem2 suivant elem1 dans le même parent */ | ||
+ | elem1 ~ elem2 | ||
+ | | ||
+ | </ | ||
+ | |||
- | balise: | ||
- | balise: | ||
- | balise: | ||
- | balise: | + | ==== Paramètres courants ==== |
- | ----------------------- | + | === Pour du texte === |
- | - PARAMETRES COURANTS - | + | <code css> |
- | ----------------------- | + | /* spécifie la taille du texte, en valeur absolue ou relative */ |
- | --- TEXTE --- | + | font-size: |
- | font-size: | + | 14px |
- | 14px spécifie la taille | + | 14mm |
- | 14mm spécifie la taille absolue du texte en mm, 1.5cm ... | + | 0.8em |
- | 0.8em spécifie la taille relative, 0,8 fois la taille normale (em) | + | xx-small |
- | xx-small valeur indiquant une taille relative très très petite | + | x-small |
- | x-small | + | small |
- | small | + | medium |
- | medium | + | large |
- | large | + | |
x-large | x-large | ||
xx-large | xx-large | ||
- | font-family: | + | /* spécifie la police utilisée */ |
- | Tahoma, | + | font-family: |
+ | Tahoma, | ||
- | 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 */ |
+ | 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 113: | Ligne 270: | ||
#FFFFFF | #FFFFFF | ||
rgb(240, | rgb(240, | ||
+ | </ | ||
- | --- ARRIERE PLAN --- | + | === L' |
+ | <code css> | ||
background-color: | background-color: | ||
red | red | ||
#FFFFFF | #FFFFFF | ||
rgb(240, | rgb(240, | ||
- | rgba(255, | + | rgba(255, |
background-image: | background-image: | ||
- | url(" | + | url(" |
- | background-attachment: | + | /* permet de fixer le fond, on peut voir le texte " |
+ | background-attachment: | ||
fixed | fixed | ||
scroll (par défaut) | scroll (par défaut) | ||
- | background-repeat: | + | background-repeat: |
no-repeat | no-repeat | ||
repeat-x | repeat-x | ||
Ligne 134: | Ligne 294: | ||
repeat (par défaut) | repeat (par défaut) | ||
- | background-position: | + | 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' | ||
+ | opacity: | ||
+ | | ||
+ | </ | ||
- | opacity: | + | === Les Bordures === |
- | 0.5; | + | <code css> |
- | + | /* super-propriété, | |
- | --- BORDURES --- | + | border: |
- | border: | + | |
border-width: | border-width: | ||
border-color: | border-color: | ||
- | border-style: | + | 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 163: | Ligne 328: | ||
} | } | ||
- | border-top/ | + | /* Ce sont aussi des superpropriétés */ |
+ | border-top/ | ||
+ | /* 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) |
+ | </ | ||
- | --- 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 | + | 6px 6px 6px red; |
+ | </ | ||
+ | |||
+ | ==== 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, | ||
+ | <code css> | ||
+ | /* définit la largeur du bloc (par exemple d'un p aragraphe) */ | ||
+ | width: | ||
+ | 50% /* par rapport au parent !*/ | ||
+ | 250px | ||
- | --------------------------- | + | /* la hauteur, mêmes réglages que la largeur |
- | - MISE EN FORME DES BLOCS - | + | |
- | --------------------------- | + | |
- | width: | + | |
- | 50% | + | |
- | 250px | + | |
- | + | ||
height: | height: | ||
Ligne 191: | 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 224: | 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 236: | 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é: | + | /* gestion des bordures (intérieures et extérieures) du tableau |
- | } | + | |
- | + | collapse / | |
- | border-collapse: | + | seperate /* les bordures sont séparées |
- | collapse les bordures sont collées entre elles | + | |
- | seperate les bordures sont séparées | + | |
- | caption-side: | + | /* définit l' |
- | top définit l' | + | caption-side: |
+ | top | ||
+ | </ | ||
+ | En fin de compte, les tableaux ne m'ont pas tant inspiré que ça :/ | ||
- | ---------- | + | ==== Les Listes ==== |
- | - LISTES - | + | <code css> |
- | ---------- | + | |
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: | + | |
- | } | + | |
- | + | <code css> | |
- | ----------- | + | |
- | galerie CSS, transition.. | + | |
- | ----------- | + | |
/* Transitions to provide some eye candy */ | /* Transitions to provide some eye candy */ | ||
-webkit-transition: | -webkit-transition: | ||
Ligne 293: | Ligne 461: | ||
-ms-transition: | -ms-transition: | ||
-o-transition: | -o-transition: | ||
- | display : none ; | + | </code> |
- | div[id^=image]: | + | |
- | div[id^=image]: | + | On reviendra là-dessus plus tard, ok ? |
- | div[id^=image]: | + | |
- | div# | + | |
- | <div id=" | + | |
- | <div class=" | + | |
- | <div id=" | + | |
- | <span class=" | + | |
- | < | + | |
- | <a class=" | + | |
- | </ | + | |
- | </ | + | |
- | ------- | ||
- | CSS Sprite : une seule image, on déplace le fond visible | ||
- | ------- | ||
- | #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; |