Différences

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

--- clubinfo:css [2023/07/19 10:57]
mrcjl
+++ 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 ====
 <WRAP round tip>
-Des commentaires peuvent être utilisés pour décrire les différentes mise en forme :
+  * Les mises en forme sont écrites dans une feuille de style (un fichier séparé avec une extension ".css").
-  * ils commencent par ** %%//%% ** et se terminent à la fin de la ligne
+  * Le fichier HTML doit contenir dans son entête le lien vers le fichier contenant les mises en forme.
-  * ou commencent par ** /* **et se terminent par** */ ** s'ils nécessitent plusieurs lignes.
+  * 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 sont groupées par type de balise et de la forme "type_de_mise_en_forme: valeur_de_mise_en_forme;".
+  * 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.
-===méthode à utiliser de préférence===
+<code css>
-  * Le fichier HTML doit contenir dans son entête le lien vers le fichier contenant les mises en forme :
+<link rel='stylesheet' href='ma_feuille_de_style.css' type='text/css' />
-<code html>...
+------------
-<link rel='stylesheet' href='nom_feuille_de_style.css' type='text/css' />
+// Mise en forme des balises titre de premier niveau
-...</code>
+h1 { font-family: sans-serif; font-size: 16pt; }
-  * le fichier contenant les mises en forme possède une extension ".css" et regroupe par balise les différentes instructions de mise en forme.
+// Mise en forme des paragraphes en général
-<code css nom_feuille_de_style.css>
+p { font-family: serif; font-size: 12pt; }
-/* Je suis un commentaire sur plusieurs ligne
+// Mise en forme des paragraphes de classe intro <div class="intro">
-qui commente le code
+p.intro { margin: 20px; color: gray; border 3px solid blue; }
-et qui ne fait rien d'autre */
-body{
-    background-color: green;
-}
-p{ // Commentaire sur une ligne définissant des paragraphes de couleur rouge et de taille 14 points
-    color: red;
-    font-size: 14pt;
-}
-ul.menu{
-    border: 5px solid red;
-}
 </code>
 </WRAP>
-===Autres méthodes===
+Les commentaires peuvent prendre 2 formes.
-  * Directement dans le fichier HTML pour un ensemble de balise. On utilise dans l'entête la balise (**<style> ... </style>**).
+  * Sur une ligne, ils commencent par ** %%//%% ** et se terminent à la fin de la ligne
-  * Directement dans le fichier HTML pour une balise. On utilise dans la balise l'attribut "style" (**<h1 style=' ... '></code>
+  * Sur plusieurs lignes, ils commencent par ** /* ** et se terminent par ** */ **
+====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>**).
+  * dans le fichier HTML pour une balise. On utilise dans la balise l'attribut "style" (**<h1 style=' ... '>**).
 ==== É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)
+  * É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
-Si la balise modifiée contient d'autres balises, les modifications s'appliquent en cascade (exemple commande 'color' dans une balise <body>. La couleur de tous les textes <p>, <hx> ... sera modifié).
+==== types de mise en forme====
+<WRAP round tip>
-==== types de commande ====
 Il existe un très grand nombre de commande qui contiennent plusieurs possibilités. Les principales sont :
-  * color pour la couleur du texte. **color: blue;** écrit les textes en bleu
+  * **color** pour la couleur du texte. //color: blue;// écrit les textes en bleu
-  * background pour le fond. **background-color: gray;** passe le fond de l'élément en gris.
+  * **background** pour le fond. //background-color: gray;// passe le fond en gris, //background-image: url(images/fond.jpg);// utilise une image comme fond de page.
-  * margin et padding pour les marges et les espaces. **margin-top: 10px** crée une distance de 10 points par rapport à la balise du dessus.
+  * **margin** et **padding** pour les marges et les espaces. //margin-top: 10px;// crée une marge (extérieur balise) de 10 pixels au dessus, //padding-left: 10px;// ajoute un espace (intérieur balise) de 10 pixels à gauche.
-  * border pour des encadrements. **border-width: 3pt** pour une bordure de 3 points de large.
+  * **border** pour des encadrements. //border: largeur type couleur;// défini pour sa version raccourcie les propriétés de la bordure.
-  * font pour les polices. **font-size: 14pt** pour une police agrandi de 14 points.
+  * **font** pour les polices. //font-family: "Arial", sans-serif;// choisi la police Arial si elle est disponible ou une police sans-serif par défaut, //font-size: 14pt;// défini la taille de la police, //font-style: italic;// pour le style ...
   * ...
+</WRAP>
+De nombreuses propriétés permettent de fixer plusieurs éléments simultanément dans leur version raccourcie (border: largeur type couleur; font: style poids taille famille;).
-==== Couleurs et dimensions ====
+<WRAP group><WRAP half column>
-Les couleurs peuvent être nommées par :
+===Les couleurs peuvent être nommées par :===
   * leur nom HTML (red, green)
   * le code RVB correspondant (#FF0000, #008000)
-Les dimensions peuvent être indiquées en :
+[[https://www.rapidtables.org/fr/web/color/html-color-codes.html|Exemple de site]] fournissant les correspondances couleur-nom-code.
+===Les dimensions peuvent être indiquées en :===
   * px pixels (taille écran)
   * pt points (fonction de la résolution écran)
@@ Ligne 84: / Ligne 75: @@
   * cm centimètre (dimension précise)
+</WRAP><WRAP half column>
+===Les marges et espacement===
+Comme pour le traitement de texte : \\
+- Une marge est un espace à l'extérieur d'une page ou d'une zone. \\
+- L'espacement est lui compris entre sa limite et son contenu.
+{{ :clubinfo:margin-padding.jpg?400 |}}
+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.
-Le site peut lui aussi s'adapter aux différents écrans (ordinateurs, tablettes et smartphone).
+Le site peut s'adapter aux différents média (imprimante, ordinateurs, tablettes et smartphone) en utilisant une feuille de style dédiée à chaque média.
-  * Mettre en place dans les fichiers **.html** d'autres feuilles de style en plus de la feuille standard.
+Pour mettre en place dans un fichier **.html** d'autres feuilles de style en plus de la feuille standard.
 <code html>
+  <!-- Définition des paramètres d'affichage -->
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
   <!-- Choix de la feuille de style par défaut -->
-  <link rel="stylesheet" href="style1.css" />
+  <link rel="stylesheet" href="default.css" />
-  <!-- Choix d'une feuille de style alternative pour les écrans inférieurs à 800 pixels de large -->
+  <!-- Choix d'une feuille de style alternative pour les écrans inférieurs à 500 pixels de large -->
-  <link rel="stylesheet" media="screen and (max-width: 800px)" href="style2.css" />
+  <link rel="stylesheet" media="screen and (max-width: 500px)" href="smartphone.css" />
+  <!-- Choix d'une feuille de style alternative pour une imprimante -->
+  <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