Memento.

Télécharger le Memento du CSS : 2-CSS-memento.pdf.

Quelques conseils.

Règle n°1 :

Chaque instruction de style est donnée avec un « deux-points » et se termine par un « point-virgule ».

NB :  <span> est une balise multi-fonction de type « Inline » qui permet simplement d’incorporer un style.

Générer du Lorem Ipsum (faux texte)

Pour tester une présentation CSS, on peut faire une page HTML avec du « faux texte » (appelé Lorem Ipsum). Quelques générateurs de paragraphes remplis de faux-texte à copier/coller : https://fr.lipsum.com/  ou https://www.blindtextgenerator.com/fr

Vérifier sur le CSS sur W3C

Actuellement, nous utilisons la version 3 du CSS CSS3-2 et on peut faire vérifier la syntaxe sur le site du W3C (World Wide Web Consortium) https://jigsaw.w3.org/css-validator/ puis choisir :

  • « Validate by URI » pour une page déjà publiée ;
  • « Validate by File Upload » pour une page enregistrée dans votre ordinateur ;
  • « Validate by direct input »  pour tester un bout de code par copier/coller… Puis clic sur « Check ».

Plusieurs navigateurs

Très souvent, la mise en forme varie selon le navigateur et selon sa version et selon le support (PC, smartphone), il est donc conseillé de tester les pages web sur différents support et dans différents navigateurs :

  • defaultPage_icon_IE Microsoft Explorer 6, Explorer 7, Edge …
  • firefox Mozilla Firefox
  • chrome Google Chrome
  • opera Opera

Où  insérer  le  CSS ?

Il y a 3 possibilités … mais c’est la dernière qu’il faut privilégier !

En ligne (dans chaque balise HTML) : déconseillée !

Cette méthode consiste à insérer le style balise dans chaque balise : <p>, <span>, <h1>, <h2>, …

Beaucoup d’inconvénients : c’est très très répétitif, fastidieux … et le contenu HTML est complètement noyé !

<p style="margin-left: 100px;">
   En cas de contradiction dans la cascade de style, les styles en ligne 
   sont <span style="color: blue; font-weight: bold;">prioritaires</span> 
   sur les autres.
</p>

En interne (dans l’entête de la page HTML) : déconseillée !

La déclaration se fait alors entre accolades, dans l’entête de la page HTML (la balise <head>) ; en insérant une balise <style>.

Inconvénient : Cette méthode définit le style page par page ! … Or un site web contient plusieurs pages .. donc c’est répétitif et contraignant !

<head> 
   <style type="text/css">
      body {color:red;}
      p {font-weight:bold;}
   </style>
</head>

En externe :  fichier  .css  + un lien vers ce fichier CSS .

La feuille de style est stockée dans un autre fichier ayant l’extension .css  et la page web possède un lien vers ce fichier.WEB_fichierHtmlEtCss

L’avantage : Il suffit d’ajouter ce lien dans toutes les pages HTML du site … et tout le site obtient la même présentation !!!

NB : Si on veut modifier la mise en page d’une certaine page, il suffit de rajouter un autre lien vers une 2ème feuille de style qui surchargera la 1ère ! C’est la « mise en cascade des feuilles de style » : CSS (Cascading Style Sheets) !

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link type="text/css" rel="stylesheet" href="style.css" />
    <title>Premier CSS</title>
  </head >
 
  <body>
    <h1>CASCADE DE STYLES<br />(Cascade Style Sheet)</h1>
    <h2>
        Que se passe-t-il en cas de contradiction 
        dans la cascade ?
    </h2>
    <p>
        Sont <em>prioritaires</em> : les styles insérés dans les balises,
        puis ce sont les styles définis en interne (dans la balise &lt;head&gt;),
        puis les styles définis en externe (dans un fichier css).
    </p>
  </body>
</html>
 
body {
      color: blue;
      font-family: Georgia;
      background-color: #FED5A3;
    }

h1,h2 { /* h1,h2 signifie h1 et h2 */
       text-align: center; 
       color: brown;
      }
    
h1 {text-decoration:underline;}

p {margin-left: 100px;}

em {
    font-weight: bold;
    color: purple;
   }

CSS_page

NB :   &lt;  et  &gt;   sont des caractères spéciaux html, appelés html entities représentant  <  et  > … qui pourraient être confondus avec de véritables balises HTML.


Priorités CSS

Plus l’instruction CSS a une cible précise .. plus elle est prioritaire !

  • En cas de recouvrement : Par exemple, <h1> est à l’intérieur de <body> alors si la feuille CSS contient body{color: blue;} et h1{color: brown;}  ; quelle couleur sera appliquée aux titres <h1> ?
    Réponse : c’est h1{color: brown;} car la cible <h1> est plus précise que <body>.
  • En cas d’instructions CSS « En ligne », « En interne » et « En externe » : La priorité est donnée aux CSS « En ligne » (dans les balises HTML), puis « En interne » (dans <head> : l’entête de la page HTML) puis la moins prioritaire est le CSS mis dans le fichier externe style.css !
  • En cas de multiples fichiers CSS externes style1.css  style2.css  : c’est le dernier fichier qui est prioritaire (avec la balise <link>).

Pour rendre une instruction prioritaire, on ajoute la mention !important

body {color: blue !important; /* la couleur "bleu" est prioritaire */}
h1 {color: brown; /* les titres h1 seront quand-même en bleu */}

Quelques astuces

Pour marquer une particularité : class et id

Avec la feuille CSS, tous les paragraphes ont la même mise en forme. Alors si on souhaite ajouter une instruction CSS à un paragraphe particulier, il faut :

  • identifier l’élément particulier (<p>,<img /> …), en insérant dans sa balise l’attribut class ou id   avec  un nom de classe ou un identifant.
  •  reporter ce nom dans le CSS précédé d’un symbole . (pour une class) ou  # (pour un id).

