Chapitre 02.2-css

Développement des applications web (2ème année licence informatique)
Chapitre 02: langages de programmation pour le web
http://elearning.univ-skikda.dz/
laroumtoufik@yahoo.fr 1
Principe de XHTML: Séparer le fond et la forme !
Toute page web est composée de:
1- un fond: représente le contenu de la page, c’est la partie essentielle car il définit le

sens , la sémantique de la page:
• Les titres
• Les paragraphes
• Les liens
• Les images
• Les formulaires
• ….
2- une forme: c’est la présentation ou l’affichage graphique de la page (son apparence)
• Les couleurs
• Les styles du texte, bordures …
• Le design de la page
• …
2
Cette page par exemple:
Page web= fond + forme
3
 Un site est composé de plusieurs pages chacune avec un contenu différent.
 Toutes les pages du site ont généralement le même design): style du texte, couleur arrière
plan, couleur du texte, bordure des tableaux, endroit du menu, style des liens…
accueil.html
Contact.html
Documentation.html
telecharger.html
Information.html
4
Si on veut un jour:
 Changer la couleur de l’arrière plan.
 Changer le design du site.
 Consulter le site sur un autre dispositif (Smartphone)
 …
Toute modification du site devient très compliquée!
5
Il est important donc de séparer le fond de la forme:
1. Xhtml se préoccupe du fond c’est-à-dire de la structuration logique du document, pas

