courscss
TRANSCRIPT
-
8/6/2019 CoursCSS
1/30
Feuillesde style
(CSS)
v1.0
-
8/6/2019 CoursCSS
2/30
Cours CSS v1.0
Page 2/30
SOMMAIRE :
QU'EST-CE QUE LES CSS ? .......................................................................................... 4
VERSIONS DE CSS..........................................................................................................4
QU'EST CE QU'UN STYLE ? .................................................................................................4
PROPRIETES DES CSS......................................................................................................4
DEFINITION DES REGLES CSS .................................................................................... 5
IL Y A 4 TYPES DE REGLES .................................................................................................5
OU PLACER LES REGLES CSS? ............................................................................................5
CREATION DE LA FEUILLE EXTERNE........................................................................................6
SYNTAXE DES REGLES CSS ......................................................................................... 6
CASSE ........................................................................................................................6
CREER UNE CLASSE PERSONNALISEE......................................................................................7
COMMENTAIRES .............................................................................................................7
CLASS ET ID ............................................................................................................... 8
DIFFERENCE ENTRE CLASS ET ID ..........................................................................................8
CASCADE, CONFLITS ET HERITAGES........................................................................... 9
CONFLITS.....................................................................................................................9HERITAGE ....................................................................................................................9
UNITES DE LONGUEUR ............................................................................................. 10
UNITES DE LONGUEUR ABSOLUES - (A EVITER) .......................................................................10
UNITES DE LONGUEUR RELATIVES - (RECOMMANDEES) ..............................................................11
PROPRIETES............................................................................................................. 12
PROPRIETES DU TEXTE....................................................................................................12
PROPRIETES DES LISTES..................................................................................................13
LES RACCOURCIS ..................................................................................................... 14
POUR LE TEXTE ............................................................................................................14
POUR LES LARGEURS DE MARGES ET REMPLISSAGE ...................................................................14
LES BORDURES ............................................................................................................15
LES COULEURS .............................................................................................................15
LES BOITES : REMPLISSAGE ET MARGES .................................................................. 16
LES MARGES ...............................................................................................................16
LE REMPLISSAGE (PADDING).............................................................................................16
-
8/6/2019 CoursCSS
3/30
-
8/6/2019 CoursCSS
4/30
Cours CSS v1.0
Page 4/30
Qu'est-ce que les CSS ?
Pourquoi utiliser des feuilles de style ? Cascading Style Sheet (CSS)
Le principe de base est le suivant : il faut sparer le contenu de la page, de son apparence. La
page html contient l'information, et non la faon dont l'information est affiche. Pour un uniquecontenu : plusieurs affichages sont possibles. On peut penser des affichages monochrome,
sur de petits crans, oral (le contenu de la page web est lu), une impression papier,
impression sur des transparents, impression en braille
VERSIONS DE CSS
CSS1 publi en 1996 .
CSS-P (CSS positioning) permet le positionnement d'lments.
CSS2 est une recommandation de mai 1998 qui inclut les attributs des deux prcdentesversions. L'accent a t mis sur l'accessibilit et la capacit avoir un style diffrent selon les
media.
CSS3 : encore en cours de construction. Nouveauts : multicolonnage, SVG, styles sur les
polices (embossage...), arrondir les coins des botes, utiliser des images de fond dans les
bordures, des ombres portes...
QU'EST CE QU'UN STYLE ?
Les styles regroupent diffrents attributs, tels que les choix de police, de taille, de couleur
appliquer des titres, des sous-titres C'est ce que va faire le CSS : permettre de dfinir ces
attributs dans la page html l'aide d'un code spar. Par exemple, les balises html comme
qui par dfaut possdent une taille ou une graisse non modifiable en html,
verront ces caractristiques compltement redfinissables en CSS.
PROPRIETES DES CSS
Police : taille, style, couleur.
Texte : alignement, casse, interlignage, espace entre les mots et les lettres.
Arrire-plans : couleur ou images.
Bords et marges : marges, remplissages, largeur, hauteur.
Bordures : style, paisseurs, couleurs.
Interface : puces, indentation, curseur.
Positionnement : emplacement exact sur l'cran.
Affichage et visibilit : si un lment apparat et comment.
Impression : comment dfinir l'aspect de la page l'impression.
-
8/6/2019 CoursCSS
5/30
Cours CSS v1.0
Page 5/30
Dfinition des rgles CSS
IL Y A 4 TYPES DE REGLES
Les slecteurs html. Il est possible de redfinir les balises html en CSS.
Les classes. Il s'agit de rgles librement choisies qu'on peut appliquer n'importe quellebalise html.
les pseudo-classes de lien.
Les ID. peu prs le mme principe que les classes, mais ne peuvent s'appliquer qu'une
seule fois dans une page.
Toutes les rgles ont la mme structure :
Slecteur (balise html, classe, pseudo-classe ou ID)
Proprits qui identifient ce qui est dfini. Valeurs donnes la proprit.
La paire proprit-valeur est appele "dfinition"
selecteur { proprit : valeur ;}
h1 {
font-size: 11px;
}
OU PLACER LES REGLES CSS?
Il y a 3 faons d'insrer les CSS :
- dans une balise html dans le corps du document.
- dans l'en-tte du document (balise ).
- reli au document html l'aide d'une balise galement dans l'en-tte.
Le navigateur lit la page, tlcharge la feuille de style et l'utilise pour afficher le reste de la
page.
Dans la balise html
Titre
Dans l'en-tte
h1 {
font-size: 20px;
}
-
8/6/2019 CoursCSS
6/30
Cours CSS v1.0
Page 6/30
Dans un fichier externe reli au document :
rel="stylesheet" dit que c'est un lien externe du type feuille de style type="text/css". Le
" />" est utilis si vous choisissez le XHTML 1.0.
CREATION DE LA FEUILLE EXTERNE.
l'aide d'un logiciel de texte basique (Notepad, NotePad++ sur PC ou TextEdit, TextMate,
TextWrangler sur Mac), crer un fichier enregistr au format texte seul, portant
l'extension .css.
Aucune balise html avec les signes < > ne doit figurer dans ce fichier !
Syntaxe des rgles CSSContrairement au HTML qui n'tait pas trs standardis, les CSS ne laissent pas de place aux
erreurs de syntaxe. Les navigateurs ne sont pas indulgents comme pour les fautes de html.
Chaque rgle doit contenir un slecteur et une dclaration.
Les proprits de la dclaration doivent tres spares par des points-virgules.
Lorsque la valeur d'une proprit est une unit de mesure et sa valeur, il ne doit pas y avoir
d'espace entre les deux :
ex:font-size: 12px ;
font-family: Verdana, sans-serif;
Redfinir une balise html :
body {
background: #fff;
font-family: Verdana, Times, sans-serif;
}
CASSE
Les CSS ne sont pas sensibles la casse mais par convention, on met tout en minuscules.
Le W3C recommande en outre d'crire les codes hexadcimaux en minuscules galement.
-
8/6/2019 CoursCSS
7/30
Cours CSS v1.0
Page 7/30
CREER UNE CLASSE PERSONNALISEE
Une classe personnalise va tre utilise ponctuellement dans les pages du site. Le nom de la
classe doit tre prcd d'un point, ne doit pas commencer par un chiffre et ne doit contenir ni
espaces, ni accent, ni caractre de ponctuation, ni tiret.
Exemple pour une classe qui met du texte en rouge sur un paragraphe :CSS :
.txtrouge {
color: red;
}
HTML :
mon paragraphe en rouge
La valeur de la proprit de couleur peut tre un mot-clef (red, green, transparent, ), uncode Hexadcimal (ex: #ff56de) ou des valeurs RVB (Rouge, Vert, Bleu) entre 0 et 255 (ex:
color: rgb(255,125,32); ).
NOTE : L'indication hexadcimale d'une couleur peut parfois tre raccourcie en
regroupant par paire les lettres et chiffres. Ainsi, "#ff00ee" pourra s'crire "#f0e".
Mais "#ff00de" ne pourra pas tre raccourcie.
Les classes personnalises peuvent s'appliquer toutes les balises html.
Pour appliquer plusieurs classes une mme balise :
CSS :
.txtrouge {color: red;}
.italique {font-style:italic}
HTML :
mon paragraphe en rouge
Les deux classes sont spares par un espace, l'attribut "class" n'est indiqu qu'une seule fois.
COMMENTAIRES
/* Ceci est un commentaire de feuille de style */
Ils peuvent tre multi-lignes
/*
Ceci est un commentaire de feuille de style
un commentaire sur plusieurs lignes
*/
-
8/6/2019 CoursCSS
8/30
Cours CSS v1.0
Page 8/30
Class et id
DIFFERENCE ENTRE CLASS ET ID
Ce sont tous les deux des slecteurs qui permettent d'appliquer des rgles un lment.
"id" dfinit un lment de manire unique, alors que "class" peut tre utilis plusieurs foisdans la page.
Nous allons donc privilgier "id" pour les botes positionner, car deux lments ne devraient
logiquement pas avoir la mme position dans l'interface. De plus on peut ainsi donner des
paramtres propres chaque lment (typo, taille, couleur, positionnement, arrire-plan,
bordure ...) avec un seul id.
Il est possible de cumuler id et class. Alors l'id est plus fort que la classe en cas de conflit. De
plus JavaScript peut manipuler les balises avec un id.
Rappelons pour terminer qu'au sein de la CSS, les id sont dfinis avec le signe dise (#nom) etles class avec un point (.nom).
Exemple de CSS :
/* Dfinition des balises HTML */
body {
background-color: silver;
}
p {
color: #000;
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
}
/* Dfinition des ID */
#container {
width: 950px;
background-color: #fff;
margin: 0 auto;
}
/* Dfinition des classes */
.txtImportant {
color: red;
font-style: italic;
}
-
8/6/2019 CoursCSS
9/30
Cours CSS v1.0
Page 9/30
Cascade, conflits et hritages
Les ID l'emportent sur les "class". Les "class" l'emportent sur les slecteurs contextuels,
pseudo-class et pseudo lments. La feuille interne l'emporte sur la feuille externe si elle est
place aprs dans l'ordre du code. C'est toujours le dernier appel qui l'emporte.
CONFLITS
p { color : red; }
p { color : green; }
c'est le vert qui l'emporte. Il crase la valeur "red" prcdemment dfinie.
HERITAGE
C'est le mcanisme par lequel les styles s'appliquent un lment, mais aussi sesdescendants.
Structure d'une page html : en haut de la hirarchie : le html qui contient body qui contient
d'autres lments.
HTML est l'ascendant de tout (aussi appel lment racine). BODY est l'ascendant de tout ce
que montre le navigateur.
Souvent les lments hritent des proprits de leur parent : la couleur d'arrire-plan du body
sera la mme pour toutes les couleurs d'arrire-plan de la page, par dfaut. Quelques
proprits ne sont pas hrites, en gnral il s'agit de bon sens (comme border par exemple).
-
8/6/2019 CoursCSS
10/30
Cours CSS v1.0
Page 10/30
Units de longueur
UNITES DE LONGUEUR ABSOLUES - (A EVITER)
cm (centimtre = 1cm = 10 mm) Risque d'affichage diffrent sur plusieurs crans. mm (millimtre) Mme remarque. pc (pica = 1pc = 12pt) Un autre terme de typographie, donc mme remarque. pt (point = 1pt = 1/72 in) Le point est une mesure typographique utilise par les
imprimeurs (d'o les "points par pouce" de certaines rsolutions) et les traitements de
texte.
NOTE : Il ne peut y avoir d'espace l'intrieur de cette valeur et pour les nombres
dcimaux, la virgule est imprativement remplace par un point.
En accessibilit, ces valeurs ne sont pas recommandes, car elles empchent l'internaute de
redimensionner la taille d'affichage des caractres.
Ces valeurs sont donc viter ct web ! (Mais restent ventuellement utilisables pour une
CSS ddie l'impression).
-
8/6/2019 CoursCSS
11/30
Cours CSS v1.0
Page 11/30
UNITES DE LONGUEUR RELATIVES - (RECOMMANDEES)
px (pixel) em (largeur de la letttre m, 1 em correspond 100% de la taille en cours de la police,
1.2 em 120 %, 0.8 em 80% Son usage est donc limit aux polices.)
ex(hauteur de la lettre x. Assez pauvrement implmente, donc viter.). % L'lment dfini prendra un pourcentage donn de la taille de son lment parent.
small x-small xx-small large x-large
xx-large medium larger smaller
NOTE : L encore, il ne peut y avoir d'espace l'intrieur de cette valeur et pour les
nombres dcimaux, la virgule est imprativement remplace par un point.
En accessibilit, ces valeurs sont recommandes, car elles permettent l'internaute de
redimensionner la taille d'affichage des caractres.
Il est conseill de se cantonner aux units % et em pour un affichage fluide ou pour du texte,
et px quand on a besoin de placer les lments au pixel prs Les autres valeurs seront leplus souvent vites.
NOTE : Il existe 2 coles sur l'utilisation de ces valeurs. Certains intgrateurs
prfreront le "em" et en mettront partout, d'autres prfrent les "px" et n'utilisent
que a.
-
8/6/2019 CoursCSS
12/30
Cours CSS v1.0
Page 12/30
Proprits
PROPRIETES DU TEXTE
font-family: type de la police Nom(s) de(s) la police(s)
(faire une liste, noms spars par une virgule)font-weight: graisse normal, bold, bolder, lighter,
ou 100,200,300,400,500,600,700,800,900
color: couleurs valeurs hexadcimales ou nommes : red
tailles xx-small =xx-smallx-small = trs petit
small = petit.medium = moyen.large = grand.smaller = plus petit que normal.larger = plus grand que normal.
x-large = trs grand
xx-large = gant
font-size:
Donner des valeurs en point (pt), pica (pc), pouce (in),
millimtre (mm), centimtre (cm), pixel (px),
em : en relation avec la largeur de la lettre M de la police,
ex : en relation avec la largeur de la lettre x% : pour pourcentage par rapport la norme de l'lment
font-style: style normal, italic, oblique
font-variant: normal ou petite cap normal | small-caps
line-height: interlignage en points (pt), pixels (px), em ou en %
text-align: alignement left | right | center | justify
text-
transform:
Normal, nom propre,
majuscules, minuscules
None | Capitalize | UPPERCASE | lowercase
word-
spacing:
espacement des mots normal | ici 0,5cm entre les mots
letter-
spacing :
espacement des lettres normal | i c i : 0 , 5 c m
text-indent: indentation de la 1e
ligne
longueur (en cm ou en px) | pourcentage
positif ou ngatif (signe -)
Effet d'un alina.
-
8/6/2019 CoursCSS
13/30
Cours CSS v1.0
Page 13/30
PROPRIETES DES LISTES
Par dfaut les listes simples (non numrotes) sont prcdes d'une "puce" :
Il est possible de les remplacer avec la proprit list-style-type:
-
8/6/2019 CoursCSS
14/30
Cours CSS v1.0
Page 14/30
Les raccourcis
Dans le but d'allger vos pages CSS, il est intressant d'utiliser des raccourcis (shorthand en
anglais)
Les valeurs "raccourcies" sont spares par des espaces !
POUR LE TEXTE
font-size-adjust: none;
font-stretch: normal;
font-weight: normal;
font-style: normal;
font-variant: normal;
font-size: 16px;
line-height: normal;font-family: sans-serif
1em/1.2em donne la taille puis l'interlignage
font: 16px Verdana, sans-serif;
ou
font: bold 1em/1.2em Verdana, sans-serif;
POUR LES LARGEURS DE MARGES ET REMPLISSAGE
Pour une mme valeur en haut, droite, en bas et gauche, dans cet ordre prcis (Top, Right,
Bottom, Left - moyen mnmotechnique pour ceux qui parlent anglais TRBL, trouble ;-))
padding : 2px margin : 2px
Deux valeurs diffrentes seront pour haut et bas, gauche et droite
margin-top : 2px;
margin-right : 5px;
margin-bottom : 2px;
margin-left : 5px;
margin: 2px 5px;
Trois valeurs diffrentes seront pour haut , gauche et droite puis bas
margin-top : 5px;
margin-right : 2px;
margin-bottom : 7px;
margin-left : 2px;
margin: 5px 2px 7px;
Enfin il est possible d'indiquer la suite les 4 valeurs pour haut, droite, bas et gauche
margin-top : 5px;
margin-right : 2px;
margin-bottom : 3px;
margin-left : 6px;
margin: 5px 2px 3px 6px;
-
8/6/2019 CoursCSS
15/30
Cours CSS v1.0
Page 15/30
LES BORDURES
Les bordures doivent obligatoirement avoir 3 paramtres : style, largeur et couleur. L'ordre
n'importe pas.
border-width: 2px;border-style : solid;
border-color : #f00;
border: 2px solid #f00;
Les styles disponibles sont les suivants :
solid (trait plein)
dotted (pointills)
dashed (tirets)
double (double trait plein)
groove (bordure en relief s'enfonant)
ridge (bordure en relief sortant)
inset (effet de relief s'enfonant)
outset (effet de relief sortant)
On peut trs bien dfinir une bordure diffrente par ct de la boite !
LES COULEURS
Les couleurs peuvent tre raccourcies condition que les chiffres/lettres soient doubls. Onpeut donc avoir 3 ou 6 caractres dans le code hexadcimal.
color: #ffffff;
color: #00ffcc;
color: #ee11ff;
color: #fff;
color: #0fc;
color: #e1f;
-
8/6/2019 CoursCSS
16/30
Cours CSS v1.0
Page 16/30
Les botes : remplissage et marges
LES MARGES
Les marges sont l'extrieur d'un lment (bote ou autre)
Il s'agit de l'espace qui se trouve autour de la bote ou d'un autre lment (paragraphe, h1,listes ...)
L'arrire-plan des marges est toujours transparent. Les rgles d'hrdit ne sont pas
applicables.
Valeurs :
La longueur pour dfinir une largeur fixe. Le pourcentage qui est calcul par rapport la largeur du bloc conteneur de la bote
gnre.
Auto qui correspond une valeur dfinie par le navigateur.:
La bote verte a une marge de 10 pixels tout le
tour, de son conteneur (bords noirs).
Le contenu colle aux bords
La bote verte a une marge de :
10 pixels en haut20 pixels droite
5 pixels en bas
15 pixels gauche
LE REMPLISSAGE (PADDING)
Le remplissage (padding) est l'intrieur de la bote.
Valeurs possibles : pixels ou pourcentage.
Ici le contenu commence 10 pixels, la bote
prend toute la largeur.
Attention : le remplissage fait partie de la bote et
augmente donc sa largeur.
Ici la bote prend 250 pixels de large, mais dans le
code on a : 230px + 10px de remplissage gauche
+ 10px de remplissage droit ! (10px tout autour)
Les marges peuvent galement prendre une valeur ngative.
-
8/6/2019 CoursCSS
17/30
Cours CSS v1.0
Page 17/30
Les boites
DEFINITION
Une bote est un morceau de la page, une "division" qui est appele avec la balise .Chaque bote tant un conteneur, on peut y mettre tous les autres lments HTML, listes, en-
ttes, images, flash, paragraphes, etc
Dans le CSS, cette balise est appele avec un "#" si c'est un id, et si c'est une classe, avec
un ".".
Exemple de code html
....
...
Exemple de code CSS correspondant
#page {
width: 200px;font: 11px Verdana, sans-serif;
}
.titre {
font-size: 20px;
}
Il y a deux modles de botes : le modle standard w3c et le modle Microsoft Internet
Explorer. Les affichages peuvent donc diffrer de beaucoup. Cependant si vous utilisez un
doctype, cela forcera en partie IE se comporter selon les normes du W3C.
Une bote est compose de
Son contenu Son remplissage (marge interne) Sa bordure
La marge externe est l'extrieur de la bote, mais pousse donc les lments qui seraient
adjacents.
-
8/6/2019 CoursCSS
18/30
Cours CSS v1.0
Page 18/30
LE POSITIONNEMENT DES BOITES : STATIQUE, RELATIF, ABSOLU
NOTION DE FLUX
Les navigateurs "lisent" le code et l'interprtent de faon linaire. Les botes viennent
naturellement les unes en dessous des autres, comme les paragraphes, les balises d'en-ttes
et les listes, et d'autres lments au contraire, comme les images ou les liens se placentnaturellement dans le flux du document.
STATIQUE (PAR DEFAUT)
Ici il y a une bote verte insre dans la page, avec les marges
de la page par dfaut. Puis une deuxime bote rouge, qui se
place par dfaut en dessous. Elles contiennent une ligne de
texte.
Par dfaut les botes font 100% de leur conteneur et prennent la hauteur de leur contenu.
RELATIF (DANS LE FLUX) = POSITION : RELATIVE
Il est possible de dcaler horizontalement et/ou verticalement
les lments. Ceci peut gnrer des chevauchements !
Ici la bote rouge a t "pousse" de 20pixels plus bas que
l'lment prcdent :
#rouge {
background: red;
position:relative;
top:20px;
}
ABSOLU (HORS DU FLUX) = POSITION : ABSOLUTE
Il est possible de retirer les botes du flux normal de la page. Celles-ci n'auront alors aucun
effet sur les autres lments de la page. Elles se placent par rapport l'lment parent. Si rien
n'est prcis, ce sera par rapport la fentre. Les botes positionnes en absolu prennent la
largeur et la hauteur de leur contenu, sauf si on leur donne des paramtres diffrents.
Attention cela peut provoquer des chevauchements, comme dans l'exemple ci-dessous. La
bote rouge "ignore" la bote verte et se positionne 20 pixels
du haut de la fentre.
Ici on a simplement chang la position "relative" de la bote
rouge, en "absolute" :
#rouge {
background: red;
position: absolute;
top: 20px;}
-
8/6/2019 CoursCSS
19/30
Cours CSS v1.0
Page 19/30
LE POSITIONNEMENT DES BOITES : LE FLOTTEMENT
Une bote flottante est retire du flux normal, et place le plus droite (float: right) ou le plus
gauche (float: left) possible de son conteneur (par dfaut la fentre).
COMPRENDRE LE FLOTTEMENT
L'lment flottant se met le plus droite ou gauche possible de son conteneur, donc
l'lment suivant se positionne ct.
Les lments flottants doivent OBLIGATOIREMENT avoir une LARGEUR DEFINIE.
Une image et du texte ct par dfaut donnent ceci :
Le texte se positionne ct de l'image, en
bas et va en dessous la fin du conteneur
Ici, l'image a le paramtre : float: left
L'image se place le plus gauche possible et
le texte l'habille donc droite.
Ici, l'image a le paramtre : float: right
L'image se place le plus droite possible et le
texte l'habille donc gauche.
-
8/6/2019 CoursCSS
20/30
Cours CSS v1.0
Page 20/30
FAIRE DES COLONNES
Attention les lments flottants se placent les uns ct des autres tant qu'ils ont la place,
ensuite ils vont en dessous.
Ci-dessous les deux botes sont float: right, elles partent donc de la droite du conteneur.
Il est recommand de mettre toutes les botes qui doivent tre les unes ct des autres en
float, mme la dernire ! tous les navigateurs ne ragiraient pas de la mme faon.
SORTIR DU FLOTTEMENT = CLEAR : LEFT, RIGHT OU BOTH
Puisque tous les lments qui se positionnent les uns ct des autres doivent avoir la
proprit "float" y compris le dernier, il faut ensuite "forcer" le retour la ligne.
Revenir la ligne aprs des colonnes : clear (left, right, both) :
Il est ncessaire d'avoir un lment qui permet de revenir la ligne.
S'il y a eu du flottement gauche, il faut : clear: left
S'il y a eu du flottement droite, il faut : clear:right
S'il y a eu du flottement gauche et droite, il faut : clear:both
- Exemple de code html :
colonne de gauche
colonne du milieu
colonne de droite
pied de page
- La CSS sera :
#leftcol { width: 100px; float: left; }
#midcol { width: 400px; float: left; }
#rightcol { width: 100px; float: left; }
#footer { width: 600px; clear: left; }
-
8/6/2019 CoursCSS
21/30
Cours CSS v1.0
Page 21/30
LA NOTION DE DEBORDEMENT : OVERFLOW
Il s'agit de la proprit "overflow" qui prend 4 valeurs : auto, visible, hidden, scroll. Par dfaut
le contenu dbordera de la bote et sera visible (overflow: visible).
La bote grise fait 100px de haut, mais le
contenu a forc sa hauteur, le texte dpasse
de la bote.
La bote grise fait 100px de haut, mais nous
avons ajout la proprit : overflow: auto,
cela a gnr une barre de dfilement de
faon automatique dans le sens o il y en a
besoin (verticalement et/ou horizontalement
selon le contenu).
La bote grise fait 100px de haut. Nous avons
ajout la proprit : overflow: hidden, cela a
masqu le contenu qui dbordait.
La bote grise fait 100px de haut nous avons
ajout la proprit : overflow: scrollBarres de dfilement dans les deux sens
(actives ou non) !
Attention !Selon les navigateurs (Mozilla), des lments flottant l'intrieur d'un autre lmentne forcent pas la hauteur de celui-ci.Si vous donnez une couleur d'arrire-plan une bote qui contient des lmentsflottants, il est recommand de donner celle-ci la proprit : overflow :auto, pour laforcer suivre son contenu.
- Exemples de code :
html :
colonne de gauche
colonne de droite
CSS :
#conteneur { width: 700px; overflow : auto; background: #099; }
#col_g { width: 300px; float: left;}#col_d { width: 400px; float: left;}
-
8/6/2019 CoursCSS
22/30
Cours CSS v1.0
Page 22/30
Arrire-plan : images
Les images d'arrire-plan sont des images (gif ou jpg) qui par dfaut se rptent en mosaque
(effet papier peint).
En CSS il est possible de ne pas les rpter, de les rpter horizontalement ou verticalement,et si on ne les rpte pas, on peut les positionner dans leur lment.
Ces images peuvent s'appliquer aux balises html, que ce soit pour toute la page, ou
,
, etc ...
Il est recommand d'utiliser des images les plus lgres possibles et profiter ainsi de l'effet de
rptition pour des effets graphiques.
Voici quelques exemples avec les codes :
- Rptition,
- Rptition horizontale,- Rptition verticale,
- Pas de rptition,
- Remplacement de la puce de liste.
REPETITION
Avec cette petite image : 4px sur 2px, qui se rpte par dfaut
#fondrouge {
background: url(fondrouge.gif);
height: 100px;
width: 240px;
color: #fff;
text-align: center;
}
REPETITION HORIZONTALE
Avec cette petite image : (poids: 1ko) qui se rpte verticalement (cette image aurait
pu ne faire qu'un pixel de haut, mais pour les besoins de lisibilit sur cette page, elle est plus
grande !) De plus ici on a ajout une couleur d'arrire-plan = #E6E7E8 :
#ombre-droite {
background: #e6e7e8
url(ombre_portee_droite.gif) repeat-y right top;
height: 100px;
width: 240px;
color: #333;
text-align: center;
}
-
8/6/2019 CoursCSS
23/30
Cours CSS v1.0
Page 23/30
REPETITION VERTICALE
Avec cette petite image : 11px sur 13px, qui se rpte horizontalement :
#symboleh {
background: url(symbole_h.gif) repeat-x ;
height: 130px;
width: 240px;color: #333;
text-align: center;
padding-top:10px;
border:1px solid green;
}
PAS DE REPETITION
Avec cette image :
#lys {
background: url(lys.gif) no-repeat right bottom;
height: 230px;
width: 240px;
color: #333;
text-align: center;
float: left;
padding-top:10px;
border:1px solid gray;
}
REMPLACEMENT DE LA PUCE DE LISTE
Avec cette image : on peut remplacer facilement des puces de liste par une image, et la
placer exactement o l'on veut par rapport aux lments de la liste :
#puces li {
background: url(../img/puce.gif) no-repeat left center;
padding-left: 20px;
list-style: none;
}
Les possibilits de positionnement : background-position
background-position : top, center, left, bottom, right, ou avec des valeurs en pixels ou en
pourcentage.
Image d'arrire-plan : background-attachment
scroll : l'image dfile en mme temps que la pagefixed : l'image reste fixe et la page dfile par dessus.
-
8/6/2019 CoursCSS
24/30
Cours CSS v1.0
Page 24/30
Pseudo Classes de liens
Par dfaut les liens sont bleus et souligns, les liens visits sont violets et souligns et les liens
actifs, rouges et souligns.
Si vous avez paramtr une typo et une taille de texte dans votre CSS, ils vont en hriter,mais garderont les paramtres qui leur sont propres : couleur et soulignement.
Il est impratif de respecter l'ordre dans lequel ils sont appels dans le CSS et de ne pas
mettre d'espace de chaque ct des deux points.
a:link
pour le lien tel qu'il apparat sur la page avant d'avoir t cliqu.
a:visited
pour le lien tel qu'il apparat sur la page aprs avoir t visit.
a:hoverpour le lien tel qu'il apparat sur la page lorsqu'on passe le curseur au-dessus.
a:active
pour le lien tel qu'il apparat sur la page au moment o on clique dessus.
Pour changer la couleur : voir le chapitre sur les couleurs.
"DECORATION" DU TEXTE
Proprit text-decoration : pour la "dcoration". les possibiilts sont :
underline (soulign = par dfaut) overline (un trait au-dessus) line-through (barr) none (pas de soulignement) blink (clignotant, mais ne fonctionne pas dans Internet explorer)
Le code serait donc pour un lien non visit de couleur noire et non soulign:
a:link {
color: #000;
text-decoration: none;
}
-
8/6/2019 CoursCSS
25/30
Cours CSS v1.0
Page 25/30
Elments de type : block
Certains lments se mettent les uns en dessous des autres, d'autres les uns ct des
autres.
Les lments qui se placent les uns en dessous des autres sont des lments dits de type :block
les botes :
les paragraphes :
les balises d'en-ttes :
les listes : et
les lments de liste :
les formulaires : les tableaux :
Il sera toutefois possible de faire afficher certains de ces lments les uns ct des autres
grce la proprit : display.
Le plus couramment utilis sera de faire afficher des lments de liste les uns ct des
autres.
Une liste ci-dessous :
cinma
thtre
danse
opra
Peut s'afficher comme ceci :
cinma thtre danse opra
Nous disons la balise de cette liste de s'afficher en ligne. La liste a t identifie, par
exemple .
Le code CSS est :
#sorties li { display: inline; }
Pour espacer les lments de la liste nous rajoutons :
#sorties li { display: inline; padding-right: 20px; }
Vous avez remarqu que les puces prcdants les lments de cette liste, ont
automatiquement disparu !
-
8/6/2019 CoursCSS
26/30
Cours CSS v1.0
Page 26/30
Elments de type : inline
Il s'agit des lments qui se mettent les uns ct des autres.
Les lments qui se placent les uns ct des autres sont des lments dits de type : inline
(en ligne).
les hyperliens :
les images :
les portions de texte:
le gras :
l'italique :
les lments de formulaires (, , )
Il sera toutefois possible de faire afficher ces lments les uns en dessous des autres grce
la proprit : display.
le mondele figarolibration
Les liens ci-dessus peuvent s'afficher comme ceci :
le monde
le figaro
librationNous disons la balise de ce paragraphe de s'afficher en block. Le paragraphe a t
identifi, par exemple
.
Le code CSS est :
#journaux a { display: block; }
Elments non affichs
Il est possible de ne pas afficher des lments.
Ceci sert :
Lorsqu'on fait des affichages diffrents par type de mdia Pour des listes droulantes de liens
On utilise encore une fois la proprit : display, avec cette fois le paramtre : none
#menu .sousMenu {
display: none;
}
-
8/6/2019 CoursCSS
27/30
Cours CSS v1.0
Page 27/30
Affichage de type tableau
Il est possible d'afficher des lments sous forme de tableau : display: table.
Les lments imbriqus doivent avoir les proprits table-row et table-cell, pour rappeler lesbons vieux TR et TD.
La proprit border-collapse est utilise pour fusionner les bordures. Elle peut prendre la
valeur de :
- collapse, chaque cellule a une bordure commune.
- separate, chaque cellule a sa propre bordure.
- inherit, hrite de son parent (CSS 2)
Le style "border-collapse" ne peut s'appliquer que sur la balise HTML TABLE ou sur un lment
dont la valeur display est gale : 'table' ou 'inline-table'.
Le rendu des bordures de tableau est divis en deux catgorie dans CSS2 : fusionnes et
spares.
Dans le modle de rendu des bordures fusionnes, les cellules adjacentes partagent les mmes
bordures.
Dans le modle de rendu des bordures spares, chaque cellule adjacente a ses propres
bordures (la distance entre les bordures est dfinie par la proprit border-spacing ).
Autres types d'affichage
Les autres types d'affichage dcrits ci-dessous ne sont pas interprts par tous lesnavigateurs, ou pas de la mme faon.
DISPLAY: INLINE-BLOCK
Un lment affich comme inline-block, est un lment en ligne, c'est--dire qu'il se place
ct de l'lment adjacent, mais se comporte comme un block.
Ne fonctionne pas dans Firefox 2 et infrieur.
DISPLAY: LIST-ITEM
Signifie qu'il se comporte comme une liste, et est prcd d'une puce.
-
8/6/2019 CoursCSS
28/30
Cours CSS v1.0
Page 28/30
Styles divers
CURSEUR
La proprit de feuille de style cursorCSS peut prendre les valeurs suivantes :
Le code CSS = cursor: nw-resize, par exemple.
- default, curseur en forme de grosse flche (curseur par dfaut),
- pointer, curseur en forme de main avec un doigt dpli (par dfaut sur les liens),
- n-resize, curseur en forme de petite flche verticale vers le haut (North),
- s-resize, curseur en forme de petite flche verticale vers le bas (South),
- e-resize, curseur en forme de petite flche horizontale vers la droite (Est),
- w-resize, curseur en forme de petite flche horizontale vers la gauche (West),
- ne-resize, curseur en forme de petite flche en diagonale vers haut droit,- nw-resize, curseur en forme de petite flche en diagonale vers haut gauche,
- se-resize, curseur en forme de petite flche en diagonale vers bas droit,
- sw-resize, curseur en forme de petite flche en diagonale vers bas gauche,
- crosshair, curseur en forme de croix fine (genre viseur),
- move, curseur en forme de quatre flches en croix,
- text, curseur en forme de sorte de grand I,
- help, curseur en forme de flche et "?",
- wait, curseur en forme de sablier,
- progress, curseur en forme de flche avec sablier,
- not-allowed, curseur en forme de rond barr (interdit),
- col-resize, curseur fait d'une barre verticale avec une flche horizontale de chaque cot.
- row-resize, curseur fait d'une barre horizontale avec une flche au dessus et au dessous.
a.aide {
cursor: help;
}
-
8/6/2019 CoursCSS
29/30
Cours CSS v1.0
Page 29/30
Une feuille par mdia
Il est possible avec une seule page html, d'obtenir des affichages diffrents selon les types
d'appareils.
Voici la liste des types existant l'heure actuelle :http://www.yoyodesign.org/doc/w3c/css2/media.html
all : convient pour tous les appareils (valeur par dfaut si rien n'est indiqu) ;
screen : destin principalement aux moniteurs couleurs ;
print : destin un support pagin opaque et aux documents vus sur cran en mode aperu
avant impression ;
aural : destin aux synthtiseurs de parole. Voir les dtails fournis dans le chapitre sur les
feuilles de style auditives ;braille : destin aux appareils braille retour tactile ;
embossed : destin aux appareils impression braille ;
handheld : destin aux appareils portatifs (typiquement ceux avec petits crans,
monochromes et bande passante limite) ;
projection : destin aux prsentations en projection, par exemple avec des projecteurs ou
des impressions pour des transparents ;
tty : destin aux mdias utilisant une grille de caractres fixe, tels les tltypes, les terminaux
ou les appareils portatifs aux capacits d'affichage rduites. Les auteurs ne devraient pas
utiliser de valeurs exprimes en pixel avec ce type de mdia ;
tv : destin aux appareils du type tlvision (avec ces caractristiques : basse rsolution,
couleur, dfilement des pages limit, sonoris).
NOTE : Les noms des types de mdias ne sont pas sensibles la casse.
Une premire feuille de style externe est relie la page comme par exemple :
puis une autre :
L'instruction "media" dfinit pour quel type d'appareil chaque feuille est faite.
On peut ainsi adapter au mieux les affichages : des pixels, des polices sans-serif pour l'cran
seront transformes par exemple en cm et polices serif pour l'impression. De mme pour la
largeur des blocs, l'affichage des menus, ou des publicits.
-
8/6/2019 CoursCSS
30/30
Cours CSS v1.0
Ressources
LIENS :
W3C : http://www.w3.org
Pour les standards du web : http://openweb.eu.org/La puissance dmontre des CSS avec le superbe site ZenGarden :
http://www.csszengarden.com/tr/francais/
Alsacrations (tutoriaux, forums, ) : http://www.alsacreations.com
Articles, ressources traduites en franais : http://www.pompage.net/
Des galeries de sites en CSS : http://www.mostinspired.com/?type=gallery
LIVRES :
"Mmento CSS", de Raphal Goetter (Eyrolles)"CSS 2 Pratique du design Web", de Raphal Goetter, Philippe Vayssire, et Elie Slom
(Eyrolles)
"Le Zen des CSS", de Dave Shea & Molly Holzschlag (Eyrolles) Bonne ressource pour
contourner les faiblesses d'Internet Explorer.