CSS
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.
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
Style Interne I
Style défini grâce à l’attribut style de la
balise HTML Exemple :
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 :
<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
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; }
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 :
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 :
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
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;
Quelques Attributs II
Mise en forme de blocs de
caractères
text-align: right; text-align: justify; text-indent: 15px;