à la présentation graphique (paragraphe, titre, liens, formulaire, tableaux....
2. Certaines balise n’ont pas de rendu visuel (p, div, header, footer): on parle de la
sémantique!
3. il est recommandé d’abandonner les balises de mise en forme graphique

comme <font>, <b>…
6
<h1>
<a>
<form>
<ul>
<li>
<h3>
<p>
<img>
<table>
XHTML: définir le fond de la page

7
Règles de
présentation
8
Quel avantage ?
La principal amélioration de XHTML est de séparer le fond de la frome ce qui permet :
1. Meilleure organisation du code (possibilité de réutilisation).
2. Possibilité de développement collaboratif.
3. Simplifier la maintenance des sites ( ex: changer la couleur de toutes les pages).
4. Gestion automatisé des contenus.
5. plus grande rapidité d’affichage ( on charge le style une seule fois).
6. L’adaptation de l’affichage de la page web selon les utilisateurs (affichage pour écran,
impression, téléphone, TV,…etc.)
XHTML ne se préoccupe ainsi plus que de la structure logique du document, la mise en

forme (caractères, couleurs, marges, etc.) relevant des feuilles de styles CSS.
9
CSS (Cascading Style Sheets):
- CSS est un langage spécifique au Web, fréquemment employé comme complément du

langage HTML.
- les feuilles de styles ajoutent la couche graphique au document web (apparence) et à sa

structure (positionnement des éléments).
- Le site web sera composé des différentes page XHTML (qui définissent le contenu du
site) plus une page particulière (avec l’extension .css) qui définit la forme.
- Modifier l’apparence du site revient à modifier une seule page CSS et non pas toutes les
pages.
10
- une fois créées, toutes les pages du site doivent être attachées à la feuille de style css
pour compléter la mise en forme. Il est d’usage de placer une balise <link> dans
l’entête (<head>) de ces dernières.
<link rel="stylesheet" type="text/css" href= " nomFichier.css" />
- il existe d’autres méthodes pour appliquer le style css.
11
Exemple 01:
si on veut colorer tous les titres <h1> du site en rouge, et les centrer dans la page on écrit
dans le document css:
propriété
h1 {
sélecteur color: red; valeur
text-align:center;
}
Exemple d’une règle css
1. Le sélecteur est l’élément (ou les éléments)de la page à manipuler.
2. On peut définir plusieurs propriétés pour un sélecteur donné.
3. Une page CSS contient plusieurs règles.
4. Il existe différents type de sélecteurs.
12
le langage CSS accepte différentes formes de sélecteurs :
1. les sélecteurs de balises.
2. les sélecteurs de classes (une classe est un nom donné à un ensemble d’éléments
HTML à distinguer) ;
3. les sélecteurs d’identifiants (un identifiant ou id est le nom attribué à un élément

unique dans le document HTML) ;
4. les pseudo-classes et les pseudo-éléments (variantes pour certaines fonctionnalités,

par exemple les liens).
13
1- Appliquer le style à tout le document:
Le sélecteur dans ce cas devient le symbole *. Par exemple Si on veut que le contenu de la
page soit centré, on écrit :
*{
text-align:center;
}
14
2- Appliquer le style à une balise:
Le sélecteur dans ce cas devient la balise correspondante. Si nous voulons centrer nos
titres <h3> uniquement, il nous faudra donc écrire :, on écrit :
h3 {
text-align:center;
}
15
3- Appliquer le style à un ensemble de balises :
Il est aussi possible d’appliquer un même style à plusieurs balises à la fois. Pour faire cela,
il suffit de séparer les noms des balises par des virgules. Par exemple, si nous voulons
centrer et colorer en rouge nos titres <h1> et <h3> :
h1,h3 {
text-align:center;
color: red;
}
16
4- Appliquer le style à des balises imbriquées:
Nous pouvons appliquer un style à une balise imbriquée dans une autre balise, c'est-à-dire
les autres balises (du même type bien sur) ne seront pas concernées.
Exemple: afficher en vert l’arrière plan des balises <a> situées dans les paragraphe (dans
la balise <p>). On remarque que les balise <a> du menu n’ont pas été changées.
pa{
background:#66FF66;
}
17
5- Appliquer le style à une classe d’éléments:
Nous pouvons appliquer un style à un ensemble d’éléments indépendamment de leurs

balise. Pour cela on doit:
1- mettre ces éléments dans la même classe (ensemble ou groupe) en utilisant l’attribut
class=….
.
2- utiliser le sélecteur « nomClass » (un point suivi du nom de la clase) pour définir le
comportement ou le style css.
Exemple: afficher en majuscules tous les titres h3, et tous les liens du menu.
- Dans ce cas: toutes les balise <a> du menu, ainsi que tous les titres <h3> de la page
doivent appartenir à la même classe nomée « enMajuscule ».
- Dans le document css, on utilise la propriété text-transfrom avec la valeur uppercase.
- Ne pas oublier le point devant le nom de la class dans le document css.
- Les autres liens s’affichent en minuscule car ils n’appartiennent pas à la class
« enMajuscule ».
- Le nom des classe doit être significatif !
18
5- Appliquer le style à une classe d’éléments:
Cette classe contient:

Les titres h3 et les balise <a> du menu
19
6- ID: Appliquer le style à objet unique dans la page:
- Pour identifier (de façon unique) un élément dans la page on utilise l’attribut id=…
- Un identificateur (identifiant, ou id) est lui aussi un nom choisi librement par le
développeur. Il se distingue de la classe en ce qu’il ne peut porter qu’au plus sur un
objet du document.
- Pour appliquer un style à cet élément, les sélecteurs CSS s’y réfèrent par l’emploi d’un
caractère dièse (#) suivi de son nom: #nomID.
Exemple: la page contient plusieurs paragraphes, on veut afficher en italique le paragraphe

d’introduction.
20
6- ID: Appliquer le style à objet unique dans la page:
- Seul le paragraphe introduction est en italique.
- Les introductions de toutes les pages du site seront affichées en italique.
21
7- les pseudo classes:
- Les pseudo-classes et les pseudo-éléments créent des mécanismes ou des relations qui
ne sont pas réalisables en HTML.
- CSS crée en effet des éléments spécifiques à certaines actions (comme le survol d’un
lien), Ces techniques permettent de styler un contenu n’apparaissant même pas dans le
code du document.
Exemple:
- Un exemple courant est l’utilisation de la pseudo-classe :hover, qui prend effet lorsque
le pointeur de la souris survole l’élément concerné.
a:hover
{
text-transform: uppercase;
background-color: red;
}
- Avec cette instruction, tous les liens hypertextes de la page apparaîtront en majuscule,
avec un arrière plan rouge lorsque le pointeur de la souris les survole.
22
7- les pseudo classes:
- Les pseudo-classes et les pseudo-éléments créent des mécanismes ou des relations qui
ne sont pas réalisables en HTML.
- CSS crée en effet des éléments spécifiques à certaines actions (comme le survol d’un
lien), Ces techniques permettent de styler un contenu n’apparaissant même pas dans le
code du document.
Exemple: 2
- Si on veut manipuler uniquement les liens <a> qui appartiennent à la classe « menu » pr
exemple, on écrit:
a.menu :hover
{
text-transform: uppercase;
background-color: red;
}
- Avec cette instruction, seuls les liens hypertextes du menu apparaîtront en majuscule,
avec un arrière plan rouge lorsque le pointeur de la souris les survole.
23
Propriétés CSS: Gestion de la mise en forme :
- Pour aligner le texte on utilise la propriété text-align. Par exemple:
p
{
text-align: left;
text-indent: 30px;
}
- Tous les paragraphes seront affichés vers la gauche avec un alinéa de 30 pixel.
- La propriété text-align peut prendre les valeurs: center, left, right, justify
24
Propriétés CSS: type de polices:
- La propriété CSS précisant la police est font-family. Si vous voulez que vos paragraphes
de texte s’affichent en Verdana, et que le texte soit justifié vous taperez le code suivant :
p
{
font-family: Verdana;
text-align: justify;
font-size: 18px;
}
- Font-size: permet de déterminer la taille du texte.
- font-weight: bold; permet de mettre le texte en gras (remplace la balise <b>).
- font-style: italic; permet d’afficher le texte en italique (remplace la balise <i>).
- text-transform : uppercase ; afficher en majuscule (lowercase pour minuscule).
- La propriété text-decoration permet de décorer son texte de plusieurs façons différentes

• underline : souligné ; line-through : barré ; overline : ligne au-dessus ;
• blink : clignotant.
25
Propriétés CSS::
 Pour changer la couleur du texte on utilise la propriété color.
Exemple: afficher les titres h1 en rouge:
h1
{
color:red;
}
 On peut définir la couleur en rgb.
exemple:
h1
{
color: rgb(247, 128, 40);
}
- Donc on évite d’utiliser la balise <font size=… color=…>
26
Propriétés CSS: modifier le fond:
 La propriété background-color permet de modifier la couleur de fond d’un élément (une

page , un tableau et même un texte).
 Par exemple, rendre le fond de la page noir avec un texte blanc :

body
{
background-color: green;
}
27
 On peut mettre une image en arrière plan:
body
{
color: black;
background-image: url(“supercss.jpg");
}
28
 Pour empêcher la répétition de l’image de l'arrière plan sur le fond de la page on écrit:
background-repeat : no-repeat;
29
 Pour afficher l’image de l’arrière plan dans un endroit précis de la page on utilise
background-position qui peut prendre l’une des valeur: right, left, center ou même la
position en pixel. Ex: background-position: right;
Ou: background-position: 300px 100px;
 background-attachment: fixed: permet de fixer l’image de l’arrière plan.
30
Propriétés CSS: les liens:
1) Afficher les liens en gras avec la couleur rouge lors du survol du pointeur de la souris.
a:hover
{
color: red;
font-weight: bold;
}
2) Changer la couleur de l’arrière plan d’un lien en cliquant dessus:
a:activate
{
background-color: lime;
}
3) Les liens déjà visités afficher les en italic:
a:visited
{
font-style: italic;
}
31
Propriétés CSS: les bordures:
La propriété border-style met en place le type des bordures d’un élément (tableau, paragraphe,
images…etc). Tous les navigateurs ne reconnaissent pas les dix styles de bordures possibles :
32
Propriétés CSS: les bordures:
Exemple: définir les bordures des titres h1:
h1
{
border-style:dotted;
}
33
Propriétés CSS:
exemple:
La propriété Signification Exemple

