Les feuilles de style peuvent simplifier votre tâche au niveau de la présentation graphique de votre page web.
Dans cette activité, vous vous servirez d'un modèle de feuille de style afin de bien comprendre la structure d'une feuille de style.
Directives
Rappel : une feuille de style est composée d'un sélecteur, d'une propriété et d'une valeur de propriété.
Exemple :
Sélecteur {Propriété : Valeur ;}
H1 {COLOR:red;}
Créez une nouvelle page à votre portfolio en sélectionnant l'assistant HTML et en affichant la directive 2105
Affiche les assistants et
Inscrivez le titre : Ma première feuille de style
Inscrivez la matière : Informatique
Inscrivez le no de la directive : 2105
Sélectionnez le modèle Documentbase de la boîte à liste déroulante INSÉRER UN MODÈLE (Boîte rose)
Enregistrez et visualisez cette page
Observez que dans cette page vous avez ;
- vos balises d'en-tête (HEAD) contenant un titre de page (TITLE)
- votre corps de page (BODY) contenant :
- un titre de niveau 1 dans la page (H1)
- un titre de niveau 2 dans la page (H2)
- un titre de niveau 3 dans la page (H3)
- un paragraphe (P)
- une image (IMG)
- un lien sur texte (A)
Placez votre curseur dans la section HEAD de votre document et insérez la feuille de style "Css2" à partir de la boîte à liste déroulante INSÉRER UN MODÈLE de la barre d'outil HTML (boîte rose)
Visualisez votre page
Observez les modifications apportées à l'apparence de votre page.
Observez bien votre code afin de comprendre l'utilisation des feuilles de styles.
Vous avez probablement remarqué que l'affichage de vos éléments de page a été modifié conformément à votre feuille de style:
Ainsi :
Les sélecteurs suivants de la feuille de style ont été utilisés :
- body { background-color : yellow; color : black;} afin de paramétrer la couleur du texte et du fond de page
- h1 { background-color : white ; color : red;} afin de paramétrer la balise Titre de niveau 1
- h2 { color : blue;} afin de paramétrer la balise Titre de niveau 2
- h3 { color : pink;} afin de paramétrer la balise Titre de niveau 3
- p { background-color: #0000ff;} afin de paramétrer le paragraphe
Modifiez ensuite votre feuille de style afin de définir pour chacun des sélecteurs 3 couples propriétés:valeurs différents de votre choix.
Exemple :
h1{color:red;font-size:large;border:1px solid red;} Utilisez au besoin la boîte à liste déroulante AIDE-CSS-FEUILLE DE STYLE
Enregistrez votre travail
Affichez votre travail et apportez les corrections au besoin