seance3-1 CSS.ppt

1
Techniques du web
LST Informatique
FST 2016-2017
Mohamed OUZARF
Feuilles de styles - CSS

LST informatique
2
Introduction
Les CSS, Cascading Style Sheets (feuilles de styles en
cascade), servent à mettre en forme des documents web, type
page HTML ou XHTML.
Par l'intermédiaire de propriétés d'apparence (couleurs,
bordures, polices, etc.) et de placement (largeur, hauteur, côte à
côte, dessus-dessous, etc.), le rendu d'une page web peut être
intégralement modifié sans aucun code supplémentaire dans la
page web.
Les feuilles de styles ont d'ailleurs pour objectif principal de
dissocier le contenu de la page de son apparence visuelle.
https://codepen.io/techie4good/pen/PGYvRB

LST informatique
3
Introduction
Ceci permet :
de ne pas répéter dans chaque page le même code de mise en
forme.
de pouvoir changer l'apparence d'un site web complet en ne
modifiant qu'un seul fichier.
de faciliter la lecture du code de la page.

LST informatique
4
Les avantages des feuilles de style
Appliquer le même style sur toutes les pages et assurer
ainsi une cohérences visuelle entre toutes les pages.
La maintenance de site est énormément simplifiée.
Le code html se trouve allégé quand on se débarrasse de
toutes les balises de style inclues dans la page.
Le transfert des pages dans le réseau devient plus rapide.
Introduction

LST informatique
5
Ce que vous pouvez faire avec les feuilles de style mais pas avec
HTML
Vous pouvez définir un arrière plan indépendant pour chaque
élément de la page.
Vous pouvez définir les marges de page HTML, les paragraphes,
et des divisions.
Vous pouvez définir le retrait des paragraphes.
Vous pouvez définir n’import quelle taille pour les caractères
(la taille maximale offerte par la balise <font> de html est la
taille 7).
Introduction

LST informatique
6
Il y a plusieurs manières d'appliquer des styles CSS à un
document. Ces méthodes sont plus ou moins pratiques en
fonction du contexte dans lequel on travaille.
Distinguons d'abord 2 choix possibles:
Les styles sont écrits dans le document même
Les styles sont écrits dans un fichier externe que l'on
relie aux documents
Définition d’une feuille de style

LST informatique
7
1- soit en écrivant les instructions CSS décrivant les styles
directement dans la page HTML à l'intérieur d'une balise
<style>, comme le montre la première illustration.
Ici on définit la couleur de police du document ainsi que la
couleur de fond
Il s'agit de placer les règles du langage CSS entre <HEAD> et </HEAD>.

LST informatique
8
2. Soit dans un simple fichier texte externe ( .css) et relié à la
page HTML par la balise <link> comme le montre la seconde
illustration.
Ici, en l'occurrence un fichier appelé styles.css
Notons que la balise link est autofermante, c'est-à-dire qu'il n'y
pas de balise fermante /link> et que toutes les informations sont
contenues dans les attributs.

LST informatique
9
Link :avertit le navigateur de la nature de ce lien.
rel="stylesheet": lui indique qu'il trouve une feuille de style externe.
type="text/css" : précise qu'il s'agir de texte et du genre CSS
lien href= "NomFichier.css " donne le chemin d'accès et le nom du
fichier qui contient les règles à appliquer.

LST informatique
10
/*code appliqué sur ce fichier Test00.html*/
h6
{
font-family: arial, verdana, sans-serif ;
font-size: 14pt ;
color: red ;
background-color: #FFFFFF ;
}
p {
margin: 20px;
color: #ff3559;
text-decoration: underline;
font-weight: bold;
font-family: sans-serif;
}
<!DOCTYPE html>
<HTLM>
<HEAD>
<TITLE>Test CSS</TITLE>
<link rel="stylesheet"
type="text/css" href= "Test.css">
</HEAD>
<BODY>
<H6>Vous constatez que ce texte
n'est pas totalement en vert </H6>
<p> bonjour tout le monde</p>
</BODY>
</HTML>
Fichier externe "Test.css" Fichier externe "Test00.html"

LST informatique
11
Fichier externe "Test.css" Fichier externe "Test00.html"

