Formation au code css



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>

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>

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;
}
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 ;).
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;
}
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-colorred;
font-familyArial, 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>
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 <<<----------*/
Precedent
Suivant

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.

Liste complète des sélecteurs CSS 3

·         Cette liste passe en revue tous les types de sélecteurs
Precedent

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;
}
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;
}

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

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.
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.
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.
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.
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)
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.
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).
Listes HTML
Il existe deux types listes en html : 
  1. les listes à puces : <ul>
  2. 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
  1. Café
  2. 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.
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.
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.
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).
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.
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.
· 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).

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 :
"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."
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.
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;
}
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>
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>
Citation de Henry David Thoreau
… avec bien sûr la règle de style :
.rouge{
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 pageimage 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…)
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.
Exemple :
Rappel :
· Axe X = axe horizontal,
· 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)).
Exemples :
· body {background-color: white ;}
· 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.
Les valeurs correspondantes dans la propriété background-attachment sont :
· fixed : l’image de fond sera fixe,
·
 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.
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 :
·         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 étatnon 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.
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.
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 :
LoVHAte
- (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.
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.
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.
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.
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.
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.

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

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;
}
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;}
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;
}
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;
}
p
{
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-size: 12px;
}

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)
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;
}
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.
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é.
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;}
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>
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}
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;
}
à
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>
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.

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.