Programmation web1partie3

Matière : Programmation Web1 ISET Bizerte 2013/2014 Enseignante : Ouroud HENIA Classe : TI13

37

ChapitreIV:LesfeuillesdestyleCSS

IV.1 Introduction Le CSS (Cascading Style Sheets) est utilisé pour la mise en forme des pages web. Il consiste à regrouper dans un même document des caractéristiques de mise en forme associées à des groupes d'éléments. Il suffit de définir par un nom un ensemble de définitions et de caractéristiques de mise en forme, et de l'appeler pour l'appliquer à un texte. Il est ainsi possible de créer un groupe de titres en police Arial, de couleur verte et en italique. Le but de CSS est de séparer les données de la mise en forme. Il permet d'obtenir une présentation homogène sur tout un site en faisant appel sur toutes les pages à une même définition de style.

Les spécifications des feuilles de style deviennent une recommandation du consortium W3C en décembre 1996 sous l'appellation CSS1 pour Cascading Style Sheets, level 1. Ce même niveau 1 a été révisé en janvier 1999.

Entre-temps, ces spécifications ont été élargies sous la forme du CSS2 pour Cascading Style Sheets, level 2 en mai 1998. Elles précisent entre autres :

• des styles différents pour les médias différents (écran, impression, synthétiseur de parole, braille...) ;

• les polices de caractères téléchargeables ; • le positionnement des éléments HTML (appelé par ailleurs CSS-P).

La dernière version de CSS est CSS3 qui est en cours de développement depuis 2010.

IV.2 Niveaux d’insertion de CSS Le code CSS peut être placé à 4 endroits différents dans la page.

• Interne : Dans la page HTML • Externe : Dans un fichier indépendant

• Dans l'élément (balise) HTML lui-même • A partir d’un style importé

IV.2.1 Dans le code HTML de la page

Mettre le code CSS dans la page HTML, entre les deux balises <head> et </head> Une feuille globale va se déclarer dans la tête du document, entre les balises HEAD. Elle va s'appliquer globalement à toutes les balises du document qu'elle a défini. <HTML> <HEAD>


38

<STYLE type="text/css"> <!—code css --> </STYLE> </HEAD>

<BODY>

• La balise <STYLE> avertit le navigateur que l'on va utiliser des feuilles de style. • L'attribut type="text/css" informe que ce qui suit est du texte et qu'il s'agit de cascading

style sheets (css).

IV.2.2 Dans un document séparé : fichier CSS

Une feuille liée va se déclarer à part, dans un fichier avec une extension .css qui sera mis à côté des autres documents dans le répertoire du site web. Cette feuille de style sera valable pour toutes les pages du site qui l'appelleront dans les balises HEAD. C'est un outil très puissant pour uniformiser la mise en pages d'un grand nombre de documents. Principe : On crée d'abord, dans le répertoire du site, un fichier avec l'extension .css soit « styles.css » qui contiendra toutes les feuilles de style. body {background-image: home.gif;} LI {font: 13px Verdana;} p {font: 14px Verdana; font-weight: bold;} H1 {font: 16px Arial;font-weight: bold;color=blac k;} H2 {font: 14px Arial;font-weight: bold;color=blac k;}

Ensuite, on crée une page soit page.htm avec dans la <HEAD> un lien vers ce fichier CSS:

<HTML> <HEAD> <LINK rel=stylesheet type="text/css" href="styles.c ss"> </HEAD>

Commentaires :

• La balise <LINK> avertit le browser qu'il faudra réaliser un lien.

• L'attribut rel=stylesheet (sans s et sans guillemets) précise qu'il y trouvera une feuille de style externe.

• L'attribut type="text/css" précise que l'information est du texte et du genre cascading style sheets (css).

• L'attribut classi&que de lien href=" ... " donne le chemin d'accès et le nom du fichier à lier.

IV.2.3 Dans la balise HTML

Il possible de mettre un style directement dans une balise HTML <HTML> <HEAD> ...


39

