Initiation au CSS: Mathieu LACROIX, François RÉVERET, Antoine VACAVANT

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
Initiation au CSS
Plan
Introduction au css
Utilisation du css
Initiation au css
1
Introduction au css
Gnralits
Insrer un chier css
Utilisation du css
Principe du css
Attributs
Balises Universelles
Autres Balises

Les lments
Application au tp
Initiation au CSS
Plan
Introduction au css
Utilisation du css
Gnralits
Insrer un chier css
Plan
1
Introduction au css
Gnralits
Insrer un chier css
Utilisation du css
Principe du css
Attributs
Autres Balises

Les lments
Application au tp
Initiation au CSS
Plan
Introduction au css
Utilisation du css
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
Initiation au CSS
Plan
Introduction au css
Utilisation du css
Gnralits
Insrer un chier css
Exemple d'utilisation
Ouvrons wikipedia (recherche css) sans le css associ.
Initiation au CSS
Plan
Introduction au css
Utilisation du css
Gnralits
Insrer un chier css
Exemple d'utilisation
Ouvrons cette mme page html avec le css associ.
Initiation au CSS
Plan
Introduction au css
Utilisation du css
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)
Initiation au CSS
Plan
Introduction au css
Utilisation du css
Principe du css
Attributs
Autres Balises
Plan
1
Introduction au css
Gnralits
Insrer un chier css
Utilisation du css
Principe du css
Attributs
Autres Balises

Les lments
Application au tp
Initiation au CSS
Plan
Introduction au css
Utilisation du css
Principe du css
Attributs
Autres Balises
Fichier html de dpart
Initiation au CSS
Plan
Introduction au css
Utilisation du css
Principe du css
Attributs
Autres Balises
Rendu avec un navigateur
Initiation au CSS
Plan
Introduction au css
Utilisation du css
Principe du css
Attributs
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)
Initiation au CSS
Plan
Introduction au css
Utilisation du css
Principe du css
Attributs
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*/
}
Initiation au CSS
Plan
Introduction au css
Utilisation du css
Principe du css
Attributs
Autres Balises
On obtient alors avec Firefox :
Initiation au CSS
Plan
Introduction au css
Utilisation du css
Principe du css
Attributs
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*/
}
Initiation au CSS
Plan
Introduction au css
Utilisation du css
Principe du css
Attributs
Autres Balises
Appliquer des rgles plusieurs balises
Initiation au CSS
Plan
Introduction au css
Utilisation du css
Principe du css
Attributs
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) ?
Initiation au CSS
Plan
Introduction au css
Utilisation du css
Principe du css
Attributs
Autres 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;
}
Initiation au CSS
Plan
Introduction au css
Utilisation du css
Principe du css
Attributs
Autres Balises
Consquence dans le chier css pour notre exemple

h1 em
{
font-weigth : bold;
color : gray;
}
Initiation au CSS
Plan
Introduction au css
Utilisation du css
Principe du css
Attributs
Autres Balises
Rendu avec Firefox
Initiation au CSS
Plan
Introduction au css
Utilisation du css
Principe du css
Attributs
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, ...
Initiation au CSS
Plan
Introduction au css
Utilisation du css
Principe du css
Attributs
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>
Initiation au CSS
Plan
Introduction au css
Utilisation du css
Principe du css
Attributs
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 !
Initiation au CSS
Plan
Introduction au css
Utilisation du css
Principe du css
Attributs
Autres Balises
Exemple d'utilisation de l'attribut class

Je veux que juste le premier paragraphe soit crit en italique et en
bleu.
...
<body>
<h1> Titre de la page (h1) </h1>
<h2> Titre plus petit (h2) </h2>
<p class="italiqueEtBleu">
Ceci est un premier paragraphe....
</p>
...
</body>
Initiation au CSS
Plan
Introduction au css
Utilisation du css
Principe du css
Attributs
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 ! ! !
Initiation au CSS
Plan
Introduction au css
Utilisation du css
Principe du css
Attributs
Autres Balises
Aperu de la modication avec les attributs
Initiation au CSS
Plan
Introduction au css
Utilisation du css
Principe du css
Attributs
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;
}
Initiation au CSS
Plan
Introduction au css
Utilisation du css
Principe du css
Attributs
Autres Balises
Utilisation de l'attribut id
Attention : id ne peut tre utilis qu'une seule fois !
Initiation au CSS
Plan
Introduction au css
Utilisation du css
Principe du css
Attributs
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
Initiation au CSS
Plan
Introduction au css
Utilisation du css
Principe du css
Attributs
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
Initiation au CSS
Plan
Introduction au css
Utilisation du css
Principe du css
Attributs
Autres Balises
Exemple d'utilisation des balises universelles
Je souhaite mettre en gras le mot lien dans le deuxime paragraphe.

<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>
Initiation au CSS
Plan
Introduction au css
Utilisation du css
Principe du css
Attributs
Autres Balises
Modication du chier css
.grasRouge
{
font-weight: bold;
color : red;
}
Initiation au CSS
Plan
Introduction au css
Utilisation du css
Principe du css
Attributs
Autres Balises
Initiation au CSS
Plan
Introduction au css
Utilisation du css
Principe du css
Attributs
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
Initiation au CSS
Plan
Introduction au css
Utilisation du css
Principe du css
Attributs
Autres Balises
Les tailles
Un lment a toujours deux dimensions
width indique la largeur
height la hauteur
Initiation au CSS
Plan
Introduction au css
Utilisation du css
Principe du css
Attributs
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
Initiation au CSS
Plan
Introduction au css
Utilisation du css
Principe du css
Attributs
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
Initiation au CSS
Plan
Introduction au css
Utilisation du css
Principe du css
Attributs
Autres Balises
Les marges
Initiation au CSS
Plan
Introduction au css
Utilisation du css
Principe du css
Attributs
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
Initiation au CSS
Plan
Introduction au css
Utilisation du css
Principe du css
Attributs
Autres Balises
Objet ottant droite

