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:01] alan.royer |
les_bases_du_css [2018/02/01 16:26] (Version actuelle) alan.royer |
||
---|---|---|---|
Ligne 1: | Ligne 1: | ||
- | ====== Description ====== | + | {{:logo-2582747_1920.png?nolink&200 |}} |
- | Depuis Windows XP, on parle **d'interpréteur de commandes**, qui émule le système MS-DOS. | + | |
+ | |||
+ | ====== Pourquoi utiliser le CSS ====== | ||
+ | |||
+ | La structure et la présentation sont gérées séparément. Le contenu (le fond) de votre page se gère sur le fichier html, tandis que tout ce qui concerne la présentation (la forme) est concentré sur le fichier CSS. Le code HTML est réduit en taille et en complexité. En changeant une instruction sur le fichier css, on peut modifier l'aspect de toutes les pages du site à la fois. | ||
+ | |||
+ | ====== Où placer son code CSS ====== | ||
+ | |||
+ | Dans un fichier indépendant avec une extension ".css". Exemple : "style.css" | ||
+ | Pour que la page écrite en HTML tienne compte de la présentation définie dans le fichier CSS, on mentionne ce fichier entre les deux balises HTML : <head> et </head> en y écrivant l'instruction : | ||
+ | <link rel="stylesheet" type="text/css" href="style.css"> | ||
====== La syntaxe du CSS ====== | ====== La syntaxe du CSS ====== | ||
Ligne 9: | 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 15: | 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 commande 'Del'** | ||
- | 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. | ||
+ | |||
La troisième instruction écrira les paragraphes (p) en rouge. | La troisième instruction écrira les paragraphes (p) en rouge. | ||
- | ex | + | 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 : |
- | **La commande 'Ren'** | + | h1, h2, h3, h4, h5, h6 { |
+ | color: #009900; | ||
+ | } | ||
- | La commande ren permet de renommer un fichier. | + | Vous pouvez mettre des commentaires dans votre code avec la syntaxe suivante : |
- | rename "C:\Documents and Settings\alexis\Mes documents\test\*.itf" "*.xls" | + | /* Commentaire ici */ |
+ | |||
+ | ====== Les sélecteurs spécifiques : class et id ====== | ||
- | **La commande 'Type'** | + | 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 : | ||
- | La commande type permet d'afficher le contenu d'un fichier ascii. | + | .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 | ||
- | ex | + | 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 : | ||
- | **La commande 'Edit'** | + | #entete { |
- | + | border: 1px solid #666; | |
- | La commande edit permet d'afficher le contenu d'un fichier ascii dans l'éditeur, pour le modifier. | + | width: 80%; |
- | + | background: #ffffff; | |
- | ex | + | } |
- | + | ||
- | **La commande 'Attrib'** | + | code html : |
- | + | <div id="entete"> | |
- | La commande attrib permet de visualiser les attributs d'un fichier, et sa permet également de les modifiers. | + | la le haut de ma page sera encadré avec une largeur de 80%, et un fond de couleur #ffffff . |
- | + | </div> | |
- | ex | + | |
- | + | ||
- | **La commande 'Format'** | + | |
- | + | ||
- | La commande format permet de formater un disque ou une disquette.. | + | |
- | + | ||
- | ex | + |