Une class peut être utilisé plusieurs fois dans le document, contrairement à id qui doit être unique dans la page HTML.

Dans le CSS : . désigne une class du HTML.
Dans le CSS : # désigne une id du HTML.

CSS_pageCLASS_ID

<p>
  Ce paragraphe est <em>quelconque</em>.
</p>
<p class="creux">
  Celui-ci a un style bien 
  identifié par une <em>class</em>.
</p>
<p>
  Ce <em class="creux">même style avec 
  class</em> sur une autre balise.
</p>
<p id="mon_footer">
  Exemple de pied de page 
  avec <em>id</em> car il est unique.
<p>
body {background-color: #666;}

em {
  font-weight: bold;
  color: red;
}

.creux {
  background-color: #555; /* fond gris foncé */   
  border-radius: 12px;    /* coins arrondis */

  /* ombre noire intérieure + ombre blanche extérieure */
  box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.5) inset,
              0px 2px 2px 0px rgba(255,255,255,0.5);
 
  padding: 5px 5px 5px 10px;  /* marge intérieure :haut,droite,bas,gauche */
}

#mon_footer { /* bordure qu'en haut : épaisseur=4px de style double */
  border-top: 4px double yellow; 
  margin-top: 30px; /* marge externe (en haut) */
  font-style: italic;
}

Quelle  différence  entre  class  et  id ?
class peut être utilisé plusieurs fois dans le document, contrairement à id. Par conséquent, class peut servir à regrouper plusieurs éléments (pour leur appliquer un style particulier) mais id permet d’identifier un élément unique (on ne peut pas avoir deux id dans la même page, id  est surtout utile au JavaScript.) !

Peut-on appartenir à plusieurs class ?
Oui, il est possible qu’un élément ait plusieurs class (exemple : <p class="style1 style2">) ou les 2 attributs : id et class.


Utilité  des  balises  <span>  et   <div>

Comment mettre en couleur les 3 mots importants d’un paragraphe ? Comment changer le positionnement de 2 blocs ?

En effet, on peut vouloir appliquer un style à quelques mots ou quelques blocs qui ne sont pas naturellement entourées de balise alors on utilise des balises multi-usages :

  • <span> : balise de type « inline » qui permet d’entourer des éléments inline (des mots, <img />, <a>, <em>, ..)
  • <div> : balise de type « block » qui permet d’entourer des blocs (<p>, <h1>, <ul>, <ol>, <li>, <form>,..)

Ensuite, on peut insérer un nom dans cette balise muti-usage (avec  class  ou  id)  puis appliquer un style !

CSS_pageAvion

<div class=bouton>
  <a href="…">
    <img src="avion.png" /><br /> 
    vol : <span class=majuscule>paris –
    londres</span><br />en promotion !
  </a>
</div>
body {background-color: #666;}

a {color: white;}

.majuscule {text-transform: uppercase;}

.bouton {
    width: 200px;
    background-color: #777;
    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.5),
             0px 2px 2px 0px rgba(255, 255, 255, 0.5) inset; 
}

Texte

font : font-style | font-variant | font-weight | font-size | font-family

font-size :  la  taille des caractères

Il existe 2 méthodes :

  • 🙁 en taille absolue (déconseillée) en px(pixels), cm(centimètres) ou mm(millimètres). pixelMais cette taille est fixe, donc elle sera trop petite pour certains écrans ou trop grande sur un petit smartphone !
  • 🙂 en taille relative (conseillée) en em ou ex : Les paramètres du navigateur peuvent adapter le rendu. En taille relative, il existe aussi (dans l’ordre) : xx-large, x-large, large, medium, small, x-small, xx-small.
    1em = 100% = taille normale.
    1.6 em = 160% = gros caractère.CSS_font-size
    0.8 em = 80% = petit caractère. etc…
<h1>Titre 1</h1>
<h2>Titre 2</h2>
<p>Un paragraphe.</p>
 
h1 {font-size: 55 px;}
h2 {font-size: 1.6 em;}
p  {font-size: 1 em;}

font-family :  la  police de caractère

Pour afficher correctement une police de caractère, le problème est qu’il faut que tous les utilisateurs l’aient !!! (A défaut, le navigateur utilisera une autre police.) C’est pour cette raison qu’on propose généralement plusieurs CSS_font-familypolices assez similaires (par ordre de préférence), et on termine cette liste par serif (la plus standard).

Liste conseillée : Arial, « Arial Black », « Comic Sans MS », « Courier New », Georgia, Impact, « Times New Roman », « Trebuchet MS », Verdana.
Attention : Les polices en plusieurs mots doivent être entourées de guillemets !

 
body {font-family: Georgia, "Trebuchet MS", Arial, Serif;}
h1 {font-family: Impact, "Arial Black", Verdana, Serif;}
h2 {font-family: "Courier New", "Comic Sans MS";}

Téléchargement automatique d’une police :
Le CSS 3 permet le téléchargement automatique d’une police si l’utilisateur ne l’a pas.

  • Attention au poids du fichier (qui pourrait dépasser 1 Mo !!)
  • Les polices sont soumises au droit d’auteur … utiliser des polices libres de droits sur https://www.google.com/fonts  ou  www.fontsquirrel.com  ou  www.dafont.com
  • Privilégier le format .ttf qui fonctionne sur IE9 et tous les autres navigateurs.
    On pourra aussi ajouter :

    • .svg un format reconnu sur les iPhones et iPads.
    • .woffun nouveau format conçu pour le Web, qui fonctionne sur tous les navigateurs.
  
@font-face { /* dans un dossier 'polices' */
  font-family: '3Dumb';
  src: url('polices/3Dumb.ttf'); 
}
p {font-family: '3Dumb';}

policeCaractere

