Outils pour utilisateurs
les_bases_du_css
Différences
Ci-dessous, les différences entre deux révisions de la page.
| Les deux révisions précédentes Révision précédente Prochaine révision | Révision précédente | ||
|
les_bases_du_css [2018/02/01 16:11] alan.royer |
les_bases_du_css [2018/02/01 16:26] (Version actuelle) alan.royer |
||
|---|---|---|---|
| Ligne 1: | Ligne 1: | ||
| + | {{:logo-2582747_1920.png?nolink&200 |}} | ||
| + | |||
| + | |||
| + | |||
| ====== Pourquoi utiliser le CSS ====== | ====== Pourquoi utiliser le CSS ====== | ||
| Ligne 15: | Ligne 19: | ||
| Le principe de la syntaxe est très simple : | Le principe de la syntaxe est très simple : | ||
| - | sélecteur { propriété : valeur; } | + | sélecteur { |
| + | propriété : valeur; | ||
| + | } | ||
| **La commande 'Move'** | **La commande 'Move'** | ||
| Ligne 21: | Ligne 27: | ||
| Exemples : | Exemples : | ||
| - | body { background: #FFFFFF; } | + | body { background: #ffffff; } |
| h1 {font-family : Georgia ;} | h1 {font-family : Georgia ;} | ||
| p {color : red;} | p {color : red;} | ||
| - | La première instruction affichera le fond de page en couleur #FFFFFF. | + | La première instruction affichera le fond de page en couleur #ffffff. |
| La seconde instruction écrira les titres de rang 1 (h1) avec la police Georgia. | La seconde instruction écrira les titres de rang 1 (h1) avec la police Georgia. | ||
| Ligne 33: | Ligne 39: | ||
| Si vous définissez une police de type "Trebuchet MS" sur la balise <body>, l'ensemble des autres éléments du site prendra comme police Trebuchet MS, inutile de le redéfinir à chaque élément. C'est le système "en cascade". Vous pouvez aussi combiner les éléments HTML qui regroupent les mêmes caractéristiques : | Si vous définissez une police de type "Trebuchet MS" sur la balise <body>, l'ensemble des autres éléments du site prendra comme police Trebuchet MS, inutile de le redéfinir à chaque élément. C'est le système "en cascade". Vous pouvez aussi combiner les éléments HTML qui regroupent les mêmes caractéristiques : | ||
| - | h1, h2, h3, h4, h5, h6 { color: #009900; } | + | h1, h2, h3, h4, h5, h6 { |
| + | color: #009900; | ||
| + | } | ||
| Vous pouvez mettre des commentaires dans votre code avec la syntaxe suivante : | Vous pouvez mettre des commentaires dans votre code avec la syntaxe suivante : | ||
| /* Commentaire ici */ | /* Commentaire ici */ | ||
| + | | ||
| + | ====== Les sélecteurs spécifiques : class et id ====== | ||
| + | |||
| + | Pour ne sélectionner que certains passages, on a recours aux classes ou aux ID. | ||
| + | Voici un texte avec des mots en gras et vert alors que le reste ne change pas : | ||
| + | code css : | ||
| + | |||
| + | .vertgras{ | ||
| + | color: #008080; | ||
| + | font-weight: bold; | ||
| + | } | ||
| + | | ||
| + | code html : | ||
| + | avec des mots | ||
| + | <span class="vertgras"> | ||
| + | en gras et vert | ||
| + | </span> | ||
| + | alors que le reste ne change pas | ||
| + | |||
| + | La déclaration d'un ID en CSS est identique à la notion de class à une exception près : | ||
| + | On ne peut déclarer une seule fois un ID. | ||
| + | On utilise souvent les ID pour définir la struture générale du site (le haut, contenu, navigation...) | ||
| + | Remarque : En CSS, pour les sélecteurs, on utilise un # pour les id et un "." pour les classes. | ||
| + | code css : | ||
| + | |||
| + | #entete { | ||
| + | border: 1px solid #666; | ||
| + | width: 80%; | ||
| + | background: #ffffff; | ||
| + | } | ||
| + | | ||
| + | code html : | ||
| + | <div id="entete"> | ||
| + | la le haut de ma page sera encadré avec une largeur de 80%, et un fond de couleur #ffffff . | ||
| + | </div> | ||
les_bases_du_css.1517497873.txt.gz · Dernière modification: 2018/02/01 16:11 par alan.royer
Outils de la page
Sauf mention contraire, le contenu de ce wiki est placé sous les termes de la licence suivante : CC Attribution-Share Alike 4.0 International
