Présentation CSS - Abderrazak MKADMI

16/12/2015
Feuilles de style : CSS
• Le langage informatique CSS (Cascading Style Sheets : feuilles de style en
cascade) est utilisé pour décrire la présentation d'un document structuré
écrit en HTML ou en XML, et c'est le World Wide Web Consortium (W3C)
qui en a la direction.
Les feuilles de style
• L'un des objectifs majeurs de CSS est de proposer une stylisation
indépendante de la structure du document. HTML, par exemple, ne
décrit que l'architecture interne, tandis que CSS décrit tous les aspects de
la présentation. Cette séparation fournit un certain nombre de bénéfices,
permettant d'améliorer l'accessibilité, de changer plus facilement de
structure et de présentation, et de réduire la complexité de l'architecture
d'un document.
CSS
Feuilles de style : CSS
Feuilles de style : CSS
• La syntaxe d'un style est toujours la même, elle précise la balise à laquelle
le style va s'appliquer, et les différents attributs du style. Les attributs sont
enfermés entre deux accolades ou 2 guillemets (précédés de Style=) selon
les cas, et chacun des attributs est séparé par un point virgule. On donne
la valeur de l'attribut par la syntaxe suivante "nom de l'attribut:valeur de
l'attribut".
• CSS est une norme du W3C
BODY {
color : blue;background-color:yellow;
}
H1 {
color:red;
text-transform:capitalize;
font-weight:bold;font-size:large;
}
H2 { color:#ff1111; text-transform:captalize }
• balise { propriété de style: valeur; propriété de style: valeur }
• Pour faire le lien entre un fichier html et une feuille de style, c’est dans la
partie entête du document HTML qu’on ajoute cette ligne
<LINK href="fichier.css" type= " text/css "
rel= " stylesheet " >
A. MKADMI, ISD, Université de la Manouba
3
A. MKADMI, ISD, Université de la Manouba
4
16/12/2015
CSS : Utilité et avantages
CSS : règles (exemples)
• Séparation du contenu et de la mise en forme;
• Cohésion de la présentation tout au long du site;
• Modifier l'aspect d'une page ou d'un site sans en modifier le contenu.;
• Une façon d'écriture concise et nette par rapport au Html qui devient vite fouillis.
• Réduire le temps de chargement des pages.
• Une description exhaustive de toutes les possibilités de règles est impossible ici (voir
norme
CSS).
On se contentera donc de donner ci-dessous quelques exemples classiques :
• La règle suivante affectera l'ensemble du document (body):
BODY { margin-left: 30px ; color: navy ; background: white URL(image.gif) ; fontfamily: "Times New Roman", serif }
• Règle affectant les titres de niveaux 1 à 3 :
H1,H2,H3 { text-align: center ; font-family: Arial, Helvetica, sans-serif ; font-variant:
small-caps ; font-size: x-large ; color: white ; background: #DD0000 ; border-witdh: 1 ;
border: solid }
• Palier certaines insuffisances du langage Html (contrôle des polices, contrôle de la
distance entre les lignes, contrôle des marges et des indentations et ainsi augmenter la
créativité des écrivains du Web.
CSS : règles (suite)
• Règle n'affectant que les titres de 1er niveau :
H1 { margin-top: 20pt }
• Règle affectant les images :
IMG { border: 0 }
• Règle affectant le texte préformaté :
PRE { font-family: monospace ; color: red ; font-weight: bold ; font-size:
smaller }
• Règle affectant les cellules de type en-tête d'un tableau :
TH { background: silver }
CSS : règles (suite)
• Règle affectant les objets de listes numérotées seulement (pas les objets de listes
non numérotées) de façon analogue à la méthode classique <OL
TYPE="1|a|A|i|I"> (notez les espaces et non pas virgules entre les sélecteurs OL et
LI !) :
OL LI { list-style-type: upper-alpha } (numérot. 1er niveau = lettres maj.)
OL OL LI { list-style-type: upper-roman } (numérot. 2e niveau = chiffres romains maj.)
OL OL OL LI { list-style-type: lower-alpha } (numérot. 3e niveau = lettres minusc.)
OL OL OL OL LI { list-style-type: lower-roman } (numérot. 4e niveau = chiffres romains
minusc.)
OL OL OL OL OL LI { list-style-type: decimal } (numérot. 5e niveau = chiffres)
• Règle définissant une puce graphique (via un fichier image) pour les listes non
numérotées :
UL { list-style-image: url("smile.gif"); }
16/12/2015
Caractéristiques du texte :
Caractéristiques de la page : body
<font color= "red" face= "verdana" size= "4">
<body bgcolor= "yellow" text= "black" link= "red" alink= "green "vlink= "blue">
P {color:red ; font-family:verdana ; font-size:medium}
BODY { background-color:yellow;color:black}
<xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller>
A:link {color:red }
____________________________________
A:active {color:green }
<b><i>
p {font-weight:bolder ; font-style:italic} ou
A:visited {color:blue }
__________________________________________________
P {font: bold italic }
<body background= "arrierePlan.jpg">
______________________________________
<h1 align= "center">
BODY { background-image: url(arrierePlan.jpg)}
H1 {text-align:center }
CSS : Liste des propriétés
Nom
Description
Définition
Exemple
CSS : liste des propriétés
Remarque
Taille de la police
< xx-small | x-small |
small | medium | large |
x-large | xx-large> | <
larger | smaller> |<taille>
| <pourcentage%>
P { font-size: 12pt; }
BLOCKQUOTE {font-size: larger }
EM { font-size:150%}
EM { font-size:1.5em}
font
Permet de regrouper les
différentes propriétés de
polices en une ligne
[ <font-style> || <fontvariant> || <font-weight>
]? <font-size>
[ / <line-height> ]?
<font-family>
P { font: 12pt/14pt sans-serif }
P { font: 80% sans-serif }
P { font: x-large/110% "new century
schoolbook", serif }
P { font: bold italic large Palatino, serif
}
P { font: normal small-caps
120%/120% fantasy }
défaut : dépend de la
configuration du
navigateur
color
couleur d'un texte
<couleur>
P { color: red }
EM{color:rgb(255,0,0)}
EM { color: #f00 }
défaut : black
background-color
couleur du fond d'écran
<color> | transparent
H1 { background-color: #F00 }
défaut : transparent
font-size
font-family
nom et famille de la
police
[[<nom> | <famille>],*]
BODY {font-family: gill,
helvetica, sans-serif }
gill et helvetic sont les
noms des polices, sansserif est la famille.
Si un nom comprend des
espaces il doit être coté.
font-style
style normal, italique et
oblique
normal | italic | oblique
H1, H2, H3{font-style: italic }
défaut : normal
font-variant
style petites polices ou
normal
normal | small-caps
H3 {font-variant: small-caps }
défaut : normal
font-weight
Epaisseur de la police
normal | bold | bolder |
lighter | 100 | 200 | 300 | 400
| 500 | 600 | 700 | 800 | 900
EM {font-weight:bolder }
défaut : normal
Souvent des noms
logiques remplacent les
nombres donnés ici
défaut : medium
16/12/2015
CSS : liste des propriétés
background-image
background-repeat
image du fond d'écran
<url> | none
BODY {
background-image:
façon de répéter l'image du repeat | repeat-x | repeat-y |
url(ungi.gif);
fond de l'écran
no-repeat
background-repeat: repeaty; }
background-attachment
permet de spécifier si
l'image reste fixe avec les
déplacements d'écran
background-position
spécifie la position de
l'image de fond par rapport
au coin supérieur gauche
de la fenêtre
background
BODY { background-image:
url(ungi.gif)}
scroll | fixed
BODY { background: red
url(pendant.gif);
background-repeat: repeat-y;
fixed;}
CSS : liste des propriétés
défaut : none
repeat-x permet de
répéter de façon
horizontale
défaut : repeat
normal | <longueur>
H1 { word-spacing: 0.4em}
défaut : normal
letter-spacing
définit la distance
d'espacement entre
caractères
normal | <length>
EM { letter-spacing: 0.1em }
défaut : normal
text-decoration
défaut : scroll
BODY { background:
[<pourcentage> |
url(http://www.ungi.com/ban
<longueur>]{1,2} | [top |
ner.jpg)
défaut : 0%,0%
center | bottom] || [left |
right top }
center | right]
<background-color> ||
permet de regrouper les
<background-image> ||
P { background: url(hess.gif)
<background-repeat> ||
différentes propriétés de
green 50% repeat fixed }
fond d'écran en une ligne <background-attachment> ||
<background-position>
word-spacing
définit la distance
d'espacement entre mots
défaut : aucun
permet de spécifier si le
none | [ underline ||
A:link, A:visited, A:active { texttexte est souligné, surligné, overline || line-through ||
decoration: none }
barré ou clignotant
blink ]
vertical-align
spécifie l'alignement
vertical du texte par rapport
au reste du texte
baseline | sub | super | top
| text-top | middle |
bottom | text-bottom |
<pourcentage>
EM {vertical-align: sub}
text-transform
permet de forcer les
caractères en majuscule
(uppercase) ou en
minuscule (lowercase);
capitalize force en
majuscule le premier
caractère
capitalize | uppercase |
lowercase | none
H2 { text-transform: uppercase }
CSS : liste des propriétés
text-align
permet de placer le texte à
left | right | center | justify
gauche, à droite, de le
centrer ou de le justifier.
text-indent
valeur de l'indentation
avant la première ligne
line-height
valeur entre deux
lignes adjacentes
margin-top
valeur de la marge haute
<longueur> |
<pourcentage>
P { text-align:justify}
P { text-indent: 3em }
normal | <nombre> |
DIV { line-height: 1.2; font-size:
<longueur> |<pourcentage
10pt }
>
<longueur> |
<pourcentage> | auto
H1 { margin-top: 3px }
défaut : dépend de la
configuration du
navigateur
margin
permet de regrouper les
différentes propriétés de
marge en une ligne
padding-top
valeur de remplissage haut
padding-right
valeur de remplissage droit
[ <longueur> |
<pourcentage> | auto
]{1,4}
défaut : 0
défaut : normal
défaut : auto
valeur de la marge droite
<longueur> |
<pourcentage> | auto
H1 { margin-rigth: 3px }
défaut : auto
margin-bottom
valeur de la marge basse
<longueur> |
<pourcentage> | auto
H1 { margin-bottom: 3px }
défaut : auto
<longueur> |
<pourcentage> | auto
H1 { margin-left: 3px }
valeur de la marge gauche
défaut : baseline
défaut : none
CSS : liste des propriétés
margin-right
margin-left
défaut : none
défaut : auto
padding-bottom
valeur de remplissage bas
padding-left
valeur de remplissage
gauche
padding
permet de regrouper les
différentes propriétés de
padding en une ligne
<longueur> |
<pourcentage>
<longueur> |
<pourcentage>
<longueur> |
<pourcentage>
<longueur> |
<pourcentage>
[<longueur> |
<pourcentage>]{1,4}
défaut : auto
BODY { margin: 1em
Les valeurs manquantes
2em 3em } /* top=1em,
sont celles définies sur
right=2em,
le coté opposé
bottom=3em, left=2em
Une seule valeur est
*/
applicable à tous
H1 { padding-top: 3px }
défaut : 0
H1 { padding-right: 3px }
défaut : 0
H1 { padding-bottom:
3px }
défaut : 0
H1 { padding-left: 3px }
défaut : 0
défaut : 0
top, right, bottom et
left
H1 { padding: 1em 2em
Les valeurs manquantes
}
sont celles définies sur
le coté opposé
16/12/2015
CSS : liste des propriétés
CSS : liste des propriétés
border-top-width
donne l'épaisseur du bord
haut
thin | medium | thick |
<longueur>
H1 { border-topwidth: 0.5em }
défaut : medium
border-right-width
donne l'épaisseur du bord
droit
thin | medium | thick |
<longueur>
H1 { border-rigth-width:
0.5em }
défaut : medium
border-bottom-width
donne l'épaisseur du bord
droit
thin | medium | thick |
<longueur>
H1 { border-bottomwidth: 0.5em }
défaut : medium
border-left-width
donne l'épaisseur du bord
droit
thin | medium | thick |
<longueur>
H1 { border-leftwidth: 0.5em }
défaut : medium
border-width
border-color
permet de regrouper les
différentes propriétés de
border-width en une ligne
donne la couleur des
bordures
[thin | medium | thick |
<longueur>]{1,4}
<couleur>{1,4}
H1 { border-width: thin }
H1 { border-color: red }
border-top
regroupe toutes les
propriétés des
bordures hautes :
épaisseur, style et
couleur
<border-top-width>
|| <border-style> ||
<couleur>
H1 { border-top:
thick }
défaut :aucune
les valeurs omises
sont égales aux
valeurs par défaut
border-right
regroupe toutes les
propriétés des
bordures droites:
épaisseur, style et
couleur
<border-top-width>
|| <border-style> ||
<couleur>
H1 { border-right:
1em }
défaut :aucune
les valeurs omises
sont égales aux
valeurs par défaut
border-bottom
regroupe toutes les
propriétés des
bordures basses:
épaisseur, style et
couleur
<border-top-width>
|| <border-style> ||
<couleur>
H1 { border-bottom:
thick solid red }
défaut :aucune
les valeurs omises
sont égales aux
valeurs par défaut
défaut : medium
Les valeurs manquantes
sont celles définies sur le
coté opposé
Une seule valeur est
applicable à tous
défaut : black
CSS : liste des propriétés
border-left
défaut :aucune
regroupe toutes les propriétés des <border-top-width> ||
H1 { border-left: thick solid les valeurs omises sont
bordures gauches: épaisseur, style
<border-style> ||
égales aux valeurs par
red }
et couleur
<couleur>
défaut
<border-width> ||
<border-style> ||
<color>
border
regroupe toutes les propriétés des
bordures
width
permet de donner la largeur d'un
<longueur> |
IMG.icon { width: 100px }
élément texte ou image
<pourcentage> | auto
P { border: solid red }
défaut :aucune toutes
les bordures sont
identiques
clear
permet à un élément
d'être cadré sur le côté
spécifié
none | left | right |
both
H1 { clear: left }
défaut : none
display
spécifie où l'élément est
affiché
block | inline | listitem | none
P { display: block }
défaut : none
white-space
type d'espace blanc
normal | pre | nowrap
PRE { white-space: pre
}
défaut : normal
défaut : auto
list-style-type
height
permet de donner la longueur
d'un élément texte ou image
float
permet de cadrer l'élément là où il
apparaît ou à gauche ou à droite
<longueur> | auto
left | right | none
IMG.icon { height: 100px }
IMG.icon {
float: left;
margin-left: 0;
}
défaut : auto
défaut : none
list-style-image
disc | circle | square |
decimal | lowerdéfinit le type de
OL { list-style-type:
roman | upper-roman
numérotation, de bullet
lower-roman } /* i ii
| lower-alpha | upperdans les listes
iii iv v etc. */
alpha |
none
permet de remplacer les
types de numérotation de
list-style-type par une
image
<url> | none
UL { list-style-image:
url(ungi.gif) }
défaut : disc
défaut : none
16/12/2015
list-style-position
list-style
spécifie si les bullets
ou numérotation ou
images sont à
l'intérieur ou à
l'extérieur du texte.
inside | outside
UL { list-styleposition: outside }
(disc | circle | square
| decimal | lowerpermet de regrouper
roman | upperles différentes
UL { list-style: upperroman | lower-alpha
catégories de listroman inside }
| upper-alpha |
style
none) ||<url> | none
|| inside | outside
défaut : outside
défaut : aucune