Que signifie « Serif » ?

« Serif » signifie « avec un empâtement ». Les empâtement sont au bout des traits serif(voir ci-contre, ils sont en rouge).
Par conséquent : « Sans Serif » signifie « sans empâtement ! ».

font-style :  en italique

  • font-style: italic; : pour mettre en italique.
  • font-style: oblique;: pour mettre en oblique (ressemble à l’italique).
  • font-style: normal; : pour revenir à une écriture normale (style par défaut).

font-weight :  en gras

  • font-weight: bold; : pour mettre en gras.
  • font-weight: normal;: pour revenir à une écriture normale (par défaut).

text-decoration : souligner et autre décoration

  • text-decoration: underline;  : pour souligner :    exemple.
  • text-decoration: line-through; : pour barrer :      exemple.
  • text-decoration: overline;  : mettre une ligne au-dessus : exemple
  • text-decoration: none;  : revenir à une écriture normale (style par défaut)

Quant à  text-decoration: blink;  faire clignoter un texte, seuls quelques navigateurs le font (pas Chrome, pas IE).

font-variant et text-transform :  mise en lettre capitale

  • font-variant: small-caps;  : pour mettre un texte en petites capitales : COMME CET EXEMPLE
  • font-variant: normal;  : pour revenir à une écriture normale : Comme cet exemple
  • text-transform: uppercase;  :  pour mettre toutes les lettres en grandes capitales : COMME CET EXEMPLE
  • text-transform: capitalize;  : pour capitaliser la 1ère lettre de chaque mot : Comme Cet Exemple
  • text-transform: lowercase;  :  pour mettre toutes les lettres en minuscules : comme cet exemple
  • text-transform: none ;  :  pour revenir à une écriture normale.

Couleurscouleurs_pre_definies

Une couleur peut être définie par :

  • un nom de couleur prédéfinie :  white; green;
  • le code hexadécimal  :  #ffffff;  #af7ea9;
  • les valeurs RVB (de 0 à 255) ou RVB-alpha (avec transparence)  :  rgb(25,0,118);  rgba(25,0,118,0.5);  avec une opacité « alpha » de 50%.

color : couleur d’un texte

Pour écrire tous les paragraphes de texte en blanc, on utilise p {color: white;}

Pour n’écrire qu’une partie de phrase en couleur, il faut mettre cette partie dans des balises <span> .. </span> et attacher la balise <span> à une classe. (voir exemple ci-après dans le paragraphe ‘background-color’).

background-color : couleur de fond (inline ou block)

{background-color: green;}  peut produire 2 styles d’effets différents : stabilo ou couleur de fond (selon que cette instruction est mise sur une balise Inline ou une balise Block).

En effet, si on utilise  background-color  sur une balise de type :

  • inline : on obtient un effet « stabilo » (une petite coloration).
  • block :  on obtient un grand fond colorée (un grand rectangle).

Exemple :

<body>
  <h1 class="stabilo_jaune">Les couleurs</h1>
  <p class="fond_marron">
     Un texte sur un fond de couleur avec quelques
     <span class="stabilo_jaune">  mots mis en
     valeur  </span> dans un style stabilo jaune.
  </p>
  <p class="fond_vert">
     Idem, avec ce texte et un 
     <a href="https://www.google.fr">  
     lien vers google  </a> original.
  </p>
</body>
 
body { 
       background-color: black;
       color: white;
}

