CSS:
Résumé du cours
CSS (Cascading Style Sheets) est un
langage de style qui permet de formater le
contenu d'un document HTML.
HTML permet de structurer la page (Texte, image,
animation...) Tandis que CSS permet de formater
ce contenu déjà structuré (Texte en gras,
arrière-plan coloré, définition de marges et de
bordures, formatage des liens
hypertextes...)
On
parle de feuilles de styles cascadée (Cascading
Style Sheets) car le CSS peut être écrit dans
une feuille de style à part (et pas forcément
dans le document HTML en cours). Une feuille de
style est identifiée par l'extension .CSS.
Il
existe trois méthodes pour écrire le CSS:
1-
Définition d'un attribut de style local à la
balise:
Dans ce cas le style est défini sous forme
d'attribut d'une balise HTML.
<balise style="syntxe CSS">Objet à formater
</balise>
Dans ce cas CSS est intégré avec le code HTML
dans le même document. Et c'est pas tout, car il
est, en plus, intégré à la balise HTML en tant
que valeur de l'attribut style. Grace à
cet attribut le navigateur s'aperçoit que le
contenu qui suit est du langage CSS et non plus
du HTML.
2-
Définition d'une balise de style dans l'entête
du document:
Le
style peut aussi être intégré dans le document
HTML sous forme d'une balise indépendante. La
balise est <style>. Bien sûr il faut
fermer la balise avec </style> pour
indiquer au navigateur la fin du langage CSS. La
balise <style> est placée dans l'entête du
document HTML, c'est à dire entre <head> et </head>.
<head>
<style> Syntaxe CSS </style>
</head>
3-
Définition d'une feuille de style externe
C'est la méthode la plus intéressante. Elle
consiste à définir une feuille de style externe
supposée style.css. Dans l'entête du
document où on veut exploiter les styles définis
par la feuille on appelle celle-ci par la balise
<link>.
<head>
<link
rel="stylesheet" type="text/css" href="style.css">
</head>
Dans l'exemple précédent nous avons supposé que
la feuille de style est placée dans le même
répertoire que le document HTML qui l'a appelé.
Sinon nous devrons tracer le chemin relatif à la
feuille à partir du dossier courant (C'est à
dire le dossier où se trouve le document HTML).
A
l'instar de son code parent HTML, CSS peut aussi
être commenté. Les délimiteurs du commentaire
CSS sont /* et */. Tout ce qui se trouve entre
les deux délimiteurs est ignoré.
La
syntaxe CSS respecte la structure suivante
(valable pour la 2ème et la 3ème
méthodes):
selecteur_de_balise {
propriété1: valuer1;
propriété2: valuer2;
propriété(i): valeur (i);
}
Le
selecteur de balise est le nom de la balise HTML
à laquelle on veut appliquer le style CSS.
Exemple:
body {
background-color: orange;
/*
Couleur d'arrière-plan du document */
color: black;
/*
Couleur d'avant-plan du document (textes) */
font-family: verdana;
/* Police appliquée aux textes du document */
}
Téléchargement du cours de CSS
 |
