Faire un site: CSS

Voila ma premiere approche du CSS, que j'ai fait en cours cet année.

http://sylvain.viguie.free.fr/WSIA/TP1/Ex1/index.html

L'avantage du CSS ici, c'est qu'avec le même code html, j'affiche ce que je veux différemment avec des feuilles CSS différentes.

Pour voir les CSS, reperre cette ligne dans le code de la page html

Code:

Récupère le contenu du href (ici "Styles/normal.css" ) et met le à la place du nom de la page dans l'adresse (ici index.html).

http://sylvain.viguie.free.fr/WSIA/TP1/Ex1/Styles/normal.css

En plus de redéfinir des balise déja existantes (par exemple, la balise <a> pour les liens, tu peut faire en sorte que le texte soit surligner d'une certaine couleur quand tu passe dessus par exemple, cf. mon porte-folio, ou bien la premiere lettre du paragraphe en lettrine en changeant la balise <p> dans le CSS), tu peux créer de nouvelle balise ( par exemple les balise gras, italique et souligne dans la page que je t'ai donné plus haut) à utiliser avec les balises <div> et <span>.

Avec la balise <div>, tu créer un paragraphe (un peu comme avec <p>) avec le style que tu veut.
Avec la balise <span>, tu change le style d'une partie du contenu du paragraphe, elle se place donc a l'interieur d'une balise <p> ou <div>

Exemple:

Code:

<p>
<span class="gras">Le mot multimédia est apparu vers la fin des années 1980, lorsque les CD-ROM se sont
développés.</span> Il désignait alors les applications qui, grâce à la mémoire du CD et aux
capacités de l'ordinateur, pouvaient générer, utiliser ou piloter différents médias
simultanément : musique, son, image, vidéo, et interface homme-machine interactive
<span class="italique">(IHM).</span>
</p>

Ici, la paragraphe est défini avec une balise <p>, et la premiere phrase sera affiché en dans le style "gras" que tu aura défini, et le dernier mot sera affiché dans le style "italique" que tu aura défini.

Donc on résume:

Soit tu redéfini les balises déjà existantes pour faire ce que tu a envie avec.
Soit tu crée tes propres styles, que tu utilises avec les balises <div> et <span>.

Ensuite la différence entre class et id est qu'une classe peut etre utilisé plusieurs fois, alors qu'un id une seule.

Après, le grand interet du CSS, c'est de créer les "blocs" de ton site.

Prend la page d'accueil de mon porte-folio. En haut, j'ai ma banière. A gauche, j'ai mon menu. A coté, j'ai le corps de mon site. Enfin en bas, j'ai mon pied de page.

Chacun de ses blocs est défini dans le CSS.

Tout d'abord, je change mon body pour qu'il prenne que 800 pixel de large, et je fait en sorte qu'il ne touche pas le haut et le bas du navigateur, avec les margin (simple esthétique). Et je rajoute un id "bords" pour eviter que la page touche les bords de la fenetre quand la page dépasse la fenetre.

Code:

body
{
width: 800px;
margin: auto; /* Pour centrer notre page */
margin-top: 20px; /* Pour éviter de coller avec le haut de la fenétre du navigateur. */
margin-bottom: 20px; /* Idem pour le bas du navigateur */
background-image: url("Images/Fond.jpg");
}

#bords /*Pour que la page ne touche pas les bords du browser*/
{
width: 97%;
margin: 0 auto;
}

Ensuite je crée ma banière, comme une div de 100px de haut, ayant comme fond une image, qui se trouve etre ma bannière. Après, on peut faire quelque chose de différent (du texte avec un couleur en fond par exemple)

Code:

#en_tete // tu remarquera que c'est en id, car tu as un seul en tete par page.
{

height: 100px;
background-image: url("Images/Banniere.png");
background-repeat: no-repeat;
margin-bottom: 10px;
}

Ensuite j'ai mon menu (encore en id), que je met à gauche, avec le float: left , et je lui met une largeur de 140px.

Code:

#menu
{
float: left;
width: 140px;

}