a {background-color: #99ffcc;} /*vert clair*/

.fond_marron {background-color: #996633;}

.fond_vert {background-color: green;}

.stabilo_jaune {
       background-color: #ffffcc; /*jaune pâle*/
       color: maroon;
}

Couleurs

Image & texte flottant

Pour que le paragraphe s’enroule autour de l’image on fait flotter l’image (à gauche). Puis au paragraphe suivant on stoppe le flottement pour être sûr que l’image ne soit pas en face d’un autre texte.

<h3>Paragraphe FLOTTANT</h3>
<p><img src="imageFlottante.jpg" class="flottant_gauche" /></p>
<p>
    On est dans un flottant "gauche" : le paragraphe
    s'enroule autour de l'image. Ensuite, il faut arrêter 
    le flottant dès que l'image n'est plus en rapport
    avec le texte.
</p>
<h3 class="flottant_stop">Titre suivant et arrêt du flottant</h3>

 

.flottant_gauche {
  float:left;
  margin:10px;
}

.flottant_stop {
  clear:both;
}

paragrapheflottant1 paragrapheflottant2

Tableaux

  • td, th {border: 1px solid black;}    pour encadrer chaque cellule. Par défaut, les bordures ne sont pas tracées.
  • table {border-collapse: collapse;}    pour coller les cellules entre elles. Par défaut, elles sont espacées (border-collapse: separate;)
  • caption {caption-side: bottom;}   pour positionner le titre (qui est dans une balise <caption>) en-dessous du tableau (valeurs possibles :  bottom, top, right, left).

Image de fond

background:background-color|background-image|background-repeat|background-attachment|background-position

background-image : mettre une image de fond (inline ou block)

background-image: url("img.gif");   : Pour appliquer une image de fond derrière une balise block ou inline :

background-image: url("dossier/img.gif"); : si elle est dans un répertoire /dossier (c’est le chemin relatif depuis le fichier style.css !!.. et non page.html)

background-attachment : fixer l’image de fond

background-attachment: fixed;  : pour fixer le fond (le texte glisse par-dessus le fond).
background-attachment: scroll; : pour que le fond défile avec le texte.

htmlPositionnemtbackground-position : positionner l’image de fond

background-position: 55px 230px;: positionner l’image à x=55 pixels (de la gauche) et y=230 pixels (du haut).
background-position: top right; : positionner l’image en haut à droite.

background-repeat : répéter l’image de fond

background-repeat: repeat-x; : l’image se répète horizontalement.
background-repeat: repeat-y; : l’image se répète verticalement.
background-repeat: repeat;   : l’image se répète horizontalement et verticalement.
background-repeat: no-repeat;: l’image ne se répète pas.

<body>
  <h1>Fourmis dans le titre.<br /><br /></h1>
  <p>
    En CSS, est possible de noter toutes les 
    propriétés du <span class="stabilo">'background'
    </span> sur <span class="lunette">une seule 
    ligne</span> (background-image, background-color,
    background-attachment ...) et de même pour 
    <span class="stabilo">'font'</span> (font-style, 
    font-variant, font-weight, font-size, font-family, 
    ...). 
    <br />
    Lorem ipsum dolor sit amet, consectetur adipiscing 
    elit. Donec vulputate vitae tortor vitae interdum. 
    Maecenas egestas libero mauris, at imperdiet mi 
    dignissim non. 
  </p>
</body>
 
body { /*couleur de fond par sécurité (si pb avec l’image) */
  background-color: maroon;
  background-image: url("parquet.jpg"); /* petit morceau */
  background-repeat: repeat; /* répété à sur X et Y */
}
h1 { /*toutes les propriétés de ‘background’ sur une ligne*/
  background: url("fourmi.png") repeat-x bottom left;
  border-style: double; /* bordure double trait */
}  
p { /* 2 images de ‘background’ séparées par une virgule */
  background : url("table.png") no-repeat top right,
               url("sofa.png") no-repeat top right;
  border-style: dotted; /* bordure pointillé */
}
.lunette {background-image: url("lunette.png");}
.stabilo {background-color: rgba(255, 255, 0, 0.5); /*jaune opaque à 50% */}

HtmlFourmis

Les changements d’état :hover :focus :disabled

On peut définir le CSS d’un lien lorsque la souris le survole (ou le clique) ou l’apparence d’un bouton lorsqu’il est désactivé, ce sont les pseudo-classes.

Lien survolé, cliqué, …

On peut modifier le style d’un lien en fonction d’un événement :

  • a:hover    : lorsqu’un lien est survolé par la souris.
  • a:active  : au moment du clic  (c’est à dire entre le moment où l’utilisateur clique et celui où il relâche ! .. c’est un temps très court).
  • a:link     : pour un lien non visité.
  • a:visited  : pour un lien déjà visité par l’utilisateur.
 
a {text-decoration: none;}   /* supprimer le soulignement des liens */
a:link {color: blue;} /*  pour un lien non visité */
a:visited {letter-spacing: -1px}   /*  lien déjà consulté */
a:active {background-color: #FFFF00;} /* lien actif */
a:hover {/* lien survolé par la souris */
    letter-spacing: 2px; /* modification espacement */
    text-transform: uppercase;/* met en MAJUSCULE */
    }
#menu li:hover &amp;gt; a { color: red; } /* met en rouge les liens du menu */

pseudo-classe dynamique :focus :disabled

En fait, les pseudo-classes précédentes ( :hover :active … ) fonctionnent aussi sur d’autres balises : <p>, <li>, … On peut rajouter une autre pseudo-classe  :

  • :focus    : lorsqu’un élément sélectionné (comme lors d’un clic dans un champ de formulaire).
  • :disabled  : lorsqu’un bouton est désactivé.

boîte : position & dimension

marge interne / externe : padding marginmargin-padding

  • margin: 10px 3px 5px 3px;  [dans l’ordre : top | left | bottom | right] :  marge externe (à la bordure).
  • width: 300px; margin: auto;   :  pour centrer
    le bloc. Donner une largeur est alors obligatoire !
  • padding: 5px;   :  pour une marge interne (sur tous les côtés)
  • padding-right: 5px;   : pour une marge interne sur le côté droit.

positionnement : position

  • position: absolute; pour poser un élément n’importe où sur la page (quitte à être par-dessus ou dessous un autre). Il faut aussi ajouter au moins une propriété de position telle  bottom: 10px;  ou top, right, left.
  • position: fixed;    idem, sauf que l’élément sera toujours visible .. tel un  background-attachment: fixed;
  • position: relative; pour décaler un élément par rapport à sa position normale (initiale). Il faut donc rajouter une propriété de décalage telle que bottom: 10px;  ou top, right, left.

superposition :   z-indexz-index

Pour qu’un élément (block ou inline) soit affiché au dessus ou en dessous d’un autre, il suffit de donner une valeur de z-index à chacun.

Plus le z-index est grand, plus l’élément est au dessus des autres (donc visible).

Finalement, CSS agit sur les 3 dimensions : hauteur, largeur et profondeur.z-index-belote

NB : On peut aussi placer des images sur du texte, ou du texte sur du texte (pour créer des effets dans les titres).

Exemple :

<div>
  <p>A la belote, à la couleur de l'<em>atout</em> :</p>
  <img src="nine_diamonds.gif" id="nine_of_diamonds" />
  <img src="jack_diamonds.gif" id="jack_of_diamonds" />
  <img src="ace_diamonds.gif"  id="ace_of_diamonds"  />
<div>   /* images dans le désordre */
 
#nine_of_diamonds, #jack_of_diamonds, #ace_of_diamonds {position: absolute;} 
#ace_of_diamonds  {left: 10px; top: 40px; z-index: 1;}
#nine_of_diamonds {left: 30px; top: 55px; z-index: 2;}
#jack_of_diamonds {left: 50px; top: 70px; z-index: 3;}

dimensionnement

Uniquement pour les Blocks et quelques balises Inline : img  input  textarea  select  object
Un BLOC prend TOUTE la largeur disponible … sauf avec  position: fixed;  ou  absolute;

  • min-width, min-height, max-width, max-height   : pour fixer des largeur/hauteur maximales et minimales d’un bloc.
    Ex : p {width: 50%; min-width: 400px;}  :  les paragraphes occupent 50% de la largeur et font au moins 400px de large.
  • width: auto;  :  pour utiliser la largeur disponible.
  • line-height: 20px;   : pour fixer l’interligne.

dépassements : overflow   overflowVisibleword-wrap

Si on donne à un bloc des dimensions trop étroites pour son contenu alors ça déborde !!!

Ci-contre, la bordure est de la taille du bloc 100 x 100 mais le contenu déborde.
p {width: 100px; height: 100px; border: 1px solid;}

Pour gérer les dépassements :

  • overflow: visible; Le contenu reste visible (quitte à sortir du bloc)(c’est le réglage par défaut).
  • overflow: hidden;  S’il dépasse, le contenu sera coupé (la fin sera donc invisible).
  • overflow: scroll;  Si ça dépasse, le navigateur met des barres de défilement (à l’intérieur du bloc).
  • overflow: auto; C’est le navigateur qui décide l’agencement des barres de défilement.

overflowAuto   overflowScroll
De plus :
word-wrap: break-word;    pour couper les mots (ou URL) trop larges.

Attention :  width: 100%;  avec un cadre autour (compté à l’extérieur) => l’ensemble dépasse alors 100% => le navigateur ajoute une scrollbar !!!!  La solution : Avec un cadre, il faut plutôt mettre width: 99.5%;

colonne flottante :  flottant3Colonnefloat

Pour faire 3 colonnes : on fixe chaque largeur à 33% et on la fait flotter à gauche.

Exemple avec 29% : Colonne 29% + marge interne de 2% (de chaque côté)
=> chaque colonne =  2% + 29% + 2%  =  33%

 
.col {
    float:left;
    width: 29%;
    padding: 2%;
}
<p class="col">1 - Lorem ipsum dolor sit ... </p>
<p class="col">2 - Etiam purus erat, ...</p>
<p class="col">3 - Pellentesque metus massa,..</p>

Pour arrêter les flottants
Plus loin, pour revenir à un affichage classique, il faut mettre le style {clear: both;} sur le bloc suivant.
Concrètement, dans la page HTML, on ajoute le bloc  <div class="stopFlottant"></div> puis en CSS on définit la classe  .stopFlottant {clear: both;}

dimensionner des « inline » :  display

display peut changer le type de n’importe quel élément. On l’utilise beaucoup  a {display: block ;}  pour transformer les liens d’un menu (rappel : <a> est une balise inline) en block  car ainsi ils vont se positionner les uns en-dessous des autres et il devient possible de modifier leurs dimensions.

  • display: block; pour transformer un élément en bloc.
  • display: inline;  pour transformer un élément en inline.
  • display: inline-block; un élément inline (qui s’affiche côte à côte) qui peut être dimensionné (tel un bloc).
  • display: none; pour masquer un élément (utile dans les media queries).

inlineBlock

<h1>Eléments inline-block (sans flottant)</h1>
<nav>
  <ul>
    <li><a href="">Accueil</a></li>
    <li><a href="">Mini-Projet</a></li>
    <li><a href="">Rapport</a></li>
  </ul>
</nav>
<section>
   Lorem ipsum dolor sit amet, ..
</section>
<footer>
   Pour me contacter : 
   <a href="mailto:moi@provider.fr">Nom – Prénom</a>
</footer>
nav {
  display: inline-block;
  border: 1px solid black;
  width: 120px;
  vertical-align: top;
}
section {
  display: inline-block;
  border: 2px solid fuchsia;
  width: 300px;
  vertical-align: top;
}

encadrer :  border-widthborder

border:  width | color | style;

  • border-width: 5px;        pour une épaisseur précise  ou border-width: medium;  pour une épaisseur prédéfinie. Pour limiter à un seul côté :  border-bottom-width: 5px;
  • border-color: #a9f04b;  ou  rgb(123,123,123)  ou    yellowborder-style
  • border-style: ridge;       parmi 8 styles prédéfinis (voir ci-contre)
  • border-top-style: inset;   pour différencier chaque côté. Idem pour border-bottom, border-right, border-left.
  • border-radius: 10px;   pour des coins arrondis (rayon = 10px).
    Ex :  border-radius: 10px 5px 10px 5px;   [4 coins dans l’ordre :  top-left | top-right | bottom-right | bottom-left]  pour un arrondi différent aux 4 coins.
    Ex :  border-radius: 10px 20px;   [4 coins (par diagonale) :  top-left & bottom-right  | top-right & bottom-left]  pour un arrondi identique aux coins diagonalement opposés.
    Ex :  border-radius: 10px / 20px;  pour un arrondi en ellipse (2 rayons différents) à chaque coin.

box-shadow1Exemple : ces instructions sur une seule ligne :    border-right: thick solid blue;

<p>
   Une ombre <mark>brute</mark> !
   <br /> + un cadre bleu.
</p>
p { 
  border: blue solid; 
  box-shadow: 6px 6px 0px black;
}

NB : Les bordures arrondies fonctionnent qu’avec les navigateurs récents. Pour gérer les anciennes versions, il faut rajouter des préfixes vendeurs : -moz-border-radius pour Firefox, -webkit-border-radius  pour Safari …

Compléments

opacité et transparence : opacity  et  rgba( , , , )

  • opacity: 0.6;   opacitymet une opacité de 60% (soit 40% de transparence) à l’élément et à son contenu .. le texte aussi !
  • background-color: rgba(255,0,0,0.6);  met une opacité 60% sur le fond (mais pas sur le texte ou autre contenu). Cependant rgba est ignoré par les anciens navigateurs donc on rajoute d’abord une couleur RGB avant le RGBA.
<body>
   <p>
      Lorem ipsum dolor sit amet, consectetur
      adipiscing elit. Donec vulputate vitae
      tortor vitae interdum. Maecenas egestas
      libero mauris, at imperdiet mi dignissim non. 
   </p>
</body>
 
body{ background: maroon url("parquet.jpg") repeat ; }
p {  
    border-style: dotted;
    opacity: 0.3; /* le texte du paragraphe est transparent aussi. */
    background-color: yellow;
}

ombres (boîtes et texte) : box-shadow  et  text-shadow

  • box-shadow: 6px 6px 0px black;    [ordre : décalage horizontal  |  décalage vertical |  adoucissement | couleur de l’ombre] pour mettre une ombre noire de 6 px brute (adoucissement = 0px).box-shadow-inset
  • box-shadow: 6px 6px 6px grey inset;   idem avec le paramètre inset qui met l’ombre à l’intérieur (pour un effet enfoncé).
  • text-shadow: 2px 2px 1px white;text-shadow    met une ombre blanche adoucie sur chaque lettre.

dégradé : linear-gradient

linear-gradiant

<h1>Dégradés</h1>
 
h1 {
 color: white;
 background-color: grey;  /* couleur de fond par sécurité (pour les anciens navigateurs) */
 background-image: linear-gradient(#ccc6c3 0%, #828c95 24%, #000000 41%, #7f7f7f 100%);
}

Media  Queries

C’est la possibilité de changer l’apparence du site selon la taille de la fenêtre du visiteur (smartphone, tablette, TV …) :

  • soit en ajoutant une 2ème feuille css (pour si  « largeur écran < 1280 px ») : <link rel="stylesheet" media="screen and (max-width:1280px)" href="pt_ecran.css" />
  • soit dans la même feuille css en rajoutant simplement une section :     @media all and (max-width: 1024px){  /* ici ... pour les petits écrans */ }

Les conditions d’utilisation des media queries peuvent concerner :

  • width : largeur de la zone d’affichage (fenêtre) et  height : hauteur de la zone d’affichage (fenêtre).
  • device-width : largeur du périphérique et  device-height : hauteur du périphérique.
  • orientation : l’orientation du  périphérique (portrait ou paysage).
  • color : gestion de la couleur (en bits/pixel).
  • media : type d’écran de sortie. Les valeurs possibles sont : screen (écran classique), handheld (périphérique mobile), print (impression), tv (télévision), projection (projecteur), all (tous les types d’écran).

Ces conditions sont utilisées avec les mots-clés :  onlyandnot.
Exemple ci-dessous : Pour faire afficher le menu en vertical tout en supprimant la bannière si « largeur de fenêtre < 1024px ».

@media all and (max-width: 1024px) {
  nav {width: auto;  text-align : left;}
  nav li {display: block;  padding-left: 4px;}
  div#baniere {display: none;}
}

Opérations  sur  les  sélecteurs CSS

, :  la réunion

L’opérateur  ,  permet d’appliquer un style à plusieurs balises ; il permet donc de « factoriser du code ».

Exemple :

p {
    text-indent: 30px;
    font-family: Georgia;
}

h1 {
    color: red;
    font-family: Georgia;
    text-decoration: underline;
    text-indent: 30px;
}

h2 {
    color: green;
    font-family: Georgia;
    text-indent: 30px;
    text-decoration: underline;
}

Se factorise par :

p,h1,h2 {
    text-indent: 30px;
    font-family: Georgia;
}

h1,h2 {text-decoration: underline;}

h1 {color: red;}

h2 {color: green;}

*  :  le  sélecteur universel

Le symbole * sélectionne toutes les balises (sans exception).

* {
    color: green;
    font-family: Georgia;
}

.  :  A.ma_class  :  pour une classe

h2.creux {color:red;} sélectionne toutes les balises <h2> appartenant à la class « creux », c’est-à-dire  <h2 class="creux">


# :  A#mon_id  : pour un id

p#mon_id {border:4px;} sélectionne toutes les balises <p> appartenant à l’id « mon_id », c’est-à-dire <p id="mon_id">


espace :  A B :  une  balise  incluse  dans  une  autre

<h1>Définition de <em>class</em>.</h1>
h1 em {text-decoration: underline;}

h1 em  sélectionne toutes les balises <em> situées à l’intérieur d’une balise <h1> .


+  :  A+B : une balise qui suit directement une autre

<h1>Définition.</h1>
<p>Ce paragraphe a une marge en haut.</p>
h1+p {margin-top: 30px;}

h1+p sélectionne chaque 1ère balise <p> situé directement après un titre <h1> (sans autre balise entre elles).


~  :  A~B : une balise qui suit une autre (directmt ou pas)

h1~p sélectionne chaque 1ère balise <p> située après un titre <h1> (directement ou pas : il peut y avoir d’autres balises entre elles).

>  :  A>B : une balise qui est directement contenue dans une autre

ul>li sélectionne chaque 1ère balise <li> qui est directement contenue dans une liste <ul> (et pas dans une autre balise que <ul>).


[ ]  :  A[attribut] : une balise qui possède un certain attribut

img[title] sélectionne toutes les balises <img /> (les images) qui possèdent un attribut title (une info-bulle).

<img src="moi.jpg" alt="moi" title="NOM prénom" />
img[title] {margin-right: 30px;}

Dans la même famille, on trouve :

  • A[attribut="valeur"] : une balise qui possède exactement une certaine valeur d’attribut.
  • A[attribut*="mot"] : une balise qui possède un attribut contenant un certain mot.

Des modèles CSS à télécharger

Le site csszengarden.com propose des exemples de page HTML et feuille CSS, libres à télécharger.
Liste de tous les modèles : www.mezzoblue.com/zengarden/alldesigns/

Ces exemples sont sous licence « Creative Commons BY-NC-SA » :

  • BY = signature de l’auteur initial (obligatoire en droit français) (sigle : BY : Attribution)
  • NC = interdiction de tirer un profit commercial de l’œuvre sans autorisation de l’auteur (sigle : NC : Non Commercial)
  • SA = partage de l’œuvre, avec obligation de rediffuser selon la même licence ou une licence similaire (version ultérieure ou localisée) (sigle : SA : Share alike)

creative-common

Barre de navigation

css_menudropdown

Code HTML

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" />
        <title>Onglet</title>
    </head > <!-- fin de la 1ère partie : l'entête (les réglages) -->
   
    <body>
      <header>
        <nav>
          <ul>
            <li><a href="#">Home</a></li>
 
            <li><a href="#">Articles</a>
              <ul>
                <li><a href="#">Web Design</a></li>
                <li><a href="#">User Experience</a></li>
              </ul>
            </li>
             
            <li><a href="#">Tutorials</a>
              <ul>
                <li><a href="#">Photoshop</a></li>
                <li><a href="#">Illustrator et un titre long</a></li>
                <li><a href="#">Web Design</a>
                  <ul>
                    <li><a href="#">HTML</a></li>
                    <li><a href="#">CSS</a></li>
                  </ul>
                </li>
              </ul>
            </li>
             
            <li><a href="#">Inspiration</a></li>
          </ul>
        </nav>
      </header> <!-- fin du menu HEADER -->
       
      <h1 class="stopFlottant">Titre (penser à arrêter le flottant ici)</h1>
      <p>Le menu horizontal à onglet.<p>
    </body>
</html>

Feuille de style CSS

nav ul {
  list-style: none;
  /* width: 100%; le supprimer autorise le dépassement */
  display: inline-block; /* pour centrer la barre de navigation */
  margin: 0;
  padding: 0;
}
nav li {
  background: #efefef;  /* fond : gris très très clair */
  float: left;
  position: relative;
  width: auto;
  margin: 0;
  padding: 0;
}
nav a {
  color: #757575;  /* écriture : gris */
  display: block;
  padding: 10px 25px;
  text-align: center;
  text-decoration: none;
}
nav ul ul {
  left: 0;
  opacity: 0;
  position: absolute;
  top: 35px;
  visibility: hidden;
  z-index: 1;
}
nav ul ul ul {
  position: absolute;
  float: left;
  left: 100%;
  top: 0;
  z-index: 2;
}
nav ul li:hover>ul {
  opacity: 1;
  visibility: visible;
}
nav ul ul li {
  background: #7f8995;  /* fond : gris moyen */
  float: none;
  width: 100%;
}
nav ul li:hover {
  background: #4b545f; /* fond : gris foncé */
}
nav ul ul a, nav ul li:hover a {
  color: #fff;  /* écriture : blanc */
}
.stopFlottant {clear: both;}

Un exemple détaillé (partie par partie)

Structure  générale
structure_generale

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="style.css" />
    <title>ISN – St Vincent</title>
  </head>
  <body>
    <header>
       ...
    </header>
    <div class="barre_rouge"></div>
    <div id="page"> 
       ...
    </div> <!-- fin div id="page" -->
    <footer class="barre_rouge">
       Pour me contacter : 
       <a href="mailto:moi@provider.fr">
          Nom – Prénom
       </a>
    </footer>
  </body>
</html>
 
* {padding: 0;  margin: 0;}

body {  /* fond : bleu très très clair */
      background-color: rgb(225,230,250);
      color: black; /* texte en noir */
}

a {color: white; text-decoration: none;}

Header

header

<header>
  <div id="isn">Informatique & Science du Numérique</div>
  <nav id="menu">
    <ul>  
      <li class="ici">Accueil</li>
      <li><a href="miniprojet.html">Mini-Projet</a></li>
      <li><a href="rapport.html">Rapport</a></li>
    </ul>
  </nav>
</header>
 
header, header div#isn  {overflow : hidden;}    /* tout ce qui déborde doit être caché */
header {
  background: url(logo.gif) no-repeat 60% 0%,  /* fond = 2 images + 1 couleur */
              url(batiment.gif) no-repeat top right, 
              #4229b1; 
  height: 150px;     width: 100%;  /* on peut mettre 100% car non-encadré */
  position: relative;     /*  utile pour mettre ses enfants en absolute à l’intérieur*/
  border-radius: 0 150px 0 0;  /*  1 angle arrondi en haut à droite */
  box-shadow: 0px 6px 5px 0px rgba(255,255,255,0.5) inset; /* ombre blanche interne */
}
header div#isn {
  position: absolute; /* par rapport à son (relative) conteneur header */
  top:40px;   left: 40px;  /* position : 40 40 (dans le conteneur header) */
  height: 40px;  line-height: 40px;  /* hauteur = 40 = interligne */
  background-color: rgb(48,29,135);  /* bleu très foncé */
  border-radius: 0 40px;   /* 2 coins arrondis */
  box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.5) inset,  /*  ombre noire interne */
              0px 4px 4px 0px rgba(255,255,255,0.5);  /* + ombre blanche ext */
  padding: 0px 40px;  /* marge interne (pour le texte contenu) */
  color: white;    text-decoration: none;   /* texte en blanc, en gras, … */
  font-size: 1.3em;    font-weight: bold;
}
nav#menu {
  position: absolute; /* par rapport à son (relative) conteneur header */
  bottom: 0;   left: 20px;   /* position : tout en bas (dans le conteneur header) */
}
nav#menu ul  {list-style-type: none; /* une liste sans puce */  }
nav#menu ul li  {
  display: inline-block ;  /* disposé côte à côte (= aligné) */
  vertical-align: bottom;  /* sur une ligne en bas */
  height: 30px;    line-height: 30px;  /* hauteur = 30 = interligne */
  background-color: rgb(116,97,205);    /* bleu assez clair */
  border-radius: 10px 10px 0 0;  /* 2 coins arrondis (style "onglet") */
  box-shadow: 0px 4px 4px 0px rgba(255,255,255,0.6) inset; /* ombre blanche */
  border: 1px solid white;  border-bottom : none; /* 3 bordures blanches */
  padding: 0px 10px 0px 10px; /* marge interne pour le texte contenu */
}
nav#menu li:hover, nav#menu li:focus { /* au survol de la souris (ou clavier) */
  background-color: rgb(255,155,0);  /* onglet orange */
  text-decoration: underline;  /* texte en capitale et souligné */
  text-transform: uppercase;
}
nav#menu ul li.ici {  /* onglet « page en cours » */
  height: 40px;  line-height: 40px; /* plus haut : hauteur = 40 = interligne */
  background-color: rgb(255,123,140); /* onglet rouge */
  box-shadow: 0px 6px 5px 0px rgba(255,255,255,0.5) inset; /* ombre blanche plus grande*/
  border: 1px solid black;   border-bottom : none; /* 3 bordures noires */
  color: black;   /* texte en noir, en gras, souligné .. */
  font-size: 1.3em; font-weight: bold;  text-decoration: underline;  
}

