HTML & CSS - Pearson · l application des règles CSS aux pages HTML. Les chapitres suivants de...

10XX Objectif de CSSXX Fonctionnement de CSSXX Règles, propriétés et valeurs

INTRODUCTION À CSS


226 INTRODUCTION À CSS

Dans cette partie de l’ouvrage, nous allons voir comment rendre les pages web plus attrayantes, en contrôlant leur présenta-tion avec CSS.

CSS permet de créer des règles qui régissent l’affichage du contenu d’un élément. Par exemple, nous pouvons indiquer que l’arrière-plan de la page est de couleur crème, que le texte de tous les paragraphes est en gris et en Arial ou que les titres de niveau un sont en bleu, en italique et en Times.

Dès lors que vous savez comment écrire une règle CSS, il ne vous reste plus qu’à connaître les différentes propriétés dispo-nibles. Voici les points traités dans ce chapitre :

l introduction au fonctionnement de CSS ;

l apprentissage de l’écriture des règles CSS ;

l application des règles CSS aux pages HTML.

Les chapitres suivants de cette partie présenteront les diffé-rentes propriétés CSS qui sont à votre disposition.



Aux pages 184 et 185, nous avons expliqué la différence entre les éléments de niveau bloc et ceux de niveau texte, ainsi que leur affichage par les navigateurs.

Les éléments de niveau bloc com-mencent sur une nouvelle ligne. Les éléments <h1> à <h6>, <p> et <div> en sont des exemples.

Les éléments de niveau texte restent dans le flux du texte et ne commencent pas sur une nou-velle ligne. Les éléments <b>, <i>, <img>, <em> et <span> en sont des exemples.

Pour comprendre le fonctionnement de CSS, il faut imaginer qu’une boîte invisible entoure chaque élément HTML.

CSS : RÉFLÉCHIR EN TERMES DE BOÎTES

L’illustration ci-contre correspond à une page HTML de base.

La page suivante présente la même page HTML dans laquelle nous avons ajouté un contour à chaque élément afin que vous compreniez comment chacun d’eux sera traité par CSS ; c’est comme si chacun se trouvait dans sa propre boîte.

ÉLÉMENTS DE NIVEAU BLOC ET DE NIVEAU TEXTE


229INTRODUCTION À CSS

CSS permet de créer des règles qui contrôlent la présentation de chaque boîte individuelle et de son contenu.

Dans cet exemple, les éléments de niveau bloc sont affichés avec une bordure rouge, les éléments de niveau texte, avec une bor-dure verte.

L’élément <body> génère la pre-mière boîte, puis les éléments <h1>, <h2>, <p>, <i> et <a> pro-duisent chacun leur propre boîte à l’intérieur de la première.

Grâce à CSS, nous pouvons ajou-ter une bordure autour de chaque boîte, préciser sa largeur et sa hauteur, et définir sa couleur d’arrière-plan. Nous pouvons aussi modifier l’aspect du texte dans la boîte, comme sa couleur, sa taille et sa police.

Largeur et hauteur, bordures (couleur, épaisseur et style), couleur et image d’arrière-plan, position dans la fenêtre du navi-gateur.

Police de caractères, taille, cou-leur, italique, gras, majuscule, minuscule et petite majuscule.

Il existe également des possibili-tés de style spécifiques pour cer-tains éléments, comme les listes, les tableaux et les formulaires.

EXEMPLES DE STYLES

BOÎTES TEXTE SPÉCIFIQUES



Cette règle stipule que tous les éléments <p> doivent être affi-chés dans la police de caractères Arial.

Le sélecteur cible l’élément au-quel la règle s’applique. La même règle peut concerner plusieurs éléments si les noms de ceux-ci sont séparés par des virgules.

Les déclarations précisent le style des éléments désignés par le sélecteur. Chaque déclaration est constituée d’une propriété et de sa valeur. Les différentes déclarations sont séparées par des points-virgules.

CSS se fonde sur l’association de règles aux éléments HTML. Ces règles régissent l’affichage du contenu des éléments indiqués et comprennent deux parties : un sélecteur et une déclaration.

ASSOCIATION DES RÈGLES DE STYLE AUX ÉLÉMENTS HTML

p { font-family: Arial;}

SÉLECTEUR

DÉCLARATION



