Apprendre le CSS sur le forum Création de sites web - 27-08-2004 20:34:15

Liste des sujets

Apprendre le CSS

blasko

Niveau 10

27 août 2004 à 20:34:15

Salut je cherche un tutorial sur le CSS.
Lequel recommandez vous sachant que j´ai fait un site en HTML et que j´aimerais amélioré l´aspect de ce site.

Merci d´avance.

freedix

Niveau 10

27 août 2004 à 20:37:13

http://www.alsacreations.com/articles/
http://openweb.eu.org
http://fr.selfhtml.com

freedix

Niveau 10

27 août 2004 à 20:37:44

Pour le dernier c´est :
http://fr.selfhtml.org

Yoda_Software

Niveau 30

27 août 2004 à 20:38:01

Si tu avais recherché un peu avant de créer ce topic, tu aurais trouvé ces liens :

[ http://www.openweb.eu.org/ ]
[ http://fr.selfhtml.org/ ]
[ http://www.alsacreations.com/articles/ ]
[ http://dicolive.media-box.net/docCSS/css.php?orderByType=1 ]
[ http://cerig.efpg.inpg.fr/dossier/feuilles-de-style/sommaire.htm ]

Le 1er site est le meilleur que je connaisse !

Vlad86

Niveau 34

27 août 2004 à 21:38:20

moi je le déteste le premier site

freedix

Niveau 10

27 août 2004 à 21:38:58

Moi j´adore =)

blasko

Niveau 10

28 août 2004 à 10:28:35

salut j´ai regardé sur ce site :
http://openweb.eu.org/articles/bouton_css/

Pour faire un menu en haut à gauche de mon site, mais il y a deux codes différents, le code CSS et le code XHTML ( regardez le dernier exemple ) . Je sais où insérer le HTML mais où insère-t-on le CSS ?

Merci d´avance.

blasko

Niveau 10

28 août 2004 à 11:54:30

Ok je vais recopier le problème :

source XHTML :

< div class="vertical">
< p>
< a href="#">Sommaire</a>
< a href="#">Bla bla</a>
< a href="#">Retour</a>
< /p>
< /div>

source CSS :

. vertical a {
color: white;
background-color: #000080;
text-decoration: none;
font-weight: bold;
text-align: center;
padding: 5px;
border: 2px outset #c0c0c0;
display: block;
width: 100px;
}
. vertical a:hover {
background-color: #6495ED;
background-image: url(aqua.jpg);
border: 2px inset #c0c0c0;
}

Où est-ce qu´on doit placer la source CSS ?

Merci d´avance.

zel89

Niveau 10

28 août 2004 à 11:55:54

Dans le fichier html ou dans un fichier css externe tout est expliqué sur le site.

Yoda_Software

Niveau 30

28 août 2004 à 12:19:22

vlad86 d [ http://www.openweb.eu.org/ ] ? C´est pourtant le plus complet !

blasko

Niveau 10

28 août 2004 à 12:23:16

Vous pourriez me monter le lien direct vers la page svp ?
Je suis perdu dans l´immensité de ce site !

Yoda_Software

Niveau 30

28 août 2004 à 12:30:57

Tu ne veux pas 15€ et un Mars non plus ?

blasko

Niveau 10

28 août 2004 à 12:32:33

Non merci pour le 15 € mais pour le mars, je préfère les twix.

Yoda_Software

Niveau 30

28 août 2004 à 12:45:00

Le site n´est pas très grand, tu trouveras vite ce que tu cherche !

Yoda_Software

Niveau 30

28 août 2004 à 12:52:41

Bon, puisque tu ne semble pas trouver où mettre le code CSS, je vais t´expliquer.
1ère méthode : dans le fichier HTML ( moyennement conseillée).

entre les balises <head> et </head> tu met :
<style type="text/css">
. vertical a
{
color: white;
background-color: #000080;
text-decoration: none;
font-weight: bold;
text-align: center;
padding: 5px;
border: 2px outset #c0c0c0;
display: block;
width: 100px;
}
. vertical a:hover
{
background-color: #6495ED;
background-image: url(aqua.jpg);
border: 2px inset #c0c0c0;
}
</style>

2ème méthode : dans un fichier CSS externe.

Tu met ton code dans un fichier texte que tu appelle par exemple style.css et dans le fichier HTML entre les balises <head> et </head> tu met :
<link href="style.css" rel="stylesheet" type="text/css">

Yoda_Software

Niveau 30

28 août 2004 à 12:57:23

J´oubliais de préciser pourquoi la 2ème méthode est conseillée.
1) le fichier CSS esterne peut servir à définir le design de toutes tes pages. Une simple modification dans le fichier CSS modifie toutes tes pages, plus besoin de faire des copié/collé.
2) le fichier CSS externe n´est chargé en mémoire qu´une seule fois, quel que soit le nombre de pages du site, d´où un gain de temps de chargement des pages.

MathieuN7

Niveau 10

28 août 2004 à 13:25:20

blasko, on te donne une flopée de sites, et t´es même pas foutu de trouver ce que ut veux dans les 20articles qu´il y a dedans??? T´es un peu pareseux sur les bords toi non?

blasko

Niveau 10

28 août 2004 à 13:49:10

Merci Yoda Softaware de m´avoir expliqué plus en détail, je comprends mieux le fonctionnement maintenant.
Cependant j´ai fait comme tu as dit : 2 fichiers :

L´un nommé style.css :
< style type="text/css">
. vertical a {
color: white;
background-color: #000080;
text-decoration: none;
font-weight: bold;
text-align: center;
padding: 5px;
border: 2px outset #c0c0c0;
display: block;
width: 100px;
}
. vertical a:hover {
background-color: #6495ED;
background-image: url(aqua.jpg);
border: 2px inset #c0c0c0;
}
< /style>

L´autre index.html :
< html>
< head><link href="style.css" rel="stylesheet" type="text/css">
< title>Bienvenue sur le site</title>
< /head>
< body bgcolor=#333399 alink="green" vlink="yellow">

< div class="vertical">
< p>
< a href="personnages.html">Personnages</a>
< a href="images.html">Images</a>
< a href="histoire.html">Histoire</a>
< /p>
< /div>

< /body>
< /html>

Voilà, mais ça ne change pas la mise en forme du fichier index.html.
Que faire ?

Merci d´avance.

MathieuN7

Niveau 10

28 août 2004 à 13:55:11

enlève les balises style dans ta feuille css

blasko

Niveau 10

28 août 2004 à 13:58:38

J´ai déjà essayé, ça ne marche pas

Aide à l'achat Mac
Création de Jeux
Linux
Programmation
Création de sites web
Internet
Steam Deck
Macintosh
Hardware

La vidéo du moment

News jeu

150 875 spectateurs

Halo: Campaign Evolved fait de la coopération sa plus grande force

Loin de se limiter à une simple refonte graphique, Halo: Campaign Evolved reconstruit la campagne du premier Halo en accordant une place centrale à la coopération. Que ce soit pour découvrir l'aventure une première fois ou la parcourir à nouveau, le titre multiplie les options pour permettre aux joueurs de former facilement une escouade, tout en ajoutant de nouvelles mécaniques qui encouragent la rejouabilité.

Toutes les news jeu