Cours HTML les feuilles de style CSS, tutoriel & guide de travaux pratiques en pdf.
Les feuilles de style CSS
Definition et principe
Jusqu’ici, nous avons vu que HTML sert a stucturer un contenu, par exemple titre, insertion d’images, liens internet. CSS est l’abreviation de Cascading Style Sheet, qui pourrait se traduire par Feuilles de Style en Cascade.
La difference entre HTML et CSS par un petit exemple : si on se rend sur le site RPN, on devrait voir ceci (figure 3)
Maintenant, sans le CSS, voici ce qu’on obtiendrait (figure 4) (le jeu des 10 differences)
En resume, HTML sert a` structurer le contenu, CSS sert a` formater le contenu structure.
Mais pourquoi donc faire du CSS ?
Bonne question ! Pour y repondre, ouvrez votre navigateur et rendez-vous sur votre site favori, puis demandez-vous pourquoi toutes les pages ont le meme aspect ? Simplement parce-que toutes ces pages sont liees a une meme feuille de style… Les avantages sont evidents :
• le contrˆole de la presentation de plusieurs documents par une seule feuille de style.
• un controle plus pr´ecis de la presentation.
• des presentations differentes en fonction du media utilise (typiquement, une feuille de style speciale selon la consultation via un smartphone ou un ecran d’ordinateur).
Comment ca¸ marche ?
il existe plusieurs fa¸cons de faire du CSS :
• en interne (pas biennnnnn !), c’est a` dire dans la balise HTML.
Un exemple : pour donner un magnifique fond rouge a` notre page, nous pouvons inclure un attribut dans la balise body <body style= »background-color=red; »> . Le fond de la page sera rouge… admettons maintenant que le site poss`ede trente pages : il faudra copier trente fois la balise. Puis si on veut changer la couleur, et biennnn, il faut la changer sur les trente pages !
On comprend ais´ement que ce n’est pas une bonne solution, et de toute fa¸con, ce n’est pas la philosophie du CSS !
• en feuille de style externe (biennnnnn !). Il faudra alors cr´eer une feuille de style, en la nommant par exemple ”style.css”, puis placer dans le head la balise
<link rel= »stylesheet » type= »tex/css » href= »style.css »> et dans ce cas, on place la feuille de style dans le mˆeme dossier que le document html. Pour notre exemple, la feuille de style contiendrait les lignes :
body { background-color: red;
}
Avantage de cette m´ethode : une seule feuille de style pour autant de pages HTML que l’on veut !
Pour commencer en CSS
Nous allons donner ici une liste des principaux attributs, mais il faut savoir que le CSS offre enormement de possibilites ! Pour avoir une vision plus complete il vaut mieux se referer a des tutoriels sur internet, comme par exemple ceux du site HTML.net. Il faut aussi etre raisonnables, parce-que devant la profusion de possibilites, il y a un risque d’en faire trop (voir chapitre 4)…
FIGURE 5 – Du style…
Couleurs et arrieres-plans
• color : d´etermine la couleur d’avant plan. Exemple : si on veut que les titres de niveau 1 soient rouges, on ins`ere dans la feuille de style :
h1 {
color: red;
}
En g´en´eral, les noms des couleurs sont en anglais, pour les couleurs de base. Pour une liste de couleurs standard du web plus fournie : voir ici. Il suffit de copier le code en hexad´ecimal pr´ec´ed´ d’un # , exemple #b0c4de.
• background-color : d´efinit la couleur d’arri`ere-plan d’un el´ement. Exemple : si on veut que le corps de la page soit rouge ( !), on ins`ere dans la feuille de style :
body { background-color: red;
}
• background-image : ins`ere une image d’arri`ere-plan. Exemple : si on veut que les para-graphes aient une image image.jpg en fond, on ins`ere dans la feuille de style :
p {
background-image: url(« image.jpg »);
}
Seuls les formats suivants sont g´er´es en HTML :
– ∗.jpg, image compress´ee, id´eal de par la taille des fichiers g´en´er´es (chargement rapide de la page)
– ∗.png, plus volumineuses, mais permettant plus d’options, par exemple la transparence.
– ∗.gif, mˆemes caract´eristiques que le png, mais permettant par exemple les images anim´ees.
Attention ! concernant les chemins vers des el´ements externes, il faut ˆetre tr`es rigoureux : dans l’exemple pr´ec´edent, l’url vers l’image indique que celle-ci est localis´ee dans le mˆeme dossier que le fichier html. Si, par exemple on cr´ee un sous-dossier Images dans le dossier ou se trouve le fichier html, le chemin devient : Images/image.jpg
• background-repeat : r´ep`ete l’image d’arri`ere-plan. Plusieurs possibilit´es :
– repeat-x : l’image se r´ep`ete horizontalement.
– repeat-y : l’image se r´ep`ete verticalement.
– repeat : l’image se r´ep`ete horizontalement et verticalement (par d´efaut).
– no-repeat : l’image ne se r´ep`ete pas.
Exemple : si on veut que les paragraphes aient une image image.jpg en fond qui se r´ep`ete horizontalement et verticalement, on ins`ere dans la feuille de style :
p {
background-image: url(« image.jpg »);
background-repeat: repeat;
}
• background-attachement : d´efinit si l’image est fixe ou d´efile avec la page.
– scroll : l’image d´efile avec la page (non bloqu´ee).
– fixed : l’image est bloqu´ee (utile pour des bani`eres de haut de page, par exemple).
Exemple : si on veut que le body poss`ede une image d’arri`ere-plan fixe, on ins`ere dans la feuille de style :
body {
background-image: url(« image.jpg »);
background-attachement : fixed;
}
• background-position : par d´efaut, l’image d’arri`ere-plan se positionnera dans le coin sup´erieur gauche de l’´ecran. Cette propri´et´ permet de changer cette position et de placer l’image n’im-porte o`u sur l’´ecran.
Exemple : si on veut que le body poss`ede une image d’arri`ere-plan fixe positionn´ee a` 5cm de la gauche et 5cm du haut de la page, on ins`ere dans la feuille de style :
body {
background-image: url(« image.jpg »);
background-position: 5cm 5cm;
}
Dans tous ces cas ainsi que les suivants on peut bien sˆur utiliser plusieurs attributs a` la fois !
Exercice
A l’aide de Quanta+(1), cr´eez un fichier nomm´e ≪ exercice.html ≫ dans laquelle vous ins´ererez via une feuille de style ≪ style.css ≫ l’image ≪ lac.png ≫ qui se trouve ici. Comme style pour le body, nous voulons que :
– l’image soit dans une position fixe, sans r´ep´etition, a` une position 50% de la droite et 0% du haut de la page
– le body soit de la couleur #b0c4de (nuance de bleu-gris).
Les polices
Attention : quand vous utilisez une police dans une page web, elle ne s’affichera que si l’inter-naute a la mˆeme police install´ee sur son ordinateur.
– Vous n’avez aucun moyen de forcer l’internaute a` t´el´echarger et installer une police, pas mˆeme automatiquement.
– Vous n’avez non plus aucune garantie sur les polices pr´esentes sur l’ordinateur de l’internaute.
– Vous n’avez donc aucune garantie sur la mani`ere dont votre page sera rendue dans les navi-gateurs.
Il faut donc faire ≪ au mieux ≫, c’est a` dire sp´ecifier des polices (en esp´erant qu’elles seront pr´esentes), et sp´ecifier d’autres noms de polices alternative (si possible proches de celle que vous souhaiteriez).
• font-family : sert a` indiquer la liste des polices a` utiliser pour l’affichage d’un el´ment donn´e ou de toute une page Web. Il n’est bien entendu pas obligatoire de changer la police, encore moins de m´elanger 5 types de polices sous pr´etexte qu’on peu le faire…
Exemple : si on veut que les titres de niveau 1 soient dans la police arial, et si le navigateur ne peut l’afficher, il essaye verdana, sans serif 1 , on ins`ere dans la feuille de style :
h1 {
font-family: arial, verdana, sans-serif;
}
• font-style : d´efinit le style de la police utilis´ee, a` savoir normal ou italique (italic). Si on veut que dans l’exemple pr´ec´edent, les titres de niveau 1 soient italiques, on ins`ere dans la feuille de style :
h1 {
font-family: arial, verdana, sans-serif; font-style: italic;
}
• font-variant : indique la variante de la police, a` savoir normal (comme son nom l’indique…) ou small-caps (majuscules dont la taille est r´eduite a` la tailles des minuscules). Toujours dans le mˆeme exemple, on veut les titres en petites majuscules, donc on ins`ere dans la feuille de style :
h1 {
font-family: arial, verdana, sans-serif; font-variant: small-caps;
}
• font-size : sert a` indiquer la taille de la police, avec 3 ´ecritures possibles. Pour des titres h1 en taille 30px, des h2 de 12 points et h3 de 120% de la normale , on ins`ere dans la feuille de style :
h1 { font-size: 30px;
}
h2 { font-size: 12pt;
}
h3 { font-size: 120%;
}
• font-weight : d´ecrit avec quel degr´ de gras pr´esenter la police. Elle peut ˆetre normale (normal) ou grasse (bold). Certains navigateurs permettent mˆeme d’utiliser des nombres entre 100 et 900 (les centaines) pour d´ecrire la graisse de la police.
Exemple : un paragraphe avec la police en gras,
p { font-weight: bold;
}
1. serif : voir la d´efinition ici
Exercice
Poursuivons l’exercice pr´ec´edent, en ajoutant comme titre de niveau 1 ”Le lac de Neuchˆatel” et comme texte (`a copier-coller et placer dans une balise <p></p>) :
Neuchˆatel est une commune de Suisse, chef-lieu du canton de Neuchˆatel et du district de Neuchˆatel. Situ´ee au bord du lac de Neuchˆatel, sur le flanc sud du massif du Jura, elle fait face a` la chaˆıne des Alpes. Neuchˆatel est cit´ee pour la premi`ere fois en 1011. Elle est g´er´ee par des comtes de Neuchˆatel jusqu’en 1458, puis passe sous l’autorit´e de la famille d’Orl´eans-Longueville jusqu’en 1707. La ville est ensuite sous l’autorit´e des rois de Prusse jusqu’en 1848, tout en ayant d`es 1814 adh´er´ a` la Suisse en formant le canton de Neuchˆatel. L’´economie de la ville a longtemps et´ li´ee a` l’administration (ville la plus importante de la r´egion) et à l’a-griculture (vigne). Elle a et´ domin´ee par le commerce international au XVIIIe si`ecle, puis par les secteurs secondaire (horlogerie) et tertiaire. Au tournant des XIXe et XXe si`ecles plusieurs hotels sont construits pour soutenir le tourisme qui accompagne le d´eveloppement du chemin de fer. La region est fortement industrielle avec la chocolaterie Suchard, les forges et scieries Martenet, l’horlogerie et la fabrication d’indiennes qui se d´eveloppent durant le XIXe si`ecle et s’effondrent a` la fin du XXe si`ecle. Elle se renouvelle aujourd’hui grˆace aux technologies de pointe. La ville est egalement connue pour son université, son club de football, ses activit´es de hautes technologies et, sur le plan touristique, par son bourg m´edi´eval et sa situation. Elle a en outre et´ l’une des quatre villes organisatrices d’Expo.02.
Vous constaterez que le resultat n’est pas tres joli… en effet, il vous faut inserer des sauts de lignes avant le titre pour qu’il n’empi`ete pas sur l’image ainsi que dans le texte pour l’aerer. Dans un prochain chapitre, nous verrons une autre mani`ere de proc´eder, en placant les elements sur la page.
Ensuite, nous appliquerons les el´ements de style suivants :
– titre de niveau 1 , sera de la famille arial de taille 60 pixels et italique.
– le texte du paragraphe sera de la famille ≪ Times New Roman ≫ (il faut mettre des guillemets a` cause des espaces dans le nom) et de taille 120%.
1 Utilisation du logiciel Quanta+
2 Les feuilles de style CSS
2.1 D´efinition et principe
2.2 Mais pourquoi donc faire du CSS ?
2.3 Comment ¸ca marche ?
3 Pour commencer en CSS
3.1 Couleurs et arrieres-plans
3.2 Exercice
3.3 Les polices
3.4 Exercice
3.5 Le texte
3.6 Exercice
3.7 Les liens
3.8 Exercice
4 Petite parenthese sur la presentation d’une page web
5 Pour aller plus loin
5.1 Identification et regroupement d’elements (class et id)
5.1.1 Regroupement en classes (class)
5.1.2 L’identification d’un element par son identifiant (id)
5.1.3 Deux balises qui ne font rien..
5.2 Exercice
5.3 C’est dans la boite !
5.3.1 gerer les marges d’un element
5.3.2 Gerer les espacements d’un element
5.3.3 Les bordures
5.3.4 La hauteur et la largeur
5.3.5 Le positionnement sur la page
5.4 Exercice
5.5 Les elements flottants
5.6 Exercice
6 Et pour la suite ?
Télécharger le cours complet