Cette règle stipule que tous les éléments <h1>, <h2> et <h3> doivent être affichés dans la po-lice Arial et en jaune.

Les propriétés indiquent les aspects des éléments que vous souhaitez modifier. Il s’agit par exemple de la couleur, de la po-lice, de la largeur, de la hauteur et de la bordure.

Les valeurs correspondent aux paramètres à appliquer aux pro-priétés indiquées. Par exemple, pour donner une couleur précise au texte des éléments sélection-nés, la valeur de la propriété doit être cette couleur.

Les déclarations CSS sont placées entre des accolades et chacune est constituée d’une propriété et d’une valeur, séparées par des deux-points. Les différentes déclarations sont séparées par des points-virgules.

AFFICHAGE DES ÉLÉMENTS SOUS LE CONTRÔLE DES

PROPRIÉTÉS CSS

h1, h2, h3 { font-family: Arial; color: yellow;}

PROPRIÉTÉ VALEUR



EXEMPLEINTRODUCTION À CSS

Voici une page web simple à laquelle des styles CSS sont appliqués.

Cet exemple implique deux documents : le fichier HTML (exemple.html) et un fichier CSS (exemple.css). La cinquième ligne du code HTML uti-lise l’élément <link> pour indiquer l’emplacement du fichier CSS.

Sur la page suivante, vous verrez comment intégrer des règles CSS dans la page HTML et nous expliquerons pourquoi procéder ainsi.

<!DOCTYPE html><html> <head> <title>Introduction à CSS</title> <link href="css/exemple.css" type="text/css" rel="stylesheet" /> </head> <body> <h1>Du jardin à l’assiette</h1> <p>Un <i>jardin potager</i> est un jardin ou une partie de jardin où se pratique... </p> <h2>Structure du potager</h2> <p>La structure la plus efficace est la culture en planches en orientation Nord-Sud... </p> </body></html>