</HEAD> <BODY> ... <BALISE Style="style:valeur;"> ... </BALISE> ... </BODY> </HTML>

Exemple :

<HTML> <BODY> <H1 style="font-family: Arial; font-style: italic"> blabla </H1> </BODY> </HTML>

IV.2.4 Style importé

Les recommandations du W3C offrent une dernière façon d'inclure des feuilles de style dans un document: en important des feuilles de style. Il est en effet possible d'importer des feuilles de style externes au niveau de la déclaration du style de document, en insérant la commande @IMPORT immédiatement après la balise style : <HTML> <HEAD> <STYLE type="text/css">  </STYLE> </HEAD> <BODY></BODY> </HTML>

IV.3 Notion de feuille de style en cascade

L’abréviation CSS signifie Cascading Style Sheet ou encore Feuille de style en cascade. Pourquoi « cascade » ?

Ce mot « cascade » fait référence à la méthode de résolution des conflits : puisqu'on peut placer plusieurs feuilles de style dans un même document (en lien, dans le head , en ligne dans la balise) les instructions de style successives peuvent s'opposer. Les ordres de style arrivent donc « en cascade ». Comment résoudre les conflits ?

Comme pour le HTML, le dernier qui parle a raison. On aura donc la hiérarchie :

feuille de style extérieure << feuille de style dans le head << style en attribut dans la balise


40

IV.4 Syntaxe

IV.4.1 Structure générale

Construction d'une règle

Une feuille de style est une suite de règles selon cette structure :

selecteur { propriété : valeur } Une règle a deux parties :

• Un sélecteur ; dans l'exemple suivant il s'agit de h2 ;

• Une déclaration ; c'est une suite de paires propriété: valeur séparées par un point -virgule, le tout placé entre accolades. Ici dans cet exemple il s'agit de {text-align:

center ; color: black} .

Exemple

h2 { text-align : center; color : black; }

Tous les titres de niveau 2 auront leur texte centré et de couleur noire.

Commentaires

Il est possible d'ajouter des commentaires dans une feuille de style. Une zone de commentaires commence par les caractères /* et se termine par les caractères */ . Elle peut s'étendre sur plusieurs lignes. Par exemple :

/* Mise en forme des éléments h2 */ h2 { text-align : center; color : black; }

IV.4.2 Sélecteurs simples

Balise

Il s'agit du sélecteur le plus simple possible, où le sélecteur reprend le nom de l'élément auquel la propriété s'applique :


41

p { text-align : justify; color : black; }

En utilisant l'attribut style , l'exemple précédent devient :

<p style="text-align: center; color: black">(...)</p>

Il est possible de grouper les balises à l'aide de virgules :

h2, h3, ul { text-align : center; color : green; }

Dans cet exemple, tous les titres de niveaux 2 et 3 et les listes non ordonnées seront centrés et de couleur verte.

Classe L'attribut class est un attribut qui peut apparaître dans n'importe quelle balise. Exemple :

.truc { color : red; } .machin { color : blue; }

Noter le point devant le sélecteur.

<p class="truc">Ceci est un paragraphe d'introducti on.</p> <table summary="Un tableau peu informatif" class="m achin"> <tr> <td>Et voici</td> <td>un</td> <td class="truc">tableau</td> </tr> <tr class="truc"> <td>de deux lignes</td> <td>et</td> <td class="truc">trois colonnes</td> </tr> </table> <ol class="truc"> <li>Et ceci</li> <li class="machin">est une</li>


42

<li class="truc">liste</li> </ol>

Il est possible, également, de spécifier que certains éléments seulement d'une classe donnée soient concernés. Par exemple, le code suivant permet de sélectionner tous les éléments div de classe menu. S'il y a un élément p de classe menu, il ne sera pas concerné et conservera sa couleur de fond par défaut :

div.menu { background-color : gray; }

Il est également possible d'appliquer plusieurs classes à un élément. Ainsi, si dans la feuille de style on écrit...

.appartient_a_dupont { color : red; } .vehicule { font-style : italic; }

