Résumé CSS (Partie 1) PDF

Résumé CSS (Partie 1) DécČĹōĨeŜ CSS, þe þaągage de ĬĴŔþe iądiĬĥeąĬabþe ĥČĹĨ þe Ŏeb. EœĥþČĨeŜ ĬČą Ĩďþe eĴ ĬeĬ aōaąĴageĬ. MaîĴĨiĬeŜ þa ĥĨéĬeąĴaĴiČą Ŏeb ! PĨéĬeąĴé ĥaĨ : PHD Benarous Rania 1.Signification CSS Le nom "CSS" signifie "Cascading Style Sheets", ce qui se traduit en français par "Feuilles...

Résumé CSS (Partie 1) DécČĹōĨeŜ CSS, þe þaągage de ĬĴŔþe iądiĬĥeąĬabþe ĥČĹĨ þe Ŏeb. EœĥþČĨeŜ ĬČą Ĩďþe eĴ ĬeĬ aōaąĴageĬ. MaîĴĨiĬeŜ þa ĥĨéĬeąĴaĴiČą Ŏeb ! PĨéĬeąĴé ĥaĨ : PHD Benarous Rania 1.Signification CSS Le nom "CSS" signifie "Cascading Style Sheets", ce qui se traduit en français par "Feuilles de Style en Cascade". Ce nom fait référence à la manière dont CSS fonctionne, en appliquant une exécution en cascade. " Mais a quoi sert CSS ? Est-il un langage a part entière ? Quelle est la différence entre lui et le langage balisé HTML vu précédemment? " 2.CSS vs HTML ³ Pour répondre aux questions précédentes veillons tout d'abord voir le site ci joint : QST : Est-ce que ce site est écrit en html? CSS ? ou les 2 combinés? Réponse : Ce site est écrit en CSS et HTML , c'est la combinaisons des 2 langages en même temps , Pour mieux comprendre veillons enlever la partie CSS du code et ne garder que la partie HTML , voici le résultat obtenu Donc pour conclure on dirait que : HTML est pour construire la structure(þþþþÿ') 'þþþþÿ et CSS sert à styliser (þþÿþþþÿ) le contenu HTML. CSS sans HTML ne fonctionne pas car il n'y a rien à styliser , alors que HTML sans CSS existe toujours mais perd de sa beauté. 3.Methodes d'insertion CSS? Il y'a 3 méthodes pour écrire du CSS : Pour bien comprendre prenons un exemple : Par défaut l'affichage du text est en noir dans ce cas je voudrais changer la couleur en rouge en utilisant le CSS , comment procéder? 1.Methode en ligne "Inline" (directement dans la balise h1 ) Cette méthode n'est pas pratique car pour tout les h1 du code il faut les modifier un par un. 2.Methode Interne "Internal" (Ecrire le code CSS dans la balise dans la partie du code html) Dans ce cas tout les h1 du code html seront écrit en rouge Cette méthode n'est pas pratique pour les gros projet car le code sera beaucoup trop long. 3.Methode Externe "External" (Ecrire le code CSS dans un fichier externe a celui du fichier html) "C'est la méthode la plus recommandé qu'on va utiliser tout au long du projet." Dans ce cas comme le fichier : essai.css est externe il faut le lier avec le fichier essai.html Au lieu d'écrire toute la ligne du lien en utilise le raccourci (Vscode) link:css la ligne généré sera par défaut : il faut changer le nom du fichier CSS "style.css" par celui du votre ³ 4.Priorité d'exécution a. priorité par cascade Si je vous donne l'exemple suivant selon vous de quelle couleur sera le texte de h1 rouge ou bleu ? ³ La réponse est bleu car l'exécution se fait de haut en bas c'est ce qu'on appelle cascade ou "Cascading" (c'est d'ailleurs grâce a cette méthode d'exécution que vient le nom du CSS " Cascading Style Sheets") en réalité l'exécution de la couleur rouge a été faite , mais elle a été modifié par la suite par la couleur bleu. Donc pour résumer dans les cas normaux ( pas de Class pas d'Id &) la priorité serait pour la dernière ligne du code. Avant de poursuivre la priorité nous allons voir une notion très importante dans le CSS (les classes) pour bien comprendre prenons un exemple , j'ai le code si dessous : Pour écrire p et h1 en rouge je pourrais faire : ou bien pour être plus simple Lors de l'exécution , le problème qui se posent est que tout les p seront affichés en rouge et moi je voudrais que seul test2 soit en rouge. Donc c'est la que vient le rôle des "class" Et au lieu d'appeler P{ } dans le fichier CSS en fait appelle à notre class. remarque : Dans le fichier CSS on fait appelle aux balises ( balise = tout élément écrit entre crochets < > exp : , , , ,, &) par leur noms directement mais les classes sont appelés par la syntaxe suivante:.nom_de_la_classe (dans notre cas ³.test) Donc on a vu les balises et les classes , le 3eme type de sélecteurs à voir aujourd'hui sont les id (les id dans le fichier CSS sont appelé par #nom_du_id (dans notre cas ³ #test) Ils ont le même travail que les classes mais ils sont plus spécifiques par exemple : remarque: On peut aussi écrire pour être plus précis p.test , p#test Attention pas d9espace entre p et.test( l'espace veut dire que p est parent de.test ) ³ notion d'héritage à voir par la suite. Très bien , a présent nous avons déjà vu la priorité en cascade (dans l'etat normal la derniere ligne c'est elle qui va s'exécute ) A présent on parle de priorité par spécification soit le plus spécifique c'est lui qui va prendre la priorité d'exécution ( comme on a déjà mentionner au paravent les id sont plus précis que les classes donc plus prioritaire , et les classes sont plus précis que les balises. ) (id > class > balise) pour mieux comprendre veillons voir un exemple: Dans ce cas l'affichage serait en rouge malgré que la dernière ligne écrite est en bleu donc la priorité par spécification est plus forte que la priorité par cascade. c. priorité par forcement Dernière priorité a voir c'est la priorité par forcement : on force l'exécution avec !important remarque : attention à ne pas abuser avec !important a utiliser seulement quand c'est vraiment nécessaire. 5.L'héritage Quand on parle d'héritage en parle de famille ( grand-père , père , enfants , frères&.) A présent prenons le code ci dessous : contient qui à son tour contient Donc on dit que est père de et est père de Donc pour appeler ici on peut soit faire appelle a tous ses ascendants (þÿ ou bien (le père et son fils) ou bien (le grand-père ou bien strong directement (car þÿþþÿ') et son petit-fils) il y a un seul strong dans le code) Voyons justement s'il y avait plusieurs dans le code: Quand on remarque bien le code il y'a à présent 2 le 1er vu précédemment le petit-fils de (on peut dire que est le petit-fils de ou est l'un de ses fils (non pas un fils direct ) þÿþþÿ' 'þþÿ' þÿ le 2eme est quand a lui un fils direct appelé (enfant direct , direct child , þÿþþÿ þÿ' ) Donc si je voulais appele le fils si j'utiliser : cas 1: utiliser la balise cas 2: l'appeler par son père Dans ce cas les 2 vont être en rouge et il y'a plus d'autres moyen de l'appeler. Donc afin d'accéder a l'enfant direct de on utilise div > strong Et afin d'accéder au 1er qui est le petit fils je dois écrire ses ascendants 6.Les boites (Box Model) A ĥĨéĬeąĴ ąČĹĬ aþþČąĬ ōČiĨ Ĺą cČąceĥĴ ĬĹĥeĨ iĄĥČĨĴaąĴ eą cĬĬ ħĹ9Čą aĥĥeþþe þe ĄČdèþe de bČîĴe (BČœ MČdeþ) Partie Théorique : ChaħĹe éþéĄeąĴ HTML eĬĴ cČąĬidéĨé cČĄĄe Ĺąe bČîĴe ĨecĴaągĹþaiĨe iąōiĬibþe. CeĴĴe bČîĴe eĬĴ cČĄĥČĬée de ħĹaĴĨe cČĹcheĬ : a. La boite Content (contenu) C9eĬĴ þ'affichage ōiĬĹeþ ħĹ'iþ ĬČiĴ ĴeœĴe , iĄage ČĹ aĹĴĨe éþéĄeąĴ. EœeĄĥþe : þe ĴiĴĨe Dev Web. b. Padding (remplissage intérieur) C9eĬĴ þ9eĬĥace eąĴĨe þe cČąĴeąĹ eĴ þa bČĨdĹĨe iþ éþaĨgiĴ þa bČîĴe de þ9iąĴéĨieĹĨ. c. Border (bordure) C9eĬĴ þa þigąe ħĹi eąĴČĹĨe þa bČîĴe eþþe a Ĺąe éĥaiĬĬeĹĨ, Ĺąe cČĹþeĹĨ eĴ Ĺą ĬĴŔþe. d. Margin (marge extérieure) C9eĬĴ þ9eĬĥace eąĴĨe þa bČîĴe eĴ þe ąaōigaĴeĹĨ ČĹ eąĴĨe þeĬ aĹĴĨeĬ éþéĄeąĴĬ HTML. Partie Pratique : Oą ĥeĹĴ ōiĬĹaþiĬeĨ ceĬ bČiĴeĬ eą faiĬaąĴ Ĺą cþiħĹe dĨČiĴ ĬĹĨ þ'affichage eĴ eą cþiħĹaąĴ ĬĹĨ iąĬĥecĴeĨ Oą cþiħĹe ĬĹĨ h1 ĥČĹĨ afficheĨ ĬeĬ Oą deĬceądaąĴ Ĺą ĥeĹ daąĬ þa ĥaĨĴie ĥĨČĥĨiéĴéĬ SĴŔþeĬ Čą ĥČĹĨĨaiĴ ōČiĨ þeĬ difféĨeąĴeĬ bČiĴeĬ ĄeąĴiČąąeĨ aĹĥaĨaōaąĴ La boite border On va d'abord parler de la boite border comme son nom l'indique c'est une bordure généralement représenter comme un cadre elle est a présent invisible pour bien la visualiser donnant lui un style (solid) On pourrait aussi modifier le style de bordure , l9épaisseur , la couleur , définir l'emplacement de bordure (top,left,right,bottom) remarque il y'a plusieurs styles à voir à part solid (dotted, groove &) afin de les visualiser on fait (ctrl + espace) sur vscode. La boite padding On réalité padding n'est pas vraiment une boite c'est l'espace qui sépare le contenu de la bordure reprenons l'exemple précèdent : Donc de cet affichage On passe a l'affichage ci-dessous (On a ajoute un espace de 20px pour les 4 cotés (haut , bas , droite et gauche) On pourrait aussi ajouter des espacements différents pour les 4 cotes en insèrent 4 valeurs en commencent toujours d'en haut ensuite droite , bas , gauche , ( suivant l'aiguille d'une montre ). (On a ajoute 100px de haut , 20px de droite , 30px de bas et 5px a gauche) On pourrait aussi écrire que 2 valeurs (100px serait de haut et bas , 20px serait a droite et gauche) ou encore on pourrait faire : Il y a aussi border-radius qui est faite pour arrondir les coins. La boite Margin Eþþe ĨeĬĬeĄbþe beaĹcČĹĥ a la boite padding , ceĴĴe deĨąièĨe eĬĴ þ'eĬĥace ČĹ (þe ōide) ħĹi eĬĴ eąĴĨe þeĬ éþéĄeąĴĬ , ČĹ eąĴĨe þ'éþéĄeąĴ eĴ þe ąaōigaĴeĹĨ. ( Oą a aøČĹĴe 100ĥœ ĥČĹĨ þeĬ 4 cČĴeĬ , ĴČĹĴ ce ħĹ'Čą a ōĹ ĥČĹĨ þe ĥaddiąg eĬĴ ōaþabþe ĬĹĨ ĄaĨgią.. ) Si Čą ōČĹdĨaiĴ ħĹe þa ĄaĨge ĬČiĴ þa ĄeĄe de gaĹche eĴ dĨČiĴe Čą ĥČĹĨĨaiĴ aøČĹĴeĨ margin : auto (Ici Čą a þa ĄaĨgią-þefĴ = ĄaĨgią-ĨighĴ) ĨeĄaĨħĹe : " margin : auto " ąe ĄaĨche ħĹe d'Ĺąe façČą hČĨiŜČąĴaþ (gaĹche eĴ dĨČiĴe ĬeĹþeĄeąĴ) "padding : auto" ą'eœiĬĴe ĥaĬ. PČĹĨ ĨéĬĹĄeĨ ōČici ce ĴabþeaĹ : PaĨĴie SeĨĴ à... S'aĥĥþiħĹe ĬĹĨ... CČąĴeąĴ CČąĴeąiĨ þe ĴeœĴe ČĹ iĄage TeœĴe, iĄage, cČąĴeąĹ Paddiąg AøČĹĴeĨ de þ9eĬĥace intérieur AĹĴČĹĨ dĹ cČąĴeąĹ BČĨdeĨ EącadĨeĨ þa bČîĴe EąĴĨe ĥaddiąg eĴ ĄaĨgią MaĨgią AøČĹĴeĨ de þ9eĬĥace extérieur AĹĴČĹĨ de þa bČîĴe 7.Fonts CSS nous permet de changer la police d'affichage en utilisant font-family avant de s'approfondir dans le sujet voyons deja pourquoi on a nommé "family" en réalité les polices ont des familles et les 2 familles les plus populaires sont la famille Serif et sans-Serif. On regardant bien toutes les polices de la famille Serif on remarquent que chaque lettre a des petits traits qu'on appellent empattements 'þþÿ. ("police à empattement" "serif font") La 2eme famille justement n'a pas ces empattements ("police sans empattement" "sans-serif font") Pourquoi voyons nous tout ça ? Parce que dans le cas ou je choisis une police qui me plait je ne suis pas sur que le navigateur de l'utilisateur ou son ordinateur ou même son système d'exploitation la reconnaissent, il faut dans ce cas utilisés des (polices de secours fallback-fonts / 7þþÿ þþÿþþþÿ') et parmi ses polices de secours on a justement la famille Serif et Sans-Serif qui sont très connus donc supportées par tous les navigateurs modernes Dans ce cas je dis a mon navigateur d'écrire mon h1 avec la police roboto si il l'a reconnait pas il choisit n'importe quel police de la famille sans- serif A présent voyons comment on peut choisir la police , Vscode nous propose déjà un large choix il suffit de faire (ctrl+espace) afin d'afficher toutes les propositions disponibles : si on choisit la 1ere proposition qui je lui demande d'écrire en police : 'Courier New' si est n'est pas lisible choisit la police Courier sinon choisit moi n'importe quel police de la famille monospace remarque : Il existe d'autres familles de polices génériques, également appelées fallback fonts. Pour les découvrir, vous pouvez consulter le site W3Schools. (une ressource très utile pour apprendre le développement web et renforcer vos compétences personnelles.) https://www.w3schools.com/cssref/css_fonts_fallbacks.php On remarque aussi que certaines polices sont écrites entre guillemets, comme 'Courier New'. C9est parce que le nom de la police est composé de plusieurs mots : dans ce cas, il est obligatoire de mettre des guillemets autour du nom pour que le navigateur le reconnaisse correctement. Si les font disponibles sur Vscode ne vous plaisent pas vous pouvez importez n'importe quel font depuis le site googlefonts qui proposent un très large choix de polices. Google Fonts Browse Fonts - Google Fonts Making the web more beautiful, fast, and open through great typography On peut essayer la police en tapant n'importe quel mot et voir comment il s'affiche dans notre cas on va essayer avec le mot: " Accueil " Je choisi la police qui me plait je clique sur elle ca m'emmene dans la fenetre qui suit je clique sur " Get font " ca me dirige sur la fenetre : je choisis " Get embed code " ca me dirige vers la fenetre qui suit je dois m'assurer que je suis bien sur " Web " et je choisi " @import " ³je copie le code html complet et je le colle dans la partie de l'html et je copie seulement "font-family" dans la partie CSS. Voici l'affichage obtenue On a d'autres propriétés pour changer le text ( font-size : pour changer la taille de la police , font-weight: pour changer le gras de la police, font-style : pour changer la forme) Il existe bien d'autres pas que cela.. 1.font-size Définit la taille de la police 2.font-weight On peut soit écrire par taille (100 - 900) Soit choisir "bolder" "lighter" qui signifie respectivement plus gras ou plus léger mais plus léger par rapport à quoi ? par rapport au parent. Dans ce cas le parent de h1 est body donc plus gras que le texte de body 3.font-style oblique a le meme effet que italic inherit veut dire herite du style de ton parent On peut regrouper toutes ses propriétés en 1 seule qui est font remarque : Vous devez absolument définir font-size et font-family quand vous utilisez font, sinon le navigateur peut ne pas appliquer correctement la police. 8.Text On parlons de fonts élaborant les changement qu'on puissent appliquer sur text : Permet d'aligner le text (center , left , right) sont les plus utilisés capitalize : ecrit la 1ere lettre de chaque mot en majuscule lowercase ecrit toutes les lettres en minuscule uppercase ecrit toute les lettres en majuscules ltr : left to right est la valeur par defaut utlise pour les textes en langues francaise , anglaises&. rtl right to left est la valeur utlise pour les text utilisant des mot arabes On pourrait modifier les valeurs manuellement , mais la Text-shadow façon la plus simple est de modifier dans la partie inspecter La propriété text-shadow est utilisée pour appliquer une ombre sur le texte. Elle accepte jusqu9à 4 valeurs : 1. Décalage horizontal (obligatoire) 2. Décalage vertical (obligatoire) 3. Flou (optionnel) 4. Couleur (optionnel) (Il ne faut pas oublier de copier coller la ligne " text-shadow : -5px 4px 6px black " sur vscode , le fait de la modifier sur la partie inspecter ne la changent pas sur le code ). Box-shadow Même principe que text-shadow mais cette fois ci pour les boites (essayer box-shadow chez vous pour mieux la maitriser) A la différence de text-shadow la box-shadow prend 4 valeurs : Décalage horizontal (obligatoire) Décalage vertical (obligatoire) Flou (optionnel) Élargissement (optionnel) 4> spread 4>7þþþÿÿ' Couleur (optionnel) 9.Pseudo-class: Pour conclure, revenons à notre premier site. Dans cet exemple, lorsque l9utilisateur survole le lien Accueil avec la souris, son fond devient jaune. Ce comportement est obtenu grâce à l9utilisation des pseudo-classes CSS, Pour mieux comprendre prenons un exemple plus simple Ici quand je passe la souris sur l'élément sa couleur change Dans ce cas si je passe la souris il y'a pas de modification , il faut cliquer sur l'élément pour voir le changement remarque: Il existe d'autre pseudo class dispo sur le cour de Mme Zahra (jeter un Sil )