La  barre  rouge

La barre rouge est présente 2 fois sur la page.
barre_rouge2   barre_rouge1

 
.barre_rouge { 
  height: 20px;  width: 100%;
  background-color: rgb(255,123,140); 
  box-shadow: 0px -6px 5px 0px rgba(255,255,255,0.5) inset;
}

Le  bloc  page

bloc_page

<div id="page">
  <nav id="sommaire">
    <h2>S O M M A I R E :</h2>
    <ol>
      <li>
          <a href="#mon_titre1">
             Lien vers le titre 1
            </a>
      </li>
      <li><a href="#mon_titre2">
           Lien vers le titre 2</a>
      </li>
      <li><a href="#mon_titre3">
           Lien vers le titre 3</a></li>
    </ol>
  </nav> <!-- fin div id="sommaire" -->
  <section>
    <h1 id="mon_titre1">Titre 1</h1>
    <p>Lorem ipsum ...</p>
    <h1 id="mon_titre2">Titre 2</h1>
    <p>Lorem ipsum ...</p>
    <h1 id="mon_titre3">Titre 3</h1>
    <p>Lorem ipsum ...</p>
    <p>...</p>
  </section>
  <div id="resume">
    <h2>A Retenir:</h2>
    <p>Tout ça ... <br />Etc ...</p>
  </div>
