Cours CSS

Chapitre2 : CSS3
UP Web
AU: 2021/2022
PLAN
 CSS: Définition
 CSS: Historique
 CSS: Avantages
 Feuille de style CSS
 Où écrire le code CSS?
 Principe d’héritage
 Les sélecteurs
 Les propriétés
 Le modèle en boîte
 Imbrication des boîtes
2
CSS : Définition
CSS = Cascading StyleSheets
- Langage de style
- Sert à mettre en forme du contenu
- Permet de modifier la taille d’un texte, ajouter des bordures, une couleurs,
etc.
3
CSS : Historique (1/2)
❏ Les versions CSS:
4
CSS : Historique (2/2)
❏ Les versions CSS:
 CSS 1 : dès 1996, on dispose de la première version du CSS. Elle pose les
bases de ce langage qui permet de présenter sa page web, comme les
couleurs, les marges, les polices de caractères, etc.
 CSS 2 : apparue en 1999 puis complétée par CSS 2.1, cette nouvelle
version de CSS rajoute de nombreuses options. On peut désormais utiliser
des techniques de positionnement très précises, qui nous permettent
d'afficher des éléments où on le souhaite sur la page.
 CSS 3 : c'est la dernière version, qui apporte des fonctionnalités
particulièrement attendues comme les bordures arrondies, les dégradés, les
ombres, etc.
5
CSS : Avantages
 Faciliter la modification de la présentation ou du contenu (possibilité de
travailler en équipe plus efficacement).
 Coût de développement et de maintenance allégé(code plus simple).
 Code source allégé.
 Possibilité de présentations différentes selon : le profil utilisateur, la
résolution d‘écran, etc.
 Uniformiser la présentation sur plusieurs pages (un seul fichier CSS à
modifier pour que les changements se répercutent sur l'ensemble du
site).
6
Feuille de style CSS (1/2)
Une feuille de style est composée d'un certain nombre de
règles (rules)
Une règle se compose :
 d’un sélecteur ,
Et d’une declaration
 Une déclaration se compose d’un ensemble de
propriétés/valeurs
7
Feuille de style CSS (2/2)
❏ Structure d’une règle
❏ Syntaxe:
Propriété Valeur Propriété Valeur
Sélecteur Déclaration
❏ Un sélecteur permet de cibler un ou plusieurs éléments HTML
8
CSS : Exemple de code
9
Où écrire le code CSS?(1/4)
❏ Ecrire le CSS dans un élément HTML « style »
10
❏ Ecrire le CSS dans la balise ouvrante des éléments HTML
❏ Ecrire le CSS dans un fichier CSS séparé
11
12
❏ Si le site possède plusieurs pages ?
⇒ Créer une feuille de style externe qui sera liée à chacune des pages
13
Principe d’héritage
 Les éléments enfants héritent de certaines valeurs de leurs éléments parents dans
l’arbre du document. Chacune des propriété définit si elle est héritée, ou non.
Par exemple ici, tous les descendants de l’élément BODY auront la valeur de couleur
« red », la propriété « color » étant héritée :
 Pour chaque propriété la valeur « inherit » permet de préciser si la valeur

doit être héritée.
14
Les sélecteurs (1/10)
1. Sélecteurs standards
 Sélecteur universel : tous les éléments HTML

Exemple :
 Style d'une catégorie de balises:
Exemple :
 Style de plusieurs catégories de balises
Exemple :
 Style pour balises imbriquées
Exemple :
15
Fichier.HTML
<HTML>
<HEAD>
<TITLE>Le CSS</TITLE>
<link rel="stylesheet" type= "text/css" href= "fichier.css">
</HEAD>
<BODY>
<H1>Introduction</H1>
...
</BODY>
</HTML>
Introduction
Fichier.CSS
…
H1 {
color : red ;
} 1616
16
2. Sélecteur de classes
❑ Affecter des styles différents à une même balise
 Syntaxe:
balise { propriété de style: valeur }
 balise.nom_de_classe { propriété de style: valeur }
.nom_de_classe { propriété de style: valeur }
NB: (.) devant le nom de classe est indispensable
 Pour faire appel à une classe:

<balise class="nom_de-classe"> .... </balise>
17
2. Sélecteur de classes : Exemple
 On souhaite mettre ce qui est important dans le texte en gras et en
bleu. :
.essentiel
{ font-weight: bold; font-color: #000080 }
 Dans le document Html,

<P class="essentiel"> ... C’est un paragraphe ... </P>
<H1 class="essentiel">Titre 1</H1>
<TABLE><TR><TD class="essentiel">cellule</TD></TD>... 18
3. Sélecteur d’identificateurs
 Permet de dissocier un style d’une balise bien particulière
 Syntaxe:
balise { propriété de style: valeur }
 balise#nom_de_id { propriété de style: valeur }
#nom_de_id { propriété de style: valeur }
 Pour faire appel à un identificateur:

<balise id="nom_de-id"> .... </balise>
19
3. Sélecteur d’identificateurs: Exemple
 On souhaite mettre qui est important dans le texte en rouge:
#style_rouge {
color:red;
}
 Dans le document Html,
<h1 id="style_rouge">Titre de niveau 1</h1>
20
4. Sélecteur d’identificateurs VS de classe
❏Un sélecteur de classe commence par un "." alors que le sélecteur

d'identificateur ID commence par un "#".
❏Le style de type classe peut être utilisé plusieurs fois dans un document html
alors que le style de type identificateur ne peut être utilisé qu'une seule fois dans
le document html.
❏Le style de type classe s'utilise dans n'importe quelle balise avec l'attribut
"class" alors que le style de type identificateur s'utilise avec l'attribut "id " .
21
5. Sélecteur de pseudo-classes
 Le CSS nous permet aussi de modifier l'apparence des éléments de façon