body { font-family: Arial, Verdana, sans-serif;}h1, h2 { color: #ee3e80;}p { color: #665544;}



R É S U LTAT

<!DOCTYPE html><html> <head> <title>Styles CSS externes</title> <link href="css/styles.css" type="text/css" rel="stylesheet" /> </head> <body> <h1>Pommes de terre</h1> <p>Il existe des dizaines de variétés de pommes de terre. On distingue les variétés de primeur et de conservation.</p> </body></html>

chapitre-10/styles-css-externes.html H TM L<link>L’élément <link> est utilisé dans un document HTML pour indi-quer au navigateur l’emplace-ment du fichier CSS qui définit les styles de la page. Cet élément vide (sans balise de fermeture) est placé dans l’élément <head> et définit trois attributs.

hrefIl précise le chemin du fichier CSS (souvent enregistré dans un dossier nommé css ou styles).

typeCet attribut indique le type du document lié. Sa valeur doit être text/css.

relIl définit la relation entre la page HTML et le fichier lié. Sa valeur doit être stylesheet dans le cas d’un lien vers un fichier CSS.

Une page HTML peut employer plusieurs feuilles de style CSS. Il suffit de définir un élément <link> pour chaque fichier CSS. Par exemple, certains auteurs utilisent un fichier CSS pour la présentation (police de carac-tères et couleurs) et un second pour la mise en page.

STYLES CSS EXTERNES

body { font-family: arial; background-color: rgb(185,179,175);}h1 { color: rgb(255,255,255);}

chapitre-10/styles.css C S S


235INTRODUCTION À CSS 235INTRODUCTION À CSS

<!DOCTYPE html><html> <head> <title>Styles CSS internes</title> <style type="text/css"> body { font-family: arial; background-color: rgb(185,179,175);} h1 { color: rgb(255,255,255);} </style> </head> <body> <h1>Pommes de terre</h1> <p>Il existe des dizaines de variétés de pommes de terre. On distingue les variétés de primeur et de conservation.</p> </body></html>

chapitre-10/styles-css-internes.htmlH TM L

R É S U LTAT

<style>Les règles CSS peuvent égale-ment être déclarées dans la page HTML, en les insérant dans un élément <style>, généralement placé dans l’élément <head>.

L’élément <style> doit utiliser l’attribut type pour indiquer que les styles sont définis en CSS. Sa valeur doit être text/css.

Si votre site comprend plusieurs pages, il est préférable d’utiliser une feuille de style CSS externe, pour les raisons suivantes :

l Toutes les pages utilisent les mêmes règles de style sans avoir à les répéter dans chaque page.

l Le contenu de la page reste séparé de sa présentation.

l Les styles employés par les pages peuvent être modifiés à partir d’un seul fichier (au lieu de retoucher chaque page individuelle).

STYLES CSS INTERNES

En HTML 4 et en XHTML Tran-sitional, vous pouvez utiliser un attribut style sur la plupart des éléments définis dans le corps de la page. Les règles CSS décla-

rées dans la valeur de cet attri-but s’appliquent uniquement à l’élément concerné. Vous devez éviter cette méthode avec les nouveaux sites, mais elle est

mentionnée car vous la rencon-trerez dans le code ancien. Voici comment mettre en rouge le texte d’un seul paragraphe :<p style="color:red;">

C S S+



Il existe différents types de sé-lecteurs CSS pour que vous puis-siez appliquer des règles à des éléments précis d’un document HTML.

Le tableau de la page suivante recense les sélecteurs CSS les plus utilisés.

Le fichier HTML ci-contre com-prend des éléments avec les-quels ces sélecteurs CSS peuvent être utilisés.

Puisque les sélecteurs CSS sont sensibles à la casse, ils doivent correspondre exactement aux noms d’éléments et aux valeurs d’attributs.

À la page 291, nous présenterons d’autres sélecteurs plus élabo-rés, qui permettent de sélection-ner des éléments en fonction des attributs et de leur valeur.

IE 7 a été la première version d’Internet Explorer à prendre en charge les deux derniers sélec-teurs du tableau (les sélecteurs de frère adjacent). C’est pour-quoi ils sont moins utilisés que les autres.

<!DOCTYPE html><html> <head> <title>Sélecteurs CSS</title> </head> <body> <h1 id="top">Calendrier du potager</h1> <p id="introduction">Voici un petit guide des travaux à réaliser au jardin.</p> <h2>Printemps</h2> <ul> <li><a href="mulch.html"> Couvrir les légumes d’un paillis</a></li> <li><a href="potato.html"> Planter les pommes de terre précoces</a></li> <li><a href="tomato.html"> Semer les graines de tomates</a></li> <li><a href="beet.html"> Semer les graines de betteraves</a></li> <li><a href="zucchini.html"> Semer les graines de courgettes</a></li> <li><a href="rhubarb.html"> Couper les fleurs fanées de rhubarbe</a></li> </ul> <p class="note"> Cette page a été rédigée par <a href="mailto:[email protected]"> [email protected]</a> pour <a href="http://www.exemple.fr">Exemple</a>. </p> <p> <a href="#top">Début de la page</a> </p> </body></html>

chapitre-10/selecteurs-css.html H TM L

SÉLECTEURS CSS



* {}Cible tous les éléments de la page

h1, h2, h3 {}Cible les éléments <h1>, <h2> et <h3>

.note {}Cible tout élément dont l’attribut class a la valeur notep.note {}Cible uniquement les éléments <p> dont l’attribut class a la valeur note

#introduction {}Cible l’élément dont l’attribut id a la valeur introduction

li>a {}Cible tous les éléments <a> qui sont des enfants d’un élément <li> (mais sans les autres élé-ments <a> de la page)

p a {}Cible tous les éléments <a> qui se trouvent dans un élément <p>, même ceux à plusieurs niveaux d’imbrication

h1+p {}Cible le premier élément <p> qui vient après un élément <h1> (sans les éléments <p> suivants)

h1~p {}Si deux éléments <p> sont les frères d’un élément <h1>, la règle s’applique aux deux

SÉLECTEUR UNIVERSEL

SÉLECTEUR DE TYPE

SÉLECTEUR DE CLASSE

SÉLECTEUR D’IDENTIFIANT

SÉLECTEUR D’ENFANT

SÉLECTEUR DE DESCENDANT

SÉLECTEUR DE FRÈRE ADJACENT

SÉLECTEUR DE FRÈRE GÉNÉRAL

S’applique à tous les éléments du document

Correspond aux noms des élé-ments

Correspond aux éléments dont la valeur de l’attribut class est celle indiquée après le point

Correspond à l’élément dont la valeur de l’attribut id est celle indiquée après le symbole dièse

Correspond aux éléments qui sont les enfants directs d’un autre

Correspond aux éléments qui sont des descendants de celui indiqué (pas uniquement ses enfants directs)

Correspond à l’élément enfant qui suit immédiatement un autre enfant de même parent

Correspond aux éléments qui sont les frères d’un autre, même s’ils ne le suivent pas directement

SÉLECTEUR DESCRIPTION EXEMPLE



<h1>Pommes de terre</h1><p id="intro">Il existe des <i>dizaines</i> de variétés de <b>pommes de terre</b>.</p><p>On distingue les variétés de primeur et de conservation.</p>

chapitre-10/cascade.html H TM LSi deux règles ou plus s’ap-pliquent aux mêmes éléments, il est important de comprendre comment est donnée la priorité.

DERNIÈRE RÈGLESi deux sélecteurs sont iden-tiques, le dernier est prioritaire. Dans l’exemple, le second sélec-teur i prend le pas sur le premier.

SPÉCIFICITÉSi un sélecteur est plus spéci-fique que les autres, les règles les plus précises sont prioritaires sur les plus générales. Dans notre exemple :

h1 est plus précis que *p b est plus précis que pp#intro est plus précis que p

IMPORTANTEn ajoutant !important après la valeur d’une propriété, vous indi-quez qu’elle doit être considérée plus importante que les autres règles qui s’appliquent au même élément.

Grâce à la maîtrise de la cascade des règles CSS, vous pourrez obtenir des feuilles de style plus simples en écrivant des règles génériques qui s’appliquent à la majorité des éléments, puis en redéfinissant les propriétés des éléments individuels qui doivent être affichés différemment.

CASCADE DES RÈGLES CSS

R É S U LTAT

* { font-family: Arial, Verdana, sans-serif;}h1 { font-family: "Courier New", monospace;} i { color: green;} i { color: red;} b { color: pink;} p b { color: blue !important;} p b { color: violet;}p#intro { font-size: 100%;}p { font-size: 75%;}

C S S


239INTRODUCTION À CSS 239INTRODUCTION À CSS

R É S U LTAT

<div class="page"> <h1>Pommes de terre</h1> <p>Il existe des dizaines de variétés de pommes de terre.</p> <p>On distingue les variétés de primeur et de conservation.</p></div>

chapitre-10/heritage.htmlH TM LSi vous définissez les propriétés font-family ou color sur l’élé-ment <body>, elles s’appliquent à la plupart des éléments enfants. En effet, la valeur de la propriété font-family est héritée par les éléments enfants. Cela vous évite d’appliquer ces propriétés à un grand nombre d’éléments et conduit à des feuilles de style plus simples.

Ce principe ne concerne pas cer-taines autres propriétés, comme background-color ou border, qui ne sont pas héritées par les éléments enfants. Si c’était le cas, la page aurait probablement un aspect quelque peu négligé.

Vous pouvez obliger un grand nombre de propriétés à hériter de la valeur donnée par leurs pa-rents en leur affectant la valeur inherit. Dans l’exemple, l’élé-ment <div> dont l’attribut class vaut page hérite de l’espacement défini par la règle CSS qui s’ap-plique à l’élément <body>.

HÉRITAGE

body { font-family: Arial, Verdana, sans-serif; color: #665544; padding: 10px;} .page { border: 1px solid #665544; background-color: #efefef; padding: inherit;}

C S S



Toutes vos pages web peuvent partager la même feuille de style. Pour cela, il suffit d’utiliser l’élé-ment <link> sur chaque page HTML du site en faisant réfé-rence au même document CSS. Ainsi, il est inutile de répéter le même code sur chaque page (d’où moins de code et des pages HTML plus réduites). Après que

l’internaute a téléchargé la feuille de style CSS, les autres parties du site se chargeront plus rapi-dement. Pour modifier un aspect du site, seul le fichier CSS doit être retouché et toutes les pages bénéficieront de la mise à jour. Par exemple, le style de tous les éléments <h1> peut être modi-fié dans l’unique feuille de style

CSS plutôt qu’en changeant les règles CSS dans toutes les pages. Puisque les règles CSS sont ab-sentes du code HTML, celui-ci sera plus facile à lire et à modi-fier. Les bonnes pratiques veulent que le contenu du site soit séparé des règles qui régissent son affi-chage.

Lorsque vous développez un site web, il y a plusieurs avantages à placer les règles CSS dans une feuille de style séparée.

FEUILLES DE STYLE EXTERNES

Si vous créez une seule page, vous pouvez choisir de placer les règles et le code HTML dans le même fichier afin que l’ensemble du contenu se trouve au même endroit. Toutefois, de nombreux auteurs considèrent qu’il est pré-férable de laisser le CSS dans un fichier séparé.

Si une seule page nécessite quelques règles supplémen-taires, non utilisées par les autres pages du site, vous pouvez envi-sager de les placer directement dans la page. De nouveau, la plupart des auteurs considèrent qu’il est préférable de les laisser dans un fichier séparé.

Dans les exemples de cet ou-vrage, les règles CSS sont géné-ralement insérées dans l’élément <head> du document en utilisant un élément <style>. Nous avons adopté cette solution car elle vous évite d’ouvrir deux fichiers pour étudier le fonctionnement des exemples CSS.

Il est parfois possible d’envisager l’insertion des règles CSS dans la même page que le code HTML.



Comme il a existé plusieurs ver-sions de HTML, CSS a fait l’objet de différentes évolutions.

Les navigateurs ne mettent pas en œuvre toutes les caracté-ristiques de CSS et certains ne gèrent pas certaines propriétés.

Nous signalerons les cas qui peuvent vous concerner, en men-tonniant les comportements éventuellement inattendus.

Avant de mettre un nouveau site en production, testez-le avec plusieurs navigateurs, car ils peuvent afficher les pages avec de légères différences.

Vous n’avez pas besoin de nom-breux ordinateurs pour tester votre site, car des outils en ligne sont capables de montrer l’appa-rence d’une page dans les diffé-rents navigateurs :

BrowserCam.comBrowserLab.Adobe.com BrowserShots.orgCrossBrowserTesting.com

N’hésitez pas à utiliser ces outils pour tester le site sur différents systèmes d’exploitation (Win-dows, Mac OS et Linux) et les versions anciennes et récentes des navigateurs.

En examinant votre site dans différents navigateurs, vous ris-quez de constater que certains éléments de la page n’ont pas l’aspect attendu.

Lorsqu’une propriété CSS n’a pas l’effet supposé, vous faites face à une excentricité du navigateur ou bogue CSS.

Certains bogues des navigateurs sont cités dans cet ouvrage, mais il en existe de nombreux qui ne surviennent que dans de rares cas ou sur des anciens naviga-teurs que peu d’internautes uti-lisent encore.

Si vous rencontrez un bogue CSS, tournez-vous vers votre moteur de recherche préféré pour trou-ver une solution. Vous pouvez également consulter les sites suivants :

PositionIsEverything.netQuirksMode.org

CSS1 a été publiée en 1996, suivie deux ans plus tard de CSS2. Les travaux sur CSS3 ne sont pas encore terminés, mais les principaux navigateurs ont déjà commencé à la mettre en œuvre.

Tout utilisateur aguerri de CSS pourra vous parler de navigateurs qui traitent quelques propriétés CSS de manière inattendue. Trouver et élimi-ner ces bogues reste simple lorsque l’on sait comment procéder.

VERSIONS DE CSS ET EXCENTRICITÉS DU

NAVIGATEUR


EN RÉSUMÉINTRODUCTION À CSS

XX CSS traite chaque élément HTML comme s’il apparais-sait à l’intérieur de sa propre boîte et se fonde sur des règles pour déterminer l’apparence de cet élément.

XX Les règles sont constituées de sélecteurs, qui précisent les éléments auxquels elles s’appliquent, et de déclara-tions, qui définissent l’apparence de ces éléments.

XX Grâce aux types de sélecteurs disponibles, vous pouvez appliquer les règles aux différents éléments.

XX Les déclarations sont constituées de deux parties : les propriétés de l’élément que vous souhaitez modifier et les valeurs de ces propriétés. Par exemple, la propriété font-family permet de changer de police de carac-tères et la valeur arial indique d’utiliser la police Arial.

XX Les règles CSS sont généralement données dans un do-cument séparé, mais elles peuvent également être insé-rées directement dans la page HTML.


HTML & CSS - Pearson · l application des règles CSS aux pages HTML. Les chapitres suivants de...

Documents

Transcript of HTML & CSS - Pearson · l application des règles CSS aux pages HTML. Les chapitres suivants de...