Ici on attaque la partie interresante du CSS. Dans mon menu va se trouver des items. Je défini donc ma classe item, avec sa couleur de fond, et sa bordure. Le margin evite que le texte soit collé en bas du cadre.
Ensuite je redéfini des balise mais uniquement dans mes items. Ainsi, je redéfini la balise h3 pour afficher un titre d'une certaine facon, la balise ul pour afficher la liste des elements avec un décalage vers la droite, et la facon dont est affiché les liens, ainsi que le comportement une fois que qu'on passe dessus.

Ces items se trouveront ensuite dans le menu. En fait, le html, c'est faire des boites, dans des boites, dans des boites, à cotés d'autres boites, et le CSS dit comment sont affiché ces boites.

Code:

.item
{
background-color: #DDDDDD;
background-repeat: repeat-x;

border: 2px solid black;

margin-bottom: 20px;

}

.item h3
{
color: #626262;
text-align: left;
padding-left: 10px;
}

.item ul
{
list-style-type: square;
padding: 0px;
padding-left: 40px;
margin: 0px;
margin-bottom: 15px;
}

.item a /* Tous les liens se trouvant dans un menu */
{
color: #626262;
}

.item a:hover /* Quand on pointe sur un lien du menu */
{
background-color: #AAAAAA;
color: #DDDDDD;
}

Ensuite le corps de la page. On défini une marge à gauche pour que le corps ne passe pas sous le menu (c'est l'effet premier du float en fait, mais on s'en sert pour mettre les 2 cotes à cotes). Puis je redéfini les choses comme pour mon menu.

Code:

#corps
{
margin-left: 160px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
margin-bottom: 20px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */

color: #B3B3B3;

border: 2px solid black;
}

#corps h1
{
color: #B3B3B3;
text-align: center;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}

#corps h2
{
height: 30px;
padding-left: 30px;
color: #B3B3B3;
text-align: left;
}

#corps a /* Tous les liens se trouvant dans un menu */
{
color: #B3B3B3;
}

#corps a:hover /* Quand on pointe sur un lien du menu */
{
background-color: #AAAAAA;
color: #DDDDDD;
}

Enfin, on a le pied de page (pas obligatoire, mais ça fait toujours propre ^^ ). Ici rien de spécial, je centre le texte, je met une bordure. Le clear: both à la fin sert à se placer en dessous du float, car sinon, ton menu va se trouver par dessus ton pied de page.

Code:

#pied_de_page
{
padding: 5px;

text-align: center;

color: #B3B3B3;

border: 2px solid black;
clear:both;
}

Maintenant que le CSS est fini, on construit la page.

Après le <head>ou tu met le nom de la page, le charset utilisé et surtout la facon dont tu gère le style, tu met ce que contient la page.

Comme je te l'ai dit, le html, c'est boites qui contiennent d'autres boites à coté d'autres boites.

En code, les boites, c'est tes balises.

Dont tu as d'abord:

Code:

Ensuite, on voulait que notre site ne touche pas les bord du navigateur, on a donc:

Code:

Ensuite on a l'en tete, d'où:

Code:

Après, on ajoute le menu, avec les éléments que tu veut (tu remarquera que pour les items, on a ici un <div class="item"> car tu veut en mettre plusieurs):

Code:

Une fois le menu ajouté, on met le corps:

Code:

<body>
<div id="bords">
<div id="en_tete">
</div>
<div id="menu">
<h2>Titre du menu</h2>

<div class="item">
<h3>Titre de l'item 1</h3>
<ul>
<li>element1</li>
<li>element2</li>
</ul>
</div>

<div class="item">
<h3>Titre de l'item 2</h3>
<ul>
<li>element1</li>
<li>element2</li>
</ul>
</div>
</div>

<div id="corps">
<h1>Titre</h1>
<p>
blablablablablablablablabla
</p>

</div>

</div>
</div>
</body>

Et enfin, on ajoute le pied de page:

Code:

Et voila grace à ça tu as un site qui ressemble un peu à quelque chose.

Après, je suis pas un pro du CSS,mais si tu as des questions n'hésite pas.

Communauté > Forums