Le principe de l'utilisation d'une feuille de style est de séparer le contenu de la page de sa présentation.
Nous allons imaginer cette page constitué de trois éléments :
- un titre a afficher en haut
- un menu à afficher a gauche sur 20% de la page
- un dernier élément appeler 'info' contenant les information sur 70% a droite.
le code html donne ceci :
<!DOCTYPE html> <html lang="fr"> <head> <title>navigue</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <div id='titre'> Ici c'est le Titre ! </div> <br> <div id='menu'> <ul> <a href="index.php?idmot=2"> <li> ASCII et ISO </li> </a> <li> format d'image </li> <a href="index.php?idmot=5"> <li> Tkinter </li> </a> <li> compression video </li> </ul> </div> <div id='texte' > Tous ce que je veux dire <br> <img src="image_android.png" > <a href='http://google.com' target="_blank" > Google </a> </div> </body> </html>
Pour le moment votre page ne ressemble a rien mais en ajoutant la page de style indiqué à la 6éme ligne :
body {
text-align: center;
font-size: 2em;
background-color : blue;
color : black;
padding: 10 px;
}
#titre
{
border-radius: 10px;
background-color : #C5A9F0;
}
#texte
{
display : inline-block;
width: 70%;
float: right;
background-color : #fdf5e6;
}
#menu
{
display : inline-block;
text-align: left;
float: left;
width: 20%;
border-radius: 10px;
background-color : #A6E5F2;
box-shadow: 2px 2px 10px #706b64;
}
div#menu a {
color: white;
text-decoration: none;
}
Penez le temps de comprendre chaque ligne !!