[le code css de la page index du cv]
[mise en forme avec Les styles CSS]
Les styles CSS sont un complément du langage HTML (ou XHTML) prevu pour gérer toute la mise en forme de la page. Cela va de l'esthétique (couleurs, typographie) à la fonctionnalité (positionnement, structure, navigation).
Le concept de feuilles de style est apparu en 1996 avec la publication par le W3C d'une nouvelle recommandation intitulée « Cascading StyleSheets » (feuilles de style en cascade), notée CSS.
Le principe des feuilles de style consiste à regrouper dans un même document des caractéristiques de mise en forme associées à des groupes d'éléments. Il suffit de définir par un nom un ensemble de définitions et de caractéristiques de mise en forme, et de l'appeler pour l'appliquer à un texte.
Il est ainsi possible de créer un groupe de titres en police Arial, de couleur verte et en italique.
Les feuilles de style ont été mises au point afin de compenser les manques du langage HTML en ce qui concerne la mise en page et la présentation.
En effet, le HTML offre un certain nombre de balises permettant de mettre en page et de définir le style d'un texte, toutefois chaque élément possède son propre style, indépendamment des éléments qui l'entourent.
Grâce aux feuilles de style, lorsque la charte graphique d'un site composé de plusieurs centaines de pages web doit être changée, il suffit de modifier la définition des feuilles de style en un seul endroit pour changer l'apparence du site tout entier !
Elles sont appellées « feuilles de style en cascade » (en anglais « Cascading Style Sheets ») car il est possible d'en définir plusieurs et que les styles peuvent être hérités en cascade.
Les feuilles de style permettent notamment :
d'obtenir une présentation homogène sur tout un site en faisant appel sur toutes les pages à une même définition de style
de permettre le changement de l'aspect d'un site complet entier par la seule modification de quelques lignes
une plus grande lisibilité du HTML, car les styles sont définis à part
des chargements de page plus rapides, pour les mêmes raisons que précédemment
un positionnement plus rigoureux des éléments
[Placer les règles CSS]
dans La balise HEAD :
La balise HEAD contient essentiellement : - des balises META, - du code JavaScript, - des références aux feuilles de style.
Les feuilles de style d'une page web sont déclarées grâce
à la balise <STYLE> au sein des balise <HEAD> et </HEAD>.<HTML> <HEAD> <STYLE type="text/css"> <!--
Définition des styles;
--> </STYLE> </HEAD> <BODY> </BODY> </HTML>
[étape1. déclarer la balise <STYLE> dans le <head>]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" <html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr"> <head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<meta name="author" content="votre nom " />
<meta http-equiv="language" content="fr" />
<meta name="description" content="Le contenu de mon site" />
<meta name="Keywords" content="motclef1,motclef2,motclef3... " />
<meta name="robots" content="index,follow" /> <title>cv des stagiaires | accueil</title><!-- déclaration de la balise style -->
<style type="text/css" media="screen">
<!-- -->
</style>
</head
[étape2. formater le site]
Le code final :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" <html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<meta name="author" content="votre nom " />
<meta http-equiv="language" content="fr" />
<meta name="description" content="Le contenu de mon site" />
<meta name="Keywords" content="motclef1,motclef2,motclef3... " />
<meta name="robots" content="index,follow" /> <title>cv des stagiaires | accueil</title> <style type="text/css" media="screen">
<!--/* / balice <style> et premiers CSS /*/
/* /////////////////////////////////////
valeures à 0 pour toute la page
//////////////////////////////////////*/
*{
padding: 0;
margin: 0 ;
} /* /////////////////////////////////////
structure interface //////////////////////////////////////*/
body{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color:#828586;
background-color:#FFFFFF;
padding:0;
}
#global{
width: 760px;
background-color:#FFFFFF;
padding:0;
border:1px solid #a8a994 ;
}
#bandeau{
width: 100%;
padding:0px;
margin:0px;
}
#pied{
background-color:#CEC8B7;
}
-->
</style> </head> <body id="accueil"> <div id="global"> <div id="bandeau"> <img src="image_site/bandeau.png" alt=" image du bandeau " title=" image du bandeau "/> <h1> cv | nom - prenom - age </h1> </div> <div id="bnu <ul class="menu"> <li><a href="index.htm">accueil</a></li> <li>|</li> <li><a href="contact.htm">contact/a></li>
<li class="icone"><a href="#" OnClick="window.print();"> <img class="icone" src="image_site/icone.png" alt=" imprimer la page " title=" imprimer la page "/> </a></li> </ul> </div>
<div id="contenu"> <h1>accueil</h1> <h2 class="titre">paragraphe 1 </h2> <p>paragraphed</p> <p>paragraphe</p> <br/> <h2 class="titre">paragraphe 2</h2> <p>paragraphe</p> <p>paragraphed</p> </div> <div id="pied"> <img src="image_site/pied.png" alt=" image du pied " title=" image du pied "/> </div> </div> </body> </html>
[étape3. centrer le site]
body{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color:#828586;
background-color:#FFFFFF;
padding:0;
margin: 20px 0 ;
}
#global{
width: 760px;
background-color:#FFFFFF;
padding:0;
border:1px solid #a8a994 ;
margin: 0 auto ;
}
[étape4. couleur du menu]
#bandeau{
width: 100%;
padding:0px;
margin:0px;
}
#menu{
background-color:#F1ECE5;
height:30px;
padding:0px;
margin:15px 0;
}
#pied{
background-color:#CEC8B7;
}
[étape5. paragraphes et fond]
#pied{
background-color:#CEC8B7;
}
#contenu{
background:#FFF url(image_site/image_guauche.png) repeat-y; /*/ajout de l'image /*/
margin-bottom:15px
}
p{
text-align:justify;
background-color:#F1ECE5;
padding:0 10px 10px 10px;
margin-left:240px
}
[étape6. les titres]
p{
text-align:justify;
background-color:#F1ECE5;
padding:0 10px 10px 10px;
margin-left:240px
}
.titre{
font-size: 16px;
background:#F1ECE5 url(image_site/image_paragraphe.png) repeat-x; /*/ajout de l'image /*/
padding:10px 10px 15px 10px;
margin-left:240px;
}
h1{
float:left; /*/permet le déplacement de l'élément/*/
font-size: 14px;
background-color:#F1ECE5;
width:205px;
padding:5px 0px 5px 10px;
margin:10px 0 0 0;
}
[étape7. faire disparaître le titre du bandeau]
h1{
float:left;
font-size: 14px;
background-color:#F1ECE5;
width:205px;
padding:5px 0px 5px 10px;
margin:10px 0 0 0;
}
#bandeau h1{
text-indent:-5000px;
font-size: 20px;
width:auto;
margin:0;
padding:0;
line-height:0;
}
voir le résultat
[étape8. placer le menu]
#bandeau h1{
text-indent:-5000px;
font-size: 20px;
width:auto;
margin:0;
padding:0;
line-height:0;
}
/* /////////////////////////////////////
menu
//////////////////////////////////////*/
.menu{
font-size: 12px;
font-weight:bold;
list-style-type:none;
padding:0;
margin:0;
}
.menu li{
display:inline; /*/transformer les éléments bloc en éléments en ligne/*/
float:left; /*/sortir les éléments du flux/*/
padding:0;
margin:7px 0px 0px 10px;
}
/*/positionner l'icone de l'imprimante /*/
.menu .icone{
display:inline; /*/transformer l' élément bloc en élément en ligne/*/
float:left; /*/sortir l' élément du flux/*/
padding:0;
margin:1px 0px 0px 290px;
}
[étape9. liens]
.menu .icone{
display:inline;
float:left;
padding:0;
margin:1px 0px 0px 200px;
}
/* /////////////////////////////////////
liens
//////////////////////////////////////*/
/*/couleur des liens /*/
#menu a {
text-decoration: none;
color:#a8a994
}
/*/couleur des liens survolés /*/
#menu a:hover{
color:#828586
}
/*/cadre de l'icone de l'imprimante/*/
#menu a .icone {
border:1px solid #828586
}
voir le résultat final
