Ou déclarer le CSS sur votre site web ?
Codage Actif :: Divers :: Les cours :: Le CSS
Page 1 sur 1
Ou déclarer le CSS sur votre site web ?
Sur un site web lambda, vous pouvez insérer du CSS à 3 endroits différents :
- Dans un fichier .css (Méthode conseillée)
- Dans la l'entête de votre page
- Dans chacun des éléments HTML (Méthode déconseillée)
Pour cela, il suffit de créer un fichier style.css (Vous pouvez le nommer autrement, il faut juste qu'il soit en .css)
Dedans vous pourrez y mettre tout votre style, comme par exemple :
Ensuite, vous allez créer une page .html ou .php, ici on la nommera index.html
Voici la page avant que le fichier CSS soit déclaré :
Et ensuite on va le déclarer grâce à ce morceau de code dans la balise head:
Ce qui donnera sur votre fichier :
Nous allons créer une page nommé index.html.
Voici la page avant que le fichier CSS soit déclaré dans l'entête :
Puis nous allons utiliser le même petit CSS que tout à l'heure, c'est à dire
Pour pouvoir déclarer ce CSS dans notre page, il suffit de créer une balise style dans l'entête de la page :
Voici donc lorsque je met le code CSS énoncé tout à l'heure
Nous allons (encore) créer une page nommée index.html.
Lorsque je vous ai dit le déclarer par élément, dans mon exemple il n'en existe que deux :
ainsi que
Donc la on va simplement leurs donner un attribut. Comme si on donnait une classe, mais la c'est du style.
Donc par exemple, sur notre titre (h1)
Il suffit juste de rentrer le CSS en le mettant sur une seule ligne, donc par exemple :
Mon titre seras donc gros de 36 pixels, de couleurs bleu avec une marge de 10 pixels à gauche.
En cours de rédaction.
Je pense que le choix est simple : Enregistrer dans un fichier .css
Si on décide de changer de design, les changements de feront sur toutes les pages instantanément.
De plus on a a rentrer le code CSS qu'une seule fois.
Tandis que si on prend le CSS dans l'en-tête, il faudra re-modifier chaque page lors d'un nouveau design.
On doit en plus rentrer le code CSS 1 fois par page.
Si on décide de faire un nouveau design lorsque que l'on a utilisé la méthode 3, c'est long.
On doit rentrer le code CSS autant de fois qu'il y a d'élément sur la page. Et sa peu aller vite.
Vous voyez que les éléments peuvent monter en nombre très vite.
- Dans un fichier .css (Méthode conseillée)
- Dans la l'entête de votre page
- Dans chacun des éléments HTML (Méthode déconseillée)
Déclarer le style dans un fichier .css (Conseillé)
Pour cela, il suffit de créer un fichier style.css (Vous pouvez le nommer autrement, il faut juste qu'il soit en .css)
Dedans vous pourrez y mettre tout votre style, comme par exemple :
- Code:
body {
background-color: blue;
color: white;
}
Ensuite, vous allez créer une page .html ou .php, ici on la nommera index.html
Voici la page avant que le fichier CSS soit déclaré :
- Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Premiers tests du CSS</title>
</head>
<body>
<h1>Mon super site</h1>
<p>Bonjour et bienvenue sur mon site !</p>
</body>
</html>
Et ensuite on va le déclarer grâce à ce morceau de code dans la balise head:
- Code:
<link rel="stylesheet" href="chemin/vers/style.css" />
Ce qui donnera sur votre fichier :
- Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Premiers tests du CSS</title>
<link rel="stylesheet" href="style.css" /> <!-- J'ai déclaré le style -->
</head>
<body>
<h1>Mon super site</h1>
<p>Bonjour et bienvenue sur mon site !</p>
</body>
</html>
Déclarer le style dans l'entête d'une page
Nous allons créer une page nommé index.html.
Voici la page avant que le fichier CSS soit déclaré dans l'entête :
- Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Premiers tests du CSS</title>
</head>
<body>
<h1>Mon super site</h1>
<p>Bonjour et bienvenue sur mon site !</p>
</body>
</html>
Puis nous allons utiliser le même petit CSS que tout à l'heure, c'est à dire
- Code:
body {
background-color: blue;
color: white;
}
Pour pouvoir déclarer ce CSS dans notre page, il suffit de créer une balise style dans l'entête de la page :
- Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Premiers tests du CSS</title>
<style>
/* On met du CSS ici */
</style>
</head>
<body>
<h1>Mon super site</h1>
<p>Bonjour et bienvenue sur mon site !</p>
</body>
</html>
Voici donc lorsque je met le code CSS énoncé tout à l'heure
- Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Premiers tests du CSS</title>
<style>
body {
background-color: blue;
color: white;
}
</style>
</head>
<body>
<h1>Mon super site</h1>
<p>Bonjour et bienvenue sur mon site !</p>
</body>
</html>
Déclarer le style dans un élément HTML (très déconseillé)
Nous allons (encore) créer une page nommée index.html.
- Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Premiers tests du CSS</title>
</head>
<body>
<h1>Mon super site</h1>
<p>Bonjour et bienvenue sur mon site !</p>
</body>
</html>
Lorsque je vous ai dit le déclarer par élément, dans mon exemple il n'en existe que deux :
- Code:
<h1>Mon super site</h1>
ainsi que
- Code:
<p>Bonjour et bienvenue sur mon site !</p>
Donc la on va simplement leurs donner un attribut. Comme si on donnait une classe, mais la c'est du style.
Donc par exemple, sur notre titre (h1)
- Code:
<h1 style="CSS ICI">Mon super site</h1>
Il suffit juste de rentrer le CSS en le mettant sur une seule ligne, donc par exemple :
- Code:
<h1 style="font-size: 36px; color: blue; margin-left: 10px;">Mon super site</h1>
Mon titre seras donc gros de 36 pixels, de couleurs bleu avec une marge de 10 pixels à gauche.
Quelle solution choisir ?
En cours de rédaction.
Je pense que le choix est simple : Enregistrer dans un fichier .css
Si on décide de changer de design, les changements de feront sur toutes les pages instantanément.
De plus on a a rentrer le code CSS qu'une seule fois.
Tandis que si on prend le CSS dans l'en-tête, il faudra re-modifier chaque page lors d'un nouveau design.
On doit en plus rentrer le code CSS 1 fois par page.
Si on décide de faire un nouveau design lorsque que l'on a utilisé la méthode 3, c'est long.
On doit rentrer le code CSS autant de fois qu'il y a d'élément sur la page. Et sa peu aller vite.
- Code:
<div> <!-- 1er élement -->
<p>
Lorem ipsum <a href="">dolor sit amet</a>. <!-- Lien = 2eme élément -->
</p> <!-- 3eme élement -->
Vous voyez que les éléments peuvent monter en nombre très vite.
Ajesto- Fondateur
- Messages : 115 Points : 3
Codage Actif :: Divers :: Les cours :: Le CSS
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum
|
|