HTML CSS Fiche numéro 6

Transcription

1 HTML CSS Fiche numéro 6 Sources : L'ancien site 2minuteslearning.fr qui à malheureusement disparu Mettre en place le CSS Dans un premier temps, nous allons voir la théorie sur le CSS : qu'est-ce que c'est? À quoi cela ressemble-t-il? Où est-ce qu'on écrit du code CSS? Tout d'abord, CSS (Cascading Style Sheets), c'est cet autre langage qui vient compléter le HTML. C'est lui qui vous permet de choisir la couleur de votre texte. Lui qui vous permet de sélectionner la police utilisée sur votre site. Lui encore qui permet de définir la taille du texte, les bordures, le fond En eux mots, CSS définit donc la présentation du document. HTML a été conçu pour définir la structure d un document pas sa présentation. Par conséquent tout ce qui est lié à la présentation d un document devrait être défini à l aide de CSS. Typiquement, il faut préférer CSS à l utilisation de balises HTML permettant de définir la présentation d un document (comme par exemple <font color=... >) Tout comme le HTML, le CSS a évolué...aujourd'hui nous sommes à la version CSS3. 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. Source HTML CSS Fiche numéro 6 1

2 Il existe plusieurs solutions pour appliquer le CSS, la plus simple et la plus efficace...dans un fichier.css (les fichiers HTML ont eux une extension.html), cela permet de ne pas tout mélanger! Reprenons notre fichier de travail et nous allons le compléter Vous remarquez la ligne <link rel="stylesheet" href="style.css" /> c'est elle qui indique que ce fichier HTML est associé à un fichier appelé style.css et chargé de la mise en forme. Nous allons maintenant créer notre page de style CSS Créez une nouvelle page dans Notepad++ qui aura pour nom style.css Intégrer dans cette nouvelle page les lignes suivantes p color: red; Enregistrez sous Notepad++ et dans le navigateur et cela donne... Le texte passe en rouge...simple non? J'ai indiqué que je souhaitais écrire en rouge les paragraphes (p)...je peux faire la même chose avec beaucoup de balises. h1 color: blue; Ici le titre (h1) passe en bleu. On peut appliquer un style à plusieurs balises, par exemple h1, em color: orange; Au lieu de taper deux ensemble de commande pour la même couleur, je tape h1,em Comme pour la pages HTML, il est possible d'insérer des commentaires qui ne seront pas visibles sur les HTML CSS Fiche numéro 6 2

3 pages Web mais seulement pour vous...pour vos informations personnelles. Les commentaires sont écrits entre les balises /* et */ p color: orange; /* Les paragraphes seront en orange */ En appliquant cette méthode, on constate que tous les paragraphes seront en «orange»...pas forcément génial;) Pour palier ce petit inconvénient, il existe deux balises qui permettent de résoudre ce problème. l'attribut class ; l'attribut id.(que nous verrons pas ici; car peut utile) Les attributs class et id sont quasiment identiques. Pour le moment, on ne va s'intéresser qu'à l'attribut class. HTML CSS Fiche numéro 6 3

4 Le paragraphe est identifié. Il a un nom : introduction. Vous allez pouvoir réutiliser ce nom dans le fichier CSS pour dire : «Je veux que seules les balises qui ont comme nom 'introduction' soient affichées en rouge». Les balises universelles Il arrivera parfois que vous ayez besoin d'appliquer une class (ou un id) à certains mots qui, à l'origine, ne sont pas entourés par des balises. Pour cela il a été inventé les balises universelles, <span> </span> et <div> </div> <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. <div> </div> : c'est une balise de type block, qui entoure un bloc de texte. Dans notre exemple, <p>bonjour et <span class="salutations">bienvenue</span>. Puis dans style.css.salutations color: orange; HTML CSS Fiche numéro 6 4

5 En résumé CSS est un autre langage qui vient compléter le HTML. Son rôle est de mettre en forme votre page web. Il faut être vigilant sur la compatibilité des navigateurs avec certaines fonctionnalités récentes de CSS3. Quand un navigateur ne connaît pas une instruction de mise en forme, il l'ignore simplement. On peut écrire le code CSS à plusieurs endroits différents, le plus conseillé étant de créer un fichier séparé portant l'extension.css (exemple : style.css). En CSS, on sélectionne quelles portions de la page HTML on veut modifier et on change leur présentation avec des propriétés CSS : Code : CSS balise1 propriete1: valeur1; propriete2: valeur2; Il existe de nombreuses façons de sélectionner la portion de la page que l'on veut mettre en forme. Par exemple, on peut viser -Toutes les balises d'un même type, en écrivant simplement leur nom (h1 par exemple) -Certaines balises spécifiques, auxquelles on a donné des noms à l'aide des attributs class ou id -Uniquement les balises qui se trouvent à l'intérieur d'autres balises (h3 em). etc. HTML CSS Fiche numéro 6 5