Ci-dessous, les différences entre deux révisions de la page.
css [2016/03/22 14:10] luc |
css [2018/10/13 20:32] |
||
---|---|---|---|
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=" | ||
- | </ | ||
- | </ | ||
- | |||
- | </ | ||
- | |||
- | |||
- | ----------------------------------------------- | ||
- | |||
- | ===== 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 ==== | ||
- | |||
- | Inclure une feuille de style dans le < | ||
- | <code html5> | ||
- | < | ||
- | < | ||
- | < | ||
- | <link rel=" | ||
- | </ | ||
- | ... | ||
- | </ | ||
- | </ | ||
- | |||
- | ==== La syntaxe de base ==== | ||
- | |||
- | 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> | ||
- | /* permet d' | ||
- | balise1 | ||
- | { | ||
- | | ||
- | | ||
- | | ||
- | } | ||
- | |||
- | /*les 2 balises auront les propriétés décrites */ | ||
- | balise1, balise2 | ||
- | { | ||
- | propriete: valeur; | ||
- | } | ||
- | |||
- | /* selectionne les balises 2 incluses dans les balises 1 */ | ||
- | balise1 balise2 | ||
- | { | ||
- | propriete: valeur; | ||
- | } | ||
- | |||
- | /* Sélectionne tous les éléments ayant la même classe HTML : */ | ||
- | /* code html : <a Href=" | ||
- | .ExempleStyle | ||
- | { | ||
- | paramètre: | ||
- | } | ||
- | |||
- | /* Sélectionne l' | ||
- | /* code html : <a Href=" | ||
- | # | ||
- | { | ||
- | paramètre: | ||
- | } | ||
- | |||
- | /* Sélectionne les ' | ||
- | balise[attribut] | ||
- | { | ||
- | } | ||
- | |||
- | /* l' | ||
- | balise[attribut=" | ||
- | { | ||
- | } | ||
- | |||
- | /* la valeur de l' | ||
- | balise[attribut*=" | ||
- | { | ||
- | } | ||
- | |||
- | /* au survol, la propriété est appliqué au survol avec la souris */ | ||
- | balise: | ||
- | { | ||
- | } | ||
- | |||
- | /* au moment du clic */ | ||
- | balise: | ||
- | |||
- | /* lorsque l' | ||
- | balise: | ||
- | |||
- | /* lorsque la page/lien a été visitée/ | ||
- | 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 | ||
- | | ||
- | </ | ||
- | | ||
- | |||
- | |||
- | ==== Paramètres courants ==== | ||
- | |||
- | === Pour du texte === | ||
- | <code css> | ||
- | /* spécifie la taille du texte, en valeur absolue ou relative */ | ||
- | font-size: | ||
- | 14px | ||
- | 14mm | ||
- | 0.8em | ||
- | xx-small /* valeur indiquant une taille relative très très petite */ | ||
- | x-small | ||
- | small | ||
- | medium | ||
- | large | ||
- | x-large | ||
- | xx-large | ||
- | |||
- | /* spécifie la police utilisée */ | ||
- | font-family: | ||
- | Tahoma, | ||
- | |||
- | /* mettre du texte en italique ou pas */ | ||
- | font-style: | ||
- | normal | ||
- | italic | ||
- | |||
- | /* mettre du texte en gras */ | ||
- | font-weight: | ||
- | normal | ||
- | bold | ||
- | |||
- | text-decoration: | ||
- | underline / | ||
- | line-through / | ||
- | overline / | ||
- | blink /* clignotant | ||
- | none /* normal | ||
- | |||
- | text-align: | ||
- | left | ||
- | center | ||
- | right | ||
- | justify | ||
- | |||
- | color: | ||
- | red | ||
- | #FFFFFF | ||
- | rgb(240, | ||
- | </ | ||
- | |||
- | === L' | ||
- | <code css> | ||
- | background-color: | ||
- | red | ||
- | #FFFFFF | ||
- | rgb(240, | ||
- | rgba(255, | ||
- | |||
- | background-image: | ||
- | url(" | ||
- | |||
- | /* permet de fixer le fond, on peut voir le texte " | ||
- | background-attachment: | ||
- | fixed | ||
- | scroll (par défaut) | ||
- | |||
- | background-repeat: | ||
- | no-repeat | ||
- | repeat-x | ||
- | repeat-y | ||
- | repeat (par défaut) | ||
- | |||
- | background-position: | ||
- | 30px 50px /* à 30 pixels de la gauche et 50 pixels du haut */ | ||
- | top | ||
- | top right /* par rapport au coin haut gauche de la page (ou du parent ?) */ | ||
- | |||
- | /* permet de mettre des éléments en transparence (s' | ||
- | opacity: | ||
- | | ||
- | </ | ||
- | |||
- | === Les Bordures === | ||
- | <code css> | ||
- | /* super-propriété, | ||
- | border: | ||
- | |||
- | border-width: | ||
- | border-color: | ||
- | border-style: | ||
- | none /* pas de bordure (par défaut) */ | ||
- | solid /* trait simple | ||
- | dotted /* pointillés | ||
- | dashed /* tirets | ||
- | double /* border double | ||
- | groove /* en relief | ||
- | ridge /* autre relief | ||
- | inset /* effet 3D enfoncé | ||
- | outset /* effet 3D surélevé | ||
- | |||
- | /* EXEMPLE */ | ||
- | balise | ||
- | { | ||
- | border: 3px blue dashed; | ||
- | } | ||
- | |||
- | /* Ce sont aussi des superpropriétés */ | ||
- | border-top/ | ||
- | |||
- | /* bordure arrondie */ | ||
- | border-radius: | ||
- | 10px | ||
- | 20px / 10px /* permet de faire des ellipses */ | ||
- | 10x 20 px 15px 8 px /* chaque angle possède des arrondis différents (hautgauche hautdroite basdroite basgauche) */ | ||
- | </ | ||
- | |||
- | === Les Ombres === | ||
- | <code css> | ||
- | /* ombre sur tout le bloc (décalage horizontal, décalage vertical, dégradé, couleur) */ | ||
- | box-shadow: | ||
- | 6px 6px 0px black | ||
- | |||
- | /* ombre sur le texte, sur chacun des caractères */ | ||
- | text-shadow: | ||
- | 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 */ | ||
- | height: | ||
- | |||
- | min-width: | ||
- | |||
- | max-height: | ||
- | |||
- | /* marge intérieure du bloc */ | ||
- | padding: | ||
- | 50px | ||
- | |||
- | /* marge extérieure du bloc */ | ||
- | margin: | ||
- | 10px | ||
- | auto /* centre horizontalement le bloc dans la page */ | ||
- | |||
- | margin-top: | ||
- | |||
- | /* CONCEPT : il existe la fusion des marges VERTICALES, | ||
- | * cela ne concerne que les BLOCK qui sont jointifs ou parents-enfants et sans autre mise en forme (padding, border...) | ||
- | */ | ||
- | |||
- | /* 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 | ||
- | |||
- | /* transforme un type d' | ||
- | display: | ||
- | inline | ||
- | block /* se placent les uns sous les autres et redimensionnement possible | ||
- | inline-block / | ||
- | none /* n'est pas affiché (ex: < | ||
- | |||
- | vertical-align: | ||
- | baseline | ||
- | top | ||
- | middle | ||
- | bottom | ||
- | 10px | ||
- | 50% | ||
- | |||
- | /* permet le positionnement d'un élément sur la page */ | ||
- | position: | ||
- | absolute / | ||
- | fixed /* identique à absolu, mais toujours visible même si on descend ds la page, */ | ||
- | /* c'est plutot un positionnement absolu dans l' | ||
- | relative | ||
- | |||
- | Exemple_de_positionnement_absolu | ||
- | { | ||
- | position: absolute; | ||
- | right: 0 px; | ||
- | bottom: 15 px; | ||
- | } | ||
- | |||
- | /* permet d' | ||
- | z_index: | ||
- | 1 /* le plus élevé est sur le dessus, il sera donc affiché par dessus les autres | ||
- | |||
- | </ | ||
- | |||
- | ==== 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 | ||
- | { | ||
- | /* gestion des bordures (intérieures et extérieures) du tableau */ | ||
- | border-collapse: | ||
- | collapse / | ||
- | seperate / | ||
- | |||
- | /* définit l' | ||
- | caption-side: | ||
- | top | ||
- | </ | ||
- | En fin de compte, les tableaux ne m'ont pas tant inspiré que ça :/ | ||
- | |||
- | ==== Les Listes ==== | ||
- | <code css> | ||
- | |||
- | list-style-type: | ||
- | none /* permet de supprimer les puces des listes */ | ||
- | </ | ||
- | |||
- | |||
- | ==== transition.. ==== | ||
- | |||
- | On peut faire des tra | ||
- | <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# | ||
- | <div id=" | ||
- | <div class=" | ||
- | <div id=" | ||
- | <span class=" | ||
- | <img src=" | ||
- | <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; | ||
- | |||
- | |||