Sie sind auf Seite 1von 50

Plan

Introduction au css
Utilisation du css
Mise en place des lments de la page

Initiation au CSS
Mathieu LACROIX, Franois RVERET, Antoine VACAVANT
mathieu.lacroix@isima.fr
Francois.Reveret@univ-bpclermont.fr
antoine.vacavant@liris.cnrs.fr

2 et 3 Avril 2007

Mathieu LACROIX, Franois RVERET, Antoine VACAVANT

Initiation au CSS

Plan
Introduction au css
Utilisation du css
Mise en place des lments de la page

Initiation au css
1

Introduction au css
Gnralits
Insrer un chier css

Utilisation du css
Principe du css
Attributs
Balises Universelles
Autres Balises

Mise en place des lments de la page


Les lments
Application au tp

Mathieu LACROIX, Franois RVERET, Antoine VACAVANT

Initiation au CSS

Plan
Introduction au css
Utilisation du css
Mise en place des lments de la page

Gnralits
Insrer un chier css

Plan
1

Introduction au css
Gnralits
Insrer un chier css

Utilisation du css
Principe du css
Attributs
Balises Universelles
Autres Balises

Mise en place des lments de la page


Les lments
Application au tp

Mathieu LACROIX, Franois RVERET, Antoine VACAVANT

Initiation au CSS

Plan
Introduction au css
Utilisation du css
Mise en place des lments de la page

Gnralits
Insrer un chier css

Qu'est-ce que le CSS ?


CSS : abrviation de Cascading Style Sheets
("Feuille de style").
Contient les instructions de mise en forme de la page html
Titres en bleu et centrs,
La couleur du fond est jaune,
L'criture utilise est le Times Roman 12, italique...

Intrt du css
Permet de sparer mise en forme et contenu du site
Facilite la maintenance du site

Mathieu LACROIX, Franois RVERET, Antoine VACAVANT

Initiation au CSS

Plan
Introduction au css
Utilisation du css
Mise en place des lments de la page

Gnralits
Insrer un chier css

Exemple d'utilisation
Ouvrons wikipedia (recherche css) sans le css associ.

Mathieu LACROIX, Franois RVERET, Antoine VACAVANT

Initiation au CSS

Plan
Introduction au css
Utilisation du css
Mise en place des lments de la page

Gnralits
Insrer un chier css

Exemple d'utilisation
Ouvrons cette mme page html avec le css associ.

Mathieu LACROIX, Franois RVERET, Antoine VACAVANT

Initiation au CSS

Plan
Introduction au css
Utilisation du css
Mise en place des lments de la page

Gnralits
Insrer un chier css

O mettre le css ?
Mettre le css dans un chier extrieur (nom_fichier.css)
Indiquer dans le chier html o trouver le chier css
<head>
...
<link rel="stylesheet" media="screen" type="text/css"
title="Titre du css" href="nom_fichier.css" />
...
</head>
title est le nom que l'on donne au css
href est le lien sur le chier css

(par rapport au rpertoire courant)

Mathieu LACROIX, Franois RVERET, Antoine VACAVANT

Initiation au CSS

Plan
Introduction au css
Utilisation du css
Mise en place des lments de la page

Principe du css
Attributs
Balises Universelles
Autres Balises

Plan
1

Introduction au css
Gnralits
Insrer un chier css

Utilisation du css
Principe du css
Attributs
Balises Universelles
Autres Balises

Mise en place des lments de la page


Les lments
Application au tp

Mathieu LACROIX, Franois RVERET, Antoine VACAVANT

Initiation au CSS

Plan
Introduction au css
Utilisation du css
Mise en place des lments de la page

Principe du css
Attributs
Balises Universelles
Autres Balises

Fichier html de dpart

Mathieu LACROIX, Franois RVERET, Antoine VACAVANT

Initiation au CSS

Plan
Introduction au css
Utilisation du css
Mise en place des lments de la page

Principe du css
Attributs
Balises Universelles
Autres Balises

Rendu avec un navigateur

Mathieu LACROIX, Franois RVERET, Antoine VACAVANT

Initiation au CSS

Plan
Introduction au css
Utilisation du css
Mise en place des lments de la page

Principe du css
Attributs
Balises Universelles
Autres Balises