... le code HTML

<span class="vehicule appartient_a_dupont"> bicycl ette</span>

affichera le mot bicyclette en italique et en rouge.

Identifiant L'attribut id est un attribut qui peut aussi apparaître dans n'importe quel élément. La très grande différence avec l'attribut class est qu'une valeur de id ne peut être prise qu'une seule fois dans toute la page Web. C'est un identifiant : par nature, sa valeur est unique. Exemple :

<p id="monpar">Ceci est un paragraphe d'introductio n.</p> <ol id="maliste"> <li>Et ceci</li>


43

<li id="item2">est une</li> <li class="truc">liste<img src="images/chapeauron d.gif" alt="Vive la Bretagne!" height="20" width="40" id="monimage"></l i> </ol>

On peut alors associer plusieurs règles à chaque id de la manière suivante :

#monpar, #monimage { color : red; border : solid 0.5em blue; } #liste1, #monimage { background-color : yellow; } #maliste { background-color : yellow; color : orange; } #item2 { font-variant : small-caps; font-style : oblique; }

Classes universelles : balises DIV et SPAN en CSS

Ilfautpouvoirdansunmêmeparagrapheappliquerdesstylesdifférentsàdesmorceaux

detexte,c'estàcelaqueserventlesbalises<SPAN>et<DIV>

<SPAN> : Labalise<SPAN>sertàappliquerdesstylesàdesmorceauxdeparagraphe.

Elle s'utilise aussi bien avec ID qu'avec CLASS.

Sasyntaxeestlasuivante:

<SPAN class=Nom_de_la_classe> Texte </SPAN>

<DIV> : Au lieu de s'appliquer à quelques mots dans un paragraphe, la balise DIV

s'appliqueàunbloc,c'est-à-direàunouplusieursparagraphes.

LasyntaxedelabaliseDIVestlasuivante:

<DIV class=important> paragraphes </DIV>


44

IV.4.3 Sélecteurs complexes

Sélecteur contextuel

Prenons un exemple :

h2 em { color : blue; }

Cette règle ne s'appliquera que sur le contenu des éléments em lorsqu'ils seront eux-mêmes à l'intérieur d'un titre de niveau 2 (h2). Autrement dit, la consigne s'applique aux éléments em dans le contexte d'un élément h2.

Syntaxe : les sélecteurs simples sont séparés par des espaces. L'enchâssement est possible avec tous les types de sélecteurs, balise, identifiant, classe comme l'illustrent les exemples suivants :

.copyright h4 { color : blue; } #toto b { font-size : large; } ul ul { list-style : lower-alpha; }

Les regroupements (signifiés par le séparateur virgule) restent possibles :

h1 b, h2 b, b em { color : yellow; }

Pseudo-classes

Nous allons prendre l'exemple des liens. Un lien peut être dans trois états différents :

• actif (lors du clic de la souris) ; • à visiter ; • déjà visité.

Pour les éléments a, on appelle pseudo-classes ces trois états possibles. Ce sont des classes prédéfinies. Voici un exemple :


45

a:active { text-decoration : overline; } a:link { color : blue; font-style : italic; } a:visited { color : green; font-weight : bold; }

La syntaxe est donc [selecteur]:[pseudo-classe] {declaration}

Une pseudo-classe intéressante est la pseudo-classe hover : elle permet d'affecter un style à un élément, lorsque celui-ci est survolé par la souris. Un usage classique consiste à désactiver le soulignement automatique des liens, qui est le comportement par défaut, et de ne le réactiver qu'au passage de la souris :

a { text-decoration : none; } a:hover { text-decoration : underline; }

Pseudo-éléments

CSS1 décrit plusieurs pseudo-éléments :

• first-line modifie le style de la première ligne d'un paragraphe. • first-letter modifie le style de la première lettre d'une phrase. • first-child modifie le style du premier élément-enfant du sélecteur courant. • after modifie le style de ce qui suit l'élément. • before modifie le style de ce qui précède l'élément.

Les trois derniers ne sont pas supportés par Internet Explorer .