text-align Alignement du texte center ;
Propriétés de représentation
font-family Le type de font utilisé Verdana ;
font-size La taille de la police utilisée 24px ;

font-weight • bold : le texte sera écrit en gras. bold ;
font-style • italic : le texte sera mis en italique. italic ;
de texte
• uppercase : le texte sera écrit en majuscules.

• lowercase : le texte sera écrit en minuscules.
text-transform capitalize ;
• capitalize : la première lettre de chaque mot sera écrite
en majuscule (usage anglo-saxon).
• underline : souligné ;
• line-through : barré ;
text-decoration • overline : ligne au-dessus ; overline ;
• blink : clignotant. Attention, cette propriété ne
fonctionne pas sur Internet Explorer ;
blue ; ,
color La couleur d’écriture
L’arrière
#0000FF ;
plan
background-color La couleur d’arrière plan rgb(214,0,51) ;

background-image L’image de l’arrière plan url("image.jpg") ;
background-position Les coordonnées x et y de la position 300px 100px;
Liste des propriétés CSS: voir Livre2 page 272.
34
Le positionnement en CSS:
Toutes les balises XHTML que nous avons vu peuvent être classées en 2 catégories: en ligne et en
bloc.
1. Les balise de type bloc :
 ces balises créent des blocs qui s’affichent les uns en dessous des autres car chaque élément
