• Aucun résultat trouvé

[PPT] Apprendre CSS pas à pas document de formation approfondie | Cours informatique

N/A
N/A
Protected

Academic year: 2021

Partager "[PPT] Apprendre CSS pas à pas document de formation approfondie | Cours informatique"

Copied!
29
0
0

Texte intégral

(1)
(2)

Une feuille de style est un

document numérique qui va

pouvoir spécifier toutes les

caractéristiques de mises en

formes du document lié à la

balise à laquelle elle

(3)

 Je veux mettre une partie de mon texte

dans une balise <H1> d'une autre couleur que celle définie par <H1>. J'utilise alors un autre marqueur de style , et le tour est joué. De même je peux vouloir étendre les propriétés d'H1, par exemple sur le style du caractère, il me suffira là encore de rajouter une mention de style par une balise ou un autre marqueur.

Précisons pour terminer que les feuilles de style ne sont pas une composante directe du langage Html mais un développement à part dans la publication

(4)

L'utilisation de feuilles de styles

permet de séparer la forme du fond

présente de nombreux avantages.

En particulier la conception et la

maintenance

des

sites

sont

simplifiés. De plus leur utilisation

permet d'améliorer l'accessibilité

des sites de façon sensible, sans

altérer du tout la qualité visuelle des

documents, bien au contraire.

(5)

Voici un exemple de règle

CSS permettant d'afficher les

entêtes principaux (H1) en

bleu :

(6)

Une règle CSS est composée

de 2 parties : un sélecteur

(ici H1) et une déclaration

(color:blue). Une déclaration

à elle-même deux parties :

une propriété (color) et une

valeur (blue).

(7)

Les sélecteurs sont les

éléments HTML, on peut

donc indiquer pour chaque

élément un ensemble de

déclarations (lorsqu'il y en a

plusieurs, on les sépare avec

des points virgules).

(8)

De même si des déclarations

s'appliquent

à

plusieurs

sélecteurs,

on

peut

les

regrouper.

Dans

l'exemple

suivant, on affiche les entêtes et

paragraphes en rouge et on

place une marge gauche de

1cm dans tous les paragraphes,

que l'on affiche en italique.

(9)

Il y a deux méthodes principales

pour placer une feuille de style.

La première consiste à placer la

feuille de style dans l'entête de

document. La seconde consiste à

placer la feuille de style dans un

fichier séparé, et à y faire

référence dans l'entête du

document. Cette dernière

technique permet de réutiliser la

même feuille de style dans

(10)

<HEAD><TITLE>...</TITL

E><STYLE

type="text/css"><!--H1

