Remerciez-le!

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

Professeur : Bart Kimps Les cahiers Les cahiers d'Exercices en d'Exercices en P

Professeur : Bart Kimps Les cahiers Les cahiers d'Exercices en d'Exercices en Programmation : Le Programmation : Le langage CSS langage CSS Apprenez et entraînez vos acquis - De très nombreux exercices à réaliser par vous-même - Des corrigés regroupés à la fin du cahier et expliqués Pas à Pas. AVANT-PROPOS Ce livre est un cahier d'exercices : il vous propose des énoncés d'exercices et leurs corrigés. Vous allez apprendre le logiciel en vous entrainant à travers des exercices regroupés par thème. Chaque énoncé vous présente l'exercice à réaliser. Vous trouverez à la fin du cahier le corrigé de chaque exercice. Certaines explications peuvent-être présentes. METHODOLOGIE Lors de la réalisation des exercices, vous pourrez remédier à certain problème à l'aide des corrections à la fin du cahier. Après avoir réalisé tous les exercices de chaque chapitre vous allez pouvoir vérifier les compétences acquises à l'aide du tableau des objectifs. Celui-ci sert à la cotation du professeur (grille d'évaluation). Des légendes ou recommandations peuvent être présentes dans certains exercices. Celles-ci vous aideront dans vos recherches. Elles ne doivent pas être reproduites dans votre travail. Chaque point de matière acquis dans un exercice peut être utilisé dans des exercices suivants sans explication. 1 Table des matières Table des matières Chapitre 1 : Introduction au CSS ....................................................................................... 1 Chapitre 2 : CSS, des débuts difficiles ............................................................................ 2 Chapitre 3 : CSS, la prise en charge des navigateurs ................................................... 3 Chapitre 4 : Où écrit-on le CSS ? ...................................................................................... 4 Chapitre 5 : Appliquer un style : sélectionner une balise ............................................ 7 Appliquer un style : class et id .................................................................................... 7 Les balises universelles ................................................................................................. 9 Chapitre 6 : Appliquer un style : les sélections avancées ........................................... 11 Les sélecteurs que vous connaissez déjà ................................................................. 11 Les sélecteurs avancés ............................................................................................... 12 En résumé ....................................................................................................................... 13 Chapitre 7 : Formatage du texte ..................................................................................... 14 La taille ........................................................................................................................... 14 La police .......................................................................................................................... 17 Italique, gras, souligné… ............................................................................................. 18 L'alignement .................................................................................................................. 19 Les flottants ................................................................................................................ 20 Stopper un flottant ..................................................................................................... 21 En résumé ...................................................................................................................... 22 Chapitre 8 : La couleur et le fond ................................................................................... 23 Indiquer le nom de la couleur ................................................................................... 23 Couleur de fond............................................................................................................ 24 Appliquer une image de fond .................................................................................... 25 En résumé ...................................................................................................................... 28 Chapitre 9 : Les bordures et les ombres ....................................................................... 29 Bordures standard ...................................................................................................... 29 Bordures à droite, à gauche, en bas et en haut ................................................... 30 2 Des bordures arrondies .............................................................................................. 31 Les ombres .................................................................................................................... 32 En résumé ...................................................................................................................... 34 Chapitre 10 : Création d'apparences dynamiques ........................................................ 35 Au survol ........................................................................................................................ 35 Au clic et lors de la sélection ................................................................................... 36 Lorsque le lien a déjà été consulté ......................................................................... 37 En résumé ...................................................................................................................... 37 Chapitre 11 : Exercices ...................................................................................................... 38 Chapitre 11 : Solutions ....................................................................................................... 40 Bibliographie ......................................................................................................................... 42 1 Chapitre 1 : Introduction au CSS Chapitre 1 : Introduction au CSS Pour définir la présentation d'un document web écrit en HTML, on utilise un autre langage en complément, les feuilles de styles CSS (Cascading Style Sheet ou feuille de style en cascade). Les feuilles de styles CSS permettent de définir les couleurs, les polices d'écriture, le positionnement des éléments. Les feuilles peuvent indifféremment être placées dans les pages où on souhaite appliquer les styles, ou dans un fichier externe. Cette dernière méthode permet de gagner un temps précieux car pour modifier le design complet du site, seule la mise à jour du fichier externe CSS est nécessaire. Il faut toutefois être prudent, car certains navigateurs comme Internet Explorer ne respectent pas entièrement les normes et provoquent dans certains cas un rendu différent des navigateurs les respectant. Voici un petit comparatif : Grâce au HTML, nous avons pu rédiger le contenu de notre site mais il est brut. Le CSS vient compléter ce code pour mettre en forme tout cela et donner au contenu l'apparence que l'on souhaite. 2 Chapitre 2 : CSS, des débuts difficiles Chapitre 2 : CSS, des débuts difficiles Il faut savoir qu'aux débuts du Web, CSS n'existait pas. En fait, il n'y avait initialement que le langage HTML. Le HTML est né en 1991 et CSS en 1996. Alors, vous vous dites sûrement : comment faisait-on la mise en forme de 1991 à 1996 ? Eh bien, uniquement en HTML ! Il y avait en effet des balises HTML dédiées à la mise en forme. Exemple : <font color="#aab1c3"> permettait de définir la couleur du texte. 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. Cependant, le CSS n'a pas été adopté immédiatement par les webmasters, loin de là. Il fallait se défaire de certaines mauvaises habitudes et cela a pris du temps. Encore aujourd'hui, on peut trouver des sites web avec des balises HTML de mise en forme, anciennes et obsolètes, comme <font> ! 3 Chapitre 3 : CSS, la prise en charge des Chapitre 3 : CSS, la prise en charge des navigateurs navigateurs Tout comme le HTML, le CSS a évolué. Je vous avais indiqué qu'il y avait quatre versions importantes de CSS :  CSS 1 ;  CSS 2.0 ;  CSS 2.1 ;  CSS 3. En fait, la version CSS 3 n'est pas encore totalement finalisée (ce n'est pas encore une version officielle). Cependant, elle est bien avancée et aujourd'hui déjà bien prise en charge par de nombreux navigateurs, on peut déjà s'en servir. Il serait dommage de passer à côté car CSS 3 apporte de nombreuses fonctionnalités à CSS (leur nombre double par rapport à CSS 2.1 !). Nous nous baserons donc dans ce cours sur CSS 3, qui reprend et complète la plupart des fonctionnalités de CSS 2.1. Ce sont les navigateurs web qui font le travail le plus complexe : ils doivent lire le code CSS et comprendre comment afficher la page. Au début des années 2000, Internet Explorer était le navigateur le plus répandu mais sa gestion du CSS est longtemps restée assez médiocre (pour ne pas dire carrément mauvaise). C'était la grande époque de la version 6 (IE6). Depuis, de nombreux navigateurs sont arrivés et ont chahuté Internet Explorer : Mozilla Firefox bien sûr, mais aussi Google Chrome. Et je ne vous parle pas du succès des Mac et iPhone avec leur navigateur Safari. Cela a incité Microsoft à réagir et publier (après une longue période d'inactivité) IE 7, puis IE 8 et IE 9, 10, 11... Et maintenant Edge. Que faut-il retenir de tout cela ? Que les navigateurs ne connaissent pas toutes les propriétés CSS qui existent. Plus le navigateur est vieux, moins il connaît de fonctionnalités CSS. 4 Chapitre 4 : Où écrit-on le CSS ? Chapitre 4 : Où écrit-on le CSS ? Vous avez le choix car on peut écrire du code en langage CSS à trois endroits différents :  dans un fichier .css (méthode la plus recommandée, nous emploierons cette méthode dans le cours) ;  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 (recommandé) On écrit le plus souvent le code CSS dans un fichier spécial ayant l'extension .css (contrairement aux fichiers HTML qui ont l'extension .html). C'est la méthode la plus pratique et la plus souple. Cela nous évite de tout mélanger dans un même fichier. Reprendre le fichier HTML modèle et ajouter cette ligne et modifier le titre. Le contenu de cette ligne 6, <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. Enregistrer ce modèle sous le nom : Modèle avec HTML et CSS. 5 Introduire le code suivant dans le corps de la page : Enregistrer le travail : Créer maintenant un nouveau fichier à l'aide de votre éditeur. Enregistrer ce fichier dans le même dossier que ton fichier HTML avec comme nom style.css attention au type de ce fichier : (Cascade Style Sheets) voir ci- contre : 6 Copier dans ce fichier ce bout de code et enregistre ton travail : Les deux fichiers HTML et CSS doivent être ouverts. Dans l'explorateur, il est possible de voir les 2 fichiers HTML + CSS ainsi que le modèle : Ouvre maintenant le fichier HTML précédemment créé dans le navigateur pour le tester. C'est magique : le paragraphe est écrit en bleu. Il ne faut donc pas ouvrir le fichier CSS mais bien que la page HTML (il fera automatiquement appel au fichier CSS). 7 Chapitre 5 : Appliquer un style : Chapitre 5 : Appliquer un style : sélectionner une balise sélectionner une balise Appliquer un style : class et id Ce qui a été montré a quand même un défaut : TOUS les paragraphes possèdent la même présentation (ici, ils seront donc uploads/s3/ cours-de-css-exercices-et-corrections.pdf