– support stone  

Le langage CSS ou Cascading Style Sheets correspond à des feuilles de style en cascade. Ce langage existe depuis les années 90. Comme pour le HTML, c’est le W3C qui édite les normes. Le CSS permet de transformer l’apparence des pages HTML.

Notion de cascades

Le CSS permet de déclarer les styles seront différentes manières. Ils seront plus ou moins prioritaires selon l’endroit où ils sont déclarés. Il y a donc un effet de cascade qui remplace le précédent. Voici les trois façons de déclarer du CSS :

  1. Déclarer les feuilles de styles dans un fichier externe. C’est la solution la plus utilisé mais c’est celle qui est le moins prioritaire.
  2. Déclarer les styles en interne, dans l’en-tête de la page. Ils passent en second. Il ne faut réserver cette solution que pour des styles spécifiques.
  3. Déclaration des styles en attributs des éléments HTML. C’est le plus prioritaire.

Déclarations

Pour les déclarations externes:

sélecteur {
propriété: valeur;
}

Puis dans le fichier HTML

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

Pour les déclarations dans l’en-tête :

<head>
<style type="text/css">
sélecteur {
propriété: valeur;
}
</style>
</head>

Dans une balise :

<balise style="text-align:center; color:red"> ... </balise>

Mesure de base

On utilisera les % ou les em comme mesure. On évitera les px.
2em signifie 2 fois la taille normal
On peut aussi utiliser les valeurs comme small, medium, large ou auto pour certains éléments CSS.

Sélecteurs

Soit on sélectionne directement un type de balise HTML

h1{
color : yellow;
}

Soit on définit une classe CSS

.yellow{
color : yellow;
}
<span class="yellow" >mon code</span>

Soit on utilise des identifiants

#monBloc{
color : yellow;
}
<div id="monBloc"> mon code </div>

Mise en forme du texte

Attribut sur le texte. Selon les navigateurs, l’affichage des polices de caractères n’est pas la même.

font ; font-family ; font-weight ; font-variant ; font-style
color
text-align ; text-decoration ; text-transform
line-height
font-size : small
body {
font-family:"times new roman", times, serif;
}
font-style: normal | italic
font-weight: normal | bold
text-align: left | right | center | justify
text-decoration: none | underline | overline | line-through | blink
text-transform: none | capitalize | uppercase | lowercase : line-height: normal | nombre | %
line-height : 200%

Marges

margin indique l’espacement qui sépare un élément d’un autre
padding indique les espacements intérieurs.

margin-top:2px;
margin-right:5px;
margin-bottom:2em;
margin-left:0;

margin:2px 5px 2em 0;

margin:2px 0;

margin : top right bottom left 
margin : top-bottom left-right

Éviter les bugs

Il est possible de ne pas obtenir le résultat attendu lors de l’exécution des marges. Il est recommandé d’initialiser les marges.

* {
margin:0;
padding:0;
}

Mise en page

On évitera la définition de 50 div pour la mise en page mais l’utilisation des balises HTML5 dédiées.

http://uploads.siteduzero.com/files/343001_344000/343677.png

Bordures

p {
border:1px dotted black;
}
h2 {
border-bottom:1px dashed green;
}

 Réaliser des coins arrondis

border:2px solid black;
border-radius:7px;
}

Image de fond

Pour éviter tout problème de chargement, il est recommandé de n’inclure que des images de quelques dizaines de Ko.

body {
background-color:white;
background-image:url(images/img.png);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:right top;
}

Réaliser un fond en dégradé sans image

<div class="Degrade">
<p>Dégradé [xxx]</p>
</div>
.Degrade {
background-image:linear-gradient(white, black);
}

Ne rien indiquer comme proportions revient à déclarer white 0%, black 100%.Par défaut, le dégradé se fait vers le bas.

Degardé horizontal
.Degrade {
background-image:linear-gradient(to right, white, black);
}
Dégradé radial
.Degrade {
background-image:radial-gradient(white, black);
}

Animations

Effets au survol de souris

On utilise la classe :hover de CSS

a:hover {
color:red;
text-decoration:none;
background-image:url(images/gris_anim.gif);
background-repeat:no-repeat;
}

Il faut placer les effets dans un certain ordre :

  • :link non visité
  • :visited lorsque l’on a visité l’élément
  • :hover lorsqu’on est dessus
  • :active lorsqu’on clique dessus

Exemple de menu déroulant

<ul>
<li><a href="">Item 1</a></li>
<li><a href="">Item 2</a>
<ul>
<li><a href="">Item 2.1</a></li>
<li><a href="">Item 2.2</a></li>
</ul>
</li>
<li><a href="">Item 3</a></li>
</ul>

ul li {
display:none;
}

ul:hover li {
display:block;
position:relative;
top:0;
left:-25px;
}

Transition

transition: background-color 2s linear;

A vérifier : les navigateurs l’implémentent avec des préfixes propriétaires : -moz pour firefox, -webkit pour chrome et safari, et enfin -o pour opera.

-moz-transition: background-color 2s linear;

Animation d’une image

p#doigt a:hover, p#doigt a:focus {
background-color :green ;
color: black;

animation-name: doigt; /* nom de l’animation */
animation-duration: 4s; /* temps de l’animation (4s) */
animation-iteration-count: infinite; /* nombre de boucles (infinie) */
animation-timing-function: linear; /* accelération de l’animation (constant) */

}

@keyframes doigt {
0% {background:rgba(255,140,0,0.4) url(/images/main.png) no-repeat 5px 10px;}
50% {background:rgba(255,140,0,1) url(/images/main.png) no-repeat 50px 10px;}
100% {background:rgba(255,140,0,0.4) url(/images/main.png) no-repeat 5px 10px;}
}

La version raccourcie de la règle pour animation est la suivante :

animation: doigt 4s infinite linear;

Les Media-Queries ou Responsive Design

Les média-queries permettent d’adapter la mise en forme en fonction du terminal utilisé (tablette, téléphone etc).

Ils permettent de faire une sélection sur ces critères :

  • Le type de média
  • La taille de l’écran
  • La taille de la fenêtre
  • La résolution
  • Le nombre de couleurs
  • L’orientation

On sélectionne ici la taille de la fenêtre

body {
background-color:white;
color:black;
}
@media only screen and (max-width:800px) {
body {
background-color:black;
color:white
}
}

En ajoutant device, on précise la taille de l’écran

body {
background-color:white;
color:black;
}

@media only screen and (max-device-width:480px) {
body {
background-color:black;
color:white
}
}