Cours gratuits » Cours informatique » Cours développement web » Cours CSS » Les transformations en CSS3

Les transformations en CSS3


Télécharger



★★★★★★★★★★3.5 étoiles sur 5 basé sur 1 votes.
Votez ce document:

Les transformations en CSS3 ressource de formation

...

Introduction des styles

Trois façons d'introduire un style:

  1. Dans un fichier à part style.css (méthode recommandée):

Placer cette ligne de code dans la partie <head> de la page HTML : 

<link rel="stylesheet" type="text/css" href="fichier.css">

<link rel="stylesheet" href="style.css" /&

gt;

  1. Entre <head> .. </head> ne s'applique qu'à page:

p{ color:red; }

p { width: 50%; }

.classe1 {font-family:verdana; color:red }

  1. Dans les balises (ne s'applique qu'à cette balise)

<p style="font-family:verdana">

Selecteurs: liaison avec les balises

Exemple de sélecteur simple: format général

selecteur { attribut1:valeur1;  attribut2:valeur2; }

* { attribut:valeur; }                  /* Tous les tags */

p { attribut:valeur; }                  /* paragraphe */

h1, h2, h3 { attribut:valeur; }     /* h1 ou h2 ou 3 */

h3 em { attribut:valeur; }  /* les balises <em> à l'intérieur de <h3> */

  • Selecteur de classe ou identifiant:

h1.classe1 { attrib : val }       /* h1 dont la classe est "classe1" */

h1#id1 { attrib : val }   /* h1 dont l'ID est "id1" */

.class1 { attribut:valeur;}   /* Tout Tag dont la classe est class1*/

#id1 { attribut : valeur }       /* Le Tag dont l'ID est "id1" */

  • Liens:

a:link { color : blue; }                /* Lien non visité */