Principe du CSS
balise
{
propriete: valeur;
propriete: valeur;
propriete: valeur;
}
balise : Nom de la balise dont on modie l'apparence
(ex : <em>, <b>, <h1>)
propriete : catgories d'eet de style (color, font-size)
valeur : valeur associe la proprit (red, blue)
Mathieu LACROIX, Franois RVERET, Antoine VACAVANT

Initiation au CSS

Plan
Introduction au css
Utilisation du css
Mise en place des lments de la page

Principe du css
Attributs
Balises Universelles
Autres Balises

Exemple d'utilisation du CSS


Modions la mise en page des balises <em>...</em> pour que les
parties mises en valeur apparaissent en vert, avec une taille de 30
pixels.
em /*Les mots mis en valeur sont*/
{
color : green; /*crits en vert*/
font-size : 30px; /*avec une taille de 30 pixels*/
}

Mathieu LACROIX, Franois RVERET, Antoine VACAVANT

Initiation au CSS

Plan
Introduction au css
Utilisation du css
Mise en place des lments de la page

Principe du css
Attributs
Balises Universelles
Autres Balises

On obtient alors avec Firefox :

Mathieu LACROIX, Franois RVERET, Antoine VACAVANT

Initiation au CSS

Plan
Introduction au css
Utilisation du css
Mise en place des lments de la page

Principe du css
Attributs
Balises Universelles
Autres Balises

Appliquer des rgles plusieurs balises

Mettons en rouge les titres de premier et deuxime niveau


(<h1>...</h1>,<h2>...</h2>).
h1, h2
{
color: red; /*Les titres sont en rouges*/
}

Mathieu LACROIX, Franois RVERET, Antoine VACAVANT

Initiation au CSS

Plan
Introduction au css
Utilisation du css
Mise en place des lments de la page

Principe du css
Attributs
Balises Universelles
Autres Balises

Appliquer des rgles plusieurs balises

Mathieu LACROIX, Franois RVERET, Antoine VACAVANT

Initiation au CSS

Plan
Introduction au css
Utilisation du css
Mise en place des lments de la page

Principe du css
Attributs
Balises Universelles
Autres Balises

Imbrication de balises

Comment mettre modier des balises (ou attributs) uniquement


comprises dans d'autres balises ?
Exemple
Comment crire en petites majuscules et en gris uniquement tous
les mots mis en valeur qui sont dans un titre h1 (et non dans un
paragraphe) ?

Mathieu LACROIX, Franois RVERET, Antoine VACAVANT

Initiation au CSS

Plan
Introduction au css
Utilisation du css
Mise en place des lments de la page

Principe du css
Attributs
Balises Universelles
Autres Balises

Imbrication de balises
Prciser dans le css dans quels cas les rgles dnies doivent
s'appliquer :
quand on est dans la balise balise3 contenue dans la balise
balise2, elle-mme contenue...
Dnition dans le chier css

balise1 balise2 balise3


{
propriete : valeur;
}

Mathieu LACROIX, Franois RVERET, Antoine VACAVANT

Initiation au CSS

Plan
Introduction au css
Utilisation du css
Mise en place des lments de la page

Principe du css
Attributs
Balises Universelles
Autres Balises

Imbrication de balises

Consquence dans le chier css pour notre exemple


h1 em
{
font-weigth : bold;
color : gray;
}

Mathieu LACROIX, Franois RVERET, Antoine VACAVANT

Initiation au CSS

Plan
Introduction au css
Utilisation du css
Mise en place des lments de la page

Principe du css
Attributs
Balises Universelles
Autres Balises

Rendu avec Firefox

Mathieu LACROIX, Franois RVERET, Antoine VACAVANT

Initiation au CSS

Plan
Introduction au css
Utilisation du css
Mise en place des lments de la page

Principe du css
Attributs
Balises Universelles
Autres Balises

Attributs class et id

Comment faire pour que seulement quelques mots mis en valeur


(mais pas tous !) soient en vert et de taille 30 pixels ?
Utilisation des attributs class et id.
Permettent de dnir un style personnalis
Peuvent tre mis sur n'importe quelle balise
Permettent de ne modier que certains mots, titres, ...

Mathieu LACROIX, Franois RVERET, Antoine VACAVANT

Initiation au CSS

Plan
Introduction au css
Utilisation du css
Mise en place des lments de la page

