Sie sind auf Seite 1von 67

Feuilles de style - CSS

Siad. Najah 1
Introduction
Les CSS, Cascading Style Sheets (feuilles de styles en cascade),
servent à mettre en forme des documents web, type page HTML
ou XML. Par l'intermédiaire de propriétés d'apparence (couleurs,
bordures, polices, etc.) et de placement (largeur, hauteur, côte à
côte, dessus-dessous, etc.), le rendu d'une page web peut être
intégralement modifié sans aucun code supplémentaire dans la
page web.
Les feuilles de styles ont d'ailleurs pour objectif principal de
dissocier le contenu de la page de son apparence visuelle.

Siad. Najah 2
Introduction

Ceci permet :
de ne pas répéter dans chaque page le même code de mise en
forme.
d'utiliser des styles génériques, avec des noms explicites (par
exemple un style encadré pour du texte ou des images) .
de pouvoir changer l'apparence d'un site web complet en ne
modifiant qu'un seul fichier.
de faciliter la lecture du code de la page.

Siad. Najah 3
Introduction
Il y a plusieurs manières d'appliquer des styles CSS à un document.
Ces méthodes sont plus ou moins pratiques en fonction du contexte
dans lequel on travaille.
Distinguons d'abord 2 choix possibles:
Les styles sont écrits dans le document même
Les styles sont écrits dans un fichier externe que l'on relie
aux documents

Siad. Najah 4
Règles syntaxiques de base
Casse : Les feuilles de styles CSS ne sont pas sensibles à la casse,
elles ne tiennent pas compte des majuscules et minuscules. Exception
faite pour les éléments n'obéissant pas directement aux règles de
syntaxe CSS, notamment:
les attributs id et class
les noms des polices de caractères (exemple : "Trebuchet MS").
les URL ne répondant pas à ces règles.

Mise en forme du code : Les feuilles de styles CSS ne tiennent pas


compte des espaces et retour à la ligne.

Identifiants: Les identifiants (nom, id et class) ne peuvent contenir


que des caractères A-Z, a-z, 0-9 plus le tiret (-) et le caractère de
soulignement (_). Il ne peuvent pas commencer par un nombre.

Siad. Najah 5
Règles syntaxiques de base

Les chaînes de caractères sont affichables entre des guillemets


simples (« ' » « apostrophe ») ou doubles (« " »).

Pour mettre un guillemet simple ou double dans la chaîne


affichable, on fait précéder le caractère d'une barre de fraction
inversée, respectivement « \' » et « \" ».
Pour mettre un retour de ligne, on utilise le caractère « \a » ;
si l'on veut revenir à la ligne dans le code, on place une barre de
fraction inversée seule en fin de ligne.

Siad. Najah 6
Règles syntaxiques de base

Commentaires: les commentaires commencent par une barre de


fraction suivie d'un astérisque « /* », et se concluent par la succession
de caractères inverse « */ ».
Ils sont facultatifs, voire inutiles, pour les modifications mineures
d'affichage.

Siad. Najah 7
Définition d’une feuille de style
Trois façons de définir une feuille de style.
 
A - Définition spécifique (adding in line)
Une définition peut se faire individuellement pour un mot ou paragraphe
de page par exemple.
<p style="font-size: 16pt ;" >
 
B - Méthode interne = (embedding)
La syntaxe est incorporée à chaque fichier dans un bloc
<style type="text/css"> ...... </style> placé entre les balises HEAD, et qui
s'applique à la seule page ainsi marquée.
 
C - Méthode externe = (Lenking)
Ici vous utilisez un fichier séparé indépendant qui porte l'extension .css et
contient tous les codes du CSS utilisés dans toutes les pages ou entre les
tags <HEAD> et </HEAD> vous avez placé une simple ligne (toujours la
même) qui servira d'appel vers ce fichier .css
Siad. Najah 8
Définition d’une feuille de style

Test00.htm 
<html>
<head>
Méthode interne (embedding): <title>test </title>
<STYLE type="text/css">
Il s'agit de placer les règles du
h6
langage CSS entre <HEAD> et {
</HEAD>.   font family: arial, verdana, sans-serif;
font-size: 18pt;
background-color: #ffffff;
}
</STYLE>
<body>
<h6>…….….</h6>
</body>
</html>

Siad. Najah 9
Définition d’une feuille de style
C - Méthode externe = (Linking)
C'est-à-dire un fichier séparé qui portera l'extension class=" NomFichier .css".
Le fichier contiendra toutes les règles du CSS que vous avez choisi de définir et
utilisées dans votre site (du moins sur les pages portant le code approprié de
liaison),
Ensuite dans chaque page où vous souhaitez en profiter, entre les tags <HEAD> et
</HEAD> placer une simple ligne de code qui servira d'appel (trait d'union) et
dont voici le modèle :
  <link rel="stylesheet" type="text/css" href= « Test.css">

LINK :avertit le navigateur de la nature de ce lien.


rel="stylesheet": lui indique qu'il trouve une feuille de style externe.
L'attribut type="text/css" : précise qu'il s'agir de texte et du genre CSS
L'attribut de lien href= "NomFichier.css " donne le chemin d'accès et le nom du
fichier qui contient les règles à appliquer.