occupe toute la ligne.
 c’est le cas par exemple des balises: <p>, <table>, <form>, <h1>..<h6>, <ol>, <ul>, <div>,
 Ces balises ont des dimensions (hauteur, largeur).
 Peuvent contenir des éléments de type ligne et bloc (sauf <p> et <h>).
 Leur propriété la plus importante est la possibilité de les placer (ou positionner) en les sortant
du flux du document, contribuant ainsi à sa mise en page (en utilisant la balise div).
35
Toutes les balises XHTML que nous avons vu peuvent être classées en 2 catégories: en ligne et en
bloc.
2. Les balise de type ligne:
 Le contenu des éléments en ligne est affiché au fil du texte.
 Par exemple : des portions de phrases mises en exergue avec <strong> dans un paragraphe,
des liens hypertexte <a>, <img>, <em>, <span>.
 Ne peuvent renfermer que d’autres éléments en ligne: <a ..> <em>cliquer</em></a>
 Généralement n’ont pas de dimension sauf les balises: <img>, <input>, <textarea>, <select>
et <object>.
 Il est parfois utile de passer d’une structure bloc à une structure en ligne (et inversement) grâce
à la propriété CSS display (le menu d’un site par exemple).
36
Exemple: soit la page ci-dessous.
Titre 1
paragraphe1
paragraphe2
Titre 2
paragraphe3
37
Si on veut définir les bordures:
38
39
40
Et si je
veux faire
ça ?
La partie définition (titre+paragraphes) avec la couleur bleu et fon vert !
41
<h1> Apprendre CSS</h1>
<div id="Définition">
<h1>définition:</h1>
<p>Le contenu des éléments en ligne est affiché au fil du texte. Par exemple : des por-
tions de phrases mises en exergue dans un paragraphe, des liens hypertexte, etc. On
les appelle encore <strong> éléments internes </strong> car ils visent à donner du sens à des
portionsdu document tout en restant au fil du texte, c’est-à-dire sans créer de nouveaux blocs.
</p>
<p>
Il s’agit de ceux dont le rendu visuel forme un bloc.
C’est par exemple le cas des <a href="paragraphe.html">paragraphes</a>.
Cette structure leur permet de prévoir des dimensions (hauteur, largeur, profondeur),
de contenir d’autres éléments dimensionnés, et de posséder des marges internes
(padding). Leur propriété la plus importante est la possibilité de les placer (ou posi-
tionner) en les sortant du flux du document, contribuant ainsi à sa mise en page.
</p> Div délimite
un bloc dans
</div> la page!!
<h1>remarque:</h1>
<p>
Il est parfois utile de passer d’une structure bloc à une structure en ligne (et inversement)
grâce à la propriété CSS display.
</p>
La balise <div>..</div>: une balise générique pour créer des blocs.
42
La page peut
contenir plusieurs
balises div (qui
peuvent être
imbriquées)
43
Et si je
veux faire
ça ?
Les deux paragraphes sont affichés l’un à coté de l’autre !!!
il faut utiliser les techniques de positionnement.
44
1. Les éléments HTML qui suivent le flux normal d’affichage dans un document sont affichés par
défaut, c’est-à-dire l’un après l’autre (pour les éléments de types en ligne) ou l’un en dessous de
l’autre (pour le cas des éléments en bloc).
2. Mais nous ne sommes pas obligé de mettre nos éléments dans le flux par défaut, car chaque
élément HTML peut être positionné précisément dans la page du navigateur en utilisant les
propriétés de positionnement CSS.
3. Il existe 5 moyens pour placer un élément sur la page HTML
A. Positionnement par défaut (dans le flux normal): position: static
B. Flottant.
C. Absolue.
D. Relatif.
E. Fixe.
45
Le positionnement flottant:
1. Ce type de positionnement que nous offre le langage CSS est très pratique. En effet, il permet de
faire en sorte qu’un élément flotte et que le texte l’entoure.
2. On positionne un élément en flottant avec une déclaration float: left ou float: right. Il est alors
retiré du flux normal pour prendre place à gauche (respectivement à droite) du bloc qui le
contient : c’est devenu un « flottant ». L’élément qui le suit s’écoulera alors dans l’espace ainsi
laissé libre, et entoure alors l'élément flottant.
element
Si on veut placer l’élément vers la gauche On écrit dans le fichier CSS: {
Float: left
Évidemment (float:right si on veut qu’il s’affiche vers la droite).
}
46
Exemple:
 cette page contient une image et un paragraphe.
 Par défaut, le texte du paragraphe ne s’affiche pas dans l’espace à droite de l’image !!!
 comment exploiter cet espace ?

