Outils pour utilisateurs
clubinfo:css
Différences
Ci-dessous, les différences entre deux révisions de la page.
| Les deux révisions précédentes Révision précédente Prochaine révision | Révision précédente | ||
|
clubinfo:css [2017/12/10 17:57] mrcjl [Les commandes] |
clubinfo:css [2024/08/20 07:05] (Version actuelle) mrcjl [Activités] |
||
|---|---|---|---|
| Ligne 1: | Ligne 1: | ||
| ====== Découverte du CSS ====== | ====== Découverte du CSS ====== | ||
| - | Le [[wpfr> | + | Le [[wpfr> |
| - | Le CSS existe depuis les début du web mais la mise en forme était quasiment toujours obtenue grâce | + | Les feuilles de styles ont été développés, |
| + | {{https:// | ||
| Aujourd' | Aujourd' | ||
| - | ===== Référence | + | =====Mise en œuvre===== |
| - | * [[https:// | + | ====Méthode==== |
| - | * [[https:// | + | <WRAP round tip> |
| - | * [[https:// | + | * Les mises en forme sont écrites dans une feuille |
| - | * [[https:// | + | * 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 | |
| - | ===== Les commandes ===== | + | * Les instructions, |
| - | Elles sont de la forme "type_de_mise_en_forme: | + | * Les instructions, |
| - | 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 | + | < |
| - | * Ils commencent par ** /* **et se terminent par** */ ** | + | <link rel=' |
| - | L' | + | ------------ |
| - | 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=' | + | // Mise en forme des paragraphes en général |
| - | * dans la page avec la balise **< | + | p { font-family: serif; font-size: |
| - | <code css > | + | // Mise en forme des paragraphes de classe intro <div class=" |
| - | < | + | 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; | + | |
| - | } | + | |
| - | </ | + | |
| - | </ | + | |
| - | * Dans un fichier séparé (__méthode à utiliser de préférence__) dont le contenu est identique à celui de la balise < | + | |
| - | < | + | |
| - | <link rel=' | + | |
| - | ...</ | + | |
| - | <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 | + | |
| - | | + | |
| - | } | + | |
| - | ul.menu{ | + | |
| - | border: 5px solid red; | + | |
| - | } | + | |
| </ | </ | ||
| + | </ | ||
| + | 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 | + | Il est aussi possible, pour des pages simples, de mettre les commandes de mise en forme directement : |
| + | * dans le fichier HTML pour un ensemble | ||
| + | * dans le fichier HTML pour une balise. On utilise dans la balise l' | ||
| - | Le site peut aussi s' | + | ==== Éléments à mettre en forme ==== |
| - | * Mettre | + | Exemple de modification en cascade : Si la couleur du texte est modifiée dans la balise < |
| + | |||
| + | <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=" | ||
| + | * Élément unique **# | ||
| + | </ | ||
| + | |||
| + | ==== 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. // | ||
| + | * **margin** et **padding** pour les marges et les espaces. // | ||
| + | * **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. // | ||
| + | * ... | ||
| + | </ | ||
| + | |||
| + | 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>< | ||
| + | ===Les couleurs peuvent être nommées par :=== | ||
| + | * leur nom HTML (red, green) | ||
| + | * le code RVB correspondant (#FF0000, #008000) | ||
| + | |||
| + | [[https:// | ||
| + | |||
| + | ===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' | ||
| + | - L' | ||
| + | {{ : | ||
| + | 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' | ||
| + | |||
| + | Pour mettre | ||
| <code html> | <code html> | ||
| - | <!-- Choix de la feuille de style en fonction de la largeur d' | + | |
| - | <link rel=" | + | <meta name=" |
| - | <link rel=" | + | |
| + | <link rel=" | ||
| + | <!-- Choix d'une feuille de style alternative pour les écrans inférieurs à 500 pixels de large --> | ||
| + | <link rel=" | ||
| + | <!-- Choix d'une feuille de style alternative pour une imprimante --> | ||
| + | <link rel=" | ||
| </ | </ | ||
| - | * Ajouter à fin de la feuille de style des nouvelles règles pour les écrans étroits (UTILISÉE ICI) | + | ====Alignement |
| - | <code css> | + | Une balise de type **bloc** (<div>< |
| - | /* Modification des règles pour les écrans étroits | + | Une balise de type **inline** (< |
| - | @media screen and (max-width: 800px) { | + | Cette règle générale peut être modifiée par la propriété " |
| - | | + | {{ :clubinfo: |
| - | | + | |
| - | 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:// |
| - | img { | + | {{ : |
| - | width: 200px; | + | |
| - | | + | ===== Compléments ===== |
| - | .info { | + | <WRAP round info> |
| - | left: 300px; | + | * [[https:// |
| - | } | + | |
| - | </code> | + | |
| + | * [[https:// | ||
| + | * [[https:// | ||
| + | </WRAP> | ||
| ===== Activités ===== | ===== Activités ===== | ||
| - | * Création d'un [[premier site avec CSS]] | + | * Création d'un [[clubInfo: |
clubinfo/css.1512925063.txt.gz · Dernière modification: 2017/12/10 17:57 de mrcjl
Sauf mention contraire, le contenu de ce wiki est placé sous les termes de la licence suivante : CC Attribution-Share Alike 4.0 International
