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/21 15:57] 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 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, | ||
+ | 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 41: | Ligne 111: | ||
Inclure une feuille de style dans le < | Inclure une feuille de style dans le < | ||
<code html5> | <code html5> | ||
- | < | + | <!DOCTYPE |
< | < | ||
< | < | ||
Ligne 67: | Ligne 137: | ||
</ | </ | ||
- | ==== SELECTIONNER DES BALISES | + | ==== Sélectionner les balises |
<code css> | <code css> | ||
- | balise1 permet d' | + | /* permet d' |
+ | balise1 | ||
{ | { | ||
| | ||
Ligne 77: | 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é est appliqué au survol avec la souris | + | /* au moment du clic */ |
- | { | + | balise:active |
- | } | + | |
+ | /* lorsque l' | ||
+ | balise: | ||
- | balise: | + | /* lorsque la page/lien a été visitée/cliqué */ |
- | balise: | + | balise: |
- | balise: | + | |
- | balise: | + | /* permet d' |
+ | balise: | ||
+ | /* Et maintenant des sélecteurs un peu particuliers */ | ||
- | elem1 > elem2 : ira chercher tous les elem2 parmi les enfants directs de elem1, sans aller plus loin dans les sous-enfants | + | /* ira chercher tous les elem2 parmi les enfants directs de elem1, sans aller plus loin dans les sous-enfants |
+ | elem1 > elem2 | ||
- | elem1 + elem2 : sélectionnera tous les elem2 situés tout de suite après un elem1 ; | + | /* sélectionnera tous les elem2 situés tout de suite après un elem1 */ |
+ | elem1 + elem2 | ||
- | elem1 ~ elem2 : pour chaque elem1, on va chercher tous les éléments elem2 suivant elem1 dans le même parent. | + | /* pour chaque elem1, on va chercher tous les éléments elem2 suivant elem1 dans le même parent |
+ | elem1 ~ elem2 | ||
| | ||
</ | </ | ||
Ligne 137: | Ligne 222: | ||
- | ==== PARAMETRES COURANTS | + | ==== Paramètres courants |
- | === TEXTE === | + | === Pour du texte === |
<code css> | <code css> | ||
- | font-size: | + | /* 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 |
- | x-small | + | xx-small |
- | small | + | x-small |
- | medium | + | small |
- | large | + | medium |
+ | 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 183: | Ligne 272: | ||
</ | </ | ||
- | === 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 204: | 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 233: | 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 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 260: | 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: | + | /* 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 | + | overflow: |
- | hidden Si le texte dépasse, il sera caché | + | visible / |
- | scroll si | + | hidden /* Si le texte dépasse, il sera caché |
- | auto c'est le navigateur qui décide, et qui mettra si nécessaire la barre de défilement | + | 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 | ||
- | + | /* transforme un type d' | |
- | display transforme un type d' | + | display: |
- | inline élement d'une ligne, se placent les uns à côté des autres | + | inline /* élement d'une ligne, se placent les uns à côté des autres |
- | block se placent les uns sous les autres et redimensionnement possible | + | block /* se placent les uns sous les autres et redimensionnement possible |
- | inline-block se placent les uns à cotés des autres (inline), mais peuvent être redimensionnés | + | inline-block /* se placent les uns à cotés des autres (inline), mais peuvent être redimensionnés |
- | none n'est pas affiché (ex: < | + | none /* n'est pas affiché (ex: < |
vertical-align: | vertical-align: | ||
Ligne 293: | 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 305: | 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 361: | 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; | ||