maPage.html
47
Exemple:
1. En utilisant le positionnement flottant. On place l’image vers la gauche.
2. L’espace à droite de l’image devient libre et sera occupé par le texte du paragraphe.
#imagecss
{
Float: left;
}
Comment faire pour laisser un petit espace entre l’image et le texte ?
48
Exemple:
1. En utilisant le positionnement flottant. On place l’image vers la gauche.
2. L’espace à droite de l’image devient libre et sera occupé par le texte du paragraphe.
#imagecss
{
Float: left;
margin-right:10;
}
49
Affichage par
défaut
Float: left Float: right
50
Exemple 2:
1. En utilisant le positionnement flottant. On place les deux paragraphes l’un à coté de l’autre.
2. Les éléments déclarés float:left s'empileraient sur la gauche (chacun à droite de l’élément qui
le précède) jusqu'à remplir le conteneur.
3. La propriété clear: left (ou right ou both) empêche ou supprime le flottement (l'élément fait un
retour à la ligne).
4. On peut définir la largeur des paragraphes par : width=…
51
remarque:
1- Pour donner un conteneur la hauteur de ces éléments qu’il contient : height: 1%; overflow: hidden;
2- la propriété CSS: display: inline-block; permet de donnée le même résultat ci-dessus. Elle permet de placer les
bloc dans la même ligne l’un à coté de l’autre.
52
2- Le positionnement absolu:
1. Le positionnement absolu vous permet de placer un élément où vous voulez sur la page, au
pixel près.
2. Un élément positionné en absolu est placé par rapport à son parent si ce dernier est lui-même
positionné, et sinon par rapport au premier ancêtre positionné, en remontant au besoin
jusqu’à la page entière (élément <body>).
3. Pour positionner un élément en absolu, appliquez-lui la propriété position et donnez-lui la

valeur absolute.
4. Il faut ensuite dire à quel endroit on veut placer l’élément sur la page, grâce aux quatre
propriétés CSS suivantes :
 top : indique la distance par rapport au haut de la page ;
 bottom : indique la distance par rapport au bas de la page ;
 left : indique la distance par rapport au bord gauche de la page ;
 right : indique la distance par rapport au bord droit de la page.
53
Exemple:
25
300
#monImage
{
position:absolute;
top:25px;
left:300px
}
54
Exemple:
25
500
#monImage
{
position:absolute;
top:25;
left:500px
}
55
Exemple:
L’élément peut être placé n’importe où sur la page!
200
#monImage
{
position:absolute;
top:200;
left:300px
300
}
56
3- Le positionnement fixe:
1. Le positionnement fixe est très proche du positionnement absolu. La différence réside dans
le fait que l’élément reste à sa position même si on descend plus bas dans la page (d’où le
nom « positionnement fixe »).
2. C’est un peu le même principe que la propriété background-attachment: fixed;
3. Pour placer un élément en position fixe, il suffit d’utiliser la valeur fixed et de se servir là encore
des propriétés de positionnement top, bottom, left et right.
4. Utilie pour fixer la barre de navigation des sites.
Element
{
Position: fixed;
top:100px;
left:300px
}
1. Cet élément restera affiché à la position 100,300 même si on se déplace dans la page.
57
Exemple: cette page contient 2 zones: <div id=‘entête’> (en bleu) et <div id=‘principale’> (en blanc)
La zone
entête
Barre de
La zone défilement
principale
#entête
{ #principale
Position: fixed; {
top:0px; Width:80%;
left:0px; Margin-top:60px;
height:50px; background-color:white;
Width:100% }
}
58
Exemple: cette page contient 2 zones: <div id=‘entête’> (en bleu) et <div id=‘principale’> (en blanc)
La zone
entête
Barre de
défilement
La zone
principale
#entête
{ #principale
Position: fixed; {
top:0px; Width:90%;
left:0px; Margin-left:10%;
height:100%; background-color:white;
Width:10% }
}
59
4- Le positionnement relatif:
1. C’est un mode de positionnement peu utilisé.

