Lier une feuille de style
La syntaxe à respecter afin de lier une
feuille de style à un document HTML est la suivante :
<link rel="stylesheet"
type="text/css" href="Mafeuilledestyle.css" />
Ce code est à placer dans la partie
<head> de la page, comme ceci :
<html>
<head>
<title>Comment relier une CSS à une page?</title>
<link rel="stylesheet" type="text/css" href="Mafeuilledestyle.css" />
</head>
<body>
<p>Ici, je mets le contenu de ma page</p>
</body>
</html>
<head>
<title>Comment relier une CSS à une page?</title>
<link rel="stylesheet" type="text/css" href="Mafeuilledestyle.css" />
</head>
<body>
<p>Ici, je mets le contenu de ma page</p>
</body>
</html>
Décomposition de la syntaxe de la balise link
Pour une meilleure compréhension, nous allons à présent décomposer
la syntaxe de la balise link qui nous permet de créer la liaison entre
notre CSS et notre document HTML.
<link> : cette balise permet de créer une liaison entre
le document HTML et la CSS.
href="Mafeuilledestyle.css" spécifie l’emplacement
(l’URL) du fichier CSS à exploiter.
rel="stylesheet" indique au navigateur que le fichier
lié est une feuille de style CSS.
type="text/css" indique que le contenu du fichier est de
type CSS (déclaration de type MIME).
Ce qui donne dans votre document HTML
<html>
<head>
<title>Titre de la page</title>
<link href="chemin/feuille.css" rel="stylesheet" type="text/css" />
</head>
<body>
</body>
<html>
<head>
<title>Titre de la page</title>
<link href="chemin/feuille.css" rel="stylesheet" type="text/css" />
</head>
<body>
</body>
<html>
Décomposons ensemble la CSS
Analysons ensemble le contenu de la CSS de l’exercice :
body {
background-color: red;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
color: white;
}
background-color: red;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
color: white;
}
Ce style s’applique à la balise <body> de toutes les pages
HTML auxquelles la feuille de style est liée.
Le résultat de la liaison entre la CSS et le document HTML
est :
- le fond de la page de couleur rouge (background-color : red ;),
- le texte en Arial (font-family: Arial, Helvetica, sans-serif;). Des polices de substitution sont proposées (séparées par une virgule) pour le cas où l’ordinateur du visiteur ne disposerait pas de la police indiquée,
- le texte d’une taille de 20px. (font-size: 20px ;),
- le texte de couleur blanche (color: white ;).
- le fond de la page de couleur rouge (background-color : red ;),
- le texte en Arial (font-family: Arial, Helvetica, sans-serif;). Des polices de substitution sont proposées (séparées par une virgule) pour le cas où l’ordinateur du visiteur ne disposerait pas de la police indiquée,
- le texte d’une taille de 20px. (font-size: 20px ;),
- le texte de couleur blanche (color: white ;).
NOTE : px signifie pixel. Un pixel est un point élémentaire (sur un
écran) qui sert à composer une image numérique.
Les propriétés
Maintenant que nous savons ce qu’est un sélecteur, regardons de plus près le contenu qui se
trouve entre accolades {}.
body {
background-color: red;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
color: white;
}
background-color: red;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
color: white;
}
Note : le contenu qui se trouve entre accolades
s’appelle bloc de déclaration CSS.
Dans ce cas-ci, on trouve plusieurs paires propriétés: valeurs;
background-color: red;
font-family: Arial, Helvetica, sans-serif;
…
font-family: Arial, Helvetica, sans-serif;
…
Chaque propriété comporte
une valeur et
se termine par un ; .
Certaines propriétés peuvent avoir plusieurs valeurs, comme font-family dans
l’exemple précité.
Conclusion
Une règle CSS comporte
· un sélecteur
· une propriété
· une valeur
ce qui donne :
sélecteur{propriété: valeur;}
_____
Remarque :
Si vous avez rencontré des problèmes techniques dans ce module, n’hésitez pas à
prendre contact avec notre support technique par e-mail (supportfad@technofuturtic.be). Il
se fera un plaisir de vous aider.
Memo
CSS
« Cascading Style Sheet
» ou « Feuille de style ».
Permet de modifier l’aspect de tout un
site en ne touchant qu’à un seul fichier (la feuille de style) et donc
d’alléger la gestion du site.
<link rel="stylesheet" type="text/css" href="Mafeuilledestyle.css" />
Code à placer dans le <head> de la
page. Ce code lie la feuille de style à la page.
sélecteur {propriété: valeur;}
Structure d’une règle CSS. Une règle peut
comporter plusieurs propriétés, séparées par des point-virgules.
Exemple
p {font-size: 11px;}
Sélecteurs de type
Cette catégorie de sélecteurs CSS cible
les balise . Le sélecteur prendra alors le nom de la balise ciblée (body, p, a,
i, etc.).
Feuille de style externe ou interne ?
Généralement, les feuilles de style CSS sont externes. Cela
implique que le code CSS soit écrit dans un fichier de type texte dont
l’extension est « .css » et qu’une liaison entre le document HTML et la feuille
de style soit réalisée au moyen d’une balise <link> ou d’une règle
@import (cf. point suivant).
Parfois, il est intéressant d’intégrer les styles CSS directement
dans le document HTML. Ces styles internes sont
alors prioritaires par rapport à ceux définis dans une feuille de style
externe.
On utilise généralement des styles internes quand le code CSS ne
concerne que la page dans laquelle ils sont incorporés.
Pour inclure des styles internes dans un document HTML, on utilise
la balise <style> dans
l’en-tête du document :
<html>
<head>
<title>Titre de la page</title>
<style type="text/css">
body{background-color: red;
color: green;}
</style>
</head>
<body>
<p>Hello, World !</p>
</body>
</html>
<head>
<title>Titre de la page</title>
<style type="text/css">
body{background-color: red;
color: green;}
</style>
</head>
<body>
<p>Hello, World !</p>
</body>
</html>
Remarque : rien n’interdit qu’un document HTML contienne une
feuille de style interne et une
liaison vers une ou plusieurs feuilles de style externes.
Dans les exercices pratiques
qui vous seront proposés dans les modules suivants, les styles serontsouvent de types
« internes ».
Pourquoi ma feuille de style est
ignorée ?
Vous avez créé votre CSS, mais votre page reste désespérément sans
couleurs et sans habillage visuel ? Retrouvez ci-dessous l’erreur
classique à éviter.
Faite attention à votre
href !
Et oui, l’erreur courante est un mauvais lien dans votre atrribut
href. Mais elle est détectable. Vérifiez toujours d’abord si le lien entre
votre page HTML et votre CSS est correct (chemin correct vers le fichier
externe, orthographe du nom de fichier).
Une astuce est de taper l’URL complète de votre CSS dans votre
navigateur. Si votre navigateur ouvre le fichier, votre lien est correct, si
votre navigateur ne peut pas afficher la page, votre lien n’est pas correct.
Les différents types de media
L’un des avantages offert par CSS est la possibilité d’utiliser
des CSS spécifiques selon le média utilisé.
On peut ainsi renseigner plusieurs CSS dans un même document
Web ; chacune de ces CSS étant associée à un média particulier au moyen de
l’attribut media.
Exemple :
<link href="Commun/home.css"
rel="stylesheet" type="text/css" media="screen"
/>
Nous allons vous présenter les différents types de media et leurs
utilisations.
Il existe différents types de médias :
· media non paginé -
écran d’ordinateur, de mobile, d’assistant personnel (pda), écran de
télévision,…
· media paginé - projecteur,
impression papier traditionnelle
· media tactile - tablettes
brailles
· media auditif - lecteur
d’écrans, navigateurs vocaux
Suivant le média utilisé,
nous indiquons à celui-ci la CSS à appliquer sur la page HTML à
l’aide de la balise media.
· media="screen" (écran d’ordinateur)
· media="projection" (pour les projecteurs)
· media="handheld" (pour les écrans de petites tailles
(pda))
· media="print" (pour les medias destinés à
l’impression)
· media="tv" (pour le webTV)
· media="all" (pour tous types de media)
Liste complète des
medias
6.13 Les descripteurs de média
Voici
une liste des descripteurs
de média reconnus (entité %MediaDesc; dans le DTD).
screen
Destiné aux
écrans d'ordinateur non-paginés.
tty
Destiné aux
médias utilisant une grille de caractère à pas fixe, tels que les télétypes,
les terminaux ou les appareils portables avec des capacités d'affichage
limitées.
tv
Destiné aux
appareils de type télévision (basse résolution, couleur, défilement limité).
projection
Destiné aux
projecteurs.
handheld
Destiné aux
appareils manuels (petit écran, monochrome, graphique bitmap, faible bande
passante).
print
Destiné aux
supports paginés opaques et aux documents visionnés à l'écran en mode aperçu
avant impression.
braille
Destiné aux
appareils Braille.
aural
Destiné aux
synthétiseurs de parole.
all
Convient pour
tous les supports.
Les
prochaines versions de HTML pourraient introduire de nouvelles
valeurs et autoriser des valeurs paramétrées. Pour préparer l'introduction de
ces extensions, les agents utilisateurs conformes doivent être capables d'analyser la
valeur de l'attribut media de la façon suivante
:
1.
La valeur est une liste d'entrées, séparées par des virgules. Par
exemple :
2. media="screen, 3d-glasses, print and resolution > 90dpi"
cette déclaration correspond à :
"screen"
"3d-glasses"
"print and resolution > 90dpi"
3.
Chaque entrée est tronquée juste avant le premier caractère qui
n'est pas une lettre US ASCII [a-zA-Z] (ISO 10646 hex 41-5a, 61-7a), un chiffre
[0-9] (hex 30-39) ou un trait d'union (hex 2d). Dans l'exemple, cela donnerait
:
4. "screen"
5. "3d-glasses"
6. "print"
7.
Une correspondance sensible à la casse est
alors recherchée avec le jeu des types de média définis précédemment. Les
agents utilisateurs peuvent ignorer les entrées qui n'ont aucune
correspondance. Dans l'exemple, il resterait les valeurs "screen" et
"print".
Remarque : Les déclarations de feuilles de
style peuvent contenir des variations en fonction du média (par exemple, la
structure CSS @media). Auquel
cas, il serait plus approprié d'utiliser la spécification "media=all".
Commentaires dans les CSS
Vous pouvez utiliser les commentaires pour bien organiser votre
CSS.
Un commentaire se compose comme ceci :
/* ceci est un commentaire css */
Tout ce qui est compris entre /* et */ est un commentaire, vous
pouvez dès lors y mettre des annotations personnelles, des recommandations.
Vous pouvez donc indiquer dans votre CSS à quelle partie les
styles ci-dessous sont destinés
/*---------->>> ACCUEIL <<<----------*/
Les différents navigateurs
Lorsque vous concevez des sites Web, il est nécessaire de
connaître les différents navigateurs présents sur le marché. En effet, vous
pourriez envisager de créer un site web visible correctement sur les nouveaux
navigateurs et les plus anciens. Dès lors, il est intéressant de connaître les
différentes versions.
Vous connaissez tous les différents systèmes d’exploitation disponibles dans
le marché de l’informatique. Pour rappel :
PC
· Microsoft Windows
· UNIX / Linux
MAC
· Mac OS X
Suivant ces systèmes d’exploitation, vous avez la possibilité
d’utiliser différents navigateurs.
Navigateurs sous
Microsoft Windows
-----------------------------------------
· Google Chrome
·
Le célèbre navigateur de Google. Rapide, stable et portable.
· Firefox
·
Le navigateur libre le plus connu.
· Opera
http://www.opera.com
·
L'autre navigateur libre le plus connu.
· Internet Explorer
·
Fourni par défaut sous Windows, renommé Edge depuis Windows 10.
Il est préférable de ne pas l'utilisar car il ne respecte pas les standrards
HTML et CSS.
· Comparatif de ces 4
navigateurs.
·
Un comparatif complet, tests à l'appui, de ces 4 navigateurs.
Navigateurs sous MacOsX
-----------------------------
· Google Chrome
·
Le célèbre navigateur de Google. Rapide, stable et portable.
· Firefox
·
Le navigateur libre le plus connu.
· Opera
http://www.opera.com
·
L'autre navigateur libre le plus connu.
· Safari
·
Fourni par défaut sous MAcOsX.
Navigateurs sous
UNIX/Linux
---------------------------------
· Google Chrome
·
Le célèbre navigateur de Google. Rapide, stable et portable.
· Firefox
·
Le navigateur libre le plus connu.
· Opera
http://www.opera.com
·
L'autre navigateur libre le plus connu.
Ceci est la liste des principaux navigateurs, sachez cependant
qu’il existe des navigateurs orientés accessibilité (comme Lynx) et autres.
L'accessibilité c'est
quoi ?
·
Retrouvez sur le site openweb.eu plus d’informations concernant
l’accessibilité des sites Web aux personnes atteintes d’un handicap.
Les différentes versions de CSS
Il existe plusieurs versions de CSS (CSS1, CSS2, et CSS3).
Comme pour l’HTML et l’HTML5, le W3C fait évoluer le langage CSS.
Il faut savoir que la version 3 n’est pas différente de la version
2, mais que c’est une suite, une évolution de la CSS2.
La version actuelle est la version 3 et notons comme ajouts
majeurs :
· l’anti-crénelage de police,
· la possibilité d’avoir un rendu de coin arrondi sans image,
· des ombres en dessous de vos boîtes,
· l’apparition de nouveaux types de sélecteurs,
· l'animation.
· la possibilité d’avoir un rendu de coin arrondi sans image,
· des ombres en dessous de vos boîtes,
· l’apparition de nouveaux types de sélecteurs,
· l'animation.
Liste complète des
sélecteurs CSS 3
·
Cette liste passe en revue tous les types de sélecteurs
Les différents éditeurs de texte
Il existe différents outils pour créer des CSS. Nous les séparons
en deux catégories : les outils de création de CSS présents dans des
éditeurs de pages Web et les outils de création de CSS uniquement.
Remarque : dans ce cours, nous avons uniquement utilisé
l’éditeur « Bloc-notes » de Microsoft Windows.
Editeur de pages Web
avec outil de création CSS
------------------------------------------------------
Dreamweaver
·
Cet outil, payant, intègre de nombreuses fonctionnalités liées
aux CSS mais également à HTML, aux bases de données, aux langages client /
serveur.
KompoZer
·
KompoZer est, au même titre que Dreamweaver, un éditeur WYSIWYG
(« What You See Is What You Get » : « ce que vous voyez est
ce que vous obtiendrez »). Cependant, son interface est moins complexe et
il est gratuit.
HTML-KIT
·
C’est un programme léger, très complet, supportant l’XHTML et le
langage CSS.
jedit
·
Editeur de texte open source (gratuit) très léger utilisant la
technologie JAVA.
Notepad++
·
Vous pourriez penser que c’est un Notepad amélioré… et bien
oui ! Cet outil très convivial vous permet d’afficher rapidement le code
d’une page HTML.
Espresso
·
Editeur HTML et CSS payant, performant et convivial, pour MAC
uniquement, développé en Belgique.
Coda
·
Un autre éditeur HTML et CSS payant, également performant et
convivial, pour MAC uniquement.
Outil de création CSS
------------------------
Stylemaster
·
Stylemaster est un éditeur CSS payant mais vous pouvez
télécharger la démo.
SimpleCSS
·
Editeur de CSS simple, et gratuit.
·
Cette liste n’est pas exhaustive. Il existe en effet d’autres
éditeurs de texte. A vous de choisir l’outil qui vous semble le plus facile à
utiliser.
Les propriétés CSS
Chaque propriété se
termine par un « ; » !
Grâce à ce point-virgule, on peut mettre toute une règle sur une
seule ligne:
h1{font-weight: normal; text-align: center; font-size: 20px;
font-style: italic; font-family: Georgia, "Times New Roman", Times,
serif;}
C’est un peu moins clair mais c’est plus court ;-)
L’ordre des propriétés
n’a pas d’importance !
Voici la règle de style pour les titres de niveau 1 de l’exercice
précédent. L’ordre des propriétés est différentmais le
résultat sera le même !
h1{
font-family: Georgia, "Times New Roman", Times, serif;
font-weight : normal ;
font-style: italic;
font-size: 20px;
text-align: center;
}
font-family: Georgia, "Times New Roman", Times, serif;
font-weight : normal ;
font-style: italic;
font-size: 20px;
text-align: center;
}
On peut ajouter autant
de propriétés que souhaitées !
Dans ce cas-ci, on a ajouté la propriété color: #222222;. Cette
propriété permet de modifier la couleur du texte :
h1{
font-weight : normal ;
text-align: center;
color : #222222 ;
font-size: 20px;
font-style: italic;
font-family: Georgia, "Times New Roman", Times, serif;
}
font-weight : normal ;
text-align: center;
color : #222222 ;
font-size: 20px;
font-style: italic;
font-family: Georgia, "Times New Roman", Times, serif;
}
Commentaires
Un style peut être appliqué à tout type
de balise en reprenant le nom de la balise en tant que sélecteur. Par exemple :
· h1{…} définit une règle de style pour toutes les balises h1.
· p{…} définit une règle de style pour toutes les balises p.
Il vous suffit de modifier le style créé dans la CSS pour que la modification soit effective sur tout le site !!! Vous en rêviez ? CSS l’a fait !
· p{…} définit une règle de style pour toutes les balises p.
Il vous suffit de modifier le style créé dans la CSS pour que la modification soit effective sur tout le site !!! Vous en rêviez ? CSS l’a fait !
Les styles appliqués à du
texte
Pour des éléments de
type texte, on peut :
· changer la police de
caractère,
· changer la couleur,
· changer la taille,
· changer l’épaisseur (gras),
· changer l’orientation (italique),
· changer la position par rapport à la page.
· changer la couleur,
· changer la taille,
· changer l’épaisseur (gras),
· changer l’orientation (italique),
· changer la position par rapport à la page.
Vous allez voir en détail les principales propriétés agissant sur
du texte.
Rappel concernant les polices de caractères
Par famille de polices, on
entend la liste des polices ou types
de polices comme par exemple « Arial »,
« Helvetica », « Times Roman », le type
« sans-serif », etc...
Les polices génériques
· Les caractères d’une police serif comportent
de petits empattements à leurs extrémités (Times New Roman, Garamond, Georgia).
· Les caractères d’une police sans-serif ont des extrémités simples et droites (Arial, Helvetica, Verdana).
· Les caractères d’une police monospace ont tous la même largeur (Courier, Courier New).
· Les caractères d’une police sans-serif ont des extrémités simples et droites (Arial, Helvetica, Verdana).
· Les caractères d’une police monospace ont tous la même largeur (Courier, Courier New).
Les polices de caractère dans
le langage HTML
En HTML, l’attribut face de la balise font fonctionne de la
manière suivante :
<font face="Arial,Helvetica,Times New Roman">
Dans la valeur de cet attribut, on peut préciser une liste de
polices de caractère.
Note : en
HTML, une liste de polices est
utilisée au cas où une police spécifique ne serait pas présente sur
le système d’un visiteur. Par exemple, la police « Arial » n’existe
pas sur les ordinateurs de type MAC. Par contre, la police
« Helvetica » y est bien présente. Un visiteur utilisant un Mac verra
donc les paragraphes en « Helvetica » plutôt qu’en
« Arial ».
Si on ne précise qu’une seule police et que cette police n’est pas présente, le navigateur utilisera la police par défaut (par exemple Times New Roman, beurk !).
Si on ne précise qu’une seule police et que cette police n’est pas présente, le navigateur utilisera la police par défaut (par exemple Times New Roman, beurk !).
La propriété font-family
La propriété font-family
En CSS, voici comment préciser une liste de polices de
caractères :
p {font-family: Arial, Helvetica, sans-serif;}
Tous les paragraphes auront comme police la police
« Arial » et le cas échéant « Helvetica » ou toute police
de type « sans-serif ».
Important :
il est recommandé d’entourer de guillemets (simples ou doubles) les noms de
polices de caractère comportant des espaces (Times New Roman par exemple).
Quelles polices ?
Un bon conseil :
utilisez les polices les plus simples et les plus courantes :
· Arial,
· Times New Roman,
· Georgia,
· Verdana,
· Helvetica,
· Lucida,
· sans-serif,
· monospace.
· Times New Roman,
· Georgia,
· Verdana,
· Helvetica,
· Lucida,
· sans-serif,
· monospace.
Exemple :
La propriété font-style
Le style de police désigne l'orientation de
la police.
Les valeurs suivantes sont possibles:
· italic : style de police italique,
· oblique : style de police oblique. En effet, toutes les polices n’ont pas de définition pour l’italique. La valeur oblique « italise » toute police qui ne comporte pas de définition pour l’italique,
· normal : style de police normal.
· oblique : style de police oblique. En effet, toutes les polices n’ont pas de définition pour l’italique. La valeur oblique « italise » toute police qui ne comporte pas de définition pour l’italique,
· normal : style de police normal.
Exemple :
La propriété font-weight
L’épaisseur de
la police correspond à l'état plus ou moins gras dans lequel la police est
représentée.
Avec font-weight: vous pouvez déterminer l’épaisseur de la police.
Les valeurs permises relatives à l’épaisseur de la police sont :
· bold = gras.
· bolder = très gras.
· lighter = plus fin.
· 100, 200, 300, 400, 500, 600, 700, 800, 900 = très fin (100) jusqu'à très gras (900)
· normal = graisse normale de police.
· bolder = très gras.
· lighter = plus fin.
· 100, 200, 300, 400, 500, 600, 700, 800, 900 = très fin (100) jusqu'à très gras (900)
· normal = graisse normale de police.
Exemple:
La propriété font-size
Avec font-size, vous pouvez spécifier la taille de police.
Il existe plusieurs types de mesure :
· Le pixel (px) : cette taille est relative à la définition
de l’écran, lui-même défini en pixels
· Le point (pt) : cette taille (aussi utilisée dans Word) se réfère à la taille typographique. 12pt est la taille normale d’une police.
· Le pourcentage (%) : le pourcentage permet de préciser une taille relative à la taille normale d’une police.
· L’unité em (em) : comme pour le pourcentage, cette taille correspond à un rapport à la taille normale d’une police. 1em correspond à 100% de la taille normale de la police, 1.2em à 120%, etc.
· Le point (pt) : cette taille (aussi utilisée dans Word) se réfère à la taille typographique. 12pt est la taille normale d’une police.
· Le pourcentage (%) : le pourcentage permet de préciser une taille relative à la taille normale d’une police.
· L’unité em (em) : comme pour le pourcentage, cette taille correspond à un rapport à la taille normale d’une police. 1em correspond à 100% de la taille normale de la police, 1.2em à 120%, etc.
Un tableau récapitulatif des unités de mesure est repris en
complément
Exemple :
Information : textes extraits des œuvres d’Edmond Rostand.
Mémo
font-family: Georgia,
"Times New Roman", Times, serif;
Propriété qui définit la police de caractère à appliquer. Plusieurs polices sont définies.
Dès lors, si une police n’est pas
disponible, la page tentera de trouver la suivante (de gauche à droite). Les
polices de base sont dites « websafe », ce qui signifie que la plupart des
terminaux (ordinateurs, tablettes, etc) sont capables d’afficher ces polices
correctement.
Valeurs possibles : Arial, Times New
Roman, Georgia, Verdana, Helvetica, Lucida, Courier, serif, sans-serif,
monospace.
En savoir plus au sujet des polices
websafe : http://www.anthony-brard.com/les-fonts-web-safe
font-weight : normal ;
Propriété qui définit la graisse du texte.
Valeurs possible :
·
lighter, normal, bold, bolder, boldest
·
100, 200, 300, 400, 500, 600, 700, 800,
900
(400 est équivalent à normal, 700 à bold)
(400 est équivalent à normal, 700 à bold)
font-style: italic;
Propriété qui définit le si la police doit
être affichée en italique ou non.
Valeurs possible : normal, italic, oblique
(oblique est à peu de choses près similaires à italic).
font-size: 20px;
Propriété qui permet de spécifier la taille de police.
Propriété qui permet de spécifier la taille de police.
Valeurs possible : px, pt, % et em
text-align: center;
Propriété qui permet de définir la
justification (l’alignement) du texte.
Valeurs possibles : left, right, center, justify (celui-ci aligne le texte à gauche ET à droite).
Valeurs possibles : left, right, center, justify (celui-ci aligne le texte à gauche ET à droite).
Listes HTML
Il existe deux types listes en html
:
- les listes à puces : <ul>
- les liste ordonnées : <ol>
Chaque élément de ces listes est définit
par <li></li>.
Exemple
<ul>
<li>Café</li>
<li>Pain</li>
</ul>
Qui affichera
·
Café
·
Pain
OU
<ol>
<li>Café</li>
<li>Pain</li>
</ol>
Qui affichera
- Café
- Pain
list-style-type:square;
Propriété qui définit le type de puces ou de numérotation à afficher pour chaque élément d’une liste HTML.
Les différentes unités de mesure
Il existe deux types d’unités de mesure en CSS, les relatives et
les absolues.
Mesures absolues :
En utilisant une mesure absolue, on s’assure que le résultat sera
toujours identique quelle que soit la définition de l’écran (800x600,
1024x768…) ou la taille du support de visualisation (écran 15 pouces, écran 19
pouces, téléviseur…).
· pt: point, mesure typographique, est égal à 1/72 pouce.
· pc: pica, mesure typographique, un pica est égal à 12pt.
· in: pouce (inch). Un pouce est égal à 2,54cm.
· cm: centimètre.
· mm: millimètre.
· pc: pica, mesure typographique, un pica est égal à 12pt.
· in: pouce (inch). Un pouce est égal à 2,54cm.
· cm: centimètre.
· mm: millimètre.
Mesures relatives :
Les mesures relatives dépendent de la résolution de l’écran et de
la taille du support de visualisation. Par exemple, un texte de 10 pixels de
haut n’aura pas la même taille (en mm par exemple) selon que la résolution
d’affichage sera de 800x600 ou de 1024x768 !
· em: (m-length). Le navigateur se base sur la valeur par défaut
de font-size (medium).
· ex: (x-height) la valeur de x-height correspond au descripteur de la hauteur des lettres miniscules de la police.
· px: une « quantité » de pixels, en fonction de l’appareil de visualisation.
· ex: (x-height) la valeur de x-height correspond au descripteur de la hauteur des lettres miniscules de la police.
· px: une « quantité » de pixels, en fonction de l’appareil de visualisation.
Vous pouvez également utiliser les % pour définir une taille de
police.
Que choisir ?
Il est préférable, à l’heure actuelle, d’utiliser les mesures relatives ou les %. Les utilisateurs peuvent ainsi modifier la taille de la police
et naviguer tout en gardant un confort visuel.
Tableau récapitulatif
N’hésitez pas à imprimer ce tableau.
Abréviation
|
Signification
|
pt
|
Point :
unité de mesure typographique - 1 point correspond à 1/72 pouce
|
pc
|
Pica :
unité de mesure typographique - 1 pica correspond à 12 points
|
in
|
Pouce :
unité générale de longueur dans les pays anglo-saxons - 1 pouce correspond à
2,54cm
|
mm
|
Millimètre :
unité générale de longueur - 1/1000 du mètre étalon
|
cm
|
Centimètre :
unité générale de longueur - 1/100 du mètre étalon
|
px
|
Pixel :
dépend de la densité de pixels du mode de sortie, différente donc d’un mode
de sortie à l’autre
|
em
|
Par
rapport à la taille de la police de l’élément.
|
ex
|
Par
rapport à la hauteur de la minuscule x de cet élément
|
%
|
Pourcentage
|
Quelques resssources concernant les unités de mesure des polices
de caractères :
Unités de mesure des
polices de caractères
·
CSS offre différentes unités pour exprimer les dimensions.
Certaines proviennent de la typographie, comme le point (pt) et le pica (pc),
d'autres sont connues pour leur usage quotidien, comme le centimètre (cm) et le
pouce (in). Et il y a également une unité "magique" inventée
spécifiquement pour CSS: le pixel px. Est-ce que cela signifie que différentes
propriétés nécessitent différentes unités ?
CSS : les unités de
longueur
·
Tableau récapitulatif des unités en CSS.
Autres propriétés des listes
list-style-type permet de spécifier le type de numérotation dans
le cas d’une liste ordonnée.
Cette propriété peut prendre différentes valeurs :
· decimal : chiffres arabes (1, 2, 3),
· decimal-leading-zero (01, 02, 03),
· none : aucun.
· decimal-leading-zero (01, 02, 03),
· none : aucun.
Ses valeurs permettent d’afficher une liste ordonnée décimale.
· list-style-type peut prendre également des valeurs pour
l’affichage d’une liste ordonnée alphabétiquement :
· lower-roman : chiffres romains en minuscules (i, ii, iii),
· upper-roman : chiffres romains en majuscules (I, II, III).
· upper-roman : chiffres romains en majuscules (I, II, III).
Enfin, list-style-type peut être utilisée pour définir le type des
puces d’une liste non ordonnée :
· disc : point plein,
· circle : point creux,
· square : carré,
· none : aucun.
· circle : point creux,
· square : carré,
· none : aucun.
Il existe d’autres propriétés concernant les listes, découvrez les
ci-dessous :
· list-style-position
Fonction :
permet de spécifier l’alignement à gauche du texte lors d’un retour automatique
à la ligne.
Valeur :
list-style-position peut prendre les valeurs suivantes :
· inside : le texte s’aligne au début de la puce lors d’un
retour automatique à la ligne,
· outside : le texte s’aligne à la fin de la puce lors d’un retour automatique à la ligne.
· outside : le texte s’aligne à la fin de la puce lors d’un retour automatique à la ligne.
· list-style-image
Fonction :
permet de personnaliser la puce avec une image (à la place de la puce)
Valeur :
list-style-image peut prendre les valeurs suivantes
· url (chemin de l'image),
· none (aucune image).
· none (aucune image).
Objectifs
Maintenant que vous avez appris à appliquer une règle de style sur
des paragraphes, des titres et des listes, vous allez apprendre à appliquer des styles à une partie de texte,
tout comme vous le faisiez avec la balise <font> avant de connaître les
CSS...
Ce module explique comment utiliser les CSS pour appliquer des
styles à des blocs de texte ou
à des morceaux de texte.
On parle de morceau
de texte lorsque l’on souhaite sélectionner une partie de contenu au sein d’une
ligne. Exemple :
« On fait tout pour
gagner un cœur et bien peu
pour le garder. », Jacques Deval
On parle de bloc
de texte lorsque l’on souhaite regrouper plusieurs
parties du contenu dans un bloc commun. Exemple :
Maître Corbeau, sur un arbre perché,
Tenait en son bec un fromage.
Maître Renard, par l'odeur alléché,
Lui tint à peu près ce langage :
Tenait en son bec un fromage.
Maître Renard, par l'odeur alléché,
Lui tint à peu près ce langage :
"Hé ! Bonjour,
Monsieur du Corbeau.
Que vous êtes joli ! Que vous me semblez beau !
Sans mentir, si votre ramage
Se rapporte à votre plumage,
Vous êtes le Phénix des hôtes de ces bois."
Que vous êtes joli ! Que vous me semblez beau !
Sans mentir, si votre ramage
Se rapporte à votre plumage,
Vous êtes le Phénix des hôtes de ces bois."
A ces mots le corbeau ne se sent pas de joie;
Et pour montrer sa belle voix,
Il ouvre un large bec et laisse tomber sa proie.
Et pour montrer sa belle voix,
Il ouvre un large bec et laisse tomber sa proie.
Extraits de « Le Corbeau et Le Renard » de Jean de la Fontaine.
Les sélecteurs de classe
Une classe est
un sélecteur permettant de créer des styles
personnalisés.
.monstyleperso{color: red;}
Une classe peut s’appliquer à toute
balise.
Il suffit de lui ajouter l’attribut class avec le nom de la classe comme valeur de cet attribut.
<p class="monstyleperso">
Le nom d’une classe commence toujours par
un point suivi d’un libellé. Ce libellé peut être composé de lettres et/ou de
chiffres mais pas de caractères spéciaux, ni d’accents.
Remarque : en HTML, dans la valeur de l’attribut, on ne met pas le point !!!
Appliquez ! L’application d’une classe
Appliquez directement la matière en effectuant un petit exercice rapide.
Cette page HTML utilise une CSS qui définit la classe
suivante :
.conclusion{
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 11px;
font-weight: bold;
color: #6B6E3A;
}
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 11px;
font-weight: bold;
color: #6B6E3A;
}
Appliquez cette classe au dernier paragraphe.
Comment appliquer un style à un morceau de
texte ?
Avant, en
HTML, pour avoir un résultat comme celui-ci :
« Il n’y a qu’un remède à l’amour, aimer d’avantage »,
on entourait le morceau de texte à formater de la balise
font :
<p>Il n’y a qu’un remède à l’ <font color="red">amour</font>, aimer davantage</p>
<p>Il n’y a qu’un remède à l’ <font color="red">amour</font>, aimer davantage</p>
Citation de Henry David Thoreau
Maintenant, grâce
aux CSS, on entoure le morceau de texte à formater de la balise span :
<p>Il n’y a qu’un remède à l’ <span class="rouge">amour</span>, aimer davantage </p>
<p>Il n’y a qu’un remède à l’ <span class="rouge">amour</span>, aimer davantage </p>
Citation de Henry David Thoreau
… avec bien sûr la règle de style :
.rouge{
color: red;
}
color: red;
}
Le résultat est le même MAIS la
différence est grande: dans le deuxième cas, l’HTML ne
s’occupe plus du formatage, ce sont les CSS qui s’en chargent !!!
La balise SPAN
La balise span permet d’appliquer une mise en forme sur un morceau de texte au sein de n’importe
quelle balise :
<p> MOLIÈRE Pseudonyme de <span>Jean-Baptiste Poquelin</span> (Paris 1622-1673).</p>
L’intérêt de la balise span est de pouvoir lui ajouter l’attribut class afin d’appliquer un
style personnalisé à un morceau de texte.
<p> MOLIÈRE Pseudonyme de <span class="nomPropre">Jean-Baptiste Poquelin</span> (Paris 1622-1673).</p>
Comment appliquer un style à un bloc de
texte ?
Vous avez vu comment appliquer un style à une partie de texte.
Mais comment faire pour appliquer un style à plusieurs paragraphes
en même temps ?
La solution qui vient rapidement à l’esprit est de placer
l’attribut class="acte" à chaque paragraphe :
<p class="acte">…</p>
<p class="acte">…</p>
<p class="acte">…</p>
Une solution plus propre est de regrouper tous ces
paragraphes dans le même bloc :
<div class="acte">
<p>…</p>
<p>…</p>
<p>…</p>
</div>
Dans ce cas, on ne doit pas répéter
l’attribut class
pour chaque paragraphe.
Voici un exemple complet :
La balise DIV
La balise div (qui signifie division) permet de créer un bloc de contenu.
Un bloc de contenu peut contenir
tous les types de balises utilisées pour le contenu
(<p>,<img>, <ul>, <table>, ...).
Une balise div peut même contenir d’autres balises div !
On utilise la balise div pour regrouper du
contenu ayant la même signification ou
le même style.
La différence entre DIV et SPAN
La balise div est « préformatée », c'est-à-dire qu’elle
contient par défaut un style
d’affichage particulier, tout comme la balise h1 qui s’affiche par
défaut en 24pt et en gras.
La balise div s’affiche avec un retour chariot au début et à la fin (c’est
comme si on mettait la balise <br>juste
avant et juste après le texte).
Cela veut dire que tout texte placé dans la balise div sera
automatiquement placé à la ligne. Voilà la grande différence entre
la balise div et la balise span !
· div = br + span + br
Utilisation des balises div et span en
CSS
· La balise span s’utilise pour modifier le style d’un morceau de
contenu au sein d’une ligne.
· A l’aide des CSS, on utilise la balise div pour modifier le
style d’une boîte de contenu.
Exemple :
div {width: 300px; height: 200px; border: 1px solid black;
background-color: #FF9900;}
Conclusion
Toute balise HTML peut
contenir l’attribut class lui permettant d’appliquer un style personnalisé.
On peut également appliquer des styles à des éléments spécifiques d’une page :
· morceau de texte,
· bloc de texte.
_____
Remarque :
Si vous avez rencontré des problèmes techniques dans ce module, n’hésitez pas à
prendre contact avec notre support technique par e-mail (supportfad@technofuturtic.be). Il
se fera un plaisir de vous aider.
Mémo
.maClasse{propriété :
valeur;}
Les sélecteurs de classe permettent de créer des styles
personnalisés qui ne s’appliqueront qu’à des éléments HTML choisis. Une classe
commence par un point.
Exemple
.rouge{
color:red;}
class="maClasse"
Attribut html à ajouter afin que la classe CSS puisse s’appliquer
sur un ou des éléments HTML choisis.
Exemple
<p
class="rouge">Attention ! Attention !</p>
<span></span>
La balise span permet d’appliquer une mise en forme sur un morceau
de texte au sein de n’importe quelle balise texte (<h1>, <p>,
<li>, ...).
Exemple
<p> Faites
bien <span class="rouge">attention</span>à la marche
!</p>
<div></div>
La balise div (qui signifie division) permet de créer un bloc de
contenu qui peut contenir tous les types de balises utilisées pour le contenu
(<p>,<img>, <ul>, <table>, ...).
Exemple
<div
class="rouge">
<h1>Attention</h1>
<p>Message
important de couleur rouge.</p>
</div>
Contrairement à <span>, la balise <div> ajoute un
retour chariot (retour à la ligne) avant et après le bloc. Utilisation du multi-classes
Habituellement, les attributs ne sont assignés qu’à une classe,
mais cela ne signifie pas qu’il ne soit pas permis de faire autrement. Vous
pouvez assigner autant de classes que vous le souhaitez.
Par exemple :
<p class="rouge gras">...</p>
Utiliser ces deux classes ensemble (séparées par un espace et non
par une virgule) signifie que le paragraphe va appliquer les deux règles. Si
certaines règles se contredisent, c'est la dernière classe dans l'ordre
d'écriture qui aura la préséance.
Objectifs
Ce module est consacré à tout ce que les CSS peuvent faire avec des
images :
· mettre des images
de fond sur des éléments : image de
fond dans une page, image de
fond pour un lien, …
· mettre une image à la place des puces d’une liste à puces.
· modifier la façon dont sont affichées les images dans le texte (bordure, marges…)
· mettre une image à la place des puces d’une liste à puces.
· modifier la façon dont sont affichées les images dans le texte (bordure, marges…)
A la fin de ce module, vous serez capables de créer des règles de
style qui utilisent les images de fond et
des règles de style qui modifient l’image d’une liste à puces.
Utiliser des images dans un site
Les images ont deux rôles importants dans un site :
1. L’illustration du
contenu : grâce aux images, l’utilisateur peut voir en un clin d’œil
de quoi il retourne. Dans ce cas, l’image sera placée dans la page HTML à
l’aide de la balise IMG.
Exemple : <img src="images/logo.gif">
Note :
Pour que les images d’illustration du site soient « jolies »,
n’hésitez pas à appliquer des styles sur la balise IMG. Voici un petit exemple
qui ajoute une bordure autour d’une image.
Code utilisé dans la CSS :
2. La mise en page du site :
l’utilisation d’images en arrière-plan et d’images pour les listes à puce
donnent une identité visuelle et agrémentent la lecture
du site. Ce sont les propriétés CSS qui s’occuperont de ce rôle des images.
Pour garder les visiteurs sur son site, la mise en page, la
navigation et la mise en forme sont INDISPENSABLES.
Chemin d’accès aux images
Lors de l’utilisation de références à une ou plusieurs images dans
une feuille de styles, le chemin d’accès à (aux) l’image(s) est toujours
relatif au fichier CSS et non pas à la page HTML utilisant la CSS !
Exemple :
soit un fichier HTML nommé index.html se
trouvant dans un dossier principal (/). Ce
document est lié à une feuille de styles styles.css se
trouvant dans un sous dossier (du dossier principal) nommé css. Les
images se trouvent dans un sous-dossier (du dossier principal) nommé images.
Dans le document HTML, on trouvera la liaison à la feuille de
styles suivante :
· <link rel="stylesheet" type="text/css"
href="css/styles.css" />
Dans la feuille de styles, on pourra trouver le code suivant :
· body {background-image: url(../images/logo.gif);}
Le chemin de l’image est donc bien
défini par rapport à la feuille de styles (se trouvant dans
le dossier css) et non par rapport au fichier HTML se trouvant dans le dossier
principal.
La propriété background-image
La propriété background-image permet de définir une image de fond.
La valeur de cette propriété représente l’emplacement de l’image,
c'est-à-dire l’URL de l’image : url([chemin vers l’image])
Exemple :
Note : dans les compléments, vous trouverez un petit rappel
sur les URL.
La propriété background-repeat
La propriété background-repeat permet de déterminer la répétition
de l’image de fond.
Par défaut, l’image de fond est répétée dans tous les sens.
Voici les différentes valeurs possibles :
· repeat : valeur par défaut ; répétition dans tous les
sens,
· repeat-x : répéter horizontalement,
· repeat-y : répéter verticalement,
· no-repeat : ne pas répéter.
· repeat-x : répéter horizontalement,
· repeat-y : répéter verticalement,
· no-repeat : ne pas répéter.
Exemple :
Rappel :
· Axe X = axe horizontal,
· Axe Y = axe vertical.
· Axe Y = axe vertical.
Image et couleur de fond
La propriété background-color permet de définir la couleur de fond
d’un élément.
La couleur peut être indiquée de différentes manières :
· en utilisant le nom anglais de la couleur (blue, black, pink,
etc.) ;
· en spécifiant le code hexadécimal de la couleur (par exemple #003399) ;
· en spécifiant la quantité de rouge / vert / bleu (par exemple rgb(0,128,255)).
· en spécifiant le code hexadécimal de la couleur (par exemple #003399) ;
· en spécifiant la quantité de rouge / vert / bleu (par exemple rgb(0,128,255)).
Exemples :
· body {background-color: white ;}
· body {background-color: #FFFFFF ;}
· body {background-color: rgb(255,255,255) ;}
· body {background-color: #FFFFFF ;}
· body {background-color: rgb(255,255,255) ;}
Des images de fond sur un bloc de texte
Comme pour toutes les
propriétés CSS, vous pouvez appliquer une image de fond sur n'importe quelle
balise.
Vous pouvez donc appliquer une image de fond à un paragraphe, à un
lien hypertexte, etc.
Voici un exemple de balise DIV à laquelle on a appliqué une image
de fond...
Une image qui défile... dans le fond!
Hormis la répétition d'une image de fond, il existe une propriété
qui définit l'attachement d'une image à un fond.
Cette propriété est visible lorsque la quantité de texte nécessite
un ascenseur vertical.
Un petit exemple vaut mieux qu'un long discours ;-)
Attention :
la propriété de défilement n’est pas complètement supportée par tous les
navigateurs. Cela se passe sans problème lorsque cette propriété est associée à
la balise "body" d'une page web mais il y a un souci de
compatibilité lorsqu'on l'attache par exemple à des blocs "div".
La propriété background-attachment
La propriété background-attachment permet
de définir l'attachement d'une image de
fond par rapport à l'élément à laquelle elle est appliquée.
Une image de fond est :
· soit fixe,
· soit mobile avec la barre d'ascenseur.
· soit mobile avec la barre d'ascenseur.
Les valeurs correspondantes dans la propriété
background-attachment sont :
· fixed :
l’image de fond sera fixe,
· scroll : l’image de fond sera mobile.
· scroll : l’image de fond sera mobile.
Exemple :
Note :
par défaut, une image de fond est mobile.
De jolies puces
Les images peuvent aussi être utilisées afin de remplacer les
puces d'une liste à puces.
Avec de jolies puces, votre site prendra une allure plus finie.
N'oubliez pas que ce sont des petits
détailscomme ceux-là qui rendent un site agréable à visiter!
La propriété list-style-image
La propriété list-style-image permet de définir une image à la place d'une puce.
La valeur de cette propriété est l'URL de l'image en question.
Exemple :
Synthèse
Dans un site, les images peuvent être utilisées à diverses fins.
· Les images en tant qu'illustration du texte.
· Les images en tant que fond d'élément.
· Les images dans les listes à puce.
· Les images en tant que fond d'élément.
· Les images dans les listes à puce.
Grâce aux CSS, vous pouvez gérer les images de fond de tout
élément, les images d’illustration et les images dans les listes à puces.
Toutes les propriétés relatives se trouvent dans le mémo ci-après.
Chemins d’accès aux
images
Lors de l’utilisation de références à une
ou plusieurs images dans une feuille de styles, le chemin d’accès à (aux)
l’image(s) est toujours relatif au fichier CSS et non pas à la page HTML
utilisant la CSS !
background-image:url(MonImage.jpg)
La propriété background-image permet de
définir une image de fond. Cette image sera par défaut répétée horizontalement
et verticalement. N’importe quel élément peut se voir appliquer une image de
fond.
background-repeat:no-repeat;
Cette propriété permet de déterminer la
répétition de l’image de fond sur l’axe X et/ou Y.
Valeurs possibles : repeat (par défaut),
repeat-x, repeat-y, no-repeat
NB :
Axe X > axe horizontal, Axe Y > axe vertical.
background-color:#FFFFFF;
La propriété background-color permet de
définir la couleur de fond d’un élément.
La couleur peut être indiquée de différentes manières :
La couleur peut être indiquée de différentes manières :
·
en utilisant le nom anglais de la couleur
(blue, black, pink, etc.)
·
en spécifiant le code hexadécimal de la
couleur (par exemple #003399)
·
en spécifiant la quantité de rouge / vert
/ bleu (par exemple rgb(0,128,255))
Exemples
body {background-color: white ;}
body {background-color: #FFFFFF ;}
body {background-color: rgb(255,255,255) ;}
background-attachment:scroll;
La propriété background-attachment permet de définir l'attachement (mobile par
défaut) d’une image de fond par rapport à l'élément à laquelle elle est
appliquée.
Valeurs possibles : fixed, scrolllist-style-image:url(puce.gif);La propriété
list-style-image permet de définir une image à la place d'une puce.
La valeur de cette propriété est l'URL de l'image en question. Rappel URL (absolue et relative)
Nous allons ici vous rappeler la différence entre URL absolue et
relative.
URL absolue :
L’URL absolue se compose du « chemin complet » vers le
site ou la page que vous voulez atteindre (adresse complète pour référencer une
ressource).
Ex : http://www.technofuturtic.be/code/FR/page.asp?Page=29
Adresse complète y compris le nom de domaine
Ex : http://www.domaine.com/HTML/information/info.html
Vous pouvez également avoir une adresse absolue à partir de la
racine du site
Ex : /HTML/information/info.html (commence toujours par
« / »)
On utilise souvent les url absolues pour créer un lien vers une page qui ne fait pas partie de votre site.
URL relative :
L’URL relative est utilisée pour la création de lien vers une
page, une image, un script faisant
partie de la structure de votre site (spécifie l’emplacement
d’une ressource par rapport au document courant).
L’URL relative est crée par rapport à l’endroit ou l’on se trouve.
Ex: ../information/info.html
Ex: information/info.html
../ remonte
d’un niveau.
../../ remonte
de deux niveaux.
Ces notions sont abordées dans les modules 6 et 7 du cours en
ligne « Initiation au langage HTML » de Technofutur TIC.
gif, jpg ou png ?
GIF, JPG et PNG sont les formats graphiques actuellement utilisés sur
le Web. Mais quelles sont leurs différences et comment les utiliser ?
Le format JPG ou JPEG
Le format JPEG (Joint Photographic Experts Group) est un format de
compression efficace mais subissant une perte de qualité. Il faut donc bien
choisir entre le taux de compression et le poids de l’image. Le format JPEG est
recommandé pour les images de type photographies.
Le format JPG ne supporte pas la transparence ni le fond
transparent.
Le format GIF
Le format GIF (Graphic Interchange Format) est un format qui
utilise une compression sans perte de qualité. Ce format est utilisé pour des
images avec un petit nombre de couleurs, les identités visuelles, les formes
géométriques, les puces, les boutons…
Le format GIF supporte la transparence et permet également de
créer des animations (GIF animés).
Le format PNG
Le format PNG (Portable Network Graphics) utilise une compression
sans perte de données. Le PNG supporte la transparence comme le GIF. Les
fichiers PNG sont généralement plus légers que les GIF. Cependant, le PNG est
moins performant que le JPEG pour la compression de photographies.
Comment supprimer les bordures bleues qui
encadrent mes images ?
Il n’est pas rare, lorsque vous rendez une image cliquable, de
voir apparaître une bordure bleue autour de celle-ci. Vous avez la possibilité
grâce à CSS de retirer cette bordure.
Éliminer la bordure
sur toutes les images
Pour éliminer la bordure sur toutes les images de votre site, vous
pouvez directement créer un style qui s’appliquera sur la balise img.
img {border:0}
Éliminer la bordure
sur une image précise
Pour éliminer la bordure sur une seule image sélectionnée, vous
devez créer un style que vous allez appliquer à cette image.
.noborder {border:0}
<img src="agence.jpg" class="noborder">
Objectifs
L'objectif de ce module est d'utiliser toutes les notions CSS vues jusqu'à présent et
de les appliquer aux liens.
Le lien hypertexte est
le concept le plus important du Web car il permet d’interconnecter de l’information.
Par défaut, on
reconnaît un lien à sa couleur bleue et à son soulignement. Avec les CSS, on
peut appliquer des règles de style sur des liens en fonction de leur état: non
visité, actif, visité ou survolé.
A la fin de ce module, vous serez capable d'appliquer des styles
CSS sur des liens selon leurs états et de créer des menus soignés.
Enfin, un exercice
récapitulatif vous sera proposé. Il vous permettra de mettre
en pratique les différentes notions abordées dans les cinq premiers modules de
ce cours.
Modifier le soulignement
Pour modifier le soulignement des liens hypertextes, nous allons
utiliser la propriété text-decoration de la manière suivante :
· text-decoration: none;
La propriété text-decoration, associée à la valeur none, va nous
permettre de supprimer le souligné qui apparaît sous les liens hypertextes.
Les liens dans tous leurs états
Voici la liste des différents états des liens :
Dans l’exemple précédent, vous avez créé une règle de style pour
la balise a. Cela
a rendu votre page plus soignée mais, en faisant cela, vous avez perdu le
concept de liens visités et de liens non visités : on ne voit plus
la différence entre un lien non visité et un lien visité.
L’état des liens en CSS
Les quatre éléments suivants sont utilisables pour modifier
l’aspect des différents états des liens hypertextes :
· a:link pour les liens non visités,
· a:visited pour les liens visités,
· a:hover pour les liens survolés,
· a:active pour les liens actifs.
· a:visited pour les liens visités,
· a:hover pour les liens survolés,
· a:active pour les liens actifs.
Exemples :
· a:hover {background-color: red;} modifie la couleur de fond du
lien hypertexte survolé en rouge.
· a:visited {color: green;} modifie la couleur des liens visités en vert.
· a:visited {color: green;} modifie la couleur des liens visités en vert.
Remarque :
certains navigateurs ne prennent correctement en compte les sélecteurs que
s’ils sont encodés dans un ordre précis, à savoir : a:link, a:visited,
a:hover et a:active.
Moyen mnémotechnique pour retenir l'ordre des quatre états de lien
:
- LoVe HAte
- (Link)o(Visited)e (Hover)(Active)te
Les pseudo-classes
Les sélecteurs comme a:hover qui ont la formule suivante [BALISE]:[ETAT] sont appelés pseudo-classes.
Grâce à ces pseudo-classes, on peut définir plusieurs règles de style pour une seule balise mais
en fonction de l'état de cette balise.
a:link, a:hover, a:active et a:visited sont les pseudo-classes les plus
connues.
Chaque nouvelle version du langage CSS apporte de nouvelles
pseudo-classes.
Il est également possible d’utiliser ce concept pour d’autres
balises HTML (div, p, td, etc.) bien que cela soit plus rarement rencontré et
très différemment supporté par les navigateurs.
Exemple :
· td:hover {background-color: yellow;} crée une surbrillance jaune
sur les cellules survolées.
Exercice récapitulatif : introduction
Nous vous proposons de réaliser un exercice récapitulatif qui permettra d’appliquer les différentes notions vues au
cours de ces cinq premiers modules.
Ainsi, vous pourrez mettre en pratique :
· la liaison d’un document HTML avec une feuille de styles CSS,
· la mise en forme de textes,
· l’application de classes au moyen des balises span et div,
· l’intégration d’une image de fond,
· la mise en forme des liens hypertextes.
· la mise en forme de textes,
· l’application de classes au moyen des balises span et div,
· l’intégration d’une image de fond,
· la mise en forme des liens hypertextes.
Remarque importante :
Cet exercice fait partie de l’évaluation du module : une
question vous sera posée concernant la réalisation de ce travail.
Exercice récapitulatif : présentation
Dans cet exercice, nous allons vous fournir quatre pages HTML et
quelques images. A vous de
mettre en forme ces documents en les liant à une feuille de styles externe.
Attention :
la mise en forme doit être réalisée uniquement par
le biais de la feuille de styles externe. Pas question d’employer des balises comme <i>,
<b>, <u>, <font…> ou des attributs de balises du type
bgcolor, align, etc.
Voyons maintenant à quoi ressemblent les documents fournis et quel
résultat final est attendu…
Exercice récapitulatif : informations
pratiques
Voici la liste exhaustive des tâches à réaliser dans cet
exercice :
1. Créer une feuille de styles externe et la lier à chaque
document HTML.
2. Définir les propriétés de la police de caractère du document à Georgia, 12 pixels de haut, couleur #333399.
3. Définir la couleur d’arrière-plan en blanc.
4. Appliquer l’image fondbleu.jpg comme fond.
5. Répéter l’arrière-plan uniquement à l’horizontale.
6. Définir l’aspect de la balise de titre h1 comme suit : taille de 22 pixels de haut, Georgia, italique, centrée, de couleur #37b6d6.
7. Définir l’aspect des puces comme suit : cercle, couleur #0ea5cb.
8. Définir une classe à appliquer sur les mots spéciaux (« le furet », « souris verte » et « la mère Michel ») avec les paramètres suivants : gras, italique, couleur #6699FF, 14 pixels de haut.
9. Définir une classe à appliquer à tout le texte afin de le centrer.
10. Modifier la couleur des liens visités et non visités : #0ea5cb.
11. Modifier l’aspect des liens survolés : pas de soulignement et couleur #1a5c6d.
2. Définir les propriétés de la police de caractère du document à Georgia, 12 pixels de haut, couleur #333399.
3. Définir la couleur d’arrière-plan en blanc.
4. Appliquer l’image fondbleu.jpg comme fond.
5. Répéter l’arrière-plan uniquement à l’horizontale.
6. Définir l’aspect de la balise de titre h1 comme suit : taille de 22 pixels de haut, Georgia, italique, centrée, de couleur #37b6d6.
7. Définir l’aspect des puces comme suit : cercle, couleur #0ea5cb.
8. Définir une classe à appliquer sur les mots spéciaux (« le furet », « souris verte » et « la mère Michel ») avec les paramètres suivants : gras, italique, couleur #6699FF, 14 pixels de haut.
9. Définir une classe à appliquer à tout le texte afin de le centrer.
10. Modifier la couleur des liens visités et non visités : #0ea5cb.
11. Modifier l’aspect des liens survolés : pas de soulignement et couleur #1a5c6d.
Remarque :
la théorie concernant la personnalisation des puces est consultable dans les
compléments du module 2 (point « Autres propriétés des listes »).
Exercice récapitulatif : informations
pratiques
Voici la liste exhaustive des tâches à réaliser dans cet
exercice :
1. Créer une feuille de styles externe et la lier à chaque
document HTML.
2. Définir les propriétés de la police de caractère du document à Georgia, 12 pixels de haut, couleur #333399.
3. Définir la couleur d’arrière-plan en blanc.
4. Appliquer l’image fondbleu.jpg comme fond.
5. Répéter l’arrière-plan uniquement à l’horizontale.
6. Définir l’aspect de la balise de titre h1 comme suit : taille de 22 pixels de haut, Georgia, italique, centrée, de couleur #37b6d6.
7. Définir l’aspect des puces comme suit : cercle, couleur #0ea5cb.
8. Définir une classe à appliquer sur les mots spéciaux (« le furet », « souris verte » et « la mère Michel ») avec les paramètres suivants : gras, italique, couleur #6699FF, 14 pixels de haut.
9. Définir une classe à appliquer à tout le texte afin de le centrer.
10. Modifier la couleur des liens visités et non visités : #0ea5cb.
11. Modifier l’aspect des liens survolés : pas de soulignement et couleur #1a5c6d.
2. Définir les propriétés de la police de caractère du document à Georgia, 12 pixels de haut, couleur #333399.
3. Définir la couleur d’arrière-plan en blanc.
4. Appliquer l’image fondbleu.jpg comme fond.
5. Répéter l’arrière-plan uniquement à l’horizontale.
6. Définir l’aspect de la balise de titre h1 comme suit : taille de 22 pixels de haut, Georgia, italique, centrée, de couleur #37b6d6.
7. Définir l’aspect des puces comme suit : cercle, couleur #0ea5cb.
8. Définir une classe à appliquer sur les mots spéciaux (« le furet », « souris verte » et « la mère Michel ») avec les paramètres suivants : gras, italique, couleur #6699FF, 14 pixels de haut.
9. Définir une classe à appliquer à tout le texte afin de le centrer.
10. Modifier la couleur des liens visités et non visités : #0ea5cb.
11. Modifier l’aspect des liens survolés : pas de soulignement et couleur #1a5c6d.
Remarque :
la théorie concernant la personnalisation des puces est consultable dans les
compléments du module 2 (point « Autres propriétés des listes »).
Mémo
text-decoration: none;
Propriété qui permet de définir si un texte est souligné ou pas.
Valeurs possibles : underline, overline (ligne au-dessus du
texte), line-through (texte barré),none (pas de ligne).
Plus à ce sujet dans les compléments.
Les sélecteurs de
pseudo-classe
Les sélecteurs comme a:hover qui ont la formule BALISE:ÉTAT sont
appelés sélecteurs de pseudo-classe.
Grâce à ces pseudo-classes, on peut définir plusieurs règles de
style pour une seule balise en fonction de l'état de cette balise.
La propriéte text-decoration
La propriété text-decoration permet de modifier la « décoration » d’un élément.
Les valeurs possibles de cette propriété sont :
· none : pas de décoration pour le texte,
· underline : texte souligné,
· overline : ligne au-dessus du texte,
· line-through : ligne à travers le texte.
· none : pas de décoration pour le texte,
· underline : texte souligné,
· overline : ligne au-dessus du texte,
· line-through : ligne à travers le texte.
Exemple :
Pour supprimer le soulignement par défaut d’un lien hypertexte, il
faut lui appliquer la propriété text-decoration : none.
Note : les
autres valeurs sont peu utilisées.
Les pseudo-éléments
Nous avons découvert les pseudo-classes plus tôt dans ce module.
Intéressons-nous maintenant aux pseudo-éléments.
Les pseudo- éléments
Ils permettent de modifier le rendu typographique de mise en page
avec les éléments first-line et first-letter.
first-line permet l’application d’un style spécifique à la
première ligne issue de la mise en page.
Ex : p:first-line {font : small-caps bold 1.5em
Arial, Helvetica, sans-serif}
Si vous modifiez la largeur de la fenêtre de votre navigateur, la
première ligne de votre paragraphe varie et le style p:first-line agit sur le
contenu de la première ligne. Voyez plutôt :
Le pseudo-élément first-letter permet l’application d’un style
typographique de type lettrine ou le changement « en bas de casse ».
Vous pouvez l’utiliser avec des éléments de type bloc (p, h,…) mais sachez
qu’il est incompatible avec les anciennes versions de navigateurs.
Il existe d’autres pseudo-éléments tel que :
- :before et :after :
servent à insérer un contenu généré avant ou après celui d’un élément
Pourquoi éviter l’utilisation du JavaScript
pour la création de menu
JavaScript est un langage de script (orienté objet) utilisé dans
les pages HTML. Il est exécuté sur la machine de l’internaute par le
navigateur. Ce langage permet une interaction avec l’utilisateur en fonction de
ses actions (passage de la souris,…).
Vous avez déjà tous entraperçu de très beaux menus déroulants. En
général, ce type de menu est mis en œuvre par le biais du langage JavaScript.
Facile d’implémentation et d’utilisation, le langage JavaScript a
beaucoup de succès pour ce genre d’utilisation.
Le principal inconvénient de cette technologie réside dans
l’obligation d’avoir un navigateur supportant le JavaScript.
Grâce aux CSS, il est possible de créer un menu sans JavaScript et
qui aura (presque) le même aspect visuel.
Objectifs
Avant la venue de CSS, le positionnement
d’éléments dans une page relevait de bricolages avec des tableaux imbriqués
dans des tableaux, dans des tableaux, etc..
Nous avons les CSS pour s’occuper désormais de la mise en page
ainsi que du positionnement, les
tableaux HTML retrouvent leur but initial : regrouper du contenu de type données (tableau de
données, liste de contacts, calendrier, etc.)
Fini les tableaux imbriqués pour placer le menu d’une page !
Ce module a pour objectif de remettre en place une bonne utilisation des tableaux. Vous
verrez quelques nouvelles propriétés applicables aux tableaux afin de ne plus utiliser
les attributs HTML width, height, border, etc..
A la fin de ce module, vous serez capables d’appliquer un style
CSS sur un tableau de façon à remplacer tous
les attributs HTML prévus initialement.
Notez bien :
ce module utilise les tableaux pour illustrer les propriétés margin, padding,
border, etc. Ne perdez cependant pas de vue que ces propriétés sont également
utilisables avec d’autres éléments du langage HTML (paragraphes, images,
titres, etc.).
Un petit rappel
Voici le code HTML qui définit un tableau de 4 lignes (dont une
ligne de titre) et de 2 colonnes ayant une largeur de 100% et une bordure de
1 pixel :
<table width="100%" border="1" >
<tr>
<th>Rouge</th>
<th>Vert</th>
</tr>
<tr>
<td>Tomate</td>
<td>Herbe</td>
</tr>
<tr>
<td>Sang</td>
<td>Salade</td>
</tr>
<tr>
<td>Feu</td>
<td>Gazon</td>
</tr>
</table>
Notez que les deux cellules de la première ligne sont créées au
moyen de la balise th (table header).
Attributs des tableaux
En HTML 4, les principaux attributs possibles d’un tableau étaient :
Attribut
|
Description
|
width
|
Définit
la largeur du tableau
S’applique aux balises table, td |
height
|
Définit
la hauteur du tableau
S’applique aux balises table, tr, td |
cellpadding
|
Définit
la marge à l’intérieur
des cellules
S’applique à la balise table |
cellspacing
|
Définit l’espacement entre les cellules
S’applique à la balise table |
bgColor
|
Définit
une couleur de fond
S’applique aux balises table, tr, td |
border
|
Définit
une taille de bordure
S’applique aux balises table |
borderColor
|
Définit
une couleur de bordure
S’applique aux balises table |
Le HTML5, quant à lui, ne supporte plus les attributs de tableaux,
hormis border et sortable.
Nous n'avons donc plus vraiment le choix ! ;)
Voyons comment mettre en forme un tableau à l'aide de CSS.
Les propriétés width et height
La propriété width
Cette propriété permet de définir la largeur d’un élément.
La propriété height
Cette propriété permet de définir la hauteur d’un élément.
Les valeurs possibles de ces propriétés sont des valeurs numériques utilisant les unités de
mesure : px, em, %, … (cf. Module 2)
Exemple :
Information : textes extraits des œuvres de Georges Bizet.
Les bordures
Avec l’attribut HTML border, on
peut juste régler l’épaisseur de la bordure d’un tableau.
Grâce aux CSS, on peut aller beaucoup plus loin. Pour chaque
bordure, on peut déterminer :
· le style de la bordure : pointillé, trait continu, tirets, …
· la couleur de la bordure : Blue, Red, #FF0000, …
· l’épaisseur de la bordure : 1px, 2px, …
De plus, on peut gérer la bordure d’une cellule et la bordure d’un
tableau séparément.
Mais voyons un exemple de tableau avec des bordures CSS…
La propriété border
La propriété border est une propriété « raccourcie » qui
permet de combiner plusieurs propriétés en une seule.
Cette propriété comprend 3
valeurs :
· L’épaisseur de la bordure : exprimée généralement en pixel (px).
· Le style de la bordure : solid, dotted, dashed, …
· La couleur de la bordure : un nom de couleur ou une valeur hexadécimale.
Exemple
Remarque : avec
CSS, on peut également définir un style
différent pour la bordure supérieure, inférieure, latérale gauche et
latérale droite. Allez voir dans les compléments pour en savoir plus !
Images et couleurs de fond
Amusons-nous à appliquer des couleurs
de fond, ainsi que des images
de fond sur des tableaux, des lignes et des cellules de tableau.
Dans le module 4, vous avez vu comment utiliser des images de
fond. Grâce à ces images de fond, vous pouvez également agrémenter les
tableaux.
Regardez ces beaux exemples !
Appliquez ! Tailles, bordures et
couleurs de fond dans les tableaux
Voici une page contenant un tableau. Ajoutez une bordure continue
bleue de 5 pixels autour du tableau uniquement (pas de bordure pour les
cellules).
Réglez, ensuite, la largeur des cellules à 100 pixels (à
l’exception de la cellule de la première ligne).
Enfin, appliquez la couleur #000000 et une couleur de fond #8BC437
à la cellule de titre, la couleur #CCCCFF aux cellules des mois, la couleur
#CCCCFF aux cellules des noms et la couleur #EEEEEE aux cellules de score.
Les marges
Une marge est
un espace laissé blanc sur une page, autour du texte manuscrit ou imprimé
(définition du dictionnaire de l’académie française).
Avec les CSS, on peut appliquer des marges à différents éléments
tels que des tableaux, des cellules, des paragraphes, des images, …
Dans une page web, il existe deux
types de marges :
· Les marges externes (margin)
qui représentent l’espace à l’extérieur de la bordure.
· Les marges internes (padding)
qui représentent l’espace à l’intérieur de la bordure
.
Les propriétés margin et padding
La propriété margin
Cette propriété permet de définir une marge extérieure d’un élément.
La propriété padding
Cette propriété permet de définir une marge intérieure d’un élément.
Ces propriétés possèdent 4 valeurs représentant les marges
de chaque bord de l’élément en commençant par le bord supérieur. Dans
l’ordre :
· marge supérieure,
· marge latérale droite,
· marge inférieure,
· marge latérale gauche.
· marge latérale droite,
· marge inférieure,
· marge latérale gauche.
Exemple :
p {padding: 10px 20px 30px 40px;}
Dans lequel la marge supérieure mesure 10 pixels, la marge de
droite 20 pixels, la marge du bas 30 pixels et la marge de gauche 40 pixels.
Il existe également des propriétés pour ne définir que la marge
intérieure ou extérieure de gauche, de droite, du dessus ou du dessous :
· margin-top et padding-top pour les marges du haut,
· margin-right et padding-right pour les marges de droite,
· margin-bottom et padding-bottom pour les marges du bas,
· margin-left et padding-left pour les marges de gauche.
· margin-top et padding-top pour les marges du haut,
· margin-right et padding-right pour les marges de droite,
· margin-bottom et padding-bottom pour les marges du bas,
· margin-left et padding-left pour les marges de gauche.
Appliquez ! Bordures et marges sur du
texte
Les propriétés que nous venons de voir pour les tableaux
s’appliquent de la même manière aux paragraphes et aux images. Voyons-en un
exemple.
Dans cet exercice, nous vous proposons d’appliquer des bordures et
des marges à trois paragraphes.
Pour chaque paragraphe, appliquez une bordure pointillée de 1
pixel. La bordure du premier paragraphe sera rouge ; celle du second verte
et celle du dernier paragraphe bleu.
Chaque paragraphe doit avoir une largeur fixe de 300 pixels et une
marge intérieure de 10 pixels.
Enfin, le premier paragraphe doit être situé à 50 pixels du bord
gauche de la fenêtre, le second à 100 pixels et le dernier à 150 pixels.
Important :
vous pouvez utiliser la propriété margin-left pour définir la marge de gauche
des différents éléments. Exemple d’utilisation : margin-left: 300px;.
Synthèse
Dans ce module, vous avez utilisé, sur des tableaux, des
propriétés vues précédemment telles que background-color, background-image.
Vous avez également découvert de nouvelles propriétés :
· width,
· height,
· border,
· margin,
· padding.
· height,
· border,
· margin,
· padding.
Ces propriétés peuvent également être utilisées par d’autres éléments comme les paragraphes,
les images, les balises div, …
Mémo
Les tableaux HTML
Ces tableaux sont destinés à recevoir des données de type
tabulaire, organisées sous forme de lignes et de colonnes. Ces tableaux sont
encore utilisés pour la mise en forme des malings HTML (newsletters, ou lettres
d’information) pour des raisons de compatibilité avec les clients mails
(Outlook, Gmail, Apple Mail, etc.).
width:100%;
Propriété qui définit la largeur d’un élément.
Sa valeur numérique peut être exprimée en pixels (px) ou en pourcentage (%).
Sa valeur numérique peut être exprimée en pixels (px) ou en pourcentage (%).
height:300px;
Propriété qui définit la hauteur d’un élément.
Sa valeur numérique peut être exprimée en pixels (px) ou en
pourcentage (%).
border:1px solid black;
Propriété qui définit la bordure d’un élément.
La valeur de cette propriété est constitué en triade : épaisseur en pixels/pourcents + type + couleur.
La valeur de cette propriété est constitué en triade : épaisseur en pixels/pourcents + type + couleur.
Les valeurs possibles pour le type de bordures sont : solide,
dashed, dotted, double, groove, ridge, inset, outset, none, hidden.
Exemple
table{border:
3px dotted red;}
margin:20px 0px 20px 0 px;
Propriété qui définit l’épaisseur des marges extérieures d’un
élément. Les valeurs correspondent au 4 bords de l’élément, en partant du haut,
dans le sens horlogique : haut, droite, bas, gauche.
Il est également possible de définir une valeur unique, qui aura
pour effet de donner la même épaisseur à toutes les marges de l'élément.
Exemple
Cette propriété
table{margin:50px;}
est
équivalente à Exemple
Cette propriété
table{margin:50px;}
est équivalente à
table{margin:50px 50px 50px 50px;}
padding:10px;
Propriété qui définit l’épaisseur des
marges intérieures d’un élément. L’attribution et la
répartition des valeurs est identique à la propriété margin.
Caption
On oublie souvent cet élément lors de l’utilisation des tableaux,
pourtant il a son utilité.
Exemple
Cette balise se place juste en-dessous de la balise <table>
et permet de donner une légende au tableau. Celle-ci sera visible à l’écran.
Son contenu se situera au-dessus du tableau comme un titre. Cette balise
améliorera également le référencement de votre site.
<caption>titre du tableau</caption>
Pour rappel, on
utilise les tableaux pour la structuration de données et non l’élaboration de
la structure d’un site. Il est tout à fait possible de créer un tableau validé
et agréable visuellement pour afficher des données tabulaires.
Débordement avec Overflow
La propriété « Overflow » permet de définir la mise en
forme d’un élément qui sort de sa boîte (de son
conteneur).
En principe, le contenu d’une boîte de type bloc reste enfermé
dans son conteneur mais il arrive que ce contenu déborde et s’étende en partie
ou entièrement en dehors de la boîte.
Il convient alors de préciser de quelle manière il doit être
« rogné ».
Valeurs possibles pour la propriété overflow :
· visible : (par défaut) le contenu ne sera pas rogné et il
pourra sortir éventuellement de la boîte contenant l’élément.
· hidden : le contenu sera rogné mais sans affichage de la barre de défilement et donc inaccessible.
· scroll : le contenu sera rogné avec la mise à disposition d’une barre de défilement.
· auto : l’interprétation de cette valeur dépend du navigateur qui décide de l’action à entreprendre face au contenu excédent.
· hidden : le contenu sera rogné mais sans affichage de la barre de défilement et donc inaccessible.
· scroll : le contenu sera rogné avec la mise à disposition d’une barre de défilement.
· auto : l’interprétation de cette valeur dépend du navigateur qui décide de l’action à entreprendre face au contenu excédent.
Border-top, border-left, …
Comme vous l’avez vu, vous pouvez appliquer un style à un bord.
Mais il est également possible de créer un style pour la bordure supérieure
gauche/droite et inférieure gauche/droite d’un élément de type bloc.
Par exemple :
p{
border-top:10px ridge #6699FF;
border-right:2px dotted #6666FF;
border-bottom:2px solid #66CCFF;
border-left:7px double #00CCFF;
border-top:10px ridge #6699FF;
border-right:2px dotted #6666FF;
border-bottom:2px solid #66CCFF;
border-left:7px double #00CCFF;
}
Notez que cela devient vite n’importe quoi. La
propriété border a généralement la même valeur
pour les 4 cotés.
Objectifs
Dans ce module, nous allons apprendre à mettre en œuvre le concept d’héritage. Une fois cette notion
acquise, vous serez en mesure de condenser le code de vos feuilles de styles
afin de les rendre plus simples à consulter et plus rapides à exécuter.
Mais tout d’abord, un court rappel sur les notions étudiées dans les
précédents modules…
Rappel : premières feuilles de styles
Dans le premier module, nous avons vu comment lier une feuille de styles externe à
une ou plusieurs pages HTML.
Quelle balise
utilise-t-on pour lier une feuille de styles externe à une page HTML ?
link
a
style
Rappel : les caractères
Dans le second module, nous avons appris ce qu’étaient les sélecteurs, les propriétés, les valeurs et
comment les mettre en œuvre pour modifier l’apparence des polices de
caractères.
Comment attribuer la police
de caractères Verdana à tous les paragraphes d’un document HTML ?
p
{font-face: Verdana;}
p
{font-family: Verdana;}
p
{font-type: Verdana;}
Rappel : les classes
Dans le troisième module, nous avons abordé la notion de classe afin de pouvoir appliquer
des styles à des parties de textes ou à un bloc de texte.
Quelle balise HTML
utilise-t-on pour appliquer un style à une partie de texte ?
div
style
span
Rappel : les images
Dans le quatrième module, nous nous sommes attardés aux images ; celles utilisées comme fond d’un
élément, celles remplaçant une puce et celles apparaissant dans le texte.
Quelle propriété et
quelle valeur faut-il employer pour indiquer qu’une image de fond doit se
répéter horizontalement et verticalement ?
aucune,
c’est le comportement par défaut adopté par le langage
background-repeat et
repeat-all
background-image
et repeat
Rappel : les liens
Dans le cinquième module, nous avons étudié comment modifier l’aspect des liens hypertextes. Nous
avons également défini et utilisé les pseudo-classes.
Quelle pseudo-classe
faut-il employer pour définir l’aspect des liens non visités ?
a:visited
a:link
a:active
Rappel : le positionnement
Dans le sixième module, nous avons découvert comment positionner précisément des éléments dans une page Web. Nous
avons également traité de la superposition de ces éléments.
Lors du positionnement
absolu d’un élément, où se situe le point pris comme référence pour le calcul
des positions horizontales et verticales ?
en
haut et à droite de la page Web
en
bas et à gauche de la page Web
en
haut et à gauche de la page Web
Rappel : tableaux et marges
Dans le septième module, nous vous avons expliqué comment mettre en forme les tableaux et comment appliquer des
marges internes et externes à différents éléments.
Nous avons également évoqué l’application de bordures à des éléments HTML.
Comment définir une
bordure pointillée (pas des tirets mais bien des points) pour un
paragraphe ?
p
{border-style: dotted;}
p
{border-style: dashed;}
p
{border-style: pointed;}
Le concept parent-enfant dans le langage CSS
En quoi la structure en arbre évoquée au point précédent
concerne-t-elle les feuilles de styles ?
Et bien, de la même façon que les enfants héritent de certaines
caractéristiques de leurs parents, les balises HTML « enfant » recevront les propriétés de style de leurs « parents ».
En d’autres termes, si une règle de style est définie pour la
balise body, alors les balises qu’elle contient (dans l’exemple du point
précédent : h1, p et ul) la possèderont également (sauf contre-ordre). Cet
héritage s’étend à tous les niveaux.
Pour échapper à cet « héritage », il suffit de redéfinir
la propriété concernée au niveau de l’élément HTML « enfant ». Dans
l’exemple qui suit, c’est la propriété font-size qui nous intéresse.
body{ color: red;
text-align: left;
font-size: 10pt;}
text-align: left;
font-size: 10pt;}
h1{ font-size: 14pt;}
A priori, la balise h1 hérite de son élément parent body de la
propriété font-size. Pas dans ce cas-ci car la propriété font-size est redéfinie
pour h1 et possède une nouvelle valeur.
Quizz
Soit la feuille de
styles suivante : table{ color: red; text-align: left; font-size: 10pt;}
li{ font-size: 14pt;} Quelle est la taille des polices de caractère des
td ?
10pt
14pt
impossible
à déterminer
Soit la feuille de
styles suivante : table{ color: red; text-align: left; font-size: 10pt;}
td{ font-size: 14pt;} Quelle est la taille des polices de caractère des
td ?
14pt
impossible
à déterminer
10pt
Soit la feuille de
styles suivante :body{ color: red; text-align: left; font-size: 10pt;} ul{
font-size: 14pt;} Quelle est la taille des polices de caractère des li ?
10pt
14pt
impossible
à déterminer
Appliquez ! Le modèle parent-enfant
Regardez cette page HTML, le contenu textuel ne devrait pas être
de couleur jaune, c’est apparement un problème
d’héritage.
Trouvez l’élément à éliminer dans la CSS pour que le contenu soit
de couleur noire.
Commentaires et simplification du code CSS
Concevoir une feuille de styles demande réflexion, structure et
cohérence. Prenez toujours le temps de réfléchir posément aux styles que vous
désirez créer.
Il faut, par exemple, éviter
de répéter inutilement des éléments. Il est également conseillé
de commenterses
feuilles de styles.
Pour insérer un commentaire dans une feuille de style, on utilise
les caractères /* (début du commentaire) et */ (fin du commentaire).
Exemple :
/* Le texte sera, par défaut, de couleur rouge */
body
{
color: red;
}
body
{
color: red;
}
Enfin, voici un exemple de ce
qu’il vaut mieux éviter de faire :
body
{
font-family: Verdana, Arial, sans-serif;
color: red;
font-size: 12px;
}
{
font-family: Verdana, Arial, sans-serif;
color: red;
font-size: 12px;
}
p
{
color: red;
font-size: 12px;
font-family: Tahoma, Helvetica, sans-serif;
}
{
color: red;
font-size: 12px;
font-family: Tahoma, Helvetica, sans-serif;
}
On remarque rapidement que deux propriétés sont utilisées de façon
identique pour des éléments parent-enfant.
Il serait plus pertinent
d’écrire :
body
{
font-family: Verdana, Arial, sans-serif;
color: red;
{
font-family: Verdana, Arial, sans-serif;
color: red;
font-size: 12px;
}
p
{
font-family: Tahoma, Helvetica, sans-serif;
}
}
p
{
font-family: Tahoma, Helvetica, sans-serif;
}
En effet, comme les paragraphes héritent
des propriétés du corps du document, il est inutile de (re)définir les
propriétés identiques.
Cas de la balise de lien <a>
L’héritage s’applique également à la balise <a>.
Ses enfants sont les pseudo-éléments suivants :
· :link
(lien par défaut)
· :visited (lien déjà visité)
· :hover (lien au survol)
· :active (lien actif)
· :visited (lien déjà visité)
· :hover (lien au survol)
· :active (lien actif)
Les propriétés appliquées à la balise parent <a> se
transmettent donc aux enfants.
Regardons l’exemple suivant
Exemple
Voici un menu classique en HTML et CSS. Ce menu est une liste de
type ul li que
nous alignons horizontalement.
Allons faire un tour du coté de la CSS
Le code de la CSS
Grâce à la règle d’héritage nous ne devons pas répéter certaines déclarations.
Regardons le code suivant
a, a:link{
margin: 0;
padding: 5px 9px 4px 9px;
color: #ffffff;
border-right: 1px dotted #ccc;
text-decoration: none;
}
margin: 0;
padding: 5px 9px 4px 9px;
color: #ffffff;
border-right: 1px dotted #ccc;
text-decoration: none;
}
Nous déclarons sur la balise a et a:link
un “text-decoration:none” (pour rappel, on élimine le soulignement). Avec le concept d’héritage, les autres etats de liens tels que a:hover profiterons également de cette déclaration.
un “text-decoration:none” (pour rappel, on élimine le soulignement). Avec le concept d’héritage, les autres etats de liens tels que a:hover profiterons également de cette déclaration.
Pour votre information, a gère tous les états des liens, tandis
que a:link correspond uniquement à l’état
de lien non visité (ne comprend pas le survol et le visité par exemple)
Appliquez ! Cas de la balise de lien <a>
Voici une page HTML avec notre texte de présentation et un lien.
Ce lien ne s’affiche pas correctement, il devrait :
· être de couleur orange et souligné,
· et lors de son survol avec la souris, il devrait être gris et souligné.
· et lors de son survol avec la souris, il devrait être gris et souligné.
Regardez le code et trouver l’intrus ! ;-)
Contradiction lors de la notion d'héritage
Il est possible de constater quelques contradictions lors de
l’utilisation de la notion d’héritage.
Soit la feuille de styles suivante :
a, a:link {font:normal 11px Arial, Helvetica, sans-serif;
color:#000;}
a:hover {color:red;}
a.bleu {color:#3399FF;}
a:hover {color:red;}
a.bleu {color:#3399FF;}
Et le code HTML :
<body>
<p><a href="#" class="bleu">Maitre Corbeau, sur un arbre perché, tenait en son bec un fromage. Maître Renard, par l’odeur alléché, lui tint à peu près ce langage</a></p>
</body>
<p><a href="#" class="bleu">Maitre Corbeau, sur un arbre perché, tenait en son bec un fromage. Maître Renard, par l’odeur alléché, lui tint à peu près ce langage</a></p>
</body>
A votre avis, de quelle
couleur va être le lien ?
Regardons ce que cela donne…
Exemple
Comme vous l’avez contasté, le lien est de couleur bleu.
En effet, le dernier style déclaré l’emporte sur la déclaration
faite sur l’attribut HTML <a
Quizz
Soit le code CSS suivant :
a, a :link {color :aqua ; font-size :11px}
a :hover {color :black}
a.rouge {color :red}
a :hover {color :black}
a.rouge {color :red}
et le code HTML:
<div><a href="#"
class="rouge">Rien ne sert de courir ; il faut partir à
point.</a><div>
A votre avis, de quelle
couleur va être le lien ?
rouge
noir
aqua
Quelques conseils
Voici quelques conseils qui vous permettront d’améliorer vos
feuilles de styles.
Ne retirez pas
le ; après la dernière déclaration ! Pensez au futur…
Exemple :
div {color :#FFF; border: 1px solid red; width:340px;}
Le ; après
340px n’est pas indispensable mais on le laisse en vue d’un prochain attribut à
déclarer.
Evitez d’écrire toutes
les propriétés sur la même ligne ! Clarté, lisibilité…
Préférez :
Body
{
font-size: 10px;
font-family: arial, helvetica sans-serif;
font-height: normal;
color: #FF9900;
}
{
font-size: 10px;
font-family: arial, helvetica sans-serif;
font-height: normal;
color: #FF9900;
}
à
body {font:normal 10px Arial,Helvetica,sans-serif;
color :#FF9900;}
Utilisez des noms de
classes pertinents
Préférez :
.commentaires et .basdepage
Et évitez .style45 !
Le cas des polices relatives : em, %
Il est recommandé d'utiliser des tailles de polices relatives (em
principalement) afin de permettre aux mal-voyants de pouvoir modifier la taille
des polices de caractère selon leur convenance.
En effet, si vous utilisez des unités de mesure absolues (px et pt
par exemple), le visiteur ne pourra pas modifier la taille des polices de
caractères.
Les unités em et % sont relatives à
la police de référence : 1 em
est égal à la taille de cette police.
Cependant, il faut bien comprendre que la taille de la police de
référence se transmet également par héritage.
Par exemple, si
vous définissez une taille de référence de 2em dans le <body>, puis une
autre taille de 2em dans un élément enfant du body (par exemple <table>),
les textes contenus dans l’élément enfant auront une taille de 2em par rapport
à 2em, soit 4em !
Et ainsi de suite si vous cumulez les imbrications de balises
enfants…
Exemple
Voici le code HTML de la page de droite :
<body>
En dehors de toute balise P<br />
<p>Dans une balise P !</p>
</body>
En dehors de toute balise P<br />
<p>Dans une balise P !</p>
</body>
La première phrase n’est comprise dans aucune balise p et subit la
mise en forme de la balise body. Soit une taille de 1.5em.
La seconde phrase est comprise dans une balise p et subit la mise
en forme de cette balise mais également la
mise en forme héritée de la balise body. Soit 1.5em deux fois !
Conclusion
Nous voici déjà arrivés au terme de ce cours. Nous espérons que
les feuilles de styles CSS vous sont devenues plus familières.
Au fil des différents modules, vous avez ainsi pu apprendre
comment dissocier la structure d’une page Web (le code HTML) de sa mise en
forme (le code CSS) et concevoir des design soignés pour vos sites Web.
Avant de quitter ce module, n’oubliez pas de réaliser la
dernière évaluation. Elle est un peu particulière : il
s’agit d’un sondage d’opinion concernant le cours que vous venez de suivre.
Votre avis nous est très précieux…
_____
Remarque :
Si vous avez rencontré des problèmes techniques dans ce module, n’hésitez pas à
prendre contact avec notre support technique par e-mail (supportfad@technofuturtic.be). Il
se fera un plaisir de vous aider
Mémo
La notion d'héritage en CSS
Le modèle parent-enfant (ou héritage) est une notion fondamentale
des feuilles de styles CSS.
L’élément enfant hérite des propriétés de l’élément parent (sauf
dans certains cas comme les propriétés des blocs tels que margin, padding).
Prendre en compte la notion parent-enfant dès le début de la
conception :
· permet l’optimisation de la CSS (poids plus léger, code moins
dense)
· évite la création de classes répétitives.
· évite la création de classes répétitives.
Compléments
Bienvenue dans la partie Compléments du module 8.
Vous trouverez ci-après des explications concernant la validation
du code (X)HTML et CSS, mais également quelques questions complémentaires qui
vous permettront de tester vos acquis.
Questions complémentaires
Le modèle parent-enfant,
c’est…
L’élément
enfant hérite du style de l’élément parent
L’élément
enfant est indépendant de l’élément parent
L’élément
parent hérite du style de l’élément parent
Soit le style suivant
body {background: red;}. De quelle couleur sera l’arrière plan du contenu se
trouvant dans la balise <p> ?
Blanc
(par défaut)
Rouge
Ni
l’un, ni l’autre
Questions complémentaires (suite)
Le modèle parent-enfant
agit également sur la balise <a>.
Vrai
Faux
La CSS suivante est-elle
correcte : p {font: normal 10px/50% Arial, Helvetica, sans-serif
#fff;} ?
Oui
Non,
la couleur doit être comprise par l’attribut « color »
Non,
50% est de trop
Pourquoi valider son code HTML &
CSS ?
Il est possible de valider ses pages HTML et CSS.
Hormis le fait d’avoir une page
structurée convenablement, l’intérêt premier d’une
validation est le référencement.
En effet, le robot des différents moteurs de recherche (Google,
Bing, Yahoo,...) lira plus facilement votre code HTML et trouvera les informations
à référencer.
De plus, il faut savoir que lorsque votre page n’est pas validée,
le code invalide sera traité différemment par chaque
navigateur
Comment valider son code HTML &
CSS ?
Pour valider vos pages HTML et CSS, vous pouvez utiliser les validateurs
du W3C :
Validateur HTML
·
Ce site vous permet de vérifier la validité et la conformité de
votre code HTML avec les standards en vigueur.
Validateur CSS
·
Ce site vous permet de vérifier la validité et la conformité de
votre code CSS avec les standards en vigueur.
HTML Tidy Validator
·
Cette extension (prévue pour Firefox) vous permet la validation
de votre page dés l’affichage de celle-ci dans Firefox. Vous pouvez également
avoir un aperçu de votre code, ainsi que les lignes et le type d’erreurs
rencontrées dans votre page HTML.
Aucun commentaire:
Enregistrer un commentaire
Remarque : Seul un membre de ce blog est autorisé à enregistrer un commentaire.