Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

<HTML> {CSS} {#00FF00} <mmi> Sommaire Table des matières <HTML> {CSS}..........

<HTML> {CSS} {#00FF00} <mmi> Sommaire Table des matières <HTML> {CSS}............................................................................................................... 1 {#00FF00} <mmi> ............................................................................................................. 1 Sommaire...............................................................................................................................2 Mémento HTML..................................................................................................................... 3 Balises de premier niveau................................................................................................. 3 Balises d'en-tête................................................................................................................ 3 Balises de structuration du texte....................................................................................... 4 Balises de listes................................................................................................................. 5 Balises de tableau..............................................................................................................6 Balises de formulaire......................................................................................................... 6 Balises sectionnantes........................................................................................................ 7 Balises génériques............................................................................................................ 7 CSS........................................................................................................................................8 1 // Définition......................................................................................................................8 2 // La syntaxe CSS........................................................................................................... 8 3 // Les sélecteurs CSS..................................................................................................... 8 3-1 // Sélecteur de classe CSS..................................................................................... 8 3-2 // Sélecteur d’identifiant CSS.................................................................................. 9 3-3 // Le sélecteur d’enfant............................................................................................9 3-4 // Le sélecteur de frère adjacent..............................................................................9 3-5 // Le sélecteur adjacent général..............................................................................9 3-6 // Sélecteur d’attribut CSS.......................................................................................9 3-7 // Les pseudo-classes CSS...................................................................................10 3-8 // Les pseudo-éléments CSS.................................................................................11 4 // Le poids des sélecteurs CSS ................................................................................... 12 4-1 // Cascade CSS et priorité des sélecteurs............................................................ 12 4-2 // Le système de notation......................................................................................12 5 // Modèle de boite......................................................................................................... 13 5-1 // le modèle et la fusion des marges..................................................................... 13 5-2 // L’évolution box-sizing......................................................................................... 14 5-3 // Facilitez-vous la vie............................................................................................14 6 // Responsive et Media Queries................................................................................... 15 Grilles flexibles............................................................................................................ 15 Forcer la dimension par défaut des écrans de mobile................................................15 7 // Liste des propriétés CSS...........................................................................................16 Propriétés de mise en forme du texte.....................................................................16 Propriétés de couleur et de fond.............................................................................17 Propriétés des boîtes.............................................................................................. 17 Propriétés de positionnement et d'affichage...........................................................18 Propriétés des listes................................................................................................19 Propriétés des tableaux.......................................................................................... 19 Autres propriétés.....................................................................................................19 Mémento HTML Cette page est une liste non exhaustive des balises HTML qui existent. Vous trouverez ici un grand nombre de balises HTML. Nous en avons déjà vu certaines dans le cours, mais il y en a d'autres que nous n'avons pas eu l'occasion d'étudier. Généralement, les balises que nous n'avons pas étudiées sont des balises un peu plus rarement utilisées. Vous pouvez vous servir de cette annexe comme d'un aide-mémoire lorsque vous développez votre site web. Attention, j'insiste : cette annexe n'est pas complète et c'est volontaire. Je préfère mettre moins de balises et garder seulement celles qui me semblent les plus utiles dans la pratique. Balises de premier niveau Les balises de premier niveau sont les principales balises qui structurent une page HTML. Elles sont indispensables pour réaliser le « code minimal » d'une page web. Balise Description <html> Balise principale <head> En-tête de la page <body> Corps de la page Code minimal d'une page HTML : <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Titre</title> </head> <body> </body> </html> Balises d'en-tête Ces balises sont toutes situées dans l'en-tête de la page web, c'est-à-dire entre <head> et </head> : Balise Description <link /> Liaison avec une feuille de style <meta /> Métadonnées de la page web (charset, mots-clés, etc.) <script> Code JavaScript <style> Code CSS Balise Description <title> Titre de la page Balises de structuration du texte Balise Description <abbr> Abréviation <blockquote> Citation (longue) <cite> Citation du titre d'une œuvre ou d'un évènement <q> Citation (courte) <sup> Exposant <sub> Indice <strong> Mise en valeur forte <em> Mise en valeur normale <mark> Mise en valeur visuelle <h1> Titre de niveau 1 <h2> Titre de niveau 2 <h3> Titre de niveau 3 <h4> Titre de niveau 4 <h5> Titre de niveau 5 <h6> Titre de niveau 6 <img /> Image <figure> Figure (image, code, etc.) <figcaption> Description de la figure <audio> Son <video> Vidéo <source> Format source pour les balises <audio> et <video> Balise Description <a> Lien hypertexte <br /> Retour à la ligne <p> Paragraphe <hr /> Ligne de séparation horizontale <address> Adresse de contact <del> Texte supprimé <ins> Texte inséré <dfn> Définition <kbd> Saisie clavier <pre> Affichage formaté (pour les codes sources) <progress> Barre de progression <time> Date ou heure Balises de listes Cette section énumère toutes les balises HTML permettant de créer des listes (listes à puces, listes numérotées, listes de définitions…) Balise Description <ul> Liste à puces, non numérotée <ol> Liste numérotée <li> Élément de la liste à puces <dl> Liste de définitions <dt> Terme à définir <dd> Définition du terme Balises de tableau Balise Description <table> Tableau <caption> Titre du tableau <tr> Ligne de tableau <th> Cellule d'en-tête <td> Cellule <thead> Section de l'en-tête du tableau <tbody> Section du corps du tableau <tfoot> Section du pied du tableau Balises de formulaire Balise Description <form> Formulaire <fieldset> Groupe de champs <legend> Titre d'un groupe de champs <label> Libellé d'un champ <input /> Champ de formulaire (texte, mot de passe, case à cocher, bouton, etc.) <textarea> Zone de saisie multiligne <select> Liste déroulante <option> Élément d'une liste déroulante <optgroup> Groupe d'éléments d'une liste déroulante Balises sectionnantes Ces balises permettent de construire le squelette de notre site web. Balise Description <header> En-tête <nav> Liens principaux de navigation <footer> Pied de page <section> Section de page <article> Article (contenu autonome) <aside> Informations complémentaire Balises génériques Les balises génériques sont des balises qui n'ont pas de sens sémantique. En effet, toutes les autres balises HTML ont un sens : <p> signifie « Paragraphe », <h2> signifie « Sous-titre », etc. Parfois, on a besoin d'utiliser des balises génériques (aussi appelées balises universelles) car aucune des autres balises ne convient. On utilise le plus souvent des balises génériques pour construire son design. Il y a deux balises génériques : l'une est inline, l'autre est block. Balise Description <span> Balise générique de type inline <div> Balise générique de type block CSS... 1 // Définition Le CSS (Feuille de style en cascade) est un langage servant à décrire la mise en forme les documents HTML ou XML. Le CSS est un langage ouvert et standardisé par une spécification W3C. 2 // La syntaxe CSS Pour définir le style d’une balise, il suffit d’entrer un ou plusieurs sélecteurs, d’ouvrir les accolades, d’énumérer une ou plusieurs propriétés et de leur affecter les valeurs souhaitées. Prenez soin d’ajouter un point-virgule à la fin de chaque déclaration (celui de la dernière étant optionnel). Voir 7 // liste des propriétés CSS 3 // Les sélecteurs CSS Le terme sélecteur désigne la partie précédant le bloc de déclaration, à gauche de l’accolade ouvrante. Il peut être un sélecteur d’élément(p), une classe (.list-inline), un ID (#product) ou un sélecteur d’attribut ([role="navtop"]. Nous pouvons déclarer plusieurs sélecteurs, à condition de les séparer par une virgule. p, .list-inline, #product, [role="nav-top"] { margin-top: 20px; margin-bottom: 20px; } Attention, les sélecteurs ne peuvent être composés exclusivement de caractères alphanumériques, de tirets ( – ) ou d’underscores ( _ ).Il n’est pas possible de commencer un sélecteur par un chiffre, et pas recommandé de le commencer par un tiret ou un underscore. Ressource externe : Documentation de Mozilla sur les sélecteurs CSS 3-1 // Sélecteur de classe CSS Le sélecteur de classe est un nom que l’ont défini librement. Il peut être réutilisé plusieurs fois dans l’HTML. Un sélecteur de classe est composé d’un nom préfixé d’un point .list-inline. Il s’applique sur sur l’élément voulu dans l’HTML avec l’attribut class="list-inline". Dans la partie HTML <ul class="list-inline">...</ul> Dans la partie CSS .list-inline { display: inline-block; } 3-2 // Sélecteur d’identifiant CSS Le sélecteur d’identifiant ou ID est un nom que l’ont défini librement. Il peut être réutilisé que seule fois dans l’HTML. Un sélecteur d’identifiant est composé d’un nom préfixé d’un dièse #product. Il s’applique sur sur l’élément voulu dans l’HTML avec l’attribut id="product". Dans la partie HTML <div id="product">...</div> Dans la partie CSS #product { background-color: #002a36; } ATTENTION !!! le poids de ce sélecteur est plus élevé que le sélecteur de classe (voir-ci- dessus), d'élément, et d'attribut (voir ci-dessous). Voir paragraphe 3-3 // Le sélecteur d’enfant Le sélecteur d’enfant direct s’applique à l’enfant ou aux enfants de l’élément désigné. Cette règle s’applique à l’élément elem2 s’il est l’enfant de elem1 dans l’ordre de déclaration HTML. elem1 > elem2 { propriété: valeur; } 3-4 // Le sélecteur de frère adjacent Le sélecteur de frère adjacent affecte un élément à condition que celui-ci soit précédé de l’autre élément spécifié. Cette règle s’applique à l’élément elem2 s’il est le frère de elem1 dans l’ordre de déclaration HTML. elem1 + elem2 { propriété: valeur; } 3-5 // Le sélecteur adjacent général Le sélecteur adjacent général cible tous les frères elem2 suivant, directement ou non, un élément elem1. elem1 ~ elem2 { propriété: valeur; } 3-6 // Sélecteur d’attribut CSS Les sélecteurs d’attribut ciblent un élément en utilisant la présence d’un certain attribut ou de la valeur d’un attribut. Syntaxe [attr=valeur] { color: #09f; } Sélecteurs [attr] Représente un élément avec un attribut nommé attr [attr=valeur] Représente un élément avec un attribut nommé attr dont la valeur est exactement « valeur [attr~=valeur] Représente un élément avec un attribut nommé attr dont la valeur est une liste séparée par des espaces, dont l’un d’eux est exactement « valeur » [attr|=valeur] Représente un élément avec un attribut nommé attr dont la valeur est une liste séparée par un tiret (-), dont l’un d’eux est exactement « valeur ». Il peut être utilisé pour cibler les codes de langue utilisant la sous-dénomination. [attr^=valeur] Représente un élément avec un attribut nommé attr dont la valeur est commence par « valeur » [attr$=valeur] Représente un élément avec un attribut nommé attr dont la valeur se termine par uploads/S4/ itw-s3-doc.pdf