Beruflich Dokumente
Kultur Dokumente
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.
Siad. Najah 5
Règles syntaxiques de base
Siad. Najah 6
Règles syntaxiques de base
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">
Siad. Najah 10
Définition d’une feuille de style
Fichier externe "Test.css" Fichier externe "Test00.htm"
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.
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
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
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 ; }
Siad. Najah 17
Mise en forme de la police
Siad. Najah 18
Mise en forme de la police
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>
font-size
la taille relative.
la taille absolue.
la valeur numérique.
la valeur en pourcentage.
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.
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é.
Siad. Najah 25
Mise en forme de la police
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"
Siad. Najah 27
Mise en forme de Texte
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.
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.
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.
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.
Siad. Najah 32
Mise en forme de l'arrière-plan
Siad. Najah 33
Mise en forme de l'arrière-plan
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
Siad. Najah 36
Mise en forme de l'arrière-plan
Siad. Najah 37
Mise en forme des paragraphes
Généralité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
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:
Siad. Najah 41
Mise en forme des paragraphes
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
<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
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
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.
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
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 :
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.
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
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
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
Siad. Najah 67