Siad. Najah 10
Définition d’une feuille de style
Fichier externe "Test.css" Fichier externe "Test00.htm"

/*code appliqué sur ce fichier <HTLM>


css04.htm*/ <HEAD>
h6
{ <TITLE>Test CSS</TITLE>
font-family: arial, verdana, sans-serif ; <link rel="stylesheet"
font-size: 14pt ; type="text/css" href= "Test.css">
color: red ; </HEAD>
background-color: #FFFFFF ; <BODY>
} <H6>Vous constatez que ce texte
p n'est pas totalement en vert </H6>
{ <p> bonjour tout le monde</p>
font-family: arial, verdana, sans-serif ; </BODY>
font-size: 10pt ; color: green ;
</HTML>
background-color: #FFFFFF ;
}

Siad. Najah 11
Structure et syntaxe d’une feuille de style

Une feuille de style est composée de règles CSS. Ces règles nous permettront au
final de donner un style à un ou plusieurs éléments du document.
Une règle est divisée en 2 parties : le sélecteur et le bloc de déclaration.

Sélecteur :Un sélecteur détermine les parties de votre document qui seront affectées
par un style. Le sélecteur "sélectionne", par définition, un élément dont on a envie de
changer l'aspect.

Bloc de déclaration :Un bloc de déclaration est tout simplement composé d’une ou


plusieurs déclarations, et il est délimité par une paire d'accolades { }

Une déclaration :Une déclaration est composé d’une propriété et d’une valeur qui
sont séparées par deux points. Grâce à une propriété et une valeur, nous pouvons
définir le style qui sera affecté à un élément, c'est-à-dire que nous définirons la
couleur, la taille, la typographie, l'aspect général d'un élément.

Siad. Najah 12
Structure et syntaxe d’une feuille de style

Ecrire une règle CSS: la syntaxe que nous utilisons pour écrire
une règle dans notre feuille de style :
sélecteur {propriété : valeur ;}

Nous pouvons donc constater que notre règle est bien composé :
d’un sélecteur et d’un bloc de déclaration.

Siad. Najah 13
Méthode interne et classes
Comment fonctionnent les "class" ?
 Avec le sélecteur CLASS, vous pouvez définir plusieurs règles
différentes à l'aide des balises HTML. Ainsi au départ avec le
même tag HTML "b" vous pouvez déclarer un style : b { color:
black ; }, et vous pouvez ensuite créer une "class" :
b.red { color: red ; } .
Dans le même genre vous pouvez continuer à ouvrir d'autres
"class" comme b.blue { color: blue ; } etc..
C'est évident, les balises HTML disponibles sont limités en
nombre.
Si jusqu'à maintenant vous les avez utilisé et avez ainsi réalisé
une mise en page de base, vous allez pouvoir contourner le
problème et élargir la palette des possibilités, en faisant appel à
des "CLASS", "SPAN", Siad. "DIV"
Najah et "ID". 14
Méthode interne et classes

Avec la règle traitant de l'hérédité, Avant de continuer il est important pour ne


pas dire crucial de comprendre ce système « d’hérédité », qui malgré quelques
exceptions signalées au passage, reste une caractéristique bien pratique.
Inutile d'avoir à répéter certaines déclarations et le code source est plus clair.

