Remerciez-le!

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

Les bases du CSS Dr N. BAME CSS (CascadingCascadingStyle Style SheetsSheets)) •

Les bases du CSS Dr N. BAME CSS (CascadingCascadingStyle Style SheetsSheets)) • C'est un langage qui vient compléter le HTML. • Rappel sur son rôle : gérer la mise en forme des pages du site. permet de choisir la couleur du texte. permet de sélectionner la police utilisée sur le site permet de définir la taille du texte, les bordures, le fond… permet aussi de faire la mise en page du site. • Positionnement du menu soit à gauche et la largeur, que l'en- tête de de la page soit calé en haut et qu'il soit toujours visible, etc. 2 Concepts de base (1) • Sélecteurs En CSS, le plus difficile est de savoir cibler le texte dont on veut changer la forme. Pour cibler (on dit «sélectionner») les éléments de la page à modifier, on utilise ce qu'on appelle des sélecteurs. Un sélecteur, va servir à déterminer à quel(s) élément(s) HTML ou à quel type d’éléments on souhaite appliquer un style particulier. • Si l’on souhaite appliquer un style particulier à tous les paragraphes, par exemple, on utilisera le sélecteur «p». • Toute balise peut être un sélecteur 3 • Propriété Une propriété va nous servir à modifier le style d’un élément en ciblant un critère bien particulier comme la taille d’un texte, sa police ou sa couleur par exemple. 4Concepts de base (2) Concepts de base (2) • Valeur Une valeur, enfin, va venir compléter une propriété et va en déterminer le comportement. Pour la propriété servant à changer la couleur d’un texte par exemple, la valeur va être la nouvelle couleur à appliquer. 5Concepts de base (3) Concepts de base (3) Syntaxe de CSS sélecteur { propriete1: valeur1; propriete2: valeur2; propriete3: valeur3; … proprieteN: valeurN; } • Entourer les propriétés et les valeurs avec des accolades • Placer un point virgule après avoir spécifié une valeur pour chacune des propriétés. • Chaque propriété est séparée de sa valeur par un deux-points. 6 Exemple p { color : blue; font-size : 16px; } • Dans cet exemple, nous utilisons le sélecteur simple «p», ce qui signifie que nous souhaitons appliquer un style particulier à tous les paragraphes de nos pages. Nous utilisons les propriétés «color » (qui sert à modifier la couleur d’un texte) et «font-size » (pour changer la taille d’un texte). Cela signifie donc que nous travaillerons sur la couleur et la taille de nos paragraphes. Enfin, nous indiquons que nous voulons que tous nos paragraphes s’affichent en bleu grâce à la valeur « blue » et que notre texte ait une taille de 16px avec la valeur « 16px ». 7 propriété Sélecteur valeur • dans l'en-tête <head> du fichier HTML ; • directement dans les balises du fichier HTML via un attribut style(méthode la moins recommandée). • dans un fichier .css (méthode la plus recommandée); 8Où écrire le CSS ? Où écrire le CSS ? • On peut insérer le code CSS directement dans une balise <style> à l'intérieur de l'en-tête <head>. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title> Titre de ma première page avec CSS</title> <style> p { color: blue; } </style> </head> <body> <h1> Mon super site </h1> <p> Bonjour et bienvenue sur mon site ! </p> </body> </html> 9CSS dans l'en CSS dans l'en--tête <tête <headhead>du fichier HTML>du fichier HTML • Méthode à manipuler avec précaution : vous pouvez ajouter un attribut style à n'importe quelle balise. Vous insérerez votre code CSS directement dans cet attribut <p style="color: blue;" >Bonjour et bienvenue sur mon site!</p> 10CSS directement dans les balises CSS directement dans les balises ( (non recommandénon recommandé)) • La méthode la plus pratique et la plus souple, est d’écrire le code CSS dans un fichier spécial ayant l'extension .css. Cela nous évite de tout mélanger dans un même fichier. • On indique au fichier HTML, le fichier css à utiliser, avec la balise link dans l’entête « head » comme : <link rel="stylesheet" href= "fichier_style.css" /> L’attribut rel sert à préciser le style du fichier lié (dans notre cas c’est une feuille de style, donc « stylesheet » en anglais).  L’attribut href, que vous connaissez déjà, sert à faire le lien en soi. • Puis on crée le fichier .css qui doit définir dans la mise en forme p { color: blue; } 11CSS dans un fichier . CSS dans un fichier .csscss( (recommandérecommandé)) Comme en HTML, il est possible de mettre des commentaires en CSS. Les commentaires ne seront pas affichés, ils servent simplement à indiquer des informations pour vous, par exemple pour vous y retrouver dans un long fichier CSS. Notez qu'il est possible de créer plusieurs fichiers CSS pour votre site si vous ressentez le besoin de séparer un peu votre code CSS Pour faire un commentaire, Tapez /*, suivi de votre commentaire, puis */pour terminer votre commentaire. /* style css Par Etudiant L1 : 2016028U4 */ p { color: blue; /* Les paragraphes seront en bleu */ } 12Commentaires Commentaires • Les sélecteurs simples correspondent à des éléments HTML seuls et sans attributs (par exemple le sélecteur p). • Les sélecteurs simples doivent être préférées tant que possible pour des raisons d’optimisation et de performance du code. • ils requièrent moins de code et sont donc moins gourmands en énergie que des sélecteurs plus complexes. • La page mettra ainsi moins de temps à charger. • Limitations : on est quand même très limité avec des sélecteurs simples • comment faire pour appliquer un style différent à deux éléments de même type, deux paragraphes par exemple ? • Ce n’est tout simplement pas possible. 13Sélecteurs Sélecteurs simplessimples • class et id sont deux attributs HTML qui ont été créés pour pouvoir appliquer différents styles à des éléments de même type. class permet également de faire l’inverse et d’appliquer le même style à différents éléments choisis. • Fonctionnement 1. on se place dans la balise ouvrante d’un élément HTML, on écrit le nom de l’attribut (class ou id), et on lui donne une valeur cohérente. • Cette valeur ne devrait contenir ni de caractères spéciaux (accents et autres) ni d’espace. • Ex. <p id=‘premierp’>paragraphe </p> 2. Dans fichier de stype CSS. On va devoir commencer notre déclaration :  par un point là où on a utilisé un attribut class  et par un dièse si l’on a utilisé l’attribut id. 3. Après le point ou le dièse, on écrit la valeur de l’attribut en question pour former notre sélecteur. Enfin, on écrit le code CSS voulu. • Ainsi on peut appliquer un style différent à chaque élément HTML grâce aux attributs class et id. 14Les attributs class et id Les attributs class et id • Il existe une différence notable entre class et id : un attribut id avec une valeur précise ne peut être utilisé qu’une fois dans une page, au contraire de class. • Id sera donc utilisé pour des éléments uniques dans une page web, comme le logo de votre site par exemple. • En revanche, on peut utiliser plusieurs attributs class identiques (c’est à dire ayant la même valeur) par page. C’est d’ailleurs une des méthodes que nous utiliserons pour appliquer un même style à différents éléments.15Les attributs class et id Les attributs class et id Exemple avec id #premierp { font-style:italic; } 16 .pimpair { color:#F0000F; } 17Exemple avec class Exemple avec class • On ne peut pas pour le moment appliquer un style qu’à un contenu entre balises. on ne peut pas appliquer de style particulier à un mot qui se trouve dans un texte situé entre deux balise. • Pour remédier à cela, on a inventé les deux balises HTML dites universelles div et span. • comprendre que les éléments div et span ne possèdent aucune valeur sémantique, – ce qui va à l’encontre même du rôle du HTML. – Ainsi, on ne doit les utiliser que lorsqu’on n’a pas d’autre choix. • Les éléments div et span vont nous servir de containers. – On en sert pour entourer des blocs de code et ainsi pouvoir appliquer des styles particuliers à ces blocs. 18Les éléments div et Les éléments div et spanspan • L’utilisation des éléments div et span est très simple : • il suffit d’entourer le bloc de code voulu avec une paire de balises ouvrante et fermante div ou span • Généralement, on attribuera une class ou un id à div et span afin de pouvoir différencier nos différents div et span dans notre page. • Ainsi, on peut désormais appliquer un style particulier à n’importe quel bout de code dans notre page HTML. • Tout comme pour class et id, il existe une différence entre div et span : • div est un élément de type block • tandis que span est un élément de type inline. 19Les éléments div et Les éléments div et spanspan Exemple avec spanspan 20 21Exemple avec div Exemple avec div Les sélecteurs avancés(1)avancés(1) 1. * : sélecteur universel Sélectionne toutes les balises sans exception. * { uploads/s3/ chap3-css 1 .pdf