Feuille de style

Rom · Message par **Rom** » 21 août 2006, 13:53

Bonjour à tous

Je sais que le sujet a été maintes fois rabâché, mais je n'ai pas trouvé mon bonheur, ou je n'ai rien compris aux sujets déjà existants !

Côté CSS, je maîtrise les bases... J'ai un forum aceboard avec lequel je manipule ces données, donc je pourrais m'en sortir avec mon site...

Or, je ne sais pas comment faire pour que ma feuille de style s'applique sur mes pages ! J'ai essayé de regarder avec les codes de certains sites qui utilisent le CSS, ai reprodui la même chose mais niette...

Vos conseils sont toujours les bienvenus ?

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.6) Gecko/20060728 Firefox/1.5.0.6

Sebaz · Message par **Sebaz** » 21 août 2006, 18:28

tu créé ta feuille de style (par exemple: feuille_style.css)

et pour lier cette feuille à tes pages web ajoute la ligne suivante

<link rel="stylesheet" href="feuille_style.css" type="text/css">

entre le <head> et </head> de tes pages

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.6) Gecko/20060728 Firefox/1.5.0.6

Rom · Message par **Rom** » 21 août 2006, 19:47

D'accord et comment je fais pour avoir l'extension .css

Lorsque j'enregistre sous je force l'extension ?

Et ma feuille de style, elle doit avoir des balises genre <head>, <body>...

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.6) Gecko/20060728 Firefox/1.5.0.6

Sebaz · Message par **Sebaz** » 21 août 2006, 20:32

Pour créer la feuille de style, il est possible de le faire avec l'éditeur css (Outil >> Éditeur Css)
tu créé le style et ensuite clique sur: «exporter la feuille de style et utiliser la version exportée»
si la feuille de style créé n'a pas l'extention .css alors tu l'ajoute

Moi j'utilise une autre méthode pour créer ma feuille de style.
Je créé ma feuille de style avec SciTE Source Code Editor et lui donne l'extention .css

voici un exemple de feuille:

Code : Tout sélectionner

body {
  font-size: larger;
  background-color: #cccccc;
}
h1 {
  font-size: 50pt;
}
h2 {
  color: maroon;
  font-family: sans-serif;
  font-size: 22pt;
}
#boite {
  border-style: outset;
  border-width: 2px;
  margin: 40px 5%;
  padding: 2px;
  color: #000000;
  background-color: #ffffcc;
}

On ajoute aucune balises genre <head>, <body>...

Voici un code de page simple qui utilise ces styles:

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
<title>Exemple</title>
<link rel="stylesheet" href="feuille_style.css" type="text/css">
</head>
<body>
<h1>Titre h1</h1>
<h2>Titre h2</h2>
<div id="boite"><br>Boite<br></div>
</body>
</html>

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.6) Gecko/20060728 Firefox/1.5.0.6

Rom · Message par **Rom** » 22 août 2006, 17:35

Oki Oki merci beaucoup !

Je vais essayer d'utiliser tout ça ! Merci d'avoir rpis le temps de m'aider

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.1) Gecko/20060111 Firefox/1.5.0.1

Rom · Message par **Rom** » 22 août 2006, 17:49

Ca a marché !

Super, merci encore !

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.1) Gecko/20060111 Firefox/1.5.0.1

Message par **chinon37** » 23 août 2006, 09:47

l'extension KaZcadeSpermet de créer les feuilles de styles sans connaitre l'ensemble des noms de propriétés des éléments. c'est une version débuggée de l'éditeur css de Nvu.
Les feuilles de style sont créées de façon assez intuitive.

Rom · Message par **Rom** » 23 août 2006, 12:22

Et comment l'installe t-on ? Je dois placetr le fichier où ?

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.1) Gecko/20060111 Firefox/1.5.0.1

Message par **chinon37** » 23 août 2006, 14:45

Comme toute extension,
dans nvu, tu vas à "outils" -> extensions -> installer
dans la fenêtre qui s'ouvre, tu vas dans le dossier où tu as téléchargée l'extension et tu cliques 2 fois dessus. ( attention que le nom du fichier se termine bien par .xpi)
Tu cliques 2 fois sur le fichier kazcadesxxxxxx.xpi. au bout de 2 secondes environ, il t'est demandé de confirmer l'installation.
Une fois l'installation terminée, tu quittes Nvu et tu l'ouvres à nouveau: l'extension est opérationnelle. Tu peux mettre une icone (une palette de peintre) dans la barre d'outils pour ouvrir l'éditeur css plus rapidement.
Quand tu lanceras l'éditeur css par "outils" ou l'icone, ce sera désormais kazcades qui s'ouvrira.

Geckozone

Feuille de style

Feuille de style

Qui est en ligne ?