LST informatique
12
Structure et syntaxe d’une feuille de style
Une feuille de style est composée de règles CSS. Ces règles nous
permettront au final de donner un style à un ou plusieurs éléments du
document.
Une règle est divisée en 2 parties : le sélecteur et le bloc de déclaration.
Sélecteur :Un sélecteur détermine les parties de votre document qui seront
affectées par un style. Le sélecteur est généralement le nom d’une balise
( « body ».
Bloc de déclaration :Un bloc de déclaration est tout simplement composé
d’une ou plusieurs déclarations, et il est délimité par une paire d'accolades { }
Une déclaration est composée d’une propriété et d’une valeur qui sont séparées
par deux points.
Grâce à une propriété et une valeur, on spécifie l’aspect général de l'affichage :
la couleur, la taille, la typographie.

LST informatique
13
Structure et syntaxe d’une feuille de style
Ecrire une règle CSS: la syntaxe que nous utilisons pour
écrire une règle dans notre feuille de style :
sélecteur {propriété : valeur;}
Nous pouvons donc constater que notre règle est bien
composé : d’un sélecteur et d’un bloc de déclaration.

14
Application de styles
Le sélecteur peut désigner soit :
-une balise simple de type élément: exemple1
-
h1, p{
color: blue;
}

15
1. Soit le Code CSS
.haut {
text-align:right;
}
Pour appeler ce style dans la page html, on indique simplement
class="haut" à l'intérieur de la balise voulue.
<p class="haut »>Haut de page </p>
- certaines classes d'éléments, ( .class):
- certains ensembles d'éléments de la page HTML. ( #id)
Ces deux attributs HTML id et class vont cibler du contenu
HTML de manière plus précise que le type d’élément simple.

16
2. Soit le Code CSS
#menu {
background-color:silver;
width:100px;
float:left;
}
#contenu {
margin-left:110px;
}
Dans le code html, il faudra
donc cette fois indiquer un
id (id="menu" et
id="contenu") à la place de
la syntaxe class.
3. Soit encore

Héritage
17

18
Les types d’éléments HTML: type « block » et type « inline »
Les éléments HTML de type block les plus communs sont les suivants :
L’élément p ;
Les éléments h1, h2, etc. ;
Les éléments ol et ul ;
L’élément form ;
L’élément div
Un élément de type block va toujours
commencer sur une nouvelle ligne et
prendre toute la largeur disponible
dans la page.

19
L’élément HTML div est un élément de type block.
C’est un conteneur pour plusieurs autres éléments HTML.
On donne un attribut class à un élément div
Ici, nous avons créé un div autour de nos deux paragraphes.
Ensuite, nous appliquons les styles CSS directement à notre div.

LST informatique
20
Vous pouvez utiliser plusieurs unités de mesure
(centimètres : cm, Millimètre: mm, pixels: px, Point: pt,
pouces: in, pourcentage: %).
(HTML offre seulement les pixels et le pourcentage.)
Vous pouvez spécifier l’espacement entre les lignes
(interligne), l’espacement entre les caractères et entre les
mots.
Vous pouvez aussi demander le positionnement exact de tout
élément (image, tableau, paragraphe,…) sur la page.

LST informatique
21
1- Copier le code CSS dans le fichier html
2- Ajouter 3 blocs <div> avec les id au
fichier index.html
3- tester dans le navigateur

LST informatique
22
4- Copier le code CSS dans le
fichier design.css à l’aide d’un
éditeur de texte.
Cette feuille de styles permet
dans un premier temps de
structurer une page web
classique
Partie structure

LST informatique
23
5- modifier les code HTML
et CSS, en ajoutant du
texte et des images à
page web.
Partie design

LST informatique
24
5- modifier les code HTML
et CSS, en ajoutant du
texte et des images à
page web.
Partie design

LST informatique
25
Liste non exhaustive des propriétés CSS qui existent en CSS3.
La liste est non exhaustive car : il existe (plus de deux cents !)
et certaines sont très rarement utilisées.
PROPRIÉTÉS CSS
Propriétés de mise en forme du texte
Il s’agit de la présentation du texte proprement dit :
le gras, l'italique, le souligné, la police, l'alignement, etc.

LST informatique
26
PROPRIÉTÉS CSS
Propriétés de mise en forme du texte

LST informatique
27
PROPRIÉTÉS CSS

