Différences

Ci-dessous, les différences entre deux révisions de la page.

--- les_bases_du_css [2018/02/01 16:04]
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 ======
@@ Ligne 7: / Ligne 11: @@
 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">
+  <link rel="stylesheet" type="text/css" href="style.css">
 ====== La syntaxe du CSS ======
@@ Ligne 15: / Ligne 19: @@
 Le principe de la syntaxe est très simple :
-  sélecteur { propriété : valeur; }
+  sélecteur {
+  propriété : valeur;
+  }
 **La commande 'Move'**
@@ Ligne 21: / Ligne 27: @@
 Exemples :
-  body { background: #FFFFFF; }
+  body { background: #ffffff; }
   h1 {font-family : Georgia ;}
   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 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'**
-La commande ren permet de renommer un fichier.
-  rename "C:\Documents and Settings\alexis\Mes documents\test\*.itf" "*.xls"
-**La commande 'Type'**
-La commande type permet d'afficher le contenu d'un fichier ascii.
-  ex
-**La commande 'Edit'**
-La commande edit permet d'afficher le contenu d'un fichier ascii dans l'éditeur, pour le modifier.
-  ex
+  h1, h2, h3, h4, h5, h6 {
+  color: #009900;
+  }
-**La commande 'Attrib'**
+Vous pouvez mettre des commentaires dans votre code avec la syntaxe suivante :
-La commande attrib permet de visualiser les attributs d'un fichier, et sa permet également de les modifiers.
+  /* Commentaire ici */
+====== Les sélecteurs spécifiques : class et id ======
-  ex
+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 'Format'**
+  .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 commande format permet de formater un disque ou une disquette..
+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 :
-  ex
+  #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>

Wiki SIO LEDANTEC

Outils pour utilisateurs

Outils du site

Différences

Outils de la page