</div> <!-- fin div id="page" -->
div#page {text-align: center;}
nav#sommaire, section, div#resume {
  display: inline-block;
  padding: 20px 30px 20px 30px; 
  margin: 20px 0px 20px 20px;
  background-color: rgb(170,185,242); /*bleu*/
  vertical-align: top;
  border: 1px solid white; 
  border-radius: 0 50px 0 50px;
  box-shadow: 0 6px 5px 0 rgba(255,255,255,0.5) inset;
}
nav#sommaire ol {padding : 5px 30px;}
section {width: 300px;}
div#resume {width: 150px;}

footer

barre_rouge3

<footer class="barre_rouge">
   Pour me contacter : <a href="mailto:moi@provider.fr">
   Nom - Prénom</a>
</footer>
footer {  
  position: fixed; bottom : 0; left : 0;
  font-size: 18px; line-height : 18px;
  text-align: center;
}

Media Queries

Tout le CSS précédant sera appliqué par défaut. Le Media Query ne fait qu’ajouter des modifications pour les petites fenêtres (mais il ne se substitue pas au 1er CSS).

Sur une petite fenêtre :

media_query_pt

Sur une moyenne fenêtre :

media_query_moy

@media all and (max-width: 800px){
  header {
    background: #4229b1; /* juste une couleur de fond bleu (foncé)*/
    height: auto;       /* taille par défaut */
    border-radius: 0;   /* annule le coin arrondi */
    overflow: visible;
    text-align: center;  /* Titre &amp; Menu centré dans la fenêtre */
  }

  header div#isn {
    position: relative; /* positionmt par défaut */
    top:0;  left: 0;     /* annule les valeurs du 1er CSS */
    height: auto; line-height : normal; /* taille par défaut */
    margin: 20px ; margin-bottom : 0;  /* marge externe */
    display: inline-block; /* petit bloc (de taille minimale) */
    vertical-align: top;
    display: visible;    /* avec retour à la ligne si besoin */
    padding: 10px 25px;  /* marge interne */
  }

  nav#menu {
    position: relative; /* positionmt par défaut */
    top:0;  left: 0;   /* annule les valeurs du 1er CSS */
    margin: 10px 20px;  
    display: inline-block ; /* petit bloc (de taille minimale) */
    vertical-align: top;
  }

  nav#menu ul li {
    display: block ; /* en lignes de même grandeur */
    height: auto;    line-height : auto;
    border: 1px solid white; 
    border-radius: 10px 10px 10px 10px; /* 4 coins arrondis */
    padding: 0px 10px 0px 10px;
    margin: 10px;
  }

  nav#menu ul li.ici {
    height: auto;      line-height : auto;
    border: 1px solid black;
    box-shadow:0px 4px 4px 0px rgba(0,0,0,0.5) inset,
           0px 4px 4px 0px rgba(255,255,255,0.5);
  } /* ombre blanche (ext) + noire (int) =&gt; aspect creusé */

  nav#sommaire, section, div#resume {
    padding: 10px 20px 10px 20px; 
    margin: 10px 0px 10px 10px;
    border-radius: 0 25px 0 25px;  /* arrondi plus petit */
  }

  section {width: auto; max-width: 300px;}

  div#page {margin-bottom: 20px;}

  div#resume {width: auto; max-width: 150px;}
}