Remerciez-le!

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

Classe de première SI CSS Table des matières 1. La petite histoire du CSS......

Classe de première SI CSS Table des matières 1. La petite histoire du CSS..................................................................................................................2 2. Déclaration du CSS..........................................................................................................................2 2.1. Fichier .css................................................................................................................................2 2.2. En-tête <head> du fichier HTML.............................................................................................3 2.3. Directement dans les balises.....................................................................................................3 3. Appliquer un style.............................................................................................................................3 3.1. Commentaires dans du CSS......................................................................................................4 3.2. Style : class et id.......................................................................................................................4 3.3. Les balises universelles.............................................................................................................5 3.4. Les sélecteurs avancés..............................................................................................................5 4. Formattage du texte..........................................................................................................................6 5. Habillage...........................................................................................................................................7 6. Couleur du texte...............................................................................................................................8 7. Couleur de fond................................................................................................................................9 8. Images de fond.................................................................................................................................9 9. Les Bordures...................................................................................................................................11 10. Apparences dynamiques...............................................................................................................11 11. Le modèle des boîtes....................................................................................................................12 Dépassement de texte.....................................................................................................................14 12. Le positionnement........................................................................................................................14 12.1. Les positionnements absolu, fixe et relatif...........................................................................14 12.2. Le positionnement inline-block............................................................................................15 13. Squelette de base HTML – CSS...................................................................................................18 4-css.odt 1 Classe de première SI 1. La petite histoire du CSS CSS (Cascading Style Sheets), permet de choisir la couleur du texte, la police utilisée, la taille du texte, les bordures, le fond… et de faire la mise en page du site (menu à gauche, en-tête calé en haut, etc). Aux débuts du Web, CSS n'existait pas, il n'y avait initialement que le langage HTML. Cependant, les pages HTML commençaient à devenir assez complexes. Il y avait de plus en plus de balises et c'était un joyeux mélange entre le fond et la forme, qui rendait la mise à jour des pages web de plus en plus complexe. C'est pour cela que l'on a créé le langage CSS. 2. Déclaration du CSS On peut écrire du code en langage CSS à trois endroits différents : • dans un fichier .css (méthode la plus recommandée) ; • 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). 2.1. Fichier .css On écrit le plus souvent le code CSS dans un fichier spécial ayant l'extension .css. Cela nous évite de tout mélanger dans un même fichier. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="style.css" /> <title>Premiers tests du CSS</title> </head> <body> <h1>Mon site</h1> <p>Bonjour et bienvenue !</p> </body> 4-css.odt 2 Classe de première SI </html> La ligne 5, <link rel="stylesheet" href="style.css" /> indique que ce fichier HTML est associé à un fichier appelé style.css et chargé de la mise en forme. Tout le site changera d'apparence. 2.2. En-tête <head> du fichier HTML Cela consiste à 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" /> <style> p { color: blue; } </style> <title>Premiers tests du CSS</title> </head> <body> <h1>Mon site</h1> <p>Bonjour et bienvenue !</p> </html> Toute la page changera d'apparence. 2.3. Directement dans les balises Ajouter un attribut style à n'importe quelle balise et insérerez le code CSS directement dans cet attribut : <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Premiers tests du CSS</title> </head> <body> <h1>Mon site</h1> <p style="color: blue;">Bonjour et bienvenue !</p> </body> </html> 3. Appliquer un style Dans un code CSS, on trouve trois éléments différents : • Des noms de balises : on écrit les noms des balises dont on veut modifier l'apparence. 4-css.odt 3 Classe de première SI • Des propriétés CSS : les « effets de style » de la page sont rangés dans des propriétés. Il y a par exemple la propriété color qui permet d'indiquer la couleur du texte. • Les valeurs : pour chaque propriété CSS, on doit indiquer une valeur. Par exemple, pour la propriété color, il faut indiquer le nom de la couleur. Prenons le code CSS suivant : h1 { color: blue; } em { color: blue; } Il signifie que les titres <h1> et les textes importants <em> doivent s'afficher en bleu. Si les deux balises doivent avoir la même présentation, il suffit de combiner la déclaration en séparant les noms des balises par une virgule : h1, em { color: blue; } 3.1. Commentaires dans du CSS Les commentaires ne seront pas affichés, ils servent simplement à indiquer des informations. Taper /*, suivi de votre commentaire, puis */ pour terminer votre commentaire. 3.2. Style : class et id Pour que certains paragraphes seulement soient écrits d'une manière différente on utilise des attributs spéciaux qui fonctionnent sur toutes les balises : • l'attribut class ; • l'attribut id. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="style.css" /> <title>Premiers tests du CSS</title> </head> <body> <h1>Mon super site</h1> <p class="introduction">Bonjour et bienvenue !</p> </body> </html> Dans le CSS, indiquez le nom de votre classe en commençant par un point, comme ci-dessous : 4-css.odt 4 Classe de première SI .introduction { color: blue; } L'attribut id fonctionne exactement de la même manière que class mais il ne peut être utilisé qu'une fois dans le code. Dans le fichier CSS, il faudra faire précéder le nom de l'id par un dièse (#) : #introduction { color: blue; } 3.3. Les balises universelles Il existe deux balises dites universelles : • <span> </span> : c'est une balise de type inline, c'est-à-dire une balise que l'on place au sein d'un paragraphe de texte, pour sélectionner certains mots uniquement. Les balises <strong> et <em> sont de la même famille. • <div> </div> : c'est une balise de type block, qui entoure un bloc de texte. Les balises <p>, <h1>, etc. sont de la même famille. Ces balises ont quelque chose en commun : elles créent un nouveau « bloc » dans la page et provoquent donc obligatoirement un retour à la ligne. Exemple : <p>Bonjour et <span class="salutations">bienvenue</span> !</p> .salutations { color: blue; } 3.4. Les sélecteurs avancés Pour sélectionner les éléments de la page à modifier, on utilise ce qu'on appelle des sélecteurs. * : sélecteur universel * { } Sélectionne toutes les balises sans exception. On l'appelle le sélecteur universel. A B : une balise contenue dans une autre h3 em { } Sélectionne toutes les balises <em> situées à l'intérieur d'une balise <h3>. Notez qu'il n'y a pas de 4-css.odt 5 Classe de première SI virgule entre les deux noms de balises. A + B : une balise qui en suit une autre h3 + p { } Sélectionne la première balise <p> située après un titre <h3>. A[attribut] : une balise qui possède un attribut a[title] { } Sélectionne tous les liens <a> qui possèdent un attribut title. Exemple : <a href="http://site.com" title="Infobulle"> A[attribut="Valeur"] : une balise, un attribut et une valeur exacte a[title="Cliquez ici"] { } Idem, mais l'attribut doit en plus avoir exactement pour valeur « Cliquez ici ». Exemple : <a href="http://site.com" title="Cliquez ici"> A[attribut*="Valeur"] : une balise, un attribut et une valeur a[title*="ici"] { } Idem, l'attribut doit cette fois contenir dans sa valeur le mot « ici » (peu importe sa position). Exemple : <a href="http://site.com" title="Quelque part par ici"> 4. Formattage du texte Pour modifier la taille du texte, on utilise la propriété CSS font-size. Exemple : p { font-size: 14px; /* Paragraphes de 14 pixels */ } Pour modifier la police utilisée, on utilise la propriété CSS font-family. p { font-family: Impact, "Arial Black", Arial, Verdana, sans-serif; } 4-css.odt 6 Classe de première SI Le navigateur essaiera d'abord d'utiliser la police Impact ou, si elle n'y est pas, Arial Black, ou sinon Arial, ou sinon Verdana, ou si rien n'a marché, mets une police standard (sans-serif). Mettre en italique : font-style: italic; Mettre en gras : font-weight: bold; Soulignement et autres décorations : propriété CSS text-decoration qui peut prendre différentes valeurs : • underline : souligné. • line-through : barré. • overline : ligne au-dessus. • blink : clignotant. • none : normal (par défaut). L'alignement : propriété CSS text-align et on indique l'alignement désiré : • left : le texte sera aligné à gauche (c'est le réglage par défaut). • center : le texte sera centré. • right : le texte sera aligné à droite. • justify : le texte sera « justifié ». 5. Habillage Le CSS permet de faire flotter un élément autour d'un texte grâce à la propriété CSS float. • left : l'élément flottera à gauche. • right : l'élément flottera à droite. <p><img src="flash.gif" class="imageflottante" alt="Image flottante" /> .imageflottante { float: left; } Pour ne plus faire flotter l'élément, il faut utiliser la propriété clear, qui peut prendre ces trois valeurs : • left : le texte se poursuit en-dessous après un float: left; • right : le texte se poursuit en-dessous après un float: right; • both : le texte se poursuit en-dessous, que ce soit 4-css.odt 7 Classe de première SI après un float: left; ou après un float: right;. <p><img src="flash.gif" class="imageflottante" alt="Image flottante" /></p> <p>Texte écrit à côté de l'image.</p> <p class="dessous">Texte écrit sous l'image.</p> .imageflottante { float: left; } .dessous { clear: both; } 6. Couleur du texte Il y a différentes façons d'indiquer la couleur : 1. Indiquer le nom de la couleur Propriété color, suivie d'un des seize noms de couleurs utilisables en CSS (white, black, red, yellow, blue, …). Exemple : color: maroon 2. Indiquer le code couleur Propriété color, suivie des codes couleur RGB1. Exemple : color: rgba(240, 96, 204, 0); Certains logiciels uploads/s3/ cours-css3 1 .pdf