Formation CSS
Conception d’une page web en blocs sans mise en forme
n Structuration d’une page (sur papier) = définir et hiérarchiser les différents éléments qui composent la page. Par exemple :
n Header (en-tête)
n Logo
n Formulaire de recherche
n Menu
n Centre (contenu principal de la page)
n Position dans le site
n Titre de la page
n Image
n Texte
n Footer (bas de page)
n Liens vers un formulaire de contact
n Date de dernière modification
n Mentions légales
n Structuration d’une page (traduction en html)
n Header bloc « div »
n Logo en-ligne « img »
n Formulaire de recherche bloc « form »
n Menu bloc « ul »
n Centre (contenu principal de la page) bloc « div »
n Position dans le site bloc « ul »
n Titre de la page bloc « h2 »
n Image en-ligne « img »
n Texte bloc « p »
Footer (bas de page)bloc « div »
n Lien vers un formulaire de contact en-ligne « a »
n Date de dernière modification en ligne « span »
n Mentions légales en ligne « span »
Le langage CSS : présentation
n S’interdire l’utilisation des balises html de mises en forme :
n Éléments BASEFONT et FONT ;
n Éléments CENTER, U, STRIKE et S ;
n Attributs ALINK, BACKGROUND, BGCOLOR, LINK, VLINK, TEXT de l’élément BODY ;
n Attributs BGCOLOR, HEIGHT, NOWRAP, WIDTH des éléments internes de tableaux ;
n Attributs BORDER, HSPACE, VSPACE des images et objets ;
n Attributs CLEAR, NOSHADE, SIZE, WIDTH des lignes de séparation HR ;
n Attributs COMPACT, TYPE des éléments de liste, et attributs START, VALUE des listes numérotées ;
n Où mettre le code CSS ?
n Directement dans l’en tête d’une page (entre les balises <head> et </head>)
Ex : <style type= »text/css »>…mon code css…</style>.
n Dans un fichier séparé (déclaré entre les balises <head> et </head>)
Ex : <link rel= »stylesheet » type= »text/css »
href= »fichier.css » />
Le langage CSS : présentation
n Mise en forme d’éléments :
n balises html existantes
ex :
<h1>Mon Titre</h1>
h1
{
color : black;
font-size : medium;
font-weight : bold;
}
n Identifiant personnel
ex :
<h2>Titre exemple</h2>
<h2 id= »titre_important »>Titre différent</h2> h2
{
color : black;
font-size : small;
}
#titre_important
{
color : red;
}
n Classe personnelle
ex :
<p class= »humain »>bla bla bla bla</p> <p class= »alien »>blob blob blob</p> <p class= »humain »>bla bla bla bla</p>
.humain
{
background-color : blue;
}
.alien
{
background-color : green;
font-style : italic;
}
n Conception d’une page web en blocs sans mise en forme
n Le langage CSS : présentation
n Mise en pratique :
n construction d’une page web en blocs
n mise en forme de la page avec CSS
Télécharger le cours complet