A retenir : l'élément enfant hérite des propriétés de l'élément parent (sauf dans
certains cas comme pour les propriétés de "bloc" telles que (padding, marging...),
mais par exemple dans un tableau vous trouverez " TD" enfant de " TR" qui est à
son tour enfant de " TABLE" et en remontant.

Siad. Najah 15
Méthode interne et classes

Les SOUS-CLASS offrent de nouvelles possibilités pour élargir le


choix disponible à partir des CLASS qui pour leur part sont réalisés avec
des balises HTML.
En effet il est indispensable de disposer d'un maximum de souplesse
pour structurer les pages de votre site suivant les besoins.
Pour aller encore plus loin voici donc ces "sous-classes" qui ouvrent à
leur tour des horizons nouveaux et faciles à exploiter.

Comment : Si une classe reprend une balise HTML comme sélecteur, il


est possible de ne pas préciser de balise. Dans ce cas vous créez une
sous-classe .

Siad. Najah 16
Méthode interne et classes

Vocabulaire:
Identifiants:
p#vert { font: Verdana 14px; color: #336600;}
une règle de style:
p { font-family : arial, sans-serif ; }
une classe:
p. times { font-family : times ; color: #336600;}
une sous-classe ou classe universelle.
.rouge { text-align: center ; color :reed ; }

<p class="times"> Texte en vert </p>

<p id="vert"> Texte en vert </p>

Siad. Najah 17
Mise en forme de la police 

Le texte est présenté avec une police, une taille, un style et


des variantes bien précises.

"font-family" = la famille de polices


"font-size" = la taille de police (ou corps)
"font-style" = le style de police
"font-variant" = la variante de police
"font-weight" = l'étirement de police

Siad. Najah 18
Mise en forme de la police 

font-family: Georgia, prestige, sans-serif


propriété et valeurs servant à définir la police et l'ordre de
présentation est imposé au navigateur pour l'affichage.

Deux familles distinctes


- famille classique : arial, verdana, times, ....
- famille générique : serif, sans-serif, cursive, fantasy, monospace.

Siad. Najah 19
Mise en forme de la police
Exemple:
Codes CSS placés dans HEAD
.... </title>
<STYLE TYPE="text/css">
h4 { font-family: times, verdana, sans-serif ;
color: green ; ont-style: italic ;
background-color: #FFFFFF ;
font-size: 16pt ; }
</style>

Code source dans BODY


<H4> Les feuilles de style en cascade (Cascading Style Sheets -
CSS) traitent le problème du contrôle de la mise en page, en
permettant aux auteurs de créer des feuilles qui affichent des marges
précises, différents styles de polices... etc." </H4>
 
Siad. Najah 20
Mise en forme de la police 

font-size
la taille relative.
la taille absolue.
la valeur numérique.
la valeur en pourcentage.

Taille en valeur relative :


Important : Cette taille se définit par rapport à celle de l'élément parent et
codifiée avec les mots-clés suivants: smaller  |  medium  |  larger 
(la police origine et par défaut est ici medium).

Taille en valeur absolue:


Un mot-clé parmi les suivants peut être appliqué à une police:
xx-small | x-small | small | medium | large | x-large | xx-large

Siad. Najah 21
Mise en forme de la police 
Valeur numérique :
Avec les valeurs numériques relatives : em, ex, px.
Avec les valeurs numériques absolues : in, cm, mm, pc, pt.

Les unités de longueur relatives


em : la valeur de "ont-size" pour la police concernée.
ex : la valeur de "x-height" pour la police concernée.
px : une quantité de pixels, en fonction de l'appareil de visualisation.
(d'où les suggestions de ne pas l'utiliser pour définir la taille des polices,
car vous aurez souvent des ennuis de visualisation).
 
Les unités de longueur absolues
in : pouce (inch) -- un pouce est égal à 2.54 cm.
cm : centimètre
mm : millimètre
pc : pica -- un pica est égal à 12 points.
pt : point -- le point de CSS2 est égal à 1/72 de pouce.
Siad. Najah 22
Mise en forme de la police 

Valeur en pourcentage:
Une valeur en pourcentage spécifie une taille de police absolue par rapport
toujours à celle de l'élément parent.
Comme pour les valeurs exprimées en "em", leur emploi autorise la
création de feuilles de style plus fiables.
Une valeur de pourcentage est formée d'un caractère de signe facultatif (+
ou - et + étant le défaut), suivi immédiatement par un nombre et suivi
immédiatement par l'identifiant " % ".
Pour une valeur de longueur "0" (zéro) l'identifiant d'unité est facultatif.et
immédiatement suivi par le caractère '%'.

Siad. Najah 23
Mise en forme de la police 

Font-style:
Style normal
Style italic (italique)
Style oblique

ce dernier est identique au style "italic" qu'il remplace si besoin mais il n'est
pas disponible dans toutes les familles de police

Siad. Najah 24
Mise en forme de la police 

Font-variant :
"font-variant" est une propriété servant à définir l'affichage d'un texte en
petites capitales.
Dans une police de ce type, les caractères ont un aspect presque similaire
aux lettres majuscules, mais avec une taille réduite et des proportions
légèrement différentes. Cette propriété suit les règles d'hérédité.

Les significations des valeurs sont :


normal: Spécifie une police qui ne possède pas de petites capitales dans sa
famille.
small-caps: Spécifie une police pouvant définir des caractères en petites
capitales.

Siad. Najah 25
Mise en forme de la police 

"font-weight" ou graisse de la police:


En CSS vous avez plusieurs mots-clés disponibles pour ajuster cette
graisse.
On parle souvent de texte en gras pour la balaise <B> du HTML ou
encore de "graisse", de "poids" ou "d'épaisseur" de police.
Cette propriété suit les règles d'hérédité.

Mots-clés ou valeurs
"100" à "900" : Ces valeurs "100 à 900" forment une séquence
ordonnée, où chacun des nombres indique pour la police, une graisse
au moins aussi grasse que celle du nombre précédent.

Siad. Najah 26
Mise en forme de la police 
Normal : Equivaut à la valeur "400"

Bold : Equivaut à la valeur "700"

bolder: Spécifie la graisse supérieure à celle assignée à une police, cette


graisse étant plus grasse que celle héritée par la police. S'il n'y en a pas, la
valeur de graisse de la propriété prend simplement la valeur numérique
supérieure (l'aspect de la police ne changeant pas), sans pouvoir dépasser la
valeur "900".

Lighter: Spécifie la graisse inférieure à celle assignée à une police, cette


graisse étant moins grasse que celle héritée par la police. S'il n'y en a pas, la
valeur de graisse de la propriété prend simplement la valeur numérique
inférieure (l'aspect de la police ne changeant pas), sans pouvoir descendre
sous la valeur "100".

Siad. Najah 27
Mise en forme de Texte 

"color" ou couleur du texte :


Pour définir la couleur d'un texte avec l'attribut COLOR vous pouvez choisir
entre différents types de valeurs( vous pouvez aussi entendre parler de
("couleur de premier plan").
Il n'existe pas de couleur par défaut, sauf celle du navigateur qui en principe
est noire. L' élément enfant hérite de la couleur de l'élément parent.
- nom de la couleur : white, black, blue...
- code RGB (Red, Green, Blue = rouge, vert, bleu) de 0 à 255
- valeur hexadécimale : #FFFFFF , #FFf33CC
 
En CSS vous placez la déclaration avec l'attribut COLOR, soit en tête de la
page entre les HEAD, soit sur le fichier externe des déclarations de styles
pour l'ensemble des pages, soit pour un paragraphe entre les balises DIV ou
SPAN

Siad. Najah 28
Mise en forme de Texte 
Propriété "Letter-Spacing " :
Cette propriété précise le comportement de l'espacement entre les caractères
du texte. Les valeurs applicables sont : normal, longueur. Cette propriété
"letter-spacing" bénéficie des règles d'héritage.

Valeurs applicables :
Normal : cette valeur par défaut correspond à l'espacement normal de la
police utilisée.

Longueur : cette valeur indique la quantité d'espacement qui s'ajoute à


l'interlettrage par défaut c'est-à-dire normal. Valeur numérique ou Valeur en
pourcentage. Celle-ci peut être négative.
 

Siad. Najah 29
Mise en forme de Texte 

Propriété "Word-Spacing"
Cette propriété est utilisée pour définir le comportement de
l'espacement entre les mots. Bénéficie des règles d'héritage.

Les valeurs applicables sont :


Normal : cette valeur correspond à l'espacement normal de la
police utilisée.

Longueur : cette valeur indique la quantité d'espacement qui


s'ajoute à l'espace mot par défaut c'est-à-dire normal. Celle-ci
peut être négative.
 

Siad. Najah 30
Mise en forme de Texte 

Propriété "Text-transform"
Cette propriété permet pour choisir un texte tout en minuscules ou tout en
majuscules, ou encore la première lettre seulement de chaque mot en
majuscules.
Cette propriété "text-transform" bénéficie des règles d'héritage.

Les valeurs applicables sont :


None : cette valeur est sans effet sur le texte
Lowercase : toutes les lettres de chaque mot sont en minuscules
Uppercase : toutes les lettres de chaque mot sont en majuscules
Capitalize : la première lettre de chaque mot seulement est en majuscule

Siad. Najah 31
Mise en forme de Texte 

Propriété "Text-decoration"
la propriété text-decoration sert à définir les parties du texte qui sont
soulignées, surlignées ou barrées et clignotent
Cette propriété ne bénéficie pas des règles d'héritage.

Les valeurs applicables sont :


overline = souligné dessus
line-through = barré
underline = souligné dessous
blink = clignote (avec Netscape et Firefox)
none = soulignement annulé et valeur par défaut

Siad. Najah 32
Mise en forme de l'arrière-plan

Couleur du fond de page:


Cette propriété "background-color" sert à définir la couleur du fond de la
page ou du contenu de texte d'un ou plusieurs éléments.
On parle de "couleur d'arrière-plan".
body { background-color: #FFFFCC ; }

Image dans un fond de page :


La propriété background-image sert à placer une image en fond de la page ou
en fond de texte d'un ou plusieurs éléments. on dit aussi qu'elle sert à
spécifier "image d'arrière-plan". En même temps qu'une image, il est
fortement recommandé aussi de spécifier une couleur normale d'arrière-plan,
qui sera utilisée en remplacement une image indisponible.
body { background-image: url(« Chemin/image.jpg" }

Siad. Najah 33
Mise en forme de l'arrière-plan

Répétition d'une image horizontalement


Cette propriété "background-repeat" permet de placer une image en fond de
page qui va être définie suivant les valeurs adoptées :

Repeat: L'image d'arrière-plan se répète à la fois horizontalement et


verticalement.
no-repeat:L'image d'arrière-plan n'est affichée qu'une seule fois.
repeat-x:L'image d'arrière-plan ne se répète qu'horizontalement.
repeat-y:L'image d'arrière-plan ne se répète que verticalement.

Siad. Najah 34
Mise en forme de l'arrière-plan

Background-attachment
avec répétition ou pas d'une image d'arrière-plan.Cette propriété permet de
définir si une image reste fixe ou suit le mouvement de la page lors du
scroll, et aussi suivant les valeurs adoptées de répétition ou non-répétition

Valeurs
scroll L'image défile avec la page.
fixed L'image reste fixe à son emplacement lors du défilement de la page.
repeat L'image d'arrière-plan se répète à la fois horizontalement et
verticalement.
no-repeat L'image d'arrière-plan n'est affichée qu'une seule fois.
repeat-x L'image d'arrière-plan ne se répète qu'horizontalement.
repeat-y L'image d'arrière-plan ne se répète que verticalement.

Siad. Najah 35
Mise en forme de l'arrière-plan

Image fixe verticalement y


Cette propriété "bacground-attachment" indique si l'image est fixe quand vous
faites défiler le contenu du fichier avec la barre de scroll. Mais si elle se répète
verticalement, alors elle demeure visible tout en restant immobile.
Valeurs
scroll L'image défile avec la page. Paramètre par défaut.
fixed L'image reste fixe à son emplacement lors du défilement de la page.
repeat L'image d'arrière-plan se répète à la fois horizontalement et verticalement.
no-repeat L'image d'arrière-plan n'est affichée qu'une seule fois.
repeat-x L'image d'arrière-plan ne se répète qu'horizontalement.
repeat-y L'image d'arrière-plan ne se répète que verticalement.

Siad. Najah 36
Mise en forme de l'arrière-plan

Positionnement d'une image d'arrière-plan


 
"background-position" est la propriété qui permet de définir avec
précision l'emplacement d'une image dans une page ou encore dans des
éléments de type bloc. Quand on spécifie une image d'arrière-plan, cette
propriété indique la position initiale de celle-ci. Cette propriété ne bénéficie
pas de la règle d'hérédité.
 
Valeurs supportées
Les mots-clés
top = image au centre/haut de la page ou du bloc.
center = image au centre/centre de la page ou du bloc.
bottom = image au centre bas de la page ou du bloc..
right = image au centre/droit de la page ou du bloc.
left = image au centre/gauche de la page ou du bloc

Siad. Najah 37
Mise en forme des paragraphes

Généralités

La mise en forme des paragraphes (blocs de texte), vient naturellement après


la mise en forme du texte qui passait essentiellement par le formatage de la
police et ne concernait que des éléments de texte.
 Un des avantages majeurs des feuilles de styles, est de pouvoir mettre en
forme des éléments, c'est-à-dire des blocs de textes ou des images, avec
précision et dirons-nous au pixel près.

Siad. Najah 38
Mise en forme des paragraphes

Le mot boîte est le terme utilisé, avec le mot contenu qui lui
concerne la partie se trouvant positionnée dans la boîte.
Un boîter est toujours rectangulaire et en premier découvrez-le
schématisé pour en analyser les composants :
 

Siad. Najah 39
Mise en forme des paragraphes

Le Contenu en bleu représente la partie du texte de paragraphe.


- Padding (intervalle) est la partie qui entoure le texte et, lorsque cette valeur est
nulle vous avez le texte qui coïncide avec lui.(dimension réglable côté par côté)
-Border est la partie qui entoure ensuite la zone padding, et ici encore si la valeur
Border est nulle vous avez cette zone qui va coïncider avec la zone padding.
- Margin est une nouvelle zone qui entoure la boîte, et encore une fois si cette valeur
est nulle vous avez cette zone qui va coïncider avec Border.
Le périmètre de chacune des quatre aires (contenu, padding/espacement,
border/bordure et marging/marge) s’appelle un "bord", et chaque boîte a donc quatre
bords

Siad. Najah 40
Mise en forme des paragraphes
Gros avantage, il est possible de fixer les valeurs des quatre "bords" du
rectangle que forme la boîte, comme indiqué ci-dessous:

Vous pouvez donner les valeurs par exemple de


margin-top= 60; margin-right= 40; margin-bottom= 10; margin-left= 30;
et en abrégé vous pouvez écrire: margin=60 40 10 30;  c'est-à-dire à partir de
"top" dans le sens des aiguilles d'une montre.
De plus avec Width et Height vous allez pouvoir délimiter les dimensions de la
boîte compte-tenu de la dimension du texte.

Siad. Najah 41
Mise en forme des paragraphes

Retrait du paragraphe avec text-indent


Cette propreté bénéficie des règles d'héritage.
A utiliser avec :
Les unités de longueur = l'alinéa à une longueur fixe ;
L'unité de pourcentage = l'alinéa correspond à un pourcentage de la
largeur du bloc conteneur.

La valeur de la propriété "text-indent" peut être négative, mais ceci dépend des
limites de l'implémentation. Si cette valeur est négative, la valeur de la propriété
"overflow" peut avoir une influence sur la visibilité du texte.
(overflow = propriété en rapport avec le débordement d'un texte...)

Siad. Najah 42
Mise en forme des paragraphes

Propriété "Text-align" pour aligner du texte


Cette propriété accompagnée d'une valeur Left, Right, Center, Justify, sert à définir
l'alignement horizontal du texte d'un élément ou le positionnement d'une image.
Cette propriété "Text-align" bénéficie des règles d'héritage.
Valeurs, avec par défaut l'alignement à gauche.

<STYLE type="text/css">
left {text-align: left ; }
right {text-align: right ; }
center{text-align: center ; }
justify {text-align: justify ;}
</STYLE>
Il en ira de même pour placer une image
<p align="left"><img src= " image00.jpg" width="60" height="60">à gauche</p>
<p align="center"><img src="image00.jpg" width="60" height="60">au centre</p>
<p align="right"><img src=" image00.jpg" width="60" height="60">à droite</p>
Siad. Najah 43
Mise en forme des paragraphes

Propriété "vertical-align" verticalement


 
Cette propriété accompagnée de divers valeurs permet de définir le
positionnement vertical d'un texte par rapport à un élément de type en-ligne
(en ligne par opposition au type en bloc).
Son application se retrouvera pour les cellules de tableaux.
Cette propriété "vertical-align" ne bénéficie pas des règles d'héritage.

W3C dixit : Cette propriété agit sur le positionnement vertical à l'intérieur


de la boîte de ligne des boîtes générées par un élément de type en-ligne.
Les règles suivantes n'ont de sens que par rapport à un élément parent de
type en-ligne, ou de type bloc si celui-ci génère des boîtes en-ligne
anonymes ; elles sont inopérantes autrement.
 

Siad. Najah 44
Mise en forme des paragraphes
Valeurs supportées par cette propriété
baseline = valeur par défaut, l'alignement à gauche {vertical-align: left ; }
bottom = aligne la partie inférieure du texte sur celle du plus bas élément de la
ligne {vertical-align: left ; }
ext-bottom = aligne la partie inférieure du texte sur celle de l'élément parent
Top = aligne le sommet du texte sur celui du plus haut élément de la ligne
{vertical-align: top ; }
Text-top = aligne la partie supérieure du texte ("pour exemple") sur celle de
l'élément parent
sub = place le texte en dessous de l'élément parent : en indice (comme tag
"sub" en HTML) {vertical-align:sub ; }
super = place le texte en dessus de l'élément parent : en exposant (comme tag
"sup" en HTML) {vertical-align:super ; }
middle = aligne le milieu de l'élément sur celui de l'élément parent {vertical-
align: middle ; }
Valeurs en numérique et pourcentage(valeur négative admise en pourcentage)

Siad. Najah 45
Mise en forme des paragraphes

Propriété "vertical-align" et texte autour de l'image:


 
Pour placer du texte autour d'une image, en HTML vous pouviez utiliser
"hspace et vspace".
En CSS, Code dans HEAD ou fichier externe
img {margin-left: 10px ; margin-right: 15px ; }

Code dans BODY


<p><img src="image00.jpg" width="70" height="105" align="left"></p>

Siad. Najah 46
Mise en forme des paragraphes

Propriété "Line-Height" :
Permet de définir l'interlignage dans un bloc de texte, c'est-à-dire l'espacement
qui sépare les lignes qui est calculé en fonction du corps choisi (taille des
caractères).
La valeur "normal" correspond à l'interlignage de base calculé par le
navigateur en fonction de la taille de police utilisée.
Il n'est donc pas utile de la spécifier si vous souhaitez utiliser cette valeur par
défaut.
La hauteur des interlignes peut être définie par un "nombre", et cette hauteur
est fonction de la taille de la police utilisée, qui est simplement multipliée par
le nombre choisi.

Siad. Najah 47
Mise en forme des paragraphes

Propriété "White-Space"
Cette propriété détermine la gestion des blancs et des sauts de ligne dans le
texte d'un élément. "white-space" bénéficie des règles d'héritage.

Les valeurs de cette propriété


NORMAL Le texte passera à la ligne en fonction de son contenant, pour
s'ajuster à celui-ci et rester dans ses limites. Valeur par défaut.

NOWRAP: Sauf les retours à la ligne "br"; aucun autre balise n'est interprété :
Le texte dans ce cas défile à perte de vue, sauf à rencontrer un "br".

Siad. Najah 48
Mise en forme des marges

MARGIN:
La propriété raccourcie MARGIN spécifie la valeur de la marge pour les
quatre côtés à la fois. Cette zone "margin", est appelée aussi "marge
externe".
Mais il est également possible à partir de "margin" et d'une manière
différente, d'utiliser des propriétés qui définissent séparément un bord, ou
plusieurs :
"margin-top", "margin-right", "margin-bottom" et "margin-left"
L'arrière-plan des marges est toujours transparent.
Les règles d'hérédité ne sont pas applicables.
 

Siad. Najah 49
Mise en forme des marges
Valeurs appliquées
La longueur pour définir une largeur fixe.
Le pourcentage qui est calculé par rapport à la largeur du bloc conteneur de
la boîte générée.
auto qui correspond à une valeur définie par le navigateur.
Il est possible (sauf pour Width) d'employer des valeurs négatives.
Attention aux problèmes car il arrive qu'un mauvais positionnement
d'éléments dans une page soit en relation avec les valeurs données aux
"marges". 
 

Siad. Najah 50
Mise en forme des marges
MARGIN pour définir les marges
"margin-top", "margin-right", "margin-bottom", "margin-left", sont les
propriétés qui permettent dans une boîte CSS, de définir séparément chaque
"bord" (nom donné aux quatre cotés du rectangle d'une boîte).

Siad. Najah 51
Mise en forme des marges

MARGIN... top ... right... bottom... left


margin-top = marge supérieure
margin-right = marge de droite
margin-bottom = marge inférieure
margin-left = marge de gauche
 
Règle fondamentale
{ margin: 10px 10% 5px 12px ; }

est identique à :
{margin-top: 10px ; }
{margin-right: 10% ; }
{margin-bottom: 5px ; }
{margin-left: 12px ; }
 
Siad. Najah 52
Mise en forme des bordures
border-width
La propriété raccourcie BORDER permet de spécifier la valeur de la
marge épaisseur, couleur et style pour les quatre côtés à la fois.
Appelée aussi "marge externe" ou encore "bordure" , elle sert
souvent à différencier des éléments, ainsi qu'à les faire ressortir en
"bordant" la boîte et en choisissant ces bordures dans plusieurs modèles.
Point n'en faut tout de même abuser ! sous peine de transformer votre
page en échiquier d'échecs.
Mais il est également possible à partir de "border" et d'une manière
différente, de définir séparément un bord, ou plusieurs avec les
propriétés "border-top", "border-right", "border-bottom" et "border-left".
À la différence des propriétés de raccourcie "padding" et "margin",
cette propriété "border" ne permet pas de donner des valeurs propres à
chacune des quatre bordures. Pour cela il faut employer l'une ou
plusieurs des propriétés individuelles de bordure

Siad. Najah 53
Mise en forme des bordures
Règles de base :
Ci-dessus schématisée en bleu clair, en CSS cette zone "border" va pouvoir
s'adapter en largeur (épaisseur), type (style) et couleur. Il est possible aussi
de définir et regrouper en une seule déclaration les différentes valeurs pour
choisir l'épaisseur, le style et la couleur et bien d'autres possibilités qui vont
être examinées.
On utilise les valeurs numériques ou le pourcentage, et les couleurs
habituelles. Les valeurs négatives ne sont pas tolérées.
Les règles d'hérédité ne sont pas applicables

Siad. Najah 54
Mise en forme des bordures

Mais il reste à analyser les différentes propriétés css permettant de rendre moins
lugubres les bordures d'un élément :

- border-width permet de définir l'épaisseur des bordures


- border-color permet de définir la couleur des bordures
- border-style permet de définir le style des bordures

Une propriété peut contenir plusieurs valeurs qui peuvent être énoncées et
regroupées à la suite, peu importe l'ordre, mais séparées par des espaces.
Certains navigateurs n'interprètent pas correctement les bordures si ces 3
propriétés ne sont pas renseignées et ne pas oublier que l'affichage peut
sensiblement varier de l'un à l'autre. Si certains exemples ne vous paraissent pas
concluants, n'insistez pas et grondez votre navigateur.
 

Siad. Najah 55
Mise en forme des bordures
Valeurs acceptées
- mesures de longueur et pourcentage pour définir l'épaisseur.

- mots-clés none, hidden, dotted, dashed, solid, double, groove, ridge,


inset, outset pour définir le style.

- code hexadécimal, rgb ou en anglais pour définir la couleur.


 

Siad. Najah 56
Mise en forme des bordures

BORDER de base 
.border { border: solid ; } Voici une bordure qui entoure ce petit paragraphe.
La propriété "border" autorise de multiples effets et son étude doit être abordée
avec méthode. Voici en premier la déclaration la plus simple et un résultat
obtenu avec la valeur "solid" qui correspond à un ligne continue, noire par
défaut.
.borderpadding {border: solid ; padding: 15px ; } Mais comme dans la série
suivante concernant la propriété PADDING vous allez retrouver cette
possibilité de présenter un paragraphe plus aéré, pourquoi s'en priver. Notre
boîte commence à prendre forme !
Définition générale de la largeur des bordures
Il existe trois valeurs définies par des mots-clés, qui sont :
- thin = bordure fine par rapport à "medium"
- medium = bordure moyenne
- thick = bordure épaisse par rapport à "medium"

Siad. Najah 57
Mise en forme des bordures
Border-color
La propriété "border-color" spécifie la couleur des quatre côtés de la bordure.
Pour celaelle admet une à quatre valeurs, appliquées au choix sur les quatre côtés
de la bordure de la même façon que pour la propriété "border-width" définie plus
haut.
Les règles d'hérédité ne sont pas applicables.
Placer uniquement "border-color" ne vous donnera rien et il faut impérativement
définir une propriété "border-style«
Cette propriété qui sert à définir globalement les propriétés "border-top-color",
"border-right-color", "border-bottom-color" et "border-left-color" est
accompagnée des règles suivantes :
S'il n'y a qu'une valeur spécifiée, celle-ci s'applique à tous les côtés. S'il y en a
deux, alors la première valeur s'applique pour la marge du haut et celle du bas, et
la seconde pour la marge droite et celle de gauche. S'il y en a trois, la marge du
haut reçoit la première valeur, les marges gauche et droite la deuxième et la marge
du bas la troisième. S'il y en a quatre, celles-ci s'appliquent respectivement aux
58
marges du haut, de droite, du bas etSiad.
de Najah
gauche.
Mise en forme des bordures
Valeurs admises :
- Bordure avec couleur
- Bordure transparente, invisible mais dont l'épaisseur est prise en compte 

Encore et toujours, voici le schéma où en bleu clair, la zone "border" va


pouvoir recevoir une couleur en place du noir attribué par défaut.
IMPORTANT : Dans vos déclarations, définissez toujours la propriété de
"border-style" avant la propriété de "border-color". En effet une
bordure doit être matérialisée avant d'être coloriée !

Siad. Najah 59
Mise en forme des bordures

BORDER-STYLE sert à définir le style des bordures d'un élément, suivant les
valeurs à choisir : none, dotted, dashed, solid, double, groove, ridge, inset, outset.
 
Elles permettent de définir les bordures d'une boîte (en trait plein, trait double, trait
pointillé, etc.). La propriété "bordure-style", accepte l'une des valeurs
suivantes :
none, dotted, dashed, solid, double, groove, ridge, inset, outset
La propriété "border-style" supporte une à quatre valeurs, lequelles sont
appliquées sur les quatres côtés de la bordure de la même façon que pour la
propriété "border-width" définie page précédente.

Les exemples, pour simplifier la mise en page, sont définis directement à l'aide du
code suivant : <h2 style = " border-width: 6px ; border-style: xxxx ; border-color:
green ; " align="center">... texte ...</h2> avec au départ une épaisseur de
border-width: 6px ;
  Siad. Najah 60
Mise en forme des bordures

Padding est une zone, appelée aussi "marge interne" ou "intervalle", qui
correspond à la première possibilité d'entourer le "contenu" à l'aide de 4
valeurs. En réalité la zone blanche "padding" du schéma ci-dessous, est
normalement de la même couleur (beige foncée dans cet exemple) que celle
du "contenu".
Cette propriété qui permet de définir la distance entre le contenu d'une boîte
et la bordure de ce dernier, sera par exemple utilisé pour éloigner un contenu
de la bordure qui l'entoure.
La zone "padding" va permettre si besoin, de donner à la boîte concernée
une position aérée par rapport aux autres éléments mitoyens mais son
utilisation n'a rien d'obligatoire.

Siad. Najah 61
Mise en forme des bordures
Voici notre schéma de base

Valeurs pour PADDING


- Longueur : qui spécifie une largeur fixe.

- Pourcentage : valeur calculée par rapport à la largeur du bloc conteneur de


la boîte générée. Idem pour les propriétés "padding-top"et "padding-bottom".
Ces valeurs ne peuvent pas être négatives. L'hérédité n'est pas supportée.
Siad. Najah 62
Mise en forme des listes
LIST-STYLE
 La propriété raccourcie LIST-STYLE sert à spécifier une mise en forme des
listes en se servant des balises HTML <UL> et <OL>. Outre les définitions
de couleurs et de polices existant en CSS, il est possible de placer des images.
Une énumération ou autres choix devient plus agréable dans les pages Web
qui sont nombreuses à utiliser les listes (sommaire, références commerciales,
histoire...).

Dans l'ordre sont étudiés :


- Listes à puces et numérotées.(list-style-type)
- Le retrait avec positionnement des puces et numéros.(list-style-position)
- Les icônes de puces (images).(list-style-image)
- Le moyen de définir globalement les paramètres.(list-style)
 
Listes non numérotées ( UL ) et numérotées et alphabétiques( OL )
Siad. Najah 63
Mise en forme des listes
list-style-type:
Les Puces (listes non numérotées)
Ce sont de petites icônes (symboles) non numériques qui servent dans
les entrées de liste : disc, circle ,square none = cercle vide, cercle
plein, petit carré plein et la spéciale "none".
odisc (valeur par défaut)
opetit cercle plein
olist-style-type: circle
•circle
•petit cercle vide
•list-style-type: disc
square
petit carré plein
list-style-type: square

none
aucun item
list-style-type: none

Siad. Najah 64
Mise en forme des listes
Les listes numérotées et alphabétiques
1. Décimal
2. numérotation normale
3. list-style-type: decimal type
i. Lower-roman
ii. chiffres romains minuscules
iii. list-style-type: lower-roman
iv. chiffre, quatrième item
v. chiffre, cinquième item
I. Upper-roman
II. chiffres romains majuscules
III. list-style-type: upper-roman
a) Lower-alpha
b) minuscules alphabet latin
c) list-style-type: lower-alpha
A. Upper-alpha
B. majuscules alphabet latin
C. list-style-type: lower-roman
Siad. Najah 65
Pseudo-éléments

Pseudo-classe  "first-line« :
La pseudo-classe :first-line sert à définir l'apparence de la première ligne d'un
paragraphe qui est affiché en majuscules. Cette mise en forme assez spéciale, se
trouve aussi utilisée avec le pseudo-style "first-letter" dans une composition
intéressante. Attention tous les navigateurs ne supportent pas encore ce style. On
l'appelle aussi "pseudo-style" ou "pseudo-élément".
Ce pseudo-élément ainsi nommé car il n'est rattaché à aucun autre élément, ne
bénéficie pas de l'hérédité. Il est partiellement semblable au pseudo-style "first-
letter" auquel il est parfois associé.
Le pseudo-élément :first-line ne peut s'attacher qu'à un élément de type bloc.
En conséquence la longueur de la première ligne est variable, elle dépendra de la
largeur du conteneur (boîte), de la taille de police... bien adapter son texte en
fonction des majuscules obtenues.

Siad. Najah 66
Pseudo-éléments

Seules les propriétés suivantes peuvent lui être appliquées


Les propriétés de spécification de police
"color" = couleur du texte
"background" = image ou couleur d'arrière plan
"word-spacing" = propriété pour l'espacement entre les mots
"letter-spacing" = propriété pour l'espacement entre les caractères
"text-decoration" = souligner, surligner, barrer
"vertical-align" = position de la ligne par rapport au texte
"text-transform" = minuscules ou majuscules
"line-height" = hauteur minimale ou exacte des boîtes en ligne
"text-shadow" = pour ombrer du texte
"clear" = environnement des boîtes adjacentes

Siad. Najah 67

Das könnte Ihnen auch gefallen