Exemple :

p:first-letter { color : red; font-size : 200%; font-weight : bold; }


46

L'exemple précédent permet de colorer en rouge, doubler la taille et mettre en gras la première lettre de tous les paragraphes.

IV.4.4 Unités

Syntaxe

Il ne faut laisser aucun blanc entre le nombre et l'unité. Une longueur peut être précédée d'un signe + ou -.

Unitésabsoluesdelongueur

Unité Notation Conversion

inch (pouce) in 1in=2,54cm

centimètre cm

millimètre mm

point pt 1pt=1/72in=0,352778mm

pica pc 1pc=12pt=4,233mm

Table 1. Unités absolues.

Exemples d'utilisation :

h1 { margin : 0.5in; } h2 { line-height : 3cm; } h3 { word-spacing : 4mm; } h4 { font-size : 12pt; } h5 { font-size : 1pt; }

Le point et le pica sont utilisés pour la taille des caractères.


47

Unitésrelativesdelongueur

Unité Notation Conversion

Em Em 1em est la hauteur d'un caractère (si la hauteur d'un caractère est fixée par l'auteur à 10pt alors 1em=10pt , si elle est fixée à 12pt alors 1em=12pt ).

x-height

ex 1ex est la taille de la lettre 'x' minuscule.

pixel px 1pixel (picture element) : le plus petit élément sur un écran d'ordinateur. Cette unité dépend de l'écran et de son paramétrage.

Table 2. Unités relatives.


h1 { margin : 0.5em; } h2 { line-height : 1ex; } h3 { font-size : 15px; }

Pourcentages

C'est une fraction de la longueur d'un autre élément : largeur de l'écran, hauteur des caractères ou toute autre grandeur dépendant du contexte.


p { line-height : 120%; } td.gauche { width : 33%; }

L'interligne des paragraphes vaut 120% de la hauteur des caractères, tandis que les cellules de classe gauche occuperont 33% de la largeur du tableau où elles se trouvent.

IV.4.5 Couleurs


48

Les couleurs se codent de la même manière qu'en HTML, mais il est également possible de spécifier explicitement le codage RGB :

• une des seize couleurs standard : aqua, black, blue, fuchsia, gray, green,

lime, maroon, navy, olive, purple, red, silver, tea l, white et yellow . • #rrggbb (par exemple, #00cc00 ). • #rgb (par exemple, #0c0 ). • rgb(x1,x2,x3) , où x1, x2 et x3 sont des entiers compris entre 0 et 255 inclus (par

exemple rgb(33,45,127) ). • rgb(x%,y%,z%) où x, y et z sont des nombres compris entre 0.0 et 100.0 inclus (par

exemple rgb(56%,33%,0%) ).

IV.4 Mise en forme du texte

IV.4.1 Quelques propriétés de mise en forme

