Utiliser le langage HTML Transférer des fichiers sur un serveur web Mettre en forme des pages avec le CSS Internet est il dangereux ? Créer un clef usb "Lubuntu" bootable
Accueil du site | Accessibilité | Rechercher | Menu | Contenu | Plan du site | | Contact

°°TechNoLand°°

°°TechNoLand°°

 

Mettre en forme des pages avec le CSS

10 octobre 2014 - Dernier ajout 20 novembre 2014
par chamayou

Le CSS (Cascading Style Sheets) est un code qui permet de définir la mise en page.

 principe d’une page avec du CSS

On défini une mise en page commune dans un fichier CSS qui sera appelé par chaque page HTML :

- Le fichier html :

On rajoute le code qui va appeler le fichier "style.css" :

<head>
       <meta charset="utf-8" />
       <link rel="stylesheet" href="style.css" />
       <title>Premiers tests du CSS</title>
   </head>

- Le fichier css :

On crée un fichier style.css qui va décrire la mise en page :

Par exemple, les paragraphes seront bleus.

p
{
   color: blue;
}

source : http://fr.openclassrooms.com/informatique/cours/apprenez-a-creer-votre-site-web-avec-html5-et-css3/mettre-en-place-le-css

 Le langage CSS

On trouve trois éléments :

- Les noms de balises : on écrit les noms des balises dont on veut modifier l’apparence. Par exemple, l’apparence de tous les paragraphes, on écrit p.

- Des propriétés CSS : les mises en form de la page sont rangées dans des propriétés. Par exemple, la propriété "color" pour la couleur du texte, "font-size" pour la taille du texte...

- Les valeurs : pour chaque propriété CSS, on indique une valeur. Par exemple, pour la propriété "color", le nom de la couleur. Pour "font-size", la taille...

 Exercice : pages web avec un menu à gauche

- Le fichier css suivant permet de créer un menu sur la gauche

<style type="text/css">

body {
margin: 0;
padding: 0;
}

h1 {
margin: 0 0 15px 0;
padding: 0;
font-size: 120%;
font-weight: bold;
}

p {
font-size: 14px;
margin: 0 0 15px 0;
padding: 0;
}

a {
font-size: 11px;
text-decoration: none;
font-weight: bold;
color: #ff0000;
}

a:link {
color: #666;
}

a:visited {
color: #999;
}

a:hover {
background-color: #ccc;
color: #333;
}

ul, li {
list-style: none;
padding: 0;
margin: 0;
}

#contenu {
margin: 0 50px 50px 200px;
padding: 10px;
}

#menu {
position: absolute;
top: 50px;
left: 20px;
width: 150px;
padding: 10px;
line-height: 20px;
background-color: #f4f4f4;
border: 1px solid #000;
}
</style>

- Le fichier html suivant appelle le fichier css

<HTML>
<HEAD>
<meta charset="utf-8" />
      <link rel="stylesheet" href="menu.css" />
      <title>mon site web</title>
<TITLE>acc</TITLE>

</HEAD>

<BODY>

<div id="contenu">
<h1>Le titre ici</h1>
<p>
<p>
Le texte de la page ici</p>
</div>

<div id="menu">
<h1>Navigation</h1>
<ul>
<li><a href="la cible du lien ici" title="">Menu 1</a></li>
<li><a href="" title="">Menu 2</a></li>
<li><a href="" title="">Menu 3</a></li>
<li><a href="" title="">Menu 4</a></li>
<li><a href="" title="">Menu 5</a></li>
<li><a href="" title="">Menu 6</a></li>
</ul>
</div>


</BODY>
</HTML>

On obtient ceci :

Téléchargez d’autres modèles sur ce site :

http://css.webyo.net/

 Exercice : site web sur les métiers

Réaliser un site web de 4 pages : cahier des charges

index.html travail1.html : travail2.html : tableau.html :
Un titre qui défile de droite à gauche ; texte de présentation du site web ; sommaire de navigation ; une image en fond de page le nom du métier qui défile ; un fond en couleur ; texte "nature du métier" ; texte "compétences requises" ; sommaire de navigation ; photos du métier le nom du métier qui défile ; un fond en couleur ; texte "nature du métier" ; texte "compétences requises" ; sommaire de navigation ; photos du métier titre "autres métiers" ; fond de page en couleur ; tableau 2 colonnes, 2 lignes : métiers que vous aimeriez faire ou non ; sommaire de navigation

calle

Documents joints


menu.css
Cascading Style Sheet - 705 octets
calle


calle