Différences

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

--- clubinfo:css [2017/12/10 18:00]
mrcjl [Avantages]
+++ 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.
-===== Référence =====
+=====Mise en œuvre=====
-  * [[https://www.w3schools.com/css/|Référence du langage]] sur w3schools
+====Méthode====
-  * [[https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3|Cours sur le HTML et le CSS]] sur OpenClassrooms
+<WRAP round tip>
-  * [[https://www.w3.org/Style/CSS/|Page officielle du CSS]] sur le site du W3C
+  * Les mises en forme sont écrites dans une feuille de style (un fichier séparé avec une extension ".css").
-  * [[https://jigsaw.w3.org/css-validator/|Validateur de feuille CSS]] sur le site du W3C
+  * Le fichier HTML doit contenir dans son entête le lien vers le fichier contenant les mises 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 commandes =====
+  * Les instructions, sauf précision contraires, se répercutent aux balises de niveau inférieur.
-Elles sont 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 insérés :
+  * Des commentaires peuvent être utilisés pour décrire les différentes mise en forme.
-  * Ils commencent par ** %%//%% ** et se terminent à la fin de la ligne
+<code css>
-  * Ils commencent par ** /* **et se terminent par** */ **
+<link rel='stylesheet' href='ma_feuille_de_style.css' type='text/css' />
-L'élément à mettre en forme (balise généralement) peut dépendre d'un autre, appartenir à une catégorie ("class") ou être unique ("id").
+------------
-Elles peuvent être incluses :
+// Mise en forme des balises titre de premier niveau
-  * dans la balise
+h1 { font-family: sans-serif; font-size: 16pt; }
-<code html ><h1 style='color: red; font-size: 24pt;'></code>
+// Mise en forme des paragraphes en général
-  * dans la page avec la balise **<style>** et regroupées par bloc
+p { font-family: serif; font-size: 12pt; }
-<code css >
+// Mise en forme des paragraphes de classe intro <div class="intro">
-<style>
+p.intro { margin: 20px; color: gray; border 3px solid blue; }
-/*Je suis un commentaire qui commente le code et qui ne fait rien*/
-body{
-    background-color: green;
-}
-p{
-    color: red; // Commentaire pour couleur rouge
-    font-size: 20px;
-}
-ul.menu{
-    border: 5px solid red;
-}
-</style>
-</code>
-  * Dans un fichier séparé (__méthode à utiliser de préférence__) dont le contenu est identique à celui de la balise <STYLE>. Le fichier HTML doit contenir dans l'entête :
-<code html page.html>...
-<link rel='stylesheet' href='nom_feuille_de_style.css' type='text/css' />
-...</code>
-<code css nom_feuille_de_style.css>
-/*Je suis un commentaire qui commente le code et qui ne fait rien*/
-body{
-    background-color: green;
-}
-p{
-    color: red; // Commentaire pour couleur rouge
-    font-size: 20px;
-}
-ul.menu{
-    border: 5px solid red;
-}
 </code>
+</WRAP>
+Les commentaires peuvent prendre 2 formes.
+  * Sur une ligne, ils commencent par ** %%//%% ** et se terminent à la fin de la ligne
+  * Sur plusieurs lignes, ils commencent par ** /* ** et se terminent par ** */ **
-===== Avantages ======
+====Autres méthodes (à éviter)====
-Une nouvelle présentation peut être facilement créée dans une nouvelle feuille de style et rapidement remplacée sur quelques ou toutes les pages.
+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=' ... '>**).
-Le site peut aussi s'adapter facilement (par exemple aux tablettes et smartphone de plus faible largeur d'écran). Cela peut se faire de 2 façons :\\
+==== Éléments à mettre en forme ====
-  * Mettre en place dans les fichiers **.html** une 2ème feuille de style en plus de la feuille standard.
+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>
+Sauf précisions apportées dans une autre règle plus précise :
+  * Classes de balise **.nom_de_classe { ... }** (toutes les balises inclues dans la classe)
+  * 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>
+==== types de mise en forme====
+<WRAP round tip>
+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
+  * **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 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: largeur type couleur;// défini pour sa version raccourcie les propriétés de la bordure.
+  * **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;).
+<WRAP group><WRAP half column>
+===Les couleurs peuvent être nommées par :===
+  * leur nom HTML (red, green)
+  * le code RVB correspondant (#FF0000, #008000)
+[[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)
+  * % pourcentage (de la taille écran)
+  * 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 s'adapter aux différents média (imprimante, ordinateurs, tablettes et smartphone) en utilisant une feuille de style dédiée à chaque média.
+Pour mettre en place dans un fichier **.html** d'autres feuilles de style en plus de la feuille standard.
 <code html>
-  <!-- Choix de la feuille de style en fonction de la largeur d'écran -->
+  <!-- Définition des paramètres d'affichage -->
-  <link rel="stylesheet" href="style1.css" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <link rel="stylesheet" media="screen and (max-width: 800px)" href="style2.css" />
+  <!-- Choix de la feuille de style par défaut -->
+  <link rel="stylesheet" href="default.css" />
+  <!-- Choix d'une feuille de style alternative pour les écrans inférieurs à 500 pixels de large -->
+  <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>
-  * Ajouter à fin de la feuille de style des nouvelles règles pour les écrans étroits
+====Alignement des blocs====
-<code css>
+Une balise de type **bloc** (<div><h1><p>...) utilise toute la largeur du média et la suivante se place en dessous. \\
-/* Modification des règles pour les écrans étroits */
+Une balise de type **inline** (<span><cite>...) se place à la suite de la précédente. \\
-@media screen and (max-width: 800px) {
+Cette règle générale peut être modifiée par la propriété "float" (bloc flottant) valeur : none (par défaut) left, right ... .
-  body {
+{{ :clubinfo:style1.jpg?600 |}}
-     margin-left: 0px;
-     margin-right: 0px;
+====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"]]
-  img {
+{{ :clubinfo:style2.jpg?600 |}}
-    width: 200px;
-  }
+===== Compléments =====
-  .info {
+<WRAP round info>
-    left: 300px;
+  * [[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
-</code>
+  * [[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