Remerciez-le!

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

Chapitre 2 Le CSS 3 (Introduction) Cascading Style Sheets Feuilles de styles en

Chapitre 2 Le CSS 3 (Introduction) Cascading Style Sheets Feuilles de styles en cascade Enseignante : Mme L. MANSOURI Programmation Web 1 1 Le CSS C’est un langage permettant la mise en forme de documents structurés écrits en langage HTML, XHTML, XML. Les feuilles de styles ont pour objectif principal de dissocier le contenu de la mise en forme. HTML Contenu CSS Mise en forme 2 3 Avantages de l’utilisation du CSS ne pas répéter dans chaque page le même code de mise en formeréduction de la taille de page, gain du temps pouvoir changer l'apparence d'un site web complet en ne modifiant qu'un seul fichier faciliter la lecture du code de la page réduire le temps de chargement des pages (les feuilles css sont gardées en cache, seuls les contenus sont chargés au cours de navigation) permettre la cohésion de la présentation tout au long du site avec les feuilles de style externes. 4 Les différentes versions du css Succession de différentes versions : CSS-1 ou CSS level 1 (1996) CSS-2 ou CSS level 2 (1998) CSS-2.1 (révision 2006) CSS-3 : a commencé dès 1999 et a été exploité dès 2007 CSS 4: 2010, parallèlement aux modules CSS 3 5 Sélecteur HTML La partie textuelle d'une balise HTML est appelé sélecteur ◦H2 est le sélecteur de la balise <H2> Le sélecteur est exploité pour redéfinir le style de l'affichage de la balise. Sélecteur html { propriété : valeur; } 6 7 h2 { color: red ; text-align: center ;} Exemple déclaration valeur identificateur de propriété sélecteur bloc de déclarations règle CSS ; séparateur entre déclarations ; facultatif à la fin accolades 8 Règle CSS : présentation du code Présentation possible : h2 {color: red; text-align: center ; } Présentation conseillée (avec indentation et passage à la ligne) : h2 { color: red; text-align: center ; } Les commentaires Comme en HTML, il est possible de mettre des commentaires. Pour faire un commentaire, on tape : /*suivi du commentaire */ Vos commentaires peuvent être sur une ou plusieurs lignes. Par exemple : 9 /* essai.css Fichier créé le 30/09/2018 Par MANSOURI L. * / p { color: blue; /* Les paragraphes seront bleus */ } Il existe trois façons de définir une feuille de style : Définition CSS spécifique en ligne Méthode CSS interne Méthode CSS externe Inclusion des styles CSS dans des pages HTML 10 Consiste à intégrer les styles dans le corps du document HTML.(la méthode la moins recommandée!!) Définition CSS spécifique en ligne Code CSS : <selecteur style= " propriété : valeur;" > Elle ne semble intéressante que lorsque le style que vous aller définir est vraiment spécifique à cet endroit. 11 Exemple <html> <head> <meta charset="utf-8" /> <meta name="author" content="lamia mansouri"> <title>Premiers tests du CSS</title> </head> <body> <h1>Mon site</h1> <p style="color: blue; font-family: Arial; font-style: italic"> Bonjour et bienvenue sur mon site ! </p> <p>Pour le moment, mon site est un peu <em>vide</em>. Patientez encore un peu !</p> </body> </h l> 12 Méthode CSS interne Consiste à mettre le style dans l'entête de la page. La syntaxe est incorporée à l'entête du fichier HTML entre les balises <head> et </head>. <head> <style type="text/css"> Sélecteur { propriété : valeur; } … </style> </head> 13 Exemple <head> <meta charset="utf-8" /> <style> p { color: blue; font-family: Arial; font-style: italic } </style> </head> <body> <h1>Mon site</h1> <p>Bonjour et bienvenue sur mon site !</p> <p>Pour le moment, mon site est un peu Patientez un peu </p> </body> Consiste à insérer le code CSS directement dans une balise <style> 14 Méthode CSS externe 15 <!DOCTYPE html> <html> <head> <meta name="author" content="lamia"> <meta charset="utf-8" /> <link rel="stylesheet" href="style.css" /> </head> <body> <h1>Mon site</h1> <p>Bonjour et bienvenue sur mon site !</p> <p>Pour le moment, mon site est un peu <em>vide</em>. Patientez encore un peu !</p> </body> </html> indique que ce fichier HTML est associé à un fichier appelé style.css avertit le browser qu'il faudra réaliser un lien 16 17 Regroupement de sélecteurs du HTML h1 {color:red; font-size:12pt } h2 {color:red; } p {color:red; } h1, h2, p { color:red; } h1 { font-size:12pt; } 18 Sélecteur universel * Se met dans la partie style CSS, par exemple : * {color: red} Tous les éléments du document (h1, h2, p, div, ul…) auront une couleur de police noire. * remplace tout élément du document 19 Notions à connaitre Unité de mesure: La spécification de certaines valeurs en CSS nécessite l'utilisation d'un certain nombre d'unités de mesure. Les valeurs de longueur sont données en valeur numérique. Pour cela, il y a deux sortes d'unités : ◦unité absolue ◦unité relative Unité absolue Unité Description cm Le centimètre, 1cm = 10 mm in Le pouce (en anglais « inch ») inche = 1in = 2.54 cm mm Le millimètre pt Le point, 1pt = 1/72 in pc Le pica , 1pc = 12pt 20 Les unités absolues ont un certain rapport entre elles. Par contre, elles n'ont pas de rapport avec le contexte, avec le reste du document. Notions à connaitre 21 Notions à connaitre unité relative : Le résultat physique dépend du contexte valeurs possibles : en px, « em » ou « ex » ou en % l’unité px: la taille du pixel (px) est dépendante de la résolution et de la taille de l'écran. C'est donc une unité relative dépendante du périphérique affichant la page. Exemple : font-size: 16px; Une lettre de 16 pixels de hauteur 22 Notions à connaitre l’unité em: - L'unité em se rapporte à la taille de la police. - 1em équivaut à 100% de cette taille, Si on écrit 1em le texte aura une taille normale. Valeur supérieure à 1 pour agrandir et inférieur à 1 pour réduire. - Elle permet d'avoir des feuilles de style plus facilement adaptables d'un média à un autre. Exemple : p { font-size: 0.8em; } 23 Notions à connaitre l’unité ex: C’est relative à la hauteur de la minuscule de « x ». fonctionne sur le même principe que le em mais qui est plus petit de base. Le pourcentage : une longueur par rapport à la largeur ou la hauteur du conteneur parent ou à la taille de police par défaut. exemple : (80%, 130%…). Les styles de la police La propriété description font-family définit un nom de police ou une famille de police <nom> ou <famille> police précise (Arial, Times, Helvetica...) ou famille (serif, sans-serif, cursive, fantasy, monospace) Exemple: p { font-family : Impact, "Arial Black", Arial, Verdana, sans-serif; } font-style définit le style de l'écriture :normal ou italique ou oblique font-weight définit l'épaisseur de la police : normal ou bold ou bolder ou lighter ou valeur numérique soit (100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900) 24 Les styles de la police La propriété description font-size définit la taille de la police : taille relative (xx-small, x-small, small, medium, large, x-large, xx-large)ou absolue ( en %, ex ou em) font-variant définit une variante par rapport à la normale :normal ou small-caps font raccourci pour les différentes propriétés de police exemple : P {font: bold italic} 25 Les styles du texte propriété description text-align définit l'alignement du texte :left , center, right ou justify text-indent définit un retrait dans la première ligne d'un bloc de texte souvent utilisé avec <P>, n'oubliez pas dans ce cas </P>. spécifié en in ou en cm ou en px text- decoration définit une décoration du texte, soit underline ou line- through ou overline ou blink (clignotant, ne fonctionne pas sur tous les navigateurs) ou none Text-shadow ajoute des ombres au texte. Chaque ombre est décrite par une combinaison de décalages X et Y de l'élément, de rayon de flou et de couleur. Exemple: text-shadow:1px 1px 2px gray; 26 Décalage de l’ombre vers la droite Décalage de l’ombre vers le bas Valeur du flou de l’ombre Couleur de l’ombre Les styles du texte La propriété description text-transform définit la casse du texte (majuscule, minuscule) uppercase (met les caractères en majuscules) ou lowercase (met les caractères en minuscules) ou capitalize (met le premier caractère en majuscule) color définit la couleur du texte: par son nom, par un code hexadécimal #RRVVBB ou en RGB([R],[V],[B]) ou RGBA avec A: opacité en valeur flottante (de 0.0 à 1.0). Exemples : Color: Yellow; Color: #FFFF00; Color: RGB(255,255,0); Color: RGBA(255,255,0,1) word-spacing définit l'espace entre les mots en points (pt), inches (in), en cm, pixels (px) ou en % letter-spacing définit l'espace entre les lettres spécifié en points (pt), inches (in), en cm, en px ou en % 27 Les styles du texte La propriété description line-height définit l'interligne soit l'espace entre les lignes du texte en points (pt), inches (in), centimètres (cm), pixels (px) ou pourcentage (%) width détermine la longueur d'un élément de texte ou d'une image en points (pt), inches (in), centimètres (cm), pixels (px) ou en (%) height détermine la hauteur d'un élément de texte ou d'une image en points (pt), inches (in), centimètres (cm), pixels (px) ou en (%) uploads/s3/ chapitre-2 15 .pdf