div#toto
{
float : right;
}
Initiation au CSS
Plan
Introduction au css
Utilisation du css
Principe du css
Attributs
Autres Balises
Objet ottant gauche

div#toto
{
float : left;
}
Initiation au CSS
Plan
Introduction au css
Utilisation du css
Principe du css
Attributs
Autres Balises
Objet non ottant

div#toto
{
float : none;
}
Initiation au CSS
Plan
Introduction au css
Utilisation du css
Principe du css
Attributs
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
Initiation au CSS
Plan
Introduction au css
Utilisation du css
Principe du css
Attributs
Autres Balises
Dcorer le fond
Fichier css
h2
{
background-color : black;
}
.rocher
{
background-image : url("../Images/rocher.png");
}
Initiation au CSS
Plan
Introduction au css
Utilisation du css
Principe du css
Attributs
Autres Balises
Dcorer le fond
Initiation au CSS
Plan
Introduction au css
Utilisation du css
Les lments
Application au tp
Plan
1
Introduction au css
Gnralits
Insrer un chier css
Utilisation du css
Principe du css
Attributs
Autres Balises

Les lments
Application au tp
Initiation au CSS
Plan
Introduction au css
Utilisation du css
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
Initiation au CSS
Plan
Introduction au css
Utilisation du css
Les lments
Application au tp
Disposition des lments
Initiation au CSS
Plan
Introduction au css
Utilisation du css
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>
Initiation au CSS
Plan
Introduction au css
Utilisation du css
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");
...
}
Initiation au CSS
Plan
Introduction au css
Utilisation du css
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 !
Initiation au CSS

Sprache

Willkommen bei Scribd!

Initiation au CSS: Mathieu LACROIX, François RÉVERET, Antoine VACAVANT

Hochgeladen von

Dokumentinformationen

Beschreibung:

Datum des Uploads

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Beschreibung:

Copyright:

Verfügbare Formate

Initiation au CSS: Mathieu LACROIX, François RÉVERET, Antoine VACAVANT

Originaltitel:

Hochgeladen von

Beschreibung:

Copyright:

Verfügbare Formate

Verwandte Titel

Plan

Mathieu LACROIX, Franois RVERET, Antoine VACAVANT

Mise en place des lments de la page

Mathieu LACROIX, Franois RVERET, Antoine VACAVANT

Mise en place des lments de la page

Mathieu LACROIX, Franois RVERET, Antoine VACAVANT

Qu'est-ce que le CSS ?

Mathieu LACROIX, Franois RVERET, Antoine VACAVANT

Mathieu LACROIX, Franois RVERET, Antoine VACAVANT

Mathieu LACROIX, Franois RVERET, Antoine VACAVANT

(par rapport au rpertoire courant)

Mathieu LACROIX, Franois RVERET, Antoine VACAVANT

Mise en place des lments de la page

Mathieu LACROIX, Franois RVERET, Antoine VACAVANT

Fichier html de dpart

Mathieu LACROIX, Franois RVERET, Antoine VACAVANT

Rendu avec un navigateur

Mathieu LACROIX, Franois RVERET, Antoine VACAVANT

Exemple d'utilisation du CSS

Mathieu LACROIX, Franois RVERET, Antoine VACAVANT

On obtient alors avec Firefox :

Mathieu LACROIX, Franois RVERET, Antoine VACAVANT

Appliquer des rgles plusieurs balises

Mettons en rouge les titres de premier et deuxime niveau

Mathieu LACROIX, Franois RVERET, Antoine VACAVANT

Appliquer des rgles plusieurs balises

Mathieu LACROIX, Franois RVERET, Antoine VACAVANT

Comment mettre modier des balises (ou attributs) uniquement

Mathieu LACROIX, Franois RVERET, Antoine VACAVANT

balise1 balise2 balise3

Mathieu LACROIX, Franois RVERET, Antoine VACAVANT

Consquence dans le chier css pour notre exemple

Mathieu LACROIX, Franois RVERET, Antoine VACAVANT

Rendu avec Firefox

Mathieu LACROIX, Franois RVERET, Antoine VACAVANT

Comment faire pour que seulement quelques mots mis en valeur

Mathieu LACROIX, Franois RVERET, Antoine VACAVANT

Utilisation de l'attribut class

Modication du chier html

Mathieu LACROIX, Franois RVERET, Antoine VACAVANT

Utilisation de l'attribut class

Exemple d'utilisation de l'attribut class

Exemple d'utilisation de l'attribut class

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

Mathieu LACROIX, Franois RVERET, Antoine VACAVANT

Aperu de la modication avec les attributs

Mathieu LACROIX, Franois RVERET, Antoine VACAVANT

Mathieu LACROIX, Franois RVERET, Antoine VACAVANT

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

Mathieu LACROIX, Franois RVERET, Antoine VACAVANT

Dirence entre class et id

Mathieu LACROIX, Franois RVERET, Antoine VACAVANT

Balises qui "ne servent rien"

Mathieu LACROIX, Franois RVERET, Antoine VACAVANT

Exemple d'utilisation des balises universelles

Comment mettre modier des balises (ou attributs) uniquement

Consquence dans le chier css pour notre exemple

Modication du chier html

Aperu de la modication avec les attributs

Dirence entre class et id

Modication du chier css

Objet ottant droite

Objet ottant gauche

Objet non ottant

Commencer par le chier index.html

Crer un chier css