TP
35
Réaliser un site web à partir d’une maquette :
1- construire le squelette HTML de la page.
2- mettre en forme la page avec CSS.

Class et id
38
.mon-style {
color:red;
}
<p class="mon-style">Le style s'applique à ce paragraphe </p>
<p>Mais pas à celui-là</p>
<p class="mon-style">Le style peut s'appliquer à ce paragraphe </p>
<div class="mon-style">Et aussi à cette balise ! </div>
.mon-style1 {
color:yellow;
}
.mon-style2 {
background-color:#A0A0A0;
font-weight:bold;
}
Les éléments HTML peuvent avoir plusieurs classes

45
modes d'affichage pour les éléments HTML
Par défaut, les éléments HTML sont affichés selon l'un des modes suivants :
1- Bloc / block: éléments superposés
Occupe toute la largeur disponible.
Lorsque 2 éléments blocs se suivent dans une page, ils sont positionnés (par
défaut) l'un sous l'autre.
Exemple typique d'élément bloc : l'élément <p> (le paragraphe).
2- En-ligne / inline: éléments côte à côte
N'occupe que la largeur indispensable à l'affichage du contenu et ne
provoque pas de retour à la ligne.
Lorsque 2 éléments en-ligne se suivent dans une page, ils sont positionnés
l'un à côté l'autre (si la largeur de page le permet).
Exemple typique d'élément en-ligne : l'élément <img> (image).

49
mise en page par les CSS
Dimensionnement des blocs
La façon la plus courante d'attribuer une dimension à un bloc
consiste à utiliser les propriétés "width" et "height".
Il est aussi possible de définir la taille d'un bloc sans faire appel aux
propriétés "width" et "height". Il suffit pour cela de définir la
position de chaque bord du bloc en utilisant les propriétés "top",
"left", "bottom" et "right" .
Les marges internes et externes

50
CSS
.bloc-fixe {
position:fixed;
border:solid 1px;
width:100px;
top:10px;
left:10px;
bottom:10px;
}
.bloc-variable {
position:fixed;
border:solid 1px;
top:10px;
left:120px;
bottom:10px;
right:10px;
}
HTML
<div class="bloc-fixe">
Texte du bloc fixe.
</div>
<div class="bloc-variable">
Texte du bloc variable.
</div>

51
Le positionnement par les propriétés :
position relative/absolue et flottante.
Le positionnement relatif permet
d'inscrire un contenu dans le flux
normal (c'est à dire dans son
positionnement par défaut bloc
ou en ligne), puis de le décaler
horizontalement ou
verticalement. Le
contenu suivant n'est pas affecté
par ce déplacement

52
Le positionnement flottant retire une boîte du flux normal pour la
placer le plus à droite possible (float: right) ou le plus à gauche
possible (float: left) possible à l'intérieur de son conteneur.
Dans cet exemple, c'est la boîte jaune qui est flottante

54
Position:absolute;
Si le bloc parent
est "static", sa
position n'a pas
d’influence sur la
position de ses
enfants.

56
Détaillons trois exemples parmi ceux présentés :
Premier exemple. À l'intérieur d'une balise, par exemple ici p, on peut
introduire un attribut class
(voir la troisième colonne de cette ligne). Cet attribut indique que cet
élément fait partie d'une classe
particulière, ici la classe introduction. Il devient alors possible d'appliquer le
même style à tous les
éléments de cette classe introduction, quelque soit le type d'élément, pour
peu que le style s'applique
effectivement en définissant un sélecteur .introduction ou
(c'est l'exemple 2) seulement à tous les éléments de type p en définissant
un sélecteur p.introduction
Troisième exemple. À l'intérieur d'une balise, par exemple ici un conteneur
div et un titre h1, on
peut introduire un attribut id permettant de le repérer. Il devient alors
possible d'appliquer un style à
cet élément unique en définissant un sélecteur #titre, ou à l'élément de
type p portant cet identifiant.
1
2
3

seance3-1 CSS.ppt

Recommandé

Recommandé

Contenu connexe

Similaire à seance3-1 CSS.ppt

Similaire à seance3-1 CSS.ppt (20)

Dernier

Dernier (15)

seance3-1 CSS.ppt

Notes de l'éditeur