Vous êtes sur la page 1sur 17

CSS

Cascading Style Sheets


Pourquoi les CSS ?
 Pour séparer le contenu de la mise en
forme des pages web.
 Rendre la charte graphique du site Web
plus cohérente.
 Faciliter les mises à jour de la
présentation des sites Web.
 Donne plus de possibilités que HTML…
Comment ?
 En définissant un ou plusieurs styles
 Deux manières :
 Interne (les styles sont définis à l’intérieur
de la page)
 Externe (les styles sont définis dans un
fichier séparé puis relié à la page Web)
Style Interne I
 Style défini grâce à l’attribut style de la
balise HTML
Exemple :

<P Style="Color:#FF0">Mon paragraphe</P>


Style Interne II
 Style défini dans la balise Style
(Celle-ci doit être déclarée entre les balises
<head>et </head>)

Exemlpe :
<Style type="text/CSS">
P { Color:#FFAA34;}
</Style>
Style Externe
 Style défini 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="fichier.css">
Les Sélecteurs CSS
 Les sélecteurs permettent de définir la cible à
laquelle on veut appliquer le style.
 Trois catégories :
 Sélecteurs qui redéfinissent l’apparence des
balises html
 Sélecteurs associés à des variables et qu’on
applique à n’importe quelle balise html
 Sélecteurs spécifiques associés à une balise
particulière
Les Sélecteurs I
 Redéfinition de l’apparence des balises
html
Exemples :
P, H1 { font-family : verdana, arial;
Color:red; }
A{ text-decoration:none;
Color:blue; }
BODY {Background : #F9C}
Les Sélecteurs II
 Les sélecteurs associés aux variables…

Exemple de définition du style :


.corps {font-family : verdana, arial; }

Exemple d’utilisation dans html :


<Body class=corps>…..</body>
Les Sélecteurs III
 Les sélecteurs spécifiques à une balise
Exemple de définition du style :
#menu {font-family : verdana, arial; }

Exemple d’utilisation dans html :


<DIV id=menu>…..</DIV>
Les Sélecteurs IV
 Les Pseudo-Styles.
L’apparence change en fonction des événements qui
surviennent sur l’élément html.
Exemples :
A:link {Color:blue; }
A:hover {Color:yellow; }
A:visited {Color:black; }
Les Sélecteurs V
 Les Sélecteurs Hiérarchiques.
Exmples :
P A {Color:blue; }
(la couleur ne s’applique qu’aux balises <A> qui se trouvent à
l’intérieur d’un paragraphe <P> )
UL LI {list-style:none; }
(pas de puces pour les <LI> qui se trouvent à l’intérieur d’une <UL>.
Ca ne concerne pas donc les <LI> qui se trouvent à l’intérieur d’une
<OL> )
Quelques Attributs I
 Couleurs et images d'arrière plan
color: rgb(255,0,255);
background: red;
background-image: url('http://123.ma/img.jpg');

 Décoration de polices de caractères


font-family : verdana, arial;
font-weight: bold;
font-decoration: strike;
Quelques Attributs II
 Mise en forme de blocs de
caractères
text-align: right;
text-align: justify;
text-indent: 15px;
Gestion des boîtes englobantes
Gestion des boîtes englobantes

Margin>Border>Padding>Contenu
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;