CSS
Cascading Style Sheets
Pourquoi les CSS ?
Pour sparer le contenu de la mise
en forme des pages web.
Rendre la charte graphique du site
Web plus cohrente.
Faciliter les mises jour de la
prsentation des sites Web.
Donne plus de possibilits que
HTML
Comment ?
En dfinissant un ou plusieurs
styles
Deux manires :
Interne (les styles sont dfinis
lintrieur de la page)
Externe (les styles sont dfinis dans
un fichier spar puis reli la page
Web)
Style Interne I
Style dfini grce lattribut style
de la balise HTML
Exemple :
<P Style="Color:#FF0">Mon
paragraphe</P>
Style Interne II
Style dfini dans la balise Style
(Celle-ci doit tre dclare entre les balises
<head>et </head>)
Exemlpe :
<Style type="text/CSS">
P { Color:#FFAA34;}
</Style>
Style Externe
Style dfini dans un fichier externe
(Celui-ci doit tre reli la page entre les
balises <head>et </head>)
Exemple :
<link rel="stylesheet" type="text/css"
href="[Link]">
Les Slecteurs CSS
Les slecteurs permettent de dfinir la
cible laquelle on veut appliquer le style.
Trois catgories :
Slecteurs qui redfinissent lapparence des
balises html
Slecteurs associs des variables et quon
applique nimporte quelle balise html
Slecteurs spcifiques associs une balise
particulire
Les Slecteurs I
Redfinition de lapparence des
balises html
Exemples :
P, H1 {
font-family : verdana, arial;
Color:red; }
A { text-decoration:none;
Color:blue; }
BODY {Background : #F9C}
Les Slecteurs II
Les slecteurs associs aux
variables
Exemple de dfinition du style :
.corps {font-family : verdana, arial; }
Exemple dutilisation dans html :
<Body class=corps>..</body>
Les Slecteurs III
Les slecteurs spcifiques une
balise
Exemple de dfinition du style :
#menu {font-family : verdana, arial; }
Exemple dutilisation dans html :
<DIV id=menu>..</DIV>
Les Slecteurs IV
Les Pseudo-Styles.
Lapparence change en fonction des
vnements qui surviennent sur llment
html.
Exemples :
A:link {Color:blue; }
A:hover {Color:yellow; }
A:visited {Color:black; }
Les Slecteurs V
Les Slecteurs Hirarchiques.
Exmples :
P A {Color:blue; }
(la couleur ne sapplique quaux balises <A> qui se trouvent
lintrieur dun paragraphe <P> )
UL LI {list-style:none; }
(pas de puces pour les <LI> qui se trouvent lintrieur dune
<UL>. Ca ne concerne pas donc les <LI> qui se trouvent
lintrieur dune <OL> )
Quelques Attributs I
Couleurs et images d'arrire plan
color: rgb(255,0,255);
background: red;
background-image: url('[Link]
Dcoration de polices de caractres
font-family : verdana, arial;
font-weight: bold;
font-decoration: strike;
Quelques Attributs II
Mise en forme de blocs de
caractres
text-align: right;
text-align: justify;
text-indent: 15px;
Gestion des botes
englobantes
Gestion des botes
englobantes
Margin>Border>Padding>Conte
nu
margin: 10px;
padding: 5px;
border: 2px solid #FF00FF;
-------Margin-left:10px; Margin-top:5px;
Quelques Attributs III
Positionnement
position: absolute;
position: relative;
display: none;
z-index: 10;