Principe du css
Attributs
Balises Universelles
Autres Balises

Utilisation de l'attribut class

Modication du chier html


On ajoute l'attribut class dans les balises que l'on souhaite
modier
<h1 class="nom1"> </h1>
<p class="nom2"></p>

Mathieu LACROIX, Franois RVERET, Antoine VACAVANT

Initiation au CSS

Plan
Introduction au css
Utilisation du css
Mise en place des lments de la page

Principe du css
Attributs
Balises Universelles
Autres Balises

Utilisation de l'attribut class


Modication du chier CSS
On dnit les valeurs des proprits qui vont tre appliques aux
balises ayant l'attribut class
.nom_de_la_classe
{
propriete : valeur;
}

Attention
Contrairement aux balises, il faut ajouter un point devant le nom
de la classe !
Mathieu LACROIX, Franois RVERET, Antoine VACAVANT

Initiation au CSS

Plan
Introduction au css
Utilisation du css
Mise en place des lments de la page

Principe du css
Attributs
Balises Universelles
Autres Balises

Exemple d'utilisation de l'attribut class


Je veux que juste le premier paragraphe soit crit en italique et en
bleu.
Modication du chier html

...
<body>
<h1> Titre de la page (h1) </h1>
<h2> Titre plus petit (h2) </h2>
<p class="italiqueEtBleu">
Ceci est un premier paragraphe....
</p>
...
</body>
Mathieu LACROIX, Franois RVERET, Antoine VACAVANT

Initiation au CSS

Plan
Introduction au css
Utilisation du css
Mise en place des lments de la page

Principe du css
Attributs
Balises Universelles
Autres Balises

Exemple d'utilisation de l'attribut class


Modication du chier css

.italiqueEtBleu
{
color : blue;
font-style: italic;
}

Attention : il faut mettre un point devant le nom de l'attribut


class ! ! !

Mathieu LACROIX, Franois RVERET, Antoine VACAVANT

Initiation au CSS

Plan
Introduction au css
Utilisation du css
Mise en place des lments de la page

Principe du css
Attributs
Balises Universelles
Autres Balises

Aperu de la modication avec les attributs

Mathieu LACROIX, Franois RVERET, Antoine VACAVANT

Initiation au CSS

Plan
Introduction au css
Utilisation du css
Mise en place des lments de la page

Principe du css
Attributs
Balises Universelles
Autres Balises

Utilisation de l'attribut id
L'attribut id s'utilise (quasiment) comme l'attribut class
Dnition dans le css avec un # (et non un point)
Dnition d'un identiant dans le css

#nom_id
{
propriete : valeur;
propriete : valeur;
}

Mathieu LACROIX, Franois RVERET, Antoine VACAVANT

Initiation au CSS

Plan
Introduction au css
Utilisation du css
Mise en place des lments de la page

Principe du css
Attributs
Balises Universelles
Autres Balises

Utilisation de l'attribut id

Attention : id ne peut tre utilis qu'une seule fois !

Mathieu LACROIX, Franois RVERET, Antoine VACAVANT

Initiation au CSS

Plan
Introduction au css
Utilisation du css
Mise en place des lments de la page

Principe du css
Attributs
Balises Universelles
Autres Balises

Dirence entre class et id

l'identiant (id) :
utilis pour rfrencer un lment
utilis pour la disposition des lments de la page
(en-tte, menu, pied-de-page, ...)

l'attribut class :
utilis plusieurs fois (pas de rfrence un objet prcis)
utilis dans les autres cas

Mathieu LACROIX, Franois RVERET, Antoine VACAVANT

Initiation au CSS

Plan
Introduction au css
Utilisation du css
Mise en place des lments de la page

Principe du css
Attributs
Balises Universelles
Autres Balises

Balises universelles
Comment modier l'apparence d'un mot qui n'est contenu dans
aucune balise ?
Utilisation des balises universelles
Deux types de balises universelles :
Balise de type
Balise de type

inline : <span>...</span>
block : <div>...</div>

Balises qui "ne servent rien"


Permettent de rajouter des class modiant la partie comprise
entre ces balises

Mathieu LACROIX, Franois RVERET, Antoine VACAVANT

Initiation au CSS

Plan
Introduction au css
Utilisation du css
Mise en place des lments de la page