a:visited { color : #AAA; }            /* Lien visité */

a:hover, a:focus { color : green; } /* Lien survolé ou ayant le focus */

a:active {background-color: #FFCC66;   /* Lien actif (état cliqué) */

  • Autres Pseudo-classes:

p:first-letter { ... }   /* Premier caractère de l'élément P */

div:first-line { ... }   /* Première ligne de l'élément DIV */

div:first-child { ... }  /* Premier élément d'un bloc DIV */

Exemple de sélecteur hiérarchique:

Base:

div p {attribut:valeur}    /* Tous les tags p contenu dans un tag div */

div.class1 p {  ... }         /* Tous les tags p contenu dans un div de classe "class1" */

div#id p { ... }         /* Tous les tags p contenu dans un tag div d'ID "id" */

Hiérarchie évoluée:

div > p { ... }   /* Tous les tags p directement contenu dans un div */

A + B : une balise qui en suit une autre

div + p { ... }    /* Tous les tags p précédés par un tag div */

h3 + p {attribut:valeur;} La balise p située après un titre h3

div:lang(fr) { ... }     /* Tag div dont le contenu est déclaré français */

A[attribut] : Une balise qui possède un attribut

div[class] { ... }       /* Tous les tags div contenant un attribut "class" */

div[width][height] { ... } /* Tous les tags div contenant un attribut "width" et "height"*/

A[attribut="Valeur"] : une balise, un attribut et une valeur exacte

div[class="cl"] { ... }  /* Tous les div avec attribut "class" égal à "cl" */

div[class^="cl"] { ... } /* Tous les div avec attribut "class" qui débute par "cl" */

div[class$="cl"] { ... } /* Tous les div avec attribut "class" qui se termine par "cl" */

div[class*="cl"] { ... } /* Tous les div avec un attribut "class" qui contient "cl" */

div[class~="cl"] { ... } /* Tous les div avec un attribut "class" dont l'une des valeurs est "cl" */

Typographie des caractères

font : Réglage global d'une police de caractères.

font: bold 12px/14px Arial ;

font-family : Choix de la police de caractères.

font-family: "Times New Roman", serif;

font-family: Georgia, serif ;      font-family: Arial, sans-serif ;

font-family: Helvetica, Verdana, sans-serif ;

font-family: "Courier New", monospace ;

font-size : Taille des caractères. Préférer "em" et "%" (1em = normal).

font-size: 1em ;     font-size: 12px ;      font-size: 100% ;    font-size: 12pt ;   

font-size: 12px ;

En relatif:  xx-small : minuscule ;   x-small : très petit ;   small : petit ;

medium : moyen ;

large : grand ;   x-large : très grand ;   xx-large : euh… gigantesque.

color : Couleur de la police de caractères.

color: white ;                color: #FFFFFF ;

color: rgb(255,255,255) ;                color: transparent ;

font-style : Style de la police.

font-style: normal ;             font-style: italic ;                font-style: oblique ;

font-weight : Epaisseur de la police.

font-weight: normal ;           font-weight: bold ;    font-weight: bolder ;

text-decoration : Soulignement ou surlignement.

text-decoration: none ;       text-decoration: underline ;

text-decoration: line-through ;    text-decoration: overline ;

text-decoration: blink ;

font-variant : Affichage en petites majuscules.

font-variant: normal ;      font-variant: small-caps ;

text-transform : Mise en majuscules/minuscules.

text-transform: none ;      text-transform: capitalize ;

text-transform: uppercase ;    text-transform: lowercase ;

text-align  : Alignement du texte.

text-align: left ;      text-align: center ;    text-align: right ;    text-align: justify ;

text-indent  : Décalage de la première ligne du texte.

text-indent: 5px ;      text-indent: 5em ;     text-indent: 100% ;   

line-height  : Hauteur des caractères.

line-height: normal ;      line-height: 1em ;     line-height: 12px ;   

line-height: 100% ;       line-height: 12pt ;     line-height: 12px ;

letter-spacing : Espacement entre caractères.

letter-spacing: normal ;    letter-spacing: 12px ;      letter-spacing: 100% ;

letter-spacing: 12pt ;    letter-spacing: 12px ;

word-spacing: word-spacing : Espacement entre mots.

word-spacing: normal ;     word-spacing: 12px ;   word-spacing: 100% ;   word-spacing: 12pt ;    word-spacing: 12px ;

Arrière-Plans

background : caractéristique globale d'un fond

background-color: red url(images/fond.png) no-repeat scroll center top ;

background-color : couleur de fond

background-color: red ;      background-color: #FF0000 ;

background-color: rgb(255,0,0) ;

background-image : image de fond

background-image: url(Images/LaBelleImage) ;

background-repeat

background-repeat : Répétition de l'image de fond.

background-repeat: repeat ;     background-repeat: repeat-x ;

background-repeat: repeat-y ;    background-repeat: no-repeat ;

background-attachment : Fixation de l'image sur le navigateur (contre le défilement).

background-attachment: scroll ;     background-attachment: fixed ;

background-position : Position de l'image sur le fond (x, y).

background-position: left top ;     background-position: center center ;

background-position: right bottom ;    background-position: 50% 50% ;

background-position: 5px 10px ;

Blocs et bordures

Margin : Réglage des marges autour des blocs.

margin: 1em ;        /* 1em de chaque côté */

margin: 10px 20px ;  /* Haut et bas:10px, droite et gauche 20px */

margin: 10px auto ;  /* Centré à droite et à gauche */

margin: 1px 2px 3px 4px ; /*Haut, droite, bas, gauche*/

margin-top:10%;       margin-bottom:20px;

margin-right:30px;    margin-left:40px;

padding  : Réglage des marges à l'intérieur des blocs.

padding: 1em ;           /* 1em de chaque côté */

padding: 10px 20px ;     /* Haut et bas : 10px, droite et gauche 20px */

padding: 1px 2px 3px 4px ; /* padding Haut, droite, bas, gauche */

padding-top: 10%;       padding-bottom: 20px;

padding-right: 30px;    padding-left:   40px;

border  : Affichage global d'une bordure.

border: 5px dotted green ;

border-width  : Largeur de la bordure.

border-width: 5px ;       border-width: 0.3em ;    

border-width: 1px 2px 3px 4px ;  /* bordure Haut, droite, bas, gauche */

border-width-top: 1px ;

border-color  : Couleur de la bordure.

border-color: red ;    border-color: #FF0000 ;    border-color: rgb(255,0,0) ;

border-style   : Type de la bordure.

border-style: none ;

border-style: solid ;       border-style: dotted ;      border-style: dashed ;     

border-style: inset ;       border-style: outset ;      border-style: double ;

border-style: groove ;    border-style: ridge ;

cursor : Type de pointeur affiché pour la souris.

cursor: auto ;      cursor: pointer ;     cursor: default ;

cursor: crosshair ;     cursor: move ;      cursor: help ;    cursor: wait ;

Tableaux

border-collapse

border-collapse : Séparation ou collage des cellules du tableau (espace ou non entre les cellules).

border-collapse: separate;     border-collapse: collapse;

border-spacing : Taille de l'espacement entre les cellules (si on est en "border-collapse: separate;").

border-spacing: 3px;     border-spacing: 1em;

empty-cell : Gère l'affichage ou non d'une cellule si elle est vide.

empty-cell: hide;     empty-cell: show;

caption-side : Placement de la légende du tableau.

caption-side: top;         caption-side: right;

caption-side: bottom;    caption-side: left;

vertical-align : Alignement vertical dans la cellule d'un tableau.

vertical-align: baseline;       vertical-align: top;

vertical-align: middle;     vertical-align: bottom;

table-layout  : Technique de calcul de la taille des cellules du tableau.

table-layout: auto;              table-layout: fixed;

Positionnement

display  : Mode d'affichage (ou non) d'un bloc ou d'un élément.

display: none;       display: block;      display: inline;

width : Largeur d'un block.

width: 0;        width: 400px;          width: 50em;

width: 60%;        min-width: 100px;       max-width: 100px;

height : Hauteur d'un block.

height: 0;         height: 60%;      min-height: 100px;       max-height: 100px;

position : Position d'un block.

position: static ;  /* par défaut */     

position: absolute ;     position: fixed ;       position: relative ;

top, right, left, bottom : Pour placer un bloc (hors static) par rapport à un ou deux bords.

top: 5px ;         right: 10em ;       bottom: 0 ;       left: 10% ;

float : Pour laisser flotter un bloc à droite ou à gauche.

float: none ;            float: left ;           float: right ;

clear : Pour obliger un bloc à se placer derrière un flottant.

clear: none ;    clear: left ;    clear: right ;     clear: both ;

overflow-x, overflow-y : Pour gérer le dépassement du contenu d'un objet en horizontal ou vertical.

overflow-x: auto ;       overflow-x: visible ;

overflow-y: hidden ;     overflow-y: scroll ;

z-index : hors static, permet de gérer l'empilement des blocs.

z-index: auto ;     z-index: 10 ;    z-index: 999 ;

Listes

liste-style : Réglage globale d'une liste.

liste-style: circle outside url(toto.jpg) ;

liste-style-type  : Type de liste.

liste-style-type: none ;     liste-style-type: disc ;

liste-style-type: circle ;    liste-style-type: square ;

liste-style-type: decimal ;    liste-style-type: upper-roman ;

liste-style-type: lower-alpha ;     liste-style-type: upper-alpha ;

liste-style-position : Position du marqueur de liste dans la liste ou hors de la liste (outside est plus normal).

liste-style-position: outside ;     liste-style-position: inside ;

liste-style-image : Image pour remplacer le marqueur de la liste.

liste-style-image: none ;    liste-style-image: url(images/point.jpg) ;

Page (balise @page)

size : Réglage de la page d'impression.

size: auto ;               size: portrait ;            size: landscape ;

orphans : Evite les lignes seules en début de page en indiquant le nombre minimum sur une page.

orphans: 3 ;

widows : Evite les lignes seules en fin de page en indiquant le nombre minimum de ligne.

widows: 3 ;

page-break-before, page-break-after : Force un saut de ligne avant ou après un objet.

page-break-after: auto ;

page-break-before: always ; /* Saut de page à faire*/

page-break-before: avoid ;   /* Saut de page à éviter*/

Cascading Style Sheets: CSS3

Coins arrondis

Coin arrondi sur tout un bloc.

div.page

{  border-radius:         8px ;

   -webkit-border-radius: 8px ;     

  -moz-border-radius:    8px ;

   -khtml-border-radius:  8px ;

}

Coin arrondi sur la partie haute d'un bloc.

div.haut

{  border-radius:         8px 8px 0 0 ;

   -moz-border-radius:    8px 8px 0 0 ;

   -webkit-border-top-left-radius:  8px ;

   -webkit-border-top-right-radius: 8px ;

   -khtml-border-radius:  8px 8px 0 0 ;

}

Shadow : Ombrage décalé vers le bas et la droite, diffus de 6px d'une couleur grise.

div

{  box-shadow:         3px 3px 6px #444 ;

   -moz-box-shadow:    3px 3px 6px #444 ;

   -webkit-box-shadow: 3px 3px 6px #444 ;

   -khtml-box-shadow:  3px 3px 6px #444 ;

}

Ombrage peu décalé sur un tableau.

table

{  box-shadow: 1px 1px 7px #666 ;

   -moz-box-shadow: 1px 1px 7px #666 ;

   -webkit-box-shadow: 1px 1px 7px #666 ;

   -khtml-box-shadow: 1px 1px 7px #666 ;

}

CSS2 : Ombrage de texte décalé vers le bas et la droite, diffus de 3px d'une couleur grise.

h2, h3 {  text-shadow:  2px 2px 3px #999;  }

Rotation: Rotation d'un bloc.

a:hover img

{  transform-origin: 50% 50%;

   transform: scale(1.00) rotate(-5deg) ;

   -moz-transform-origin: 50% 50%;

   -moz-transform: scale(1.00) rotate(-5deg) ;

   -webkit-transform-origin: 50% 50%;

   -webkit-transform: scale(1.00) rotate(-5deg) ;

}

iPhone, iPod, iPad et autres terminaux

Méta taille de page

Navigateur réglé sur la largeur de l'écran :

<meta name="viewport" content="width=device-width">

Navigateur réglé sur la hauteur de l'écran :

<meta name="viewport" content="width=device-height">

Navigateur réglé sur une largeur de 600 pixels :

<meta name="viewport" content="width=640">

@média pour style

Style pour une page inférieure à 1000 pixels de large :

@media (max-width: 1000px)

{  p { ... }      div { ... }  }

Style pour une page inférieure à 685 pixels (iPhone, iPod : paysage):

@media handheld,

only screen and (max-width: 685px),

only screen and (max-device-width: 685px)

{  p { ... }       div { ... } }

Style pour une page inférieure à 400 pixels (iPhone, iPod : portrait) :

@media handheld,

only screen and (max-width: 400px),

only screen and (max-device-width: 400px)

{  p { ... }     div { ... }  }

Style pour une impression :

@media print  {  p { ... }     div { ... }  }

Unités

Longueurs et pourcentages

Préférez des unités relatives, car elles peuvent être adaptées au visiteur (mal voyant ou pas) et au périphérique (écran ou imprimé), et bannissez les unités absolues (sauf si les relations sont directement définies pour un seul périphérique, par exemple). Ces valeurs peuvent être positives comme négatives (+/-), la valeur 0 ne requérant pas de spécifier d'unité.

  • Unités de longueur relatives

o             em : hauteur de la police de caractère (ou de celle de la balise parente, lors de définition de cette même taille)

o             ex : hauteur du caractère x minuscule ('x')

o             px : taille en pixels (différent à l'écran et sur papier... mais calculés pour être dans les proportions)

  • Unités de longueur absolues

o             cm : centimètres (1 cm = 10 mm)

o             mm : millimètres

o             in : inches (1 in = 2.54 cm)

o             pt : points (1 pt = 1/72 in)

o             pc : picas (1 pc = 12pt)

  • Le pourcentage % : Pourcentage de la longueur de l'élément parent

Couleurs

Il existe déjà 16 couleurs prédéfinies : aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, et yellow.

Une couleur est donnée au format RGB (Red Green Blue : Rouge, puis Vert, puis Bleu) déclarée ainsi :

  • Unités de longueur relatives

o             #rrggbb (par exemple, du vert moyen, #00cc00)

o             #rgb (même exemple : #0c0)

o             rgb(x,x,x) où x est un entier entre 0 et 255 inclus (par exemple, rgb(0,204,0))

o             rgb(y%,y%,y%) où y est un nombre à virgule compris entre 0.0 et 100.0 inclus (par exemple, rgb(0%,80%,0%))

<header>

    <!-- Placez ici le contenu de l'en-tête de votre page ->

</header>

<footer>

    <!-- Placez ici le contenu du pied de page -->

</footer>

La balise <nav> doit regrouper tous les principaux liens de navigation du site

<nav>

    <ul>

        <li><a href="index.html">Accueil</a></li>

        <li><a href="forum.html">Forum</a></li>

        <li><a href="contact.html">Contact</a></li>

    </ul>

</nav>

La balise <section> sert à regrouper des contenus en fonction de leur thématique

<section>

    <h1>Ma section de page</h1>

    <p>Bla bla bla bla</p>

</section>

La balise <aside> est conçue pour contenir des informations complémentaires au document que l'on visualise.

<aside>

    <!-- Placez ici des informations complémentaires -->

</aside>

La balise <article> sert à englober une portion généralement autonome de la page.

<article>

    <h1>Mon article</h1>

    <p>Bla bla bla bla</p>

</article>

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>Zozor - Le Site Web</title>

    </head>

    <body>

        <header>

            <h1>Zozor</h1>

            <h2>Carnets de voyage</h2>

        </header>

        <nav>

            <ul>

                <li><a href="#">Accueil</a></li>

                <li><a href="#">Blog</a></li>

                <li><a href="#">CV</a></li>

            </ul>

        </nav>

        <section>

            <aside>

                <h1>À propos de l'auteur</h1>

                <p>C'est moi, Zozor ! Je suis né un 23 novembre 2005.</p>

            </aside>

            <article>               

                <h1>Je suis un grand voyageur</h1>

                <p>Bla bla bla bla (texte de l'article)</p>

            </article>

        </section>

        <footer>

            <p>Copyright Zozor - Tous droits réservés<br />

            <a href="#">Me contacter !</a></p>

        </footer>       

    </body>

</html>

nav

{

    float: left;

    width: 150px;

    border: 1px solid black;

}

section

{

    margin-left: 170px;

    border: 1px solid blue;

}

Positionnement absolu et relatif

element

{

    position: absolute;

    right: 0px;

    bottom: 0px;

    z-index: 1;

}

element2

{

    position: absolute;

    right: 30px;

    bottom: 30px;

    z-index: 2;

}


601