Différences

Ci-dessous, les différences entre deux révisions de la page.

--- web:css [2023/03/18 16:36] – créée jcheron
+++ web:css [2023/03/26 19:57] (Version actuelle) – [Principe] jcheron
@@ Ligne 1: / Ligne 1: @@
 ====== CSS ======
-**Cascading Style Sheets** permettent de présenter une page HTML.
+Les CSS (Cascading Style Sheets, feuilles de style en cascade) ont pour rôle de présenter le contenu HTML. Elles permettent de séparer le contenu (HTML), de la présentation (CSS).
+===== Intégration =====
+Intégration d'une feuille de style dans une page web, avec la balise **link**, dans la partie **head** :
+<sxh html;gutter:false>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Page HTML avec Css associé</title>
+    <link rel="stylesheet" href="css/styles.css">
+</head>
+...
+</html>
+</sxh>
+===== Principe =====
+Définir un style consiste a associer une présentation :
+  * grâce à la définition d'un ensemble de propriétés,
+  * appliquées à des cibles HTML identifées par un sélecteur.
+<html><div class="imageB"></html>{{:web:pasted:20230326-195749.png}}<html></div></html>
+Association d'un texte de couleur rouge aux balises **h1** :
+<sxh css;gutter:false>
+h1 {
+  color: red;
+}
+</sxh>
+==== Héritage ====
+Chaque élément enfant reçoit le style de son parent :\\
+La font **sans-serif** va également s'appliquer à l'élément **h1** qui appartient au **body**
+<sxh css;gutter:false>
+body {
+  font-family: Verdana, Arial, Helvetica, sans-serif;
+}
+h1 {
+  color: red;
+}
+</sxh>
+Pour approfondir, voir [[https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance|Cascade et héritage]]
+==== Imbrication ====
+Il est possible de définir explicitement le style d'éléments imbriqués :
+Ce style s'applique a tous les **input** appartenant à une **div** :
+<sxh css;gutter:false>
+div input {
+  color: green;
+}
+</sxh>
+===== Sélecteurs =====
+Le sélecteur CSS permet de définir le ou les éléments auquels un ensemble de styles va s'appliquer.
+==== Types de sélecteurs ====
+=== Eléments ===
+Application d'un style a un type d'élément (titres de niveau 1 en bleu):
+<sxh css;gutter:false>
+h1 {
+    color: blue;
+}
+</sxh>
+=== Ids ===
+Application d'un style a un élément défini par son id :
+<sxh css;gutter:false>
+#elmId {
+    color: blue;
+}
+</sxh>
+=== Classe ===
+Application d'un style a des éléments définis par une classe CSS :
+<sxh css;gutter:false>
+.elmsClass {
+    color: blue;
+}
+</sxh>
+=== Attribut ===
+Application d'un style a des éléments définis par leur type et la valeur d'un attribut :
+<sxh css;gutter:false>
+a[href=index.html] {
+    color: blue;
+}
+</sxh>
+=== Pseudo élément ===
+Permet de mettre en forme une partie d'un élément :
+<sxh css;gutter:false>
+p::first-line {
+  color: blue;
+  text-transform: uppercase;
+}
+</sxh>
+voir [[https://developer.mozilla.org/fr/docs/Web/CSS/Pseudo-%C3%A9l%C3%A9ments|Pseudo éléments sur MDN]]
+=== Pseudo classe ===
+Permet de mettre en forme un élément en fonction de son état, par exemple le passage de la souris au dessus d'une div :
+<sxh css;gutter:false>
+div:hover {
+  background-color: #F89B4D;
+}
+</sxh>
+voir [[https://developer.mozilla.org/fr/docs/Web/CSS/Pseudo-classes|Pseudo classes sur MDN]]
+=== Liste de sélecteurs ===
+Il est possible de cibler plusieurs sélecteurs, pour leur attribuer un même style :
+<sxh css;gutter:false>
+.elmsClass, a, .elm {
+    color: blue;
+}
+</sxh>
+=== Chaînage ===
+Elements **a** ayant pour classes **menu** et **item** avec une propriété **data-id** :
+<sxh css;gutter:false>
+a.menu.item[data-id] {
+    color: blue;
+}
+</sxh>
+==== Résumé ====
+^Sélecteur CSS ^ Signification ^
+^* | Sélectionne tous les éléments |
+^E, F | Sélectionne tous les éléments de type E et de type F |
+^E F | Sélectionne tous les éléments F à l’intérieur des éléments E, quelque soit le niveau de descendance |
+^E > F | Sélectionne les éléments F enfants directs des éléments E |
+^E + F | Sélectionne tout élément F placé directement après un élément E |
+^E~F | Sélectionne tout élément F placé après un élément E dans la page |
+===== Propriétés =====
+Approfondir sur [[https://developer.mozilla.org/en-US/docs/Web/CSS/Reference|MDN]]
+===== Savoir-faire spécifiques =====
+  * [[web:css:position|Positionnement en CSS]]
+  * [[web:css:mediaqueries|Media-queries]]
+==== Games ====
+  * Maîtriser les sélecteurs CSS avec [[https://flukeout.github.io/|Css diner]]
+  * Maîtriser le positionnement CSS avec [[https://flexboxfroggy.com/#fr|Flexbox froggy]]