Principe du css
Attributs
Balises Universelles
Autres Balises

Exemple d'utilisation des balises universelles

Je souhaite mettre en gras le mot lien dans le deuxime paragraphe.


Modication du chier html

<p>
J'ai aussi besoin d'un lien. Je cre donc un
<span class = "grasRouge"> lien </span> local
sur mon fichier <a href="styleTest.css"> css </a>
</p>

Mathieu LACROIX, Franois RVERET, Antoine VACAVANT

Initiation au CSS

Plan
Introduction au css
Utilisation du css
Mise en place des lments de la page

Principe du css
Attributs
Balises Universelles
Autres Balises

Exemple d'utilisation des balises universelles

Modication du chier css

.grasRouge
{
font-weight: bold;
color : red;
}

Mathieu LACROIX, Franois RVERET, Antoine VACAVANT

Initiation au CSS

Plan
Introduction au css
Utilisation du css
Mise en place des lments de la page

Principe du css
Attributs
Balises Universelles
Autres Balises

Exemple d'utilisation des balises universelles

Mathieu LACROIX, Franois RVERET, Antoine VACAVANT

Initiation au CSS

Plan
Introduction au css
Utilisation du css
Mise en place des lments de la page

Principe du css
Attributs
Balises Universelles
Autres Balises

Les tailles et les positions


Comment mesurer la taille ou la position d'un lment ?
Rapports
% : calcul de manire relative
em : 1em = 100%, 1.2em = 120%, etc.
Mesures

px : pixels, plus petite unit de l'cran


pt : points, plus petite unit de l'imprimerie

Mathieu LACROIX, Franois RVERET, Antoine VACAVANT

Initiation au CSS

Plan
Introduction au css
Utilisation du css
Mise en place des lments de la page

Principe du css
Attributs
Balises Universelles
Autres Balises

Les tailles
Un lment a toujours deux dimensions
width indique la largeur
height la hauteur

Mathieu LACROIX, Franois RVERET, Antoine VACAVANT

Initiation au CSS

Plan
Introduction au css
Utilisation du css
Mise en place des lments de la page

Principe du css
Attributs
Balises Universelles
Autres Balises

Les bordures
Bordure d'un lment
Dcrite par les proprits de border :
border-color : couleur
border-width : thick, medium, thin ou personnalis
border-style : none, hidden, dashed, solid, etc.

On peut aussi rgler l'paisseur de chaque bord


border[-top -bottom -left -right]-width : taille

Exemple
border-bottom : 1px solid red

Mathieu LACROIX, Franois RVERET, Antoine VACAVANT

Initiation au CSS

Plan
Introduction au css
Utilisation du css
Mise en place des lments de la page

Principe du css
Attributs
Balises Universelles
Autres Balises

Les marges
Deux marges dans un bloc
Une marge extrieure, par rapport aux autres lments
margin[-top -bottom -left -right] : taille
Gre ( ?) automatiquement avec margin : auto

Une marge intrieure, par rapport au texte l'intrieur du bloc


padding[-top -bottom -left -right] : taille

Exemples
margin : 0
padding-top : 0.5em
margin-bottom : 1px
Mathieu LACROIX, Franois RVERET, Antoine VACAVANT

Initiation au CSS

Plan
Introduction au css
Utilisation du css
Mise en place des lments de la page

Principe du css
Attributs
Balises Universelles
Autres Balises

Les marges

Mathieu LACROIX, Franois RVERET, Antoine VACAVANT

Initiation au CSS

Plan
Introduction au css
Utilisation du css
Mise en place des lments de la page

Principe du css
Attributs
Balises Universelles
Autres Balises

Les ottants

Le placement ottant
La proprit float peut prendre trois valeurs
none, left, right

Indique comment l'objet est plac par rapport au suivant

Mathieu LACROIX, Franois RVERET, Antoine VACAVANT

Initiation au CSS

Plan
Introduction au css
Utilisation du css
Mise en place des lments de la page

Principe du css
Attributs
Balises Universelles
Autres Balises

Objet ottant droite


div#toto
{
float : right;
}

Mathieu LACROIX, Franois RVERET, Antoine VACAVANT

Initiation au CSS

Plan
Introduction au css
Utilisation du css
Mise en place des lments de la page

Principe du css
Attributs
Balises Universelles
Autres Balises