dynamique, c'est-à-dire que des éléments peuvent changer de forme une
fois que la page a été chargée

❏ Syntaxe
Selecteur : pseudoformat
{ prop1: val1;
prop2: val2; ..}
❏ Exemple de règle :
A:active {color: red}
 la couleur du texte d'un hyperlien passera au rouge dès que
l'utilisateur l'activera.
22
23
24
CSS: Exemple1
A la balise <h1> on pourra lui rattacher :
❏ la police Verdana, italique, de taille 16 pixels, de couleur

Rouge.
❏ Chaque fois qu’on utilisera la balise <h1> dans un document,
tout le texte situé dans les limites de la balise recevra cette mise
en forme.
code HTML code CSS
<HTML> h1 {
<BODY> font-size : 16px;
<H1 style=" font-size: 16px; font- font-family : Verdana;
family: Verdana; font-style: italic; font-style: italic;
color:black;"> Titre de niveau 1</H1> color : black;
</BODY> }
</HTML> 25
Les propriétés (1/2)
26
Les propriétés (2/2)
❏ Mise en forme d’un texte en CSS
❏ Gestion des différentes polices
❏ Les bordures en CSS
27
Le modèle des boîtes (1/3)
 Chaque élément dans une page est considéré comme une boîte rectangulaire :
• marge (margin)
• bordure (border)
Marge
• espacement (padding)
Bordure
espacement
Contenu
28
 Les distances dans les blocs
div {
border: 2px solid blue;
display: block;
margin: 25px;
padding: 25px; width
width: 75%; margin
box-shadow: 10px 10px
5px gray;
text-align: justify;
height
}
padding
box-shadow
box-shadow:
offset-hor offset-vert
ombre couleur;
29
 Les marges (margin):
• margin
• margin−top, margin−right, margin−bottom, margin−left
 L’espacement (padding) :
• padding
• padding−top, padding−right, padding−bottom, padding−left
 La bordure (border) :
• border-width (valeurs  thin, medium, thick)
• border−top−width, border−right−width, border−bottom−width, border−left−width
• border-color
• border−top−color, border−right−color, border−bottom−color, border−left−color
• border-style (valeurs  none, dashed, solid, double, etc.)
• border−top−style, border−right−style, border−bottom−style, border−left−style
30
Imbrication des boîtes (1/3)
❏ Un élément « block » : une balise de type block sur votre page web
crée automatiquement un retour à la ligne avant et après.
❏ Les éléments blocs s’empilent les uns sur les autres
❏ Un élément bloc peut contenir d’autres éléments blocs
❏ Un élément bloc peut contenir des éléments en ligne
Exemples : p, h1, h2, h3, h4, h5, h6, div
❏ Un éléments « inline » : une balise de type inline se trouve
obligatoirement à l'intérieur d'une balise block. Une balise inline ne crée
pas de retour à la ligne.
❏ Les éléments en ligne se placent les uns à côté des autres
❏ Un élément en ligne peut contenir d’autres éléments en ligne
Exemples : em, strong, b, i, a, span
31
❏ Conteneurs génériques:
<div> permet de structurer le document
<span> permet de changer la mise en page de quelques mots
dans un texte
<div> et <span> s'utilisent toujours avec les classes et les ID.
Exemple 1
32
❏ Exemple d’utilisation de <div>
div {
text-align:center;
}
<html> div#bandeau {
width:600px;
<head> height:50px;
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1"> background-color:#00CCFF;
}
<link rel="stylesheet" type="text/css" div#menu {
href="styles.css"> float:left;
<title>Positionnement CSS</title> width:100px;
height:400px;
</head>
<body> background-color:#FF6699;
<div id="bandeau"> }
div#contenu {
Ceci est le bandeau</div> float:left;
<div id="menu"> width:500px;
Ceci est le menu</div> height:400px;
<div id="contenu"> background-color:#FFCC00;
Ceci est le contenu</div> }
<div id="pied_page">Ceci est le pied de
page</div>
div#pied_page {
clear:both; styles.css
width:600px;
</body> height:50px;
</html> index.html background- color:#33FF99;
}
33
Les unités de mesures
34
Références
 https://www.css3.info/
 http://www.yoyodesign.org/doc/w3c/css2/propidx.html
 Pour valider une feuille de style : http://jigsaw.w3.org/css-
validator/
 https://css.developpez.com/tutoriels/utiliser-nouveaux-
selecteur-css-3/
 http://pierre-giraud.com/html-css/cours-complet/selecteurs-
proprietes-css.php
35
Merci de votre attention
36
Atelier CSS
37

Cours CSS

Transféré par

Droits d'auteur :

Formats disponibles

Cours CSS

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Cours CSS

Transféré par

Droits d'auteur :

Formats disponibles

Chapitre2 : CSS3

Propriété Valeur Propriété Valeur

❏ Un sélecteur permet de cibler un ou plusieurs éléments HTML

❏ Ecrire le CSS dans la balise ouvrante des éléments HTML

❏ Ecrire le CSS dans un fichier CSS séparé

 Pour chaque propriété la valeur « inherit » permet de préciser si la valeur

 Sélecteur universel : tous les éléments HTML

NB: (.) devant le nom de classe est indispensable

 Pour faire appel à une classe:

 Dans le document Html,

 Pour faire appel à un identificateur:

❏Un sélecteur de classe commence par un "." alors que le sélecteur

dynamique, c'est-à-dire que des éléments peuvent changer de forme une

fois que la page a été chargée

❏ la police Verdana, italique, de taille 16 pixels, de couleur

❏ Gestion des différentes polices

❏ Les bordures en CSS

Vous aimerez peut-être aussi