Structure D'un Fichier Css

Temps d'étude : 30 min. Niveau : Facile.
Tags : Structure D'un Fichier Css
Fichier(s) utile(s) pour ce cours : structure.css

Structure d'un fichier CSS

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

explications Html / 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.

structure.css
	/* 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 cela va permettre de personnaliser et mettre en forme la balise header présente dans le fichier structure.html
    Nous lui ajoutons la propriété height: 100px; cela permet de dire que la hauteur de cette zone fera précisément 100 pixels.
    La propriété background: #f98f32; (orange) permet de lui attribuer une couleur de fond afin de la voir apparaitre.

  • nav cela va nous permettre de personnaliser et mettre en forme la balise nav présente dans le fichier structure.html
    Height : Hauteur fixe
    background : Fond.

  • section cela va nous permettre de personnaliser et mettre en forme la balise section présente dans le fichier structure.html
    La propriété min-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).
    background : Fond.

  • article cela va nous permettre de personnaliser et mettre en forme la balise article présente dans le fichier structure.html
    min-height : Hauteur minimum
    background : Fond.

  • footer cela va nous permettre de personnaliser et mettre en forme la balise footer présente dans le fichier structure.html
    height : Hauteur fixe
    background : Fond.

fléche Bon à savoir
1 pixel est une unité de mesure.
1 code couleur s'écrit dans les lettres de A à F et numéro de 0 à 9 (composé de 3 ou 6 caractères (chiffre ou lettre, chiffre et lettre)).


fléche Attention
Votre fichier doit absolument être enregistré (vous pouvez vous fier à l'icone représentant une disquette (bleu = enregistré. rouge = non-enregistré).


explications Html / Css

Qu'est-ce qu'un selecteur en css ?

Un selecteur en CSS est un mot reconnu à la lecture du navigateur. Ce mot doit être présent dans le fichier Html pour que la liaison soit faite.

Exemple avec un selecteur de balise :

structure.html :
		

structure.css :
		article{  }
	

Les commentaires en css

Afin de mettre des annotations dans votre code, vous pouvez utiliser les commentaires en CSS de la manière suivante :

		/* commentaire en CSS */
	
L'ordre de saisie n'a pas d'importance dans le fichier CSS.

Observons le rendu à l'écran dans le navigateur !

Pour observer le rendu de votre page web dans votre navigateur, vous pouvez toujours passer par l'éditeur notepad :

explications Html / Css

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).

explications Html / Css

Voici le rendu que vous devriez avoir :

Le Résultat
explications Html / Css



Nous pouvons remarquer que le Html et Css sont complémentaires et fonctionnent conjoitement ensemble !

Question : « c'est moche ta page multicouleurs ! »
Réponse : nous ne cherchons pas à faire beau pour un premier exemple mais à faire quelque chose de compréhensible.

Question : « je ne comprends pas à quoi ça sert »
Réponse : Et bien, nous colorons (via le css) les zones que nous avons en notre possession (via le html) pour les faire apparaitre et pouvoir travailler à l'intérieur.

Question : « ça ne ressemble pas à un site web »
Réponse : Détrompez vous ! La plupart des sites web sont construits de cette manière, c'est à dire que nous commençons par colorer les zones pour mieux les voir et travailler à l'intérieur, et seulement à la fin nous les "décolorons" pour le rendu graphique.

Un site c'est avant tout une série d'emplacements et de zones : un zoning !

Editer le Html et Css conjoitement

Vous pouvez mettre votre code html et votre code css « côte à côte » sur l'éditeur notepad :

explications Html / Css

Pour avoir ces 2 onglets « côte à côte », vous devez effectuer un clic droit sur l'un des deux onglets et cliquer sur « Déplacer vers l'autre vue ».

Les raccourcis

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+Apermet de selectionner tout le texte/code
Ctrl+Xpermet de couper une partie de texte
Ctrl+Cpermet de copier une partie de texte
Ctrl+Vpermet de coller une partie de texte
Ctrl+Dpermet de dupliquer une ligne
Ctrl+Tpermet d'inverser la position d'une ligne avec une autre
Ctrl+Zpermet d'annuler la dernière action
Ctrl+Ypermet de rétablir la dernière action annulée (par le Ctrl+Z)
Ctrl+Spermet d'enregistrer le fichier
Ctrl+Gpermet 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+Fpermet de rechercher à l'intérieur d'un ou plusieurs fichiers/dossiers
Ctrl+Hpermet de remplacer un morceau de texte par un autre
Ctrl+Lpermet de supprimer une ligne
Ctrl+Wpermet de fermer la fenêtre ou l'onglet actuellement ouvert
Ctrl+Ppermet d'imprimer le fichier
Ctrl+Opermet d'ouvrir un nouveau fichier
Ctrl+Npermet de créer un nouveau fichier
Ctrl+Tabpermet de se déplacer dans les différents onglets ouverts
Ctrl+espacepermet d'avoir des suggestions : l'auto-complétion !
Ctrl+Alt+Shift+Xpermet d'exécuter le code dans firefox
Ctrl+Fleche du hautpermet de scroller sans changer de ligne (et sans la souris)


WINDOWS
Raccourci Clavier Description
Alt+Tabpermet de se déplacer dans les différentes fenêtres ouvertes
Windows+Mpermet de revenir sur le bureau
Alt+F4permet de fermer une fenêtre ouverte
Ctrl+NLorsqu'un dossier est ouvert et affiché, cela permet d'ouvrir une nouvelle fenêtre au même emplacement
Ctrl+ double clicpermet d'ouvrir un dossier dans une nouvelle fenêtre
Widows+Flechepermet 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+Entrerpermet de revenir sur la page
Ctrl+shift+supprpermet de vider ou supprimer des données : cookie, cache, etc.
Ctrl+Upermet d'accèder au code-source la page
Ctrl+Jpermet d'afficher les téléchargements