DAWDAWDéveloppement Applications

Ouadfel SalimaOuadfel Salima

Site du cours: http://salimaouadfel.e

DAWDAWpplications Web

Ouadfel SalimaOuadfel Salima

Site du cours: http://salimaouadfel.e-monsite.com/

Conception de page web statique

2. CSS3

Conception de page web statique

2. CSS3

Les propriétés CSSLes propriétés CSS

• Très grand nombre de propriétés

langage CSSlangage CSS

• Dans le cours : une sélection

plus importantes

• Listes plus complètes

http://www.w3schools.com/css/http://www.w3schools.com/css/

Très grand nombre de propriétés dans le

sélection des propriétés les

http://www.w3schools.com/css/http://www.w3schools.com/css/

Formatage du texte• Police (ou famille de police):

• Couleur : color • Couleur : color

• Taille : font-size

• Style : font-style

• Graisse : font-weight

• Casse : text-transform

• Décoration: text-decoration

• Alignement: text-align

Formatage du texte(ou famille de police): font-family

decoration

font-family

Formatage de texte

La propriété font-family

d'écriture du texte. Elle accepte comme valeur

les noms des polices séparés par

Si le nom de la police est composé, on le met entre guillemets

Formatage de texte

family désigne la police

d'écriture du texte. Elle accepte comme valeur

les noms des polices séparés par ,.

Si le nom de la police est composé, on le

Formatage du texte

Les polices embarquées (

font-family

C’est une police qui est envoyée au client par le serveur

grâce à la règle @font-face

Syntaxe

@font-face{font-family:Nom_de_la_police;font-family:Nom_de_la_police;src:url("Chemin_de_la_police_sur_le_serveur");

}

Formatage du texte

Les polices embarquées (polices en ligne)

C’est une police qui est envoyée au client par le serveur

face.

family:Nom_de_la_police;family:Nom_de_la_police;src:url("Chemin_de_la_police_sur_le_serveur");

Formatage du textefont-family

Formatage du texte

Les polices embarquées (polices en ligne)

font-family

Une autre alternative est de télécharger la police à partir du

site : https://fonts.google.com/

• Ajout dans l’entête du code html

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">rel="stylesheet">

ou

• Importation de la fonte dans le code css

@import url('https://fonts.googleapis.com/css?family=Lobster');

Formatage du texte

polices en ligne)

Une autre alternative est de télécharger la police à partir du

https://fonts.google.com/ et de l’envoyer au client par:

du code html

<link href="https://fonts.googleapis.com/css?family=Lobster"

Importation de la fonte dans le code css

url('https://fonts.googleapis.com/css?family=Lobster');

Formatage de texte

Color: définit la couleur du texte Color: définit la couleur du texte - en la nommant: body{color : coral ;} p{color : red ;}

- en spécifiant le code hexadécimal

