
p.intro { margin: 20px; color: gray; border 3px solid blue; }

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 ** */ ** ====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 (****). * dans le fichier HTML pour une balise. On utilise dans la balise l'attribut "style" (**

**). ==== Éléments à mettre en forme ==== Exemple de modification en cascade : Si la couleur du texte est modifiée dans la balise , tous les textes contenus dans la pages qu'ils soit de type ou
auront cette couleur (sauf si une nouvelle couleur est redéfinie pour un élément plus précis). 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 { ... } () * Élément unique #identifiant_unique { ... } (seul l'élément possédant l'attribut ). ==== types de mise en forme==== 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 ... * ... 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;). ===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) ===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. =====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. ====Alignement des blocs==== Une balise de type bloc (
...) utilise toute la largeur du média et la suivante se place en dessous. \\ Une balise de type inline (...) 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 ===== * [[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 ===== Activités ===== * Création d'un [[clubInfo:css3|premier site avec CSS]]