TEXTE font-family : la police (times, arial, helevetica …) font-size : (small, medium, large, x-large…) font-weight (normal, bold, 120%) font-variant : (normal, small-caps) color : couleur du texte (black, green, #00FF00) text-align: left, center ou right text-transform : none | capitalize | uppercase | lowercase ;

FOND background-color : la couleur du fond (idem) Background-image : image de fond url("truc.jpg")

BORDURES Border-style : solid, dotted, dashed, solid, none Border-width : largeur (1px par exemple) Border-color : red, #00FF00, …

LISTES List-style-type : type de liste (disc, circle, square, decimal, lower-roman ...) list-style-image :image de liste list-style-position

IV.4.2 Les « boîtes »


49

1.lemodèledeboîte

La recommandation CSS1 indique que tous les éléments HTML (sauf ceux qui ne figurent que par leurs adresses : images, son, objets multimédia en général, plug-in...) puissent être considérés comme des blocs rectangulaires. Ce bloc est constitué de plusieurs couches (en pelures d'oignon en quelque sorte) ; on a de l'intérieur vers l'extérieur :

• un contenu (content ) • une zone d'ajustement (padding ) • un encadrement (border ) • une marge (margin )

Cette terminologie est décomposée selon le côté concerné : droite (right), gauche (left), dessus (top), dessous (bottom).

Règlesd'attribution

Pour tous les éléments définis ci-dessus, une propriété définit son épaisseur, il s'agit :

margin Padding border-width

margin-top padding-top border-top-width

margin-right padding-right border-right-width

margin-bottom padding-bottom border-bottom-width

margin-left padding-left border-left-width


50

TD5 : CSS

Exercice 1:

Ecrire le code de la page web suivante en utilisant :

1. une feuille de style interne 2. une feuille de style externe

Correction

1.Feuille de style interne <HTML> <HEAD> <TITLE>Exercice CSS</TITLE> <STYLE TYPE="text/css"> BODY { margin-left: 50px ; color: navy ; backg round: white url(image.gif) ; font-family: Arial, Helvetica, sans-ser if } A:link { color: red } A:active { color: maroon } A:visited { color: maroon } H1,H2,H3,H4 { text-align: center ; font-family : "Comic Sans MS", sans-serif ; font-size: large } H1 { text-align: center ; color: whit e ; background: navy } H2,H3,H4 { text-align: left ; color: navy ; background: white } TH { background: silver } TH,TD { font-family: Arial, Helvetica, sans-s erif } PRE,TT { font-family: monospace ; color: blue ; font-weight:bold }

</STYLE>


51

</HEAD> <BODY> <H1> Titre de niveau 1 </H1> <H2>Titre de niveau 2</H2> <UL> <LI>La couleur par defaut du texte est le bleu nav y <LI>Les titres sont en police Comic sans Ms ou san s-serif <LI>Le texte est en police Arial ou helvetica sans -serif <LI>La page contient l'image "fond_spirale.gif"... <LI>Pour menager de la place à gauche, on définit une marge à gauche de 50 pixels <LI>Les liens <a href="page.html">pas encore visit es </a>sont colorés en "red" et les liens <a href="page.html">deja visi tes </a>en "maroon" <LI><TT>Le texte en PRE ou TT sont en couleur blue et en gras</TT> </UL> <P> <TABLE ALIGN=center WIDTH=60% BORDER=1> <TR> <TH COLSPAN="2">Couleur de fond "silver"</TH> </TR> <TR> <TD>Texte en police sans-serif</TD> <TD>Texte en police sans-serif</TD> </TR> </TABLE> </BODY>

2.Une feuille de style externe Feuille.css BODY { margin-left: 50px ; color: navy ; backgr ound: white url(image.gif) ; font-family: Arial, Helvetica, sans-ser if } A:link { color: red } A:active { color: maroon } A:visited { color: maroon } H1,H2,H3,H4 { text-align: center ; font-family : "Comic Sans MS", sans-serif ; font-size: large } H1 { text-align: center ; color: whit e ; background: navy } H2,H3,H4 { text-align: left ; color: navy ; background: white } TH { background: silver } TH,TD { font-family: Arial, Helvetica, sans-s erif } PRE,TT { font-family: monospace ; color: blue ; font-weight:bold

}


52

page.html <HTML> <HEAD> <TITLE>Exercice CSS</TITLE> <LINK REL="stylesheet" HREF="feuille_style.cs s" TYPE="text/css"> </HEAD> <BODY> <H1> Titre de niveau 1 </H1> <H2>Titre de niveau 2</H2> <UL> <LI>La couleur par defaut du texte est le bleu nav y <LI>Les titres sont en police Comic sans Ms ou san s-serif <LI>Le texte est en police Arial ou helvetica sans -serif <LI>La page contient l'image "fond_spirale.gif"... <LI>Pour menager de la place à gauche, on définit une marge à gauche de 50 pixels <LI>Les liens <a href="css.html">pas encore visite s </a>sont colorés en "red" et les liens <a href="css.html">deja visit es </a>en "maroon" <LI><TT>Le texte en PRE ou TT sont en couleur blue et en gras</TT> </UL> <P> <TABLE ALIGN=center WIDTH=60% BORDER=1> <TR> <TH COLSPAN="2">Couleur de fond "silver"</TH> </TR> <TR> <TD>Texte en police sans-serif</TD> <TD>Texte en police sans-serif</TD> </TR> </TABLE> </BODY>

</HTML>


53

Exercice 2: Mise en page avec CSS Ecrire le code de la page web suivante en utilisant une feuille de style externe.

Correction : Ex2.css div#bandeau { width:600px; height:50px; background-color:#00CCFF; } div#contenu { width:600px; height:400px; background-color:#FFCC00; } div#piedpage { width:600px; height:50px; background-color:#33FF99; clear:both; } div#menu { float:left; width:100px; height:400px; background-color:#FF6699; } div#menuhaut { width:100px; height:200px; background-color:#66CC33; } div#menubas { width:100px; height:200px; background-color:#CC99CC;

}

Ex2.HTML <html> <head> <title>Exercie 2 CSS</title>


54

<LINK REL="stylesheet" HREF="ex2.css" TYPE="text/cs s"> </head> <body> <div id="bandeau">Ceci est le bandeau</div> <div id="menu"> <div id="menuhaut">Menu haut</div> <div id="menubas">Menu bas</div> </div> <div id="contenu">Ceci est le contenu</div> <div id="piedpage">Ceci est le pied de page</div> </body> </html>

Exercice 3: Tableau avec CSS Ecrire le code du tableau suivant en utilisant le CSS

Correction Ex3.css .Tableau span { display:inline; float:left; border:1px solid #FF6600; margin:0px; padding:3px; } .Tableau p { clear:left; margin:0px; padding:0px; height:100% !important; height:1em; } .Tableau p.legende {font-weight:bold} .Tableau span.col1 {width:70px} .Tableau span.col2 {width:120px} .Tableau span.col3 {width:90px}

Ex2.html <html> <head>

<title>Exercie 3 CSS</title>


55

<LINK REL="stylesheet" HREF="ex3.css" TYPE="text/cs s"> </head> <body> <div class="Tableau"> <p class="legende"> <span class="col1">Légende 1</span> <span class="col2">Légende 2</span> <span class="col3">Légende 3</span> </p> <p> <span class="col1">Case 1.1</span> <span class="col2">Case 1.2</span> <span class="col3">Case 1.3</span> </p> <p> <span class="col1">Case 2.1</span> <span class="col2">Case 2.2</span> <span class="col3">Case 2.3</span> </p> </div> </body>

</html>


56

Chapitre5:CSS3

Tags de structuration: Eléments :

• Les éléments section, article, nav, aside, header, footer sont des éléments de structure, plus précis que <span> ou <div>

• Etablis à partir de statistiques d’utilisation des ids et classes les plus populaires du web,

– <div class="aside"> devient <aside> pour les menus sur le côté

• En devenant standards, on peut plus facilement leur appliquer une CSS standard, partageable,

• Les navigateurs peuvent les reconnaître et proposer un rendu spécifique,

• Il devient plus simple de générer une table des matières, par exemple


57


58

Exemple de structure globale <header> <h1>Nouveaux éléments de section, article, header, footer, aside, nav</h1> </header>  <nav>nav <ul> <li><a href="#">Rubrique 1</a></li> <li><a href="#">Rubrique 2</a></li> <li><a href="#">Rubrique 3</a></li> <li><a href="#">Rubrique 4</a></li> </ul> </nav>  <section id="main"> <article> .. </article> </section> Chaque article peut avoir sa propre struct ures <article> <header> <h1>Titre de l'article</h1> <p>Auteur : bidule</p> </header> <nav> <ul> <li><a href="index.html">Page d'accueil</a></li> <li><a href="contact.html">Contact</a></li> </ul > </nav> <p>Contenu de l'article</p> … <footer> <p>Posté par Simon, le <time datetime="2012-02-02 ">2 février 2012</time> </p> </footer> </article>

Documents

Programmation web1partie3