Formation
Création de Sites Web
HTML - CSS - PHP/MySQL
Mme BOUACHERIA Ibtissem
Frontend
CASCADING STYLE SHEET
Language de style
1. Propriétés
2. Sélecteurs
Syntaxe
Syntaxe de base
Selecteur {
propriété: valeur;
propriété: valeur;
}
Exemple:
p {
color: red;
font-size: 20px;
}
Documentation pour pouvoir
apprendre par vous-même
Une autre documentation
Où mettre du CSS ?
1. Dans la balises HTML via l’attribut style (non recommandée)
<p style="color: red;
font-size: 20px;">
Test d'un text stylé
</p>
2. Dans l'en-tête <head> du fichier HTML
</head>
<style>
p { color: red; font-size: 20px; }
</style>
</head>
3. Dans un fichier externe d’extention « .css » (recommandée)
</head>
<link rel="stylesheet"
href="style.css">
</head>
Les sélecteurs
Les sélecteurs définissent les éléments sur lesquelles s'applique un
ensemble de règles CSS.
I. Les sélecteurs simples
1. Sélecteur de type (nom de balise)
NomBalise { …. } Exemple: h2 { …. }
2. Sélecteur de classe
.NomClass { …. } Avec: <balise class="NomClass">
3. Sélecteur d’identifiant
#ID { …. } Avec: <balise id="ID">
4. Sélecteur universel
* { …. }
Commentaire
/* Je met mon commentaire ici */
Cascading style
I. Héritage:
body {
color: red;
}
Pourquoi ce résultat ? Inspecteur
Element style
User-agent
Hérité de (Inherited from)
Cascading style
II. Ordre important:
h2 {
color: red;
}
h2 {
color: green;
}
III. La règle la plus spécifique l’emporte:
.h2Class{ .h2Class{
color: red; } color: red; }
h2 {
h2 { color: green; }
color: green; } #h2ID{
color: magenta; }
Utilisé souvent pour écraser des règles
Les sélecteurs
II. Les combinateurs
1. Les sélecteurs d'éléments descendants
Parent descendant { Exemple: div p { …. }
…. }
2. Les sélecteurs d'éléments enfants direct
Parent > enfant { Exemple: div > p { …. }
…. }
3. Les sélecteurs de voisins direct
Element + voisinDirect { Exemple: h2 + p { …. }
…. }
4. Les sélecteurs de voisin
Element ~ voisin { Exemple: h2 ~ p { …. }
…. }
Les sélecteurs
Les sélecteurs d'attribut (Voir doc)
Exemple pratique:
input[type="texte"] {
width: 200px;
}
Les pseudo-classes
sélecteur:pseudo-classe {
…. }
(Voir doc)
Remarque:
Pour combiner plusieurs règles on utilise la forme:
Selecteur1, Selecteur1, Selecteur2
Selecteur2 { …. } { …. }
Pratiquez, pratiquez et pratiquez !
CSS Dinner
https://flukeout.github.io/
Agencement des élements
I. Le modèle de boîtes
1. Width, height, padding, border et margin
2. Display:
a. Block
b. Inline (strong, em, span et a)
Attention aux espaces
c. Inline-Block (input)
Propriétés de base
I. Plices & textes
1. Color (par défaut: inherit)
2. font-sizeLine-height (par défaut 1.2, standard 1.4)
3. Letter-spacing
4. Font-familly: "source sans pro" , sans-
5. Text-align: left, right, center …(influance uniquement
inline et inline-block), justify
6. Text-align-last
7. Overflow-wrap: break-word
8. Hyphens ­
9. Text-decoration indereline/none
10. Font-weight
11. Font-style: italic
12. Text-transform: upercase…
Propriétés de base
II. Couleur:
1. Rgb ( , , )
2. Rgba + tranparence ( , , ,)
3. #aabbcc
4. #aabbccdd
III. Unités de mesure
1. Px
2. % (element) vw,vh (taille fenetre)
3. Em / rem
4. Cm mm in .. (impression)
Propriétés de base
IV. Background
1. -color
2. -image
3. -repeat
4. -position
5. -size
6. -attachement
7. Linear-gradiant
8. Plusieurs images (premiere en premier plan) -> plusieur
attachement,,,etc
V. * { box-sizing: border-box ;