2. C’est une variante du positionnement dans le flux courant, qu’on active par la déclaration
position: relative; L’élément concerné est alors dit « positionné », et prend d’abord sa place
dans le flux courant.
3. Il peut ensuite s’en décaler à l’aide des propriétés top, right, bottom et left.
- left : décale l’élément vers la droite.
- top : décale l’élément vers le bas.
- right : décale l’élément vers la gauche.
- bottom : décale l’élément vers le haut.
60
Exemple:
Le paragraphe en bleu est décalé 100 pixel en haut et 100 pixels vers la droite.
Affichage par défaut
P2
{
Position: relative;
bottom:100px;
left:100px
}
61
Exemple:
Le paragraphe en bleu est décalé 100 pixel en haut et 100 pixels vers la droite.
Affichage par défaut Positionnement relatif de P2
P2
{
Position: relative;
bottom:100px;
left:100px
}
100px
100px
62
Structurer la page avec HTML5
 Html 5 apporte des nouvelles balises pour structurer la page.

 ces nouvelle balises (sémantiques) ne s'occupent pas de la mise en page.
 Elles servent seulement à indiquer à l'ordinateur le sens du texte qu'elles contiennent « Ceci est
l'en-tête », « Ceci est mon pied de page », etc.
En XHTML En HTML5
<div id=‘entête>………..……</div> <header>…..</header>
<div id=‘menu’>……………..</div> <nav>…...….</nav>
<div id=‘pied-de-page’>….</div> <footer>.…..</footer>
La balise <section>….</section>:
 contient est un bloc dans la page qui englobe généralement une portion du.
 Une page web peut contenir plusieurs sections (éventuellement imbriquées) chacune contient un
titre h1, des liens, des images…
 En cas de plusieurs sections on utilise les attributs class et id pour les identifier.
La balise <aside>….</aside>: bloc qui contient des informations complémentaires.

La balise <article>….</article>: article indépendant.
63
Structure la page avec HTML5
exercice: Structurer la page web en utilisant le positionnement flottant:
Entête
menu
Corps de la page
Pied de la page
64
exercice: Structurer la page web en utilisant le positionnement flottant:
<header> Entête
<nav> < section >

menu
Corps de la page
Pied de la page
<footer>
65
<body>
<header> <h1> wilaya de skikda </h1></header>
<nav>
<ul>
<li> <a href=“accueil.html">Accueil </a> </li>
<li> <a href=“histoire.html">histoire </a> </li>
<li> <a href=“tourisme.html">tourisme </a> </li>
<li> <a href=“economie.html">économie </a> </li>
<li> <a href=“photos.html">Photos </a> </li>
</ul>
</nav>
<section>
<h2>skikda, petite présentation</h2>
<p>
Située au nord-est du pays, la wilaya de Skikda s'étend sur une superficie de 4.137,68 kilomètres carrés,
où se concentrent quelques 804697 habitants. Elle (Routes nationales ports et voies ferrées..) lui
permettent de jouer un rôle de premier plan dans les échanges et les flux économiques.
<img src="skikda.jpg" width="100" height="100" />

