Ci-dessous, les différences entre deux révisions de la page.
css [2016/03/21 15:58] 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: | ||
- | } | ||
- | </ | ||
- | |||
- | ----------------------------------------------- | ||
- | |||
- | ===== 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. | ||
- | |||
- | ==== 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é, | ||
- | */ | ||
- | </ | ||
- | |||
- | ==== SELECTIONNER DES BALISES HTML ==== | ||
- | |||
- | <code css> | ||
- | balise1 permet d' | ||
- | { | ||
- | | ||
- | | ||
- | | ||
- | } | ||
- | |||
- | balise1, balise2 les 2 balises auront les propriétés décrites | ||
- | { | ||
- | propriete: valeur; | ||
- | } | ||
- | |||
- | balise1 balise2 selectionne les balises 2 incluses dans les balises 1 | ||
- | { | ||
- | propriete: valeur; | ||
- | } | ||
- | |||
- | class=" | ||
- | .ExempleStyle selectionne ttes les balises ayant pour class ' | ||
- | { | ||
- | paramètre: | ||
- | } | ||
- | |||
- | id="" | ||
- | # | ||
- | { | ||
- | paramètre: | ||
- | } | ||
- | |||
- | balise[attribut] selectionne les ' | ||
- | { | ||
- | } | ||
- | |||
- | balise[attribut=" | ||
- | { | ||
- | } | ||
- | |||
- | balise[attribut*=" | ||
- | { | ||
- | } | ||
- | |||
- | body s' | ||
- | { | ||
- | } | ||
- | |||
- | balise: | ||
- | { | ||
- | } | ||
- | |||
- | balise: | ||
- | balise: | ||
- | balise: | ||
- | |||
- | balise: | ||
- | |||
- | |||
- | |||
- | elem1 > elem2 : 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. | ||
- | | ||
- | </ | ||
- | | ||
- | |||
- | |||
- | ==== PARAMETRES COURANTS ==== | ||
- | |||
- | === TEXTE === | ||
- | <code css> | ||
- | font-size: | ||
- | 14px spécifie la taille absolue du texte en pixel | ||
- | 14mm spécifie la taille absolue du texte en mm, 1.5cm ... | ||
- | 0.8em spécifie la taille relative, 0,8 fois la taille normale (em) | ||
- | xx-small valeur indiquant une taille relative très très petite | ||
- | x-small | ||
- | small | ||
- | medium | ||
- | large | ||
- | x-large | ||
- | xx-large | ||
- | |||
- | font-family: | ||
- | Tahoma, | ||
- | |||
- | font-style: mettre du texte en italique ou pas | ||
- | normal | ||
- | italic | ||
- | |||
- | font-weight: | ||
- | normal | ||
- | bold | ||
- | |||
- | text-decoration: | ||
- | underline souligné | ||
- | line-through barré | ||
- | overline ligne au dessus | ||
- | blink clignotant | ||
- | none normal | ||
- | |||
- | text-align: | ||
- | left | ||
- | center | ||
- | right | ||
- | justify | ||
- | |||
- | color: | ||
- | red | ||
- | #FFFFFF | ||
- | rgb(240, | ||
- | </ | ||
- | |||
- | === ARRIERE PLAN === | ||
- | |||
- | background-color: | ||
- | red | ||
- | #FFFFFF | ||
- | rgb(240, | ||
- | rgba(255, | ||
- | |||
- | background-image: | ||
- | url(" | ||
- | |||
- | 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 | ||
- | |||
- | |||
- | opacity: | ||
- | 0.5; | ||
- | |||
- | === BORDURES === | ||
- | 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; | ||
- | } | ||
- | |||
- | border-top/ | ||
- | |||
- | border-radius: | ||
- | 10px bordure arrondie | ||
- | 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) | ||
- | |||
- | === OMBRES === | ||
- | box-shadow: | ||
- | 6px 6px 0px black ombre sur tout le bloc (décalage horizontal, décalage vertical, dégradé, couleur) | ||
- | |||
- | text-shadow: | ||
- | 6px 6px 6px red; | ||
- | |||
- | |||
- | ==== MISE EN FORME DES BLOCS ==== | ||
- | |||
- | width: | ||
- | 50% | ||
- | 250px | ||
- | |||
- | height: | ||
- | |||
- | min-width: | ||
- | |||
- | max-height: | ||
- | |||
- | padding: | ||
- | 50px | ||
- | |||
- | 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...) | ||
- | |||
- | 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' | ||
- | |||
- | |||
- | display transforme un type d' | ||
- | inline élement d'une ligne, se placent les uns à côté des autres | ||
- | 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 | ||
- | none n' | ||
- | |||
- | vertical-align: | ||
- | baseline | ||
- | top | ||
- | middle | ||
- | bottom | ||
- | 10px | ||
- | 50% | ||
- | |||
- | position: | ||
- | absolute positionnement absolu dans la page (on doit ensuite le donner, par exemple en px) | ||
- | fixed identique à absolu, mais toujours visible même si on descend ds la page, c'est plutot un positionnement absolu dans l' | ||
- | relative par rapport à sa position normale | ||
- | |||
- | Exemple_de_positionnement_absolu | ||
- | { | ||
- | position: absolute; | ||
- | right: 0 px; | ||
- | bottom: 15 px; | ||
- | } | ||
- | |||
- | z_index: | ||
- | 1 le plus élevé est sur le dessus, il sera donc affiché par dessus les autres | ||
- | |||
- | |||
- | ==== TABLEAUX ==== | ||
- | |||
- | table | ||
- | { | ||
- | propriété: | ||
- | } | ||
- | |||
- | border-collapse: | ||
- | collapse les bordures sont collées entre elles | ||
- | seperate les bordures sont séparées | ||
- | |||
- | caption-side: | ||
- | top définit l' | ||
- | |||
- | |||
- | ==== LISTES ==== | ||
- | |||
- | list-style-type: | ||
- | none permet de supprimer les puces des listes | ||
- | |||
- | |||
- | /*** GESTION DU MENU DEROULANT ***/ | ||
- | /*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 CSS, transition.. ==== | ||
- | |||
- | /* 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; | ||
- | |||
- | |||