Différences

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

--- clubinfo:css [2023/07/26 08:44]
mrcjl [Mise en forme responsive]
+++ clubinfo:css [2024/08/20 07:05] (Version actuelle)
mrcjl [Activités]
@@ Ligne 1: / Ligne 1: @@
 ====== Découverte du CSS ======
-Le [[wpfr>Feuilles_de_style_en_cascade|CSS (Cascading Style Sheets)]] décrit la présentation des documents HTML et XML. Il est normalisé par le [[wpfr>World_Wide_Web_Consortium|W3C]]. Il permet aussi d'adapter les pages aux différents navigateurs, site  RWD [[wpfr>Site_web_adaptatif|(Responsive Web Design)]].
+Le [[wpfr>Feuilles_de_style_en_cascade|CSS (Cascading Style Sheets)]] décrit la présentation des documents HTML. Il est normalisé par le [[wpfr>World_Wide_Web_Consortium|W3C]]. Il permet la séparation du contenu (HTML) et de sa présentation (CSS). De ce fait, il devient possible à l'utilisateur de choisir des présentation différentes et de les adapter aux tailles ou spécificité des médias de sortie (écran, tablette, smartphone, imprimante ...). On parle de site RWD [[wpfr>Site_web_adaptatif|(Responsive Web Design)]].
-Le CSS existe depuis les début du web mais la mise en forme était quasiment toujours obtenue grâce à des attributs des balises HTML. Depuis les années 2000 et le HTML4, il est recommandé de ne plus les utiliser et de passer par le CSS.
+Les feuilles de styles ont été développés, sous différentes formes, en même temps que les premiers navigateurs. Petit à petit, les différentes versions ont convergé vers le CSS. Le développement de la version 3 à débuté dès les années 2000 et le HTML4.
 {{https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/CSS3_logo_and_wordmark.svg/363px-CSS3_logo_and_wordmark.svg.png?50|}}
 Aujourd'hui la référence devient la version CSS3.