Qui parle de Skikda doit parler de Collo, Situé dans la partie ouest de la Wilaya de Skikda, c'est une région
hautement touristique avec ses plages de sable fin, ses sites panoramiques avec vue imprenables sur la
mer, ses vestiges historiques à très grande valeur historique et cultmassif forestieroù peut se développer
le tourisme de montagne, sportif, de randonnée, de découverte, de chasse.
</p>
</section>
<footer> copyright. tous droits réservés. skikda 2016 </footer>
</body>
66
Nous allons utiliser les règles CSS pour structurer notre page:
<header>
<nav>
< section >
<footer>
67
header
{
background-color:#47639E;
text-align:center;
color:#FFFFFF;
text-transform:uppercase;
}
68
header
{
text-align:center;
color:#FFFFFF;
}
nav {
float:left;
width:15%;
background:#FFFFFF;
border:double;
margin-top:150px;
margin-right:20px;
}
69
header
{
text-align:center;
color:#FFFFFF;
}
nav {
float:left;
width:15%;
background:#FFFFFF;
border:double;
margin-top:150px;
margin-right:20px;
}
section
{float:left;
width:80%;
background:#FFFFFF;
margin-top:20px;
margin-bottom:20px;
padding:10px;
text-align:justify;
}
70
header
{
text-align:center;
color:#FFFFFF;
}
nav {
float:left;
width:15%;
background:#FFFFFF;
border:double;
margin-top:150px;
margin-right:20px;
}
section
{float:left;
width:80%;
background:#FFFFFF;
margin-top:20px;
margin-bottom:20px;
padding:10px;
text-align:justify;
}
footer
{
text-align:center;
color:#FFFFFF;
margin-top:20px;
clear:both;
}
71
72
Divers… masquer et afficher des éléments…
C’est la pseudo-classe :hover qui nous ouvrira les portes des comportements dynamiques.
Certaines éléments cachés dans la page s’affichent lors du survol du pointeur de la souris.
HTML
<a href="…">
Survolez pour voir la boîte
<uneBalise>texte et images peuvent être placés ici</uneBalise>
</a>
CSS
a uneBalise
{
visibility:hidden;/* cette balise est invisible par défaut */
}
a:hover uneBalise
{
visibility:visible;/* afficher cet élément lors du passage du pointeur de la souris*/
}
73
Divers… masquer et afficher des éléments…
74
Divers… CSS3
CSS3 a introduit beaucoup de nouveautés que nous ne pouvons pas les détailler toutes, mais dans ce
qui suit on va présenter quelques propriétés intéressantes :
1. border-radius:
Cette propriété permet d’arrondir les coins d’un élément (les paragraphes, les liens …) en précisant
l’angle.
Exemple : arrondir les coins des paragraphes p1 et p2:
p{
border-radius: 15px;
}
75
Divers… CSS3
1. border-radius:
Cette propriété permet d’arrondir les coins d’un élément (les paragraphes, les liens …) en précisant
l’angle.
Exemple 2:
76
Divers… CSS3
2. text-shadow:
Cette propriété ajoute un ombre au texte d’un élément en précisant : la direction, degré du flou et la
couleur de l’ombre. Par exemple :
h1
{
text-shadow: 5px 5px 3px red;
}
77
Divers… CSS3
3. box-shadow:
Identique au text-shadow, mais elle s’applique à la boite de l’élément.
Par exemple :
p
{
box-shadow: 5px 5px 3px gray;
}
78
Divers… CSS3
3. box-shadow:
Identique au text-shadow, mais elle s’applique à la boite de l’élément.
Par exemple : faire distinguer le composant actif du formulaire.
79
Divers… CSS3
4. La transparence (Opacity)
Il est possible en CSS3 de définir un niveau de transparence pour un élément donnée. La valeur 1
définit un élément complètement opaque (non transparent), et la valeur 0 définit un élément
complètement transparent.
- Utile pour faire des hyperImages en utilisant la pseudo classe hover: l’image est par défaut
transparente et devient opaque lors du passage du pointeur de la souris.
img
{
opacity:0,6;
}
80
Divers… CSS3
5. Le gradient:
Avec CSS3 il n’est plus nécessaire d’utiliser des images de font pour donner un effet de dégradé. Pour
cela il suffit d’utiliser la propriété gradient :
background: linear-gradient(direction, color-stop1, color-stop2, ...);
body
{
background: linear-gradient(yellow, white);
}
81
Divers… CSS3
6. La rotation:
Permet de faire retourner un élément de la page avec l’angle déterminée dans le sens des aiguilles
d'une montre:
h2
{
transform: rotate(-10deg);
}
#imageCSS
{
transform: rotate(30deg);
}
82
Divers… CSS3
7. La transition:
Les transitions CSS3 permettent de modifier la valeur d’une propriété (couleur, position,
transparence…) doucement de la valeur1 à la valeur2), sur une durée donnée.
Pour ce faire on doit préciser :

1- la propriété (l’attribut) à manipuler (la couleur, la position….etc).
2- la durée de temps à prendre pour passer de la valeur actuelle de l’attribut (V1) à la valeur V2.
la transition démarre quand la propriété change de valeur.

element
Exemple: {
Width:50px;
transition: width 2s;
}
Element: hover
{
Width: 100px;
}
Quand on met le pointeur de la souris sur l’élément, sa largeur aura la valeur 100px, mais avec la
transition cette valeur augmente doucement de 50 à 100 px pendant 2 secondes.
83
Divers… CSS3
7. La transition: diminuer la transparence de l’entête pendant 1 seconde.
header
{
…
opacity: 0;
transition: opacity 0.5s;
}
header: hover
{
opacity:1;
}
84
Divers… CSS3
7. La transition: modifier la position d’un bloc.
header
{
…
Width: 10%;
position:fixed;
left:-9%;
transition:left 0.5s;
}
header: hover
{
left: 0px;
}
85
Joomla, WordPress,
Drupal .. Je doit
maitriser un CMS
86

Chapitre 02.2-css

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Chapitre 02.2-css

Transféré par

Droits d'auteur :

Formats disponibles

Développement des applications web (2ème année licence informatique)

Chapitre 02: langages de programmation pour le web

Toute page web est composée de:

1- un fond: représente le contenu de la page, c’est la partie essentielle car il définit le

2- une forme: c’est la présentation ou l’affichage graphique de la page (son apparence)

• Les styles du texte, bordures …

Page web= fond + forme

 Changer la couleur de l’arrière plan.

 Changer le design du site.

 Consulter le site sur un autre dispositif (Smartphone)

Toute modification du site devient très compliquée!

Il est important donc de séparer le fond de la forme:

1. Xhtml se préoccupe du fond c’est-à-dire de la structuration logique du document, pas

3. il est recommandé d’abandonner les balises de mise en forme graphique

XHTML: définir le fond de la page

La principal amélioration de XHTML est de séparer le fond de la frome ce qui permet :

1. Meilleure organisation du code (possibilité de réutilisation).

2. Possibilité de développement collaboratif.

4. Gestion automatisé des contenus.

5. plus grande rapidité d’affichage ( on charge le style une seule fois).

XHTML ne se préoccupe ainsi plus que de la structure logique du document, la mise en

- CSS est un langage spécifique au Web, fréquemment employé comme complément du

- les feuilles de styles ajoutent la couche graphique au document web (apparence) et à sa

<link rel="stylesheet" type="text/css" href= " nomFichier.css" />

- il existe d’autres méthodes pour appliquer le style css.

Exemple d’une règle css

1. Le sélecteur est l’élément (ou les éléments)de la page à manipuler.

2. On peut définir plusieurs propriétés pour un sélecteur donné.

3. Une page CSS contient plusieurs règles.

4. Il existe différents type de sélecteurs.

le langage CSS accepte différentes formes de sélecteurs :

1. les sélecteurs de balises.

3. les sélecteurs d’identifiants (un identifiant ou id est le nom attribué à un élément

4. les pseudo-classes et les pseudo-éléments (variantes pour certaines fonctionnalités,

Nous pouvons appliquer un style à un ensemble d’éléments indépendamment de leurs

comportement ou le style css.

- Dans le document css, on utilise la propriété text-transfrom avec la valeur uppercase.

- Ne pas oublier le point devant le nom de la class dans le document css.

- Le nom des classe doit être significatif !

Cette classe contient:

Exemple: la page contient plusieurs paragraphes, on veut afficher en italique le paragraphe

- Seul le paragraphe introduction est en italique.

- Les introductions de toutes les pages du site seront affichées en italique.

- Pour aligner le texte on utilise la propriété text-align. Par exemple:

- Font-size: permet de déterminer la taille du texte.

- font-weight: bold; permet de mettre le texte en gras (remplace la balise <b>).

- font-style: italic; permet d’afficher le texte en italique (remplace la balise <i>).

- text-transform : uppercase ; afficher en majuscule (lowercase pour minuscule).

- La propriété text-decoration permet de décorer son texte de plusieurs façons différentes

 Pour changer la couleur du texte on utilise la propriété color.

Exemple: afficher les titres h1 en rouge:

 On peut définir la couleur en rgb.

- Donc on évite d’utiliser la balise <font size=… color=…>

 La propriété background-color permet de modifier la couleur de fond d’un élément (une

 Par exemple, rendre le fond de la page noir avec un texte blanc :

 On peut mettre une image en arrière plan:

Ou: background-position: 300px 100px;

 background-attachment: fixed: permet de fixer l’image de l’arrière plan.

2) Changer la couleur de l’arrière plan d’un lien en cliquant dessus:

3) Les liens déjà visités afficher les en italic:

Exemple: définir les bordures des titres h1:

La propriété Signification Exemple

font-family Le type de font utilisé Verdana ;