{ color : blue

(11)

<HEAD><TITLE>...</TI

TLE><LINK

rel=STYLESHEET

Href="styles.css"

type="text/css"></HEA

D>

(12)

 Voici tout d'abord un ensemble de propriétés

parmi les plus utilisées.

font-family

 Nom de la police de caractères à utiliser

 font-family : Arial;

font-style

 Style de la police de caractères. Valeurs

possibles : normal, italic, oblique

 font-style : italic;

font-weight

 Epaisseur de la police de caractères. Valeurs

possibles normal, bold, bolder, lighter, 100, 200, 300,... 900.

(13)

 font-weight : bold;  font-size

 taille de la police de caractères. Valeurs

possibles xx-small, x-small, small, medium, large, x-large, xx-large, larger, smaller.

On peut aussi utiliser une taille absolue : 12pt (pour 12 points) ou un pourcentage (par rapport à la taille par défaut).

 font-size : x-small;

font-size : 18pt; font-size : 150%;

text-align

 Alignement du texte. Valeurs possibles :

left, right, center, justify

(14)

La notion de "Cascade« :

Les propriétés des CSS peuvent être

définies plusieurs fois. C'est toujours

la dernière définition qui compte.

Cela permet d'importer plusieurs

feuilles de styles, et de redéfinir

certains styles dans le document.

(15)

Supposons qu'on dispose d'une

permière feuille de style, que

nous appelerons style1.css qui

contienne les propriétés suivantes

:

H1 { color : red; font-size : 48pt }

H2 { color : blue; font-size :

12pt }

(16)

 Dans une page donnée, nous incluons

dans l'entête l'appel de ces deux

feuilles, ainsi que la définition d'autres propriétés.  <HEAD><TITLE>...</TITLE><LINK rel=STYLESHEET Href="style1.css" type="text/css"><LINK rel=STYLESHEET Href="style2.css" type="text/css"><STYLE type="text/css"><!--H1 { color : fushia; }H2 { font-size : 16pt; }H3 { font-size : 14pt; }--></STYLE></HEAD>

(17)

 Pour déterminer la valeur d'une

propriété, on dispose donc de la notion de cascade. Dans les cas où la

propriété n'a pas été définie, deux possibilités se présentent :

 Ou bien la propriété est dite "héritée".

Dans ce cas, c'est la valeur de

l'élément "parent", c'est à dire de l'élément dans lequel est utilisé l'élément courant.

 Dans l'autre cas, on prend la valeur

(18)

 Parfois, on veut appliquer un style spécial à

un élément ou à un groupe d'éléments particuliers. Dans cette leçon, nous

étudierons comment utiliser les attributs class et id pour définir les propriétés

d'éléments sélectionnés.

 Comment donner à un titre particulier une

autre couleur que celle des autres titres du site Web ? Comment regrouper les liens en différentes catégories et donner à chacune un style spécial ? Ce sont les types de

(19)

Supposons que nous ayons

deux listes de liens vers les

différents cépages utilisés

pour des vins blancs et des

vins rouges. Voici à quoi

(20)

<p>Cépages de vins blancs :</p>

<ul> <li><a

href="ri.htm">Riesling</a></li>

<li><a

href="ch.htm">Chardonnay</a></l

i> <li><a href="pb.htm">Pinot

Blanc</a></li> </ul> <p>Cépages

de vins rouges :</p> <ul> <li><a

href="cs.htm">Cabernet

Sauvignon</a></li> <li><a

href="me.htm">Merlot</a></li>

<li><a href="pn.htm">Pinot

(21)

 Nous voulons ensuite que les liens des

vins blancs soient jaunes, que ceux des vins rouges soient rouges, et que les

autres liens de la page Web restent bleus.

 Pour y parvenir, nous répartissons les

liens en deux catégories. On assigne

une classe à chaque lien avec l'attribut class.

 Essayons de définir quelques classes

(22)

<p>Cépages de vins blancs :</p> <ul> <li><a href="ri.htm" class="whitewine">Riesling</a></li> <li><a href="ch.htm" class="whitewine">Chardonnay</a></li> <li><a href="pb.htm" class="whitewine">Pinot Blanc</a></li>

</ul> <p>Cépages de vins rouges :</p> <ul> <li><a href="cs.htm"

class="redwine">Cabernet

Sauvignon</a></li> <li><a href="me.htm"

class="redwine">Merlot</a></li> <li><a

href="pn.htm" class="redwine">Pinot Noir</a></li> </ul>

(23)

a { color: blue; } a.whitewine

{ color: #FFBB00; } a.redwine

{ color: #800000; }

(24)

Comme affiché dans

l'exemple, on peut définir

les propriétés des éléments

appartenant à une certaine

classe en utilisant

.le_nom_de_ladite_classe

dans la feuille de style du

document.

(25)

 Outre le regroupement d'éléments, on peut avoir besoin d'identifier un

élément unique. Pour cela, on utilise l'attribut id.

 L'attribut id a ceci de spécial qu'il ne peut pas y avoir deux éléments avec le même id dans le document. Chaque id doit être unique. Dans le cas

contraire, il faudrait utiliser l'attribut

class à la place. Voyons maintenant un exemple d'utilisation possible de id :

(26)

<h1>Chapitre 1</h1> ....

<h2>Chapitre 1.1</h2> ....

<h2>Chapitre 1.2</h2> ....

<h1>Chapitre 2</h1> ....

<h2>Chapitre 2.1</h2> ....

<h3>Chapitre

2.1.2</h3> ....

(27)

Il pourrait s'agir des titres d'un document partagé en chapitres ou en paragraphes. Il semble naturel d'assigner un id à chaque chapitre comme ceci :

<h1 id="c1">Chapitre

1</h1> .... <h2

id="c1-1">Chapitre 1.1</h2> ....

<h2

id="c1-2">Chapitre 1.2</h2> .... <h1 id="c2">Chapitre 2</h1> .... <h2 id="c2-1">Chapitre 2.1</h2> .... <h3 id="c2-1-2">Chapitre 2.1.2</h3> ....

(28)

Disons que le titre du chapitre 1.2

doive apparaître en rouge. Avec

CSS, cela donne :

(29)

Comme affiché dans l'exemple

précédent, on peut définir les

propriétés d'un élément

spécifique en utilisant

#le_nom_dudit_id dans la

feuille de style du document.

Résumé

Dans cette leçon, nous avons vu

que l'on pouvait définir les

propriétés d'éléments spécifiques

à l'aide des sélecteurs class

Références

Documents relatifs

Certes, ceci ne concerne pas dans la totalité ma thématique, cependant, par le fait même que l’article est très bien explicité, je peux utiliser des

 Les éléments du namespace xsl sont des instructions qui copient des données du document source dans le résultat.  Les autres éléments sont inclus tels quels dans

 L'attribut id a ceci de spécial qu'il ne peut pas y avoir deux éléments avec le même id dans le document. Chaque id doit

Si par contre vous souhaitez utiliser des scripts avec les feuilles de style pour faire du DHTML par exemple (voir plus loin dans le site), la notion de ID vous sera

However, Citrix can only support the operating systems listed in the XenServer 6.2.0 VM User's Guide and customers may be asked to switch to a supported OS before issues can

Q Can I install Licenses for other Citrix products on a Citrix License Server virtual appliance, or on the Citrix License Server software installed on Windows.. A: The Citrix

Note: If a Native VLAN is used on the switch trunk port, then you cannot assign that VLAN number to a Virtual Machine on the XenServer. Refer to the following example for a

Et dans un deuxième temps, nous décrirons la mise en page du site, c'est à dire la position de ses différents éléments par rapport à l'architecture du document XHTML.. La feuille