– support stone zoo tickoon
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 :
- 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.
- 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.
- 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.
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
}
}