Objet ottant gauche


div#toto
{
float : left;
}

Mathieu LACROIX, Franois RVERET, Antoine VACAVANT

Initiation au CSS

Plan
Introduction au css
Utilisation du css
Mise en place des lments de la page

Principe du css
Attributs
Balises Universelles
Autres Balises

Objet non ottant


div#toto
{
float : none;
}

Mathieu LACROIX, Franois RVERET, Antoine VACAVANT

Initiation au CSS

Plan
Introduction au css
Utilisation du css
Mise en place des lments de la page

Principe du css
Attributs
Balises Universelles
Autres Balises

Dcorer le fond

Il est possible de mettre un fond (image ou couleur) pour chaque


balise (ou attribut). Il faut alors utiliser les proprits suivantes :
background-color : couleur ;
background-image : url("emplacement_image") ;

Exemple
Une image de rocher sur le deuxime paragraphe
Les titres h2 sur fond noir

Mathieu LACROIX, Franois RVERET, Antoine VACAVANT

Initiation au CSS

Plan
Introduction au css
Utilisation du css
Mise en place des lments de la page

Principe du css
Attributs
Balises Universelles
Autres Balises

Dcorer le fond
Fichier css

h2
{
background-color : black;
}
.rocher
{
background-image : url("../Images/rocher.png");
}

Mathieu LACROIX, Franois RVERET, Antoine VACAVANT

Initiation au CSS

Plan
Introduction au css
Utilisation du css
Mise en place des lments de la page

Principe du css
Attributs
Balises Universelles
Autres Balises

Dcorer le fond

Mathieu LACROIX, Franois RVERET, Antoine VACAVANT

Initiation au CSS

Plan
Introduction au css
Utilisation du css
Mise en place des lments de la page

Les lments
Application au tp

Plan
1

Introduction au css
Gnralits
Insrer un chier css

Utilisation du css
Principe du css
Attributs
Balises Universelles
Autres Balises

Mise en place des lments de la page


Les lments
Application au tp

Mathieu LACROIX, Franois RVERET, Antoine VACAVANT

Initiation au CSS

Plan
Introduction au css
Utilisation du css
Mise en place des lments de la page

Les lments
Application au tp

Elments composant une page html


Une page html est gnralement compose de quatre blocs :
L'en-tte (haut de la page),
Le menu (situ gauche ou droite de la page),
Le corps (la page en elle-mme),
Le pied de page
Mise en page
Taille de la page internet xe (ex : 780 pixels).
Dnition des 4 blocs dans le chier html
( l'aide des balises <div>...</div>)
Description de la disposition et de la mise en page dans le css
Mathieu LACROIX, Franois RVERET, Antoine VACAVANT

Initiation au CSS

Plan
Introduction au css
Utilisation du css
Mise en place des lments de la page

Les lments
Application au tp

Disposition des lments

Mathieu LACROIX, Franois RVERET, Antoine VACAVANT

Initiation au CSS

Plan
Introduction au css
Utilisation du css
Mise en place des lments de la page

Les lments
Application au tp

Commencer par le chier index.html


Comment organiser les lments ?
Dans le chier index.html, aprs <head>...</head>, on retrouve
tous les lments :
<body>
<div id="en_tete">
</div>
<div id="menu">
</div>
<div id="corps">
</div>
<div id="pied_de_page">
</div>
Mathieu LACROIX, Franois RVERET, Antoine VACAVANT

Initiation au CSS

Plan
Introduction au css
Utilisation du css
Mise en place des lments de la page

Les lments
Application au tp

Crer un chier css


Description des lments dans le chier css
Par exemple :
#en_tete
{
width : 1140px ;
...
}
#menu
{
background-image : url("Images/fondMenu.png");
...
}
Mathieu LACROIX, Franois RVERET, Antoine VACAVANT

Initiation au CSS

Plan
Introduction au css
Utilisation du css
Mise en place des lments de la page

Les lments
Application au tp

Dmonstration

La page d'un doctorant avec deux styles possibles (dits alternatifs )


Pour alterner
Dans Firefox : Achage, Style de page, puis choisir la feuille
de style
N'est pas possible sous Internet Explorer !

Mathieu LACROIX, Franois RVERET, Antoine VACAVANT

Initiation au CSS