-<WRAP round info>=== Référence ===
+=====Mise en œuvre=====
-  * [[https://www.w3schools.com/css/|Référence du langage]] sur w3schools
+====Méthode====
-  * [[https://developer.mozilla.org/fr/docs/Web/CSS|Référence du langage]] sur Mozilla
-  * [[https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3|Cours sur le HTML et le CSS]] sur OpenClassrooms
-  * [[https://www.w3.org/Style/CSS/|Page officielle du CSS]] sur le site du W3C
-  * [[https://jigsaw.w3.org/css-validator/|Validateur de feuille CSS]] sur le site du W3C
-</WRAP>
-=====Les instructions CSS=====
-====Mise en œuvre recommandée====
 <WRAP round tip>
-  * Les mises en forme sont écrites dans une feuille de style (un fichier avec une extension ".css").
+  * Les mises en forme sont écrites dans une feuille de style (un fichier séparé avec une extension ".css").
-  * Les instructions de mise en forme sont groupées par type de balise grâce à des accolades.
+  * Le fichier HTML doit contenir dans son entête le lien vers le fichier contenant les mises en forme.
-  * Chaque instruction est de la forme "type_de_mise_en_forme: valeur_de_mise_en_forme;".
+  * Les instructions de mise en forme sont groupées par type de balise ou en fonction de l'attribut "class='xx'" des balises.
+  * Les instructions, sauf précision contraires, se répercutent aux balises de niveau inférieur.
+  * Les instructions, regroupées grâce à des accolades, sont de la forme "type_de_mise_en_forme: valeur_de_mise_en_forme;".
   * Des commentaires peuvent être utilisés pour décrire les différentes mise en forme.
-  * Le fichier HTML doit contenir dans son entête le lien vers le fichier contenant les mises en forme :
+<code css>
-<code html>...
+<link rel='stylesheet' href='ma_feuille_de_style.css' type='text/css' />
-<link rel='stylesheet' href='nom_feuille_de_style.css' type='text/css' />
+------------
-...</code>
+// Mise en forme des balises titre de premier niveau
+h1 { font-family: sans-serif; font-size: 16pt; }
+// Mise en forme des paragraphes en général
+p { font-family: serif; font-size: 12pt; }
+// Mise en forme des paragraphes de classe intro <div class="intro">
+p.intro { margin: 20px; color: gray; border 3px solid blue; }
+</code>
 </WRAP>
@@ Ligne 33: / Ligne 32: @@
   * Sur plusieurs lignes, ils commencent par ** /* ** et se terminent par ** */ **
-====Autres méthodes pour les mises en forme====
+====Autres méthodes (à éviter)====
 Il est aussi possible, pour des pages simples, de mettre les commandes de mise en forme directement :
   * dans le fichier HTML pour un ensemble de balise. On utilise dans l'entête la balise (**<style> ... </style>**).
@@ Ligne 39: / Ligne 38: @@
 ==== Éléments à mettre en forme ====
+Exemple de modification en cascade : Si la couleur du texte est modifiée dans la balise <body>, tous les textes contenus dans la pages qu'ils soit de type <hx> ou <p> auront cette couleur (sauf si une nouvelle couleur est redéfinie pour un élément plus précis).
 <WRAP round tip>
-  * Si la mise en forme s'applique à un **type de balise (p { ... })**, ce type aura toujours cette mise en forme.
+Sauf précisions apportées dans une autre règle plus précise :
-  * Si la mise en forme s'applique à une **classes de balise (.nom_de_classe { ... })**, toutes les balises possédant cet attribut classe sont concernées (dans le fichier HTML : <balise class='nom_de_classe'>).
+  * Classes de balise **.nom_de_classe { ... }** (toutes les balises inclues dans la classe)
-  * Si la mise en forme s'applique à une **balise unique (#identifiant_unique { ... })**, seule cette balise est concernée (dans le fichier HTML : <balise id='identifiant_unique'>).
+  * Type de balise : **balise { ... }** (uniquement la balise)
-  * Si la balise modifiée contient d'autres balises, les modifications s'appliquent en cascade.
+  * Élément2 dans élément1 **element1 element2 { ... }** (élément = balise ou classe)
+  * Balise et classe **balise.classe { ... }** (<balise class="classe">)
+  * Élément unique **#identifiant_unique { ... }** (seul l'élément possédant l'attribut <balise id='identifiant_unique'>).
 </WRAP>
-Les balises, les classes et les identifiants peuvent se compléter mutuellement :
-    * p {toutes les balises paragraphes}
-    * p.info {uniquement les paragraphes de classe info}
-    * .info {tous les éléments de classe info qu'ils soit paragraphes ou titres de paragraphe ou autres
-Exemple de modification en cascade : Si la couleur du texte est modifiée dans la balise <body>, tous les textes contenus dans la pages qu'ils soit de type <hx> ou <p> auront cette couleur (sauf si une nouvelle couleur est redéfinie pour un élément plus précis).
 ==== types de mise en forme====
@@ Ligne 87: / Ligne 83: @@
 Limites en marron et jaune, contenu en noir.
 </WRAP></WRAP>
 =====Mise en forme responsive======
+====Adaptation aux médias====
 Une nouvelle présentation peut être facilement mise en place en changeant la feuille de style.
@@ Ligne 103: / Ligne 102: @@
   <link rel="stylesheet" media="print" href="print.css" />
 </code>
+====Alignement des blocs====
+Une balise de type **bloc** (<div><h1><p>...) utilise toute la largeur du média et la suivante se place en dessous. \\
+Une balise de type **inline** (<span><cite>...) se place à la suite de la précédente. \\
+Cette règle générale peut être modifiée par la propriété "float" (bloc flottant) valeur : none (par défaut) left, right ... .
+{{ :clubinfo:style1.jpg?600 |}}
+====Mise en place précise des blocs====
+Une mise en place précise des différents blocs pour réaliser une interface est possible avec les [[https://developer.mozilla.org/fr/docs/Web/CSS/CSS_flexible_box_layout|"flexbox"]]
+{{ :clubinfo:style2.jpg?600 |}}
+===== Compléments =====
+<WRAP round info>
+  * [[https://www.w3schools.com/css/|Référence du langage]] sur w3schools
+  * [[https://developer.mozilla.org/fr/docs/Web/CSS|Référence du langage]] sur Mozilla
+  * [[https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3|Cours sur le HTML et le CSS]] sur OpenClassrooms
+  * [[https://www.w3.org/Style/CSS/|Page officielle du CSS]] sur le site du W3C
+  * [[https://jigsaw.w3.org/css-validator/|Validateur de feuille CSS]] sur le site du W3C
+</WRAP>
 ===== Activités =====
-  * Création d'un [[premier site avec CSS]]
+  * Création d'un [[clubInfo:css3|premier site avec CSS]]

WikiTechno.morceau.fr (amen.fr)

Outils pour utilisateurs

Outils du site

Différences

Outils de la page