Nous allons créer (ou éditer pour ceux qui l'ont déjà créé) notre fichier structure.css qui doit se trouver au même endroit (dans le même dossier) que le fichier structure.html pour démarrer !
Pour rappel, nous travaillons à l'intérieur du dossier suivant : /HtmlCss/Structure/structure.css
Dans notre exemple ci-dessous, nous pouvons apercevoir que le code s'écrit entre des accolades { }
, les selecteurs apparaissent en blanc, les propriétés en bleu et les valeurs en vert.
/* commentaire en css */ header{ height: 100px; background: #f98f32; } nav{ height: 30px; background: #20DDF2; } section{ min-height: 300px; background: #F2F220; } article{ min-height: 200px; background: #F2F220; } footer{ height: 100px; background: #f98f32; }Décryptons ensemble les données saisies :
header
présente dans le fichier structure.htmlheight: 100px;
cela permet de dire que la hauteur de cette zone fera précisément 100 pixels.background: #f98f32;
(orange) permet de lui attribuer une couleur de fond afin de la voir apparaitre.
nav
présente dans le fichier structure.htmlsection
présente dans le fichier structure.htmlmin-height
permet de fixer une hauteur minimum. C'est à dire qu'en l'état, la zone section
est prévue pour faire 300 pixels de hauteur, mais si jamais du texte, image ou tout autre type de contenu est ajouté à l'intérieur, cette zone pourra faire 300, 400, 500, voir 1000 pixels de hauteur et bien plus ! cela sera régi par le contenu à l'intérieur de la zone (et non plus par notre limite d'origine).article
présente dans le fichier structure.htmlfooter
présente dans le fichier structure.htmlarticle{ }
/* commentaire en CSS */L'ordre de saisie n'a pas d'importance dans le fichier CSS.
Pour observer le rendu de votre page web dans votre navigateur, vous pouvez toujours passer par l'éditeur notepad :
Vous pouvez aussi vous rendre directement sur l'emplacement de votre fichier pour effectuer un double clic gauche ou un clic droit > ouvrir avec > firefox (ou un autre navigateur).
Voici le rendu que vous devriez avoir :
Vous êtes fan des raccourcis clavier ? Vous trouvez cela plus rapide ? voici une liste des raccourcis clavier pour windows, notepad et votre navigateur qui pourront vous rendre service :
NOTEPAD | ||
---|---|---|
Raccourci Clavier | Description | |
Ctrl+A | permet de selectionner tout le texte/code | |
Ctrl+X | permet de couper une partie de texte | |
Ctrl+C | permet de copier une partie de texte | |
Ctrl+V | permet de coller une partie de texte | |
Ctrl+D | permet de dupliquer une ligne | |
Ctrl+T | permet d'inverser la position d'une ligne avec une autre | |
Ctrl+Z | permet d'annuler la dernière action | |
Ctrl+Y | permet de rétablir la dernière action annulée (par le Ctrl+Z) | |
Ctrl+S | permet d'enregistrer le fichier | |
Ctrl+G | permet de se déplacer à un numéro de ligne précis (sans avoir à scroller) | |
Ctrl+Q (ou Ctrl+Shit+Q) | permet de mettre en commentaire une partie du fichier | |
Ctrl+F | permet de rechercher à l'intérieur d'un ou plusieurs fichiers/dossiers | |
Ctrl+H | permet de remplacer un morceau de texte par un autre | |
Ctrl+L | permet de supprimer une ligne | |
Ctrl+W | permet de fermer la fenêtre ou l'onglet actuellement ouvert | |
Ctrl+P | permet d'imprimer le fichier | |
Ctrl+O | permet d'ouvrir un nouveau fichier | |
Ctrl+N | permet de créer un nouveau fichier | |
Ctrl+Tab | permet de se déplacer dans les différents onglets ouverts | |
Ctrl+espace | permet d'avoir des suggestions : l'auto-complétion ! | |
Ctrl+Alt+Shift+X | permet d'exécuter le code dans firefox | |
Ctrl+Fleche du haut | permet de scroller sans changer de ligne (et sans la souris) |
WINDOWS | ||
---|---|---|
Raccourci Clavier | Description | |
Alt+Tab | permet de se déplacer dans les différentes fenêtres ouvertes | |
Windows+M | permet de revenir sur le bureau | |
Alt+F4 | permet de fermer une fenêtre ouverte | |
Ctrl+N | Lorsqu'un dossier est ouvert et affiché, cela permet d'ouvrir une nouvelle fenêtre au même emplacement | |
Ctrl+ double clic | permet d'ouvrir un dossier dans une nouvelle fenêtre | |
Widows+Fleche | permet de positionner les fenêtres de manière plus précise (sous windows seven) |
NAVIGATEUR (FireFox, GoogleChrome, InternetExplorer, Opera, Safari) |
||
---|---|---|
Raccourci Clavier | Description | |
Ctrl+R F5 | permet d'actualiser (rafraichir) la page | |
F6+Entrer | permet de revenir sur la page | |
Ctrl+shift+suppr | permet de vider ou supprimer des données : cookie, cache, etc. | |
Ctrl+U | permet d'accèder au code-source la page | |
Ctrl+J | permet d'afficher les téléchargements |
HTML CSS
1. Introduction Html Css 2. Structure D'une Page Html 3. Structure D'un Fichier Css 4. Les Polices D'ecriture 5. Les Selecteurs 6. Firebug 7. Styles Css 8. L'heritage 9. Les Images 10. Les Positionnements 11. Le Zoning 12. Les Tableaux 13. Les Listes 14. Les Liens Et Ancres 15. Menu De Navigation 16. Les Formulaires 17. Donnees Multimedia 18. Balises Html Et Proprietes Css 19. Cas Pratique 20. Creation D'un Site Web