p { color: #ff0000 } /* #rrggbb */

p { color: #f00 } /* #rgb */

- au format rgb (rvb en français).- au format rgb (rvb en français).

p { color: rgb(255, 0, 0) } /* 0

p { color: rgb(100%, 0%, 0%) } /* 0

Formatage de texte

définit la couleur du texte définit la couleur du texte : body{color : coral ;} p{color : red ;}

spécifiant le code hexadécimal:

p { color: #ff0000 } /* #rrggbb */

p { color: #f00 } /* #rgb */

(rvb en français).(rvb en français).

p { color: rgb(255, 0, 0) } /* 0 - 255 */

p { color: rgb(100%, 0%, 0%) } /* 0 - 100 */

Opacité

L'opacité d'un élément est le contraire de sa transparence : quand l'élément est "opaque" (valeur 1.0) il est0, il devient totalement transparent, c'est à dire invisible.l'élément est "opaque" (valeur 1.0) il est0, il devient totalement transparent, c'est à dire invisible.

L'opacité d'un élément est le contraire de sa transparence : quand 1.0) il est visible, si vous fixez une valeur de

0, il devient totalement transparent, c'est à dire invisible.1.0) il est visible, si vous fixez une valeur de

0, il devient totalement transparent, c'est à dire invisible.

Formatage de texte

font-size

Pour modifier la taille du texte, on utilise la Pour modifier la taille du texte, on utilise la propriété CSS font-size

p {font-size: 16px; /* Paragraphes de 16 pixels */}}

Notions de réseaux

Formatage de texte

Pour modifier la taille du texte, on utilise la Pour modifier la taille du texte, on utilise la :

size: 16px; /* Paragraphes de 16 pixels */

Notions de réseaux

Formatage de texte

Unités de mesure

font-size

Unités de mesure

Notions de réseaux

Formatage de texte

Notions de réseaux

Formatage de texte

Les em et les % imbriqués

font-size

Les em et les % imbriqués

• Dans le cas d'éléments imbriqués

% se base sur la valeur de '

Formatage de texte

Les em et les % imbriquésLes em et les % imbriqués

Dans le cas d'éléments imbriqués l'unité relative em ou se base sur la valeur de 'font-size' du bloc parent.

font-size

Formatage de texte

• L'unité relative rem (root em) fonctionne comme

font-size

• L'unité relative rem (root em) fonctionne comme "em" mais elle utilise commele font-size du document

size du parent.Dans le cas d'éléments imbriqués

toujours la même taille.toujours la même taille.

Formatage de texte

(root em) fonctionne comme (root em) fonctionne comme "em" mais elle utilise comme valeur de référence

et non la valeur de font-

Dans le cas d'éléments imbriqués l'unité relative a

Formatage de texte

Formatage de texte

• text-transform

Formatage de texte

Formatage de texte

Formatage de texte

• text-decoration

• text-align

Formatage de texte

•

• letter-spacing: espace entre les lettres

• word-spacing: espace entre les mots

Formatage du texte

• word-spacing: espace entre les mots

espace entre les lettres

espace entre les mots

Formatage du texte

espace entre les mots

Couleur de fond: background-color

Image de fond: background-image.

Propriétés de fond

Image de fond: background-image.

BODY{background-image: url("PENGUIN.JPG")}

Épinglage : background-attachment

Répétition : background-repeat (no-

Position : background-position (top, bottom, left, center, right,

Taille: background-size spécifie la taTaille: background-size spécifie la ta

valeurs possibles:

Dimensions : par exemple 100px 100px:

"cover" : forcera à couvrir toute la surface

image: url("PENGUIN.JPG")}

(fixed, scroll)

-repeat, repeat-x, repeat-y, repeat)

(top, bottom, left, center, right,

cifie la taille de l'image dans l'arrière plan.cifie la taille de l'image dans l'arrière plan.

Dimensions : par exemple 100px 100px:

"cover" : forcera à couvrir toute la surface

Les propriètés de fond peuvent être rassemblées en une seule proprièté: background

Propriétés de fond

seule proprièté: background

Body {

background: yellow url(“peinguin.png") fixed no

}

Couleur image de fon

Les propriètés de fond peuvent être rassemblées en une backgroundbackground

background: yellow url(“peinguin.png") fixed no-repeat top right;

fond épinglage répétition position

Propriétés de fond• CSS 3 rend possible l'affichage de

arrière-plan.

Notions de réseaux

Propriétés de fondCSS 3 rend possible l'affichage de plusieurs images en

Séparation entre les url des images Séparation entre les url des images

Notions de réseaux

• Lien « au repos » : a:link

Propriétés de liens

• Lien déjà visité : a:visited

• Au survol : a:hover• Au survol : a:hover

• Au (moment du) clic : a:active

Propriétés de liens

a:active

• Forme du curseur: On peut personnaliser le curseur lorsque la souris pointe un lien :

Propriétés de liens

curseur lorsque la souris pointe un lien :

a { cursor: pointer;

Notions de réseaux

: On peut personnaliser le curseur lorsque la souris pointe un lien :

Propriétés de liens

curseur lorsque la souris pointe un lien :

cursor: pointer; }

Notions de réseaux

Les listes créés à l'aide des balisesmodifiées en CSS avec:

Propriétés des listes

modifiées en CSS avec:

list-style-type : définit l'aspect de la puce sous forme graphique ou numérique pour les listes numérotées

list-style-image: remplace la puce classique par une image

Les listes créés à l'aide des balises <ul> ou <ol> peuvent être

Propriétés des listes

: définit l'aspect de la puce sous forme graphique ou numérique pour les listes numérotées

remplace la puce classique par une

Propriétés de listeslist-style-type

Propriétés de listeslist-style-image

Propriétés de listesAutre alternative: before

Propriétés de listes

Propriétés des tableaux

• border-collapse: separatetable et entre les cellules sont séparées. table et entre les cellules sont séparées.

border-collapse: collapse table et entre les cellules sont fusionnées.

Propriétés des tableaux

separate les bordures de la table et entre les cellules sont séparées. table et entre les cellules sont séparées.

collapse les bordures de la table et entre les cellules sont fusionnées.

Propriétés des tableaux• border-spacing: distance qui sépare les bordures de

cellules adjacentes. Lorsque deuxcellules adjacentes. Lorsque deuxpremière désigne l’espacement horizontal et la deuxième le vertical.

Propriétés des tableauxdistance qui sépare les bordures de

que deux valeurs sont renseignées, la que deux valeurs sont renseignées, la première désigne l’espacement horizontal et la deuxième le

20px

10px

Propriétés des tableaux• empty-cells: show affiche le contour des cellule vides

empty-cells: hide cache le contour des cellules vides.empty-cells: hide cache le contour des cellules vides.

Propriétés des tableauxaffiche le contour des cellule vides.

cache le contour des cellules vides.cache le contour des cellules vides.

Propriétés des tableaux

• border: permet de déterminer l’couleur et le style des bordures de la table couleur et le style des bordures de la table

Propriétés des tableaux

permet de déterminer l’épaisseur, la des bordures de la table des bordures de la table

Propriétés des tableaux

• style de bordures

Propriétés des tableaux

Propriétés des tableaux

• border-radius: applique un arrondi sur coins de la bordure.coins de la bordure.

Propriétés des tableaux

applique un arrondi sur les

Propriétés des tableaux

• border-radius: applique un arrondi sur des coins de la bordure.des coins de la bordure.

Propriétés des tableaux

applique un arrondi sur chacun des coins de la bordure.des coins de la bordure.