L'aide mémoire du petit Louc

Outils pour utilisateurs

Outils du site

Piste :
css

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentesRévision précédente
Prochaine révision		Révision précédente
css [2016/03/22 13:53] – luccss [2018/10/13 20:32] (Version actuelle) – modification externe 127.0.0.1
Ligne 1: Ligne 1:
 +====== CSS ======
 +
 +Cette page est antichronologique, elle commence par rescencer qques astuces, puis finit par un cours sur les bases du css. Il va de soi que les astuces nécessitent de connaître les bases du css :)
 +
 +
 +===== Astuces =====
 +
 +==== centrer verticalement ====
 +
 +On va utiliser la propriété ''vertical-align: middle;'', qui ne s'applique qu'à des blocs inline (ou table-cell).\\
 +L'astuce consiste à utiliser un bloc vide faisant toute la hauteur du bloc parent, puis de déclarer ce bloc et le bloc à centrer comme inline-block et les aligner grâce à la propriété ''vertical-align''
 +
 +<code html>
 +<div class="conteneurPrincipal">
 +    <div class="blocVide"></div>
 +    <div class="ElementAcentrer">
 +        ...
 +    </div>
 +</div>
 +</code>
 +<code css>
 +.blocVide {
 +    display: inline-block;
 +    height: 100%;
 +    vertical-align: middle;
 +}
 +.ElementAcentrer {
 +    display: inline-block;
 +    vertical-align: middle;
 +}
 +</code>
 +
 +==== Gestion pure css d'un menu déroulant ==== 
 +<code css>
 + /*nav .sous_menu ul
 + {
 +
 + }
 +
 + nav .sous_menu  li
 + {
 + display: none;
 + width: 250px;
 + border-radius: 5px;
 + box-shadow: 2px 2px 5px #FFA468;
 +
 + }
 +
 + nav li:hover > .sous_menu li
 + {
 + display: block;
 + background-color: #FFE2CC;
 + z-index:2;
 + }
 +</code>
 +
 +==== galerie en pur CSS ====
 +<code css>
 +/* Transitions to provide some eye candy */
 +    -webkit-transition: all ease-in 0.5s;
 +    -moz-transition: all ease-in 0.5s;
 +    -ms-transition: all ease-in 0.5s;
 +    -o-transition: all ease-in 0.5s;
 +
 +display : none ;
 +div[id^=image]:target .close { .. }
 +div[id^=image]:target { .. }
 +div[id^=image]:target .expand { .. }
 +div#image-1:target, div#image-2:target, div#image-3:target { left: 200px; }
 +
 +</code>
 +
 +<code html5>
 +
 +<div id="images-box">
 +    <div class="holder">
 +        <div id="image-1" class="image-lightbox">
 +            <span class="close"><a href="#">X</a></span>
 +            <img src="1.jpg" alt="earth!">
 +            <a class="expand" href="#image-1"></a>
 +        </div>
 +    </div>
 +
 +</code>
 +
 +==== CSS Sprite ====
 +L'idée est d'avoir une seule image composées de plusieurs petites , et d'en afficher seulement une partie. On limite ainsi les appels et les téléchargements (méthode des années 2000 pour fluidifier le chargement des pages)
 +
 +<code css>
 +#nav li a {background-image:url('../img/image_nav.gif')}
 +#nav li a.item1 {background-position:0px 0px}
 +#nav li a:hover.item1 {background-position:0px -72px}
 +#nav li a.item2 {background-position:0px -143px;}
 +#nav li a:hover.item2 {background-position:0px -215px;}
 +</code>
 +Par défaut toutes les images sont cachés grâce à notre bon vieux ''display:none'', et nous allons les faire apparaître grâce à :target qui appliquera l’attribut display:block montrant notre bloc sélectionné.
 +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, voici comment ça marche : on sélectionne des bouts de code HTML, on leur applique des propriétés de mise en page avec des valeurs qu'on spécifie.\\
 +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 <head> d'un fichier HTML :
 +<code html5>
 +<!DOCTYPE html>
 +<html>
 +    <head>
 +        <link rel="stylesheet" href="style.css" />
 +    </head>
 +    ...
 +</html>
 +</code>
 +
 +==== 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é; valeur;
 +}
 +/*
 +* 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é, à droite la valeur qu'elle va prendre
 +*/
 +</code>
 +
 +==== Sélectionner les balises HTML ====
 +
 +<code css>
 +/* permet d'appliquer les 'propriétés' ayant les 'valeurs' décrites à toutes les 'balises' */
 +balise1
 +{
 +   propriete: valeur;
 +   propriete: valeur;
 +   propriete: valeur;
 +}
 +
 +/*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="..." class="Exemple"> */
 +.ExempleStyle
 +{
 + paramètre: valeur;
 +}
 +
 +/* Sélectionne l'élément -unique- ayant l'id défini */
 +/* code html : <a Href="lien" id="identifiant"> */
 +#identifiant
 +{
 + paramètre: valeur;
 +}
 +
 +/* Sélectionne les 'balise' ayant un 'attribut' */
 +balise[attribut]
 +{
 +}
 +
 +/* l'attribut doit avoir exactement la valeur "exemple" */
 +balise[attribut="exemple"]
 +{
 +}
 +
 +/* la valeur de l'attribut doit contenir la valeur "exemple" */
 +balise[attribut*="exemple"]
 +{
 +}
 +
 +/* au survol, la propriété est appliqué au survol avec la souris */
 +balise:hover
 +{
 +}
 +
 +/* au moment du clic */
 +balise:active
 +
 +/* lorsque l'élément est selectionné */
 +balise:focus
 +
 +/* lorsque la page/lien a été visitée/cliqué */
 +balise:visited
 +
 +/* permet d'appliquer une mise en format à un champ d'un formulaire possédant cet attribut */
 +balise:requiered
 +
 +
 +/* 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
 +    
 +</code>
 +    
 +
 +
 +==== 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    /* 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
 +
 +/* spécifie la police utilisée */
 +font-family: ,
 + Tahoma,Arial,"Times New Roman"; /* si pas dispo utiliser la 2e, sinon la 3e etc.. */
 +
 +/* mettre du texte en italique ou pas */
 +font-style:
 + normal
 + italic
 +
 +/* mettre du texte en gras */
 +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,200,143)
 +</code>
 +
 +=== L'arrière plan ===
 +<code css>
 +background-color:
 + red
 + #FFFFFF
 + rgb(240,200,143)
 + rgba(255,210,200,0.5) /* rgba permet de définir l'opacité de la couleur de fond */
 +
 +background-image:
 + url("lien") /* le lien relatif l'est par rapport au fichier CSS et non au fichier HTML */
 +
 +/* permet de fixer le fond, on peut voir le texte "glisser" sur l'image, ou pas... */
 +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'applique à tous les contenus de la balise selectionnée) */
 +opacity:
 +       0.5; /* doit etre comprise entre 0 et 1 */
 +</code>
 +
 +=== Les Bordures ===
 +<code css>
 +/* super-propriété, regroupe les propriétés width/color/style (doit comprendre 3 valeurs) */
 +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/bottom/left/right:
 +
 +/* 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) */
 +</code>
 +
 +=== 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;
 +</code>
 +
 +==== 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, on peut les juxtaposer
 +
 +<code css>
 +/* définit la largeur du bloc (par exemple d'un p aragraphe) */
 +width:
 + 50%       /* par rapport au parent !*/
 + 250px   /* valeur absolue en pixels */
 +
 +/* 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 /* (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'est le navigateur qui décide, et qui mettra si nécessaire la barre de défilement  */
 +
 +/* transforme un type d'élement en un autre (inline -> block) */
 +display:
 + 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'est pas affiché (ex: <head>)                                                      */
 +
 +vertical-align: 
 + baseline
 + top
 + middle
 + bottom
 + 10px
 + 50%
 +
 +/* permet le positionnement d'un élément sur la page */
 +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'écran                                */
 + relative         /* par rapport à sa position normale                                                 */
 +
 +Exemple_de_positionnement_absolu
 +{
 + position: absolute;
 + right: 0 px;
 + bottom: 15 px;
 +}
 +
 +/* permet d'organiser l'affichage d'élément se superposant */
 +z_index:
 + 1 /* le plus élevé est sur le dessus, il sera donc affiché par dessus les autres       */
 +
 +</code>
 +
 +==== 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 /* les bordures sont collées entre elles */
 + seperate /* les bordures sont séparées            */
 +
 +    /* définit l'emplacement du titre par rapport au tableau */
 +    caption-side:
 + top
 +</code>
 +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 */
 +</code>
 +
 +
 +==== Transition ====
 +
 +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'élément).
 +C'est schönn ;)
 +
 +<code css>
 +/* Transitions to provide some eye candy */
 +    -webkit-transition: all ease-in 0.5s;
 +    -moz-transition: all ease-in 0.5s;
 +    -ms-transition: all ease-in 0.5s;
 +    -o-transition: all ease-in 0.5s;
 +</code>
 +
 +On reviendra là-dessus plus tard, ok ?
 +
 +
 +
 +