HTML Cours 3
Plan du cours Les feuilles de styles CSS Mise en forme du texte et des paragraphes
Les feuilles de Styles CSS Le langage CSS, Cascade Style Sheet, (Feuille de Style en Cascade) sert à la mise en forme. Il est en effet très utile pour séparer mise en forme et contenu du HTML. Vous pouvez l'utiliser avec l'attribut style associé à n'importe quelle balise. Par exemple: <p style="font-size: 12px;">texte</p> Il peut s’appliquer automatiquement sur toutes les balises qui correspondent à son nom avec l’attribut id ou class CSS2 comporte plus de 100 propriétés différentes
CSS Avantages La structure et la présentation sont gérées séparément. La conception sans se soucier de la présentation. Le code HTML est réduit en taille et en complexité.
CSS La syntaxe du CSS est selecteur { propriété : valeur }
Faire référence à du CSS Les règles CSS sont déclarées dans le head et sont appliquées dans le body. La balise STYLE dans l’entête <HEAD> <STYLE type="text/css"> BODY { color: red } H1 { color: blue } </STYLE> </HEAD> Avec une feuille attachée <HEAD> <LINK rel="stylesheet" href= " monstyle.css" type="text/css"> </HEAD> Dans l’attribut style d’une balise <p style=¨font-size: 12px;¨>Exemple</p>
Exemple de code avec CSS Déclaration (head): <style type="text/css"> #cadrepub h2 { color: red } #cadrepub p { color: blue } </style> Application (body): <div id="cadrepub"> <h2>Publicité :</h2>Ceci est une publicité. <p>L'OMS a établi dans ce dernier bilan <span class="style1" > que quinze pays étaient touchés</span> par le H1N1.</p> </div>
Les éléments span et div La balises <span> et </span> sont utilisées en CSS pour modifier l'aspect d'une zone limitée de données. Ce sont des boites de type en ligne. Les balises <div> et </div> sont des Boites de type bloc. Elles sont utilisées avec les attributs id et class
L’attribut id Cet attribut est un identifiant d’élément. Cet identifiant doit être unique dans le document. On peut assigner un attribut id à presque toutes les balises HTML. Il peut servir à assigner des règles CSS. On y fait référence avec un #.
Exemple d’utilisation de l’id Déclaration #publicite { color: red } Application <p id=¨publicite¨>Ceci est un paragraphe</p> Signifie littérallement « Met le texte a l’intérieur de la balise avec l’id `publicite` en rouge. »
L’attribut class Cet attribut permet d’assigner un ou plusieurs nom de classe à un élément. On peut assigner un attribut class à presque toutes les balises HTML. Une même classe peut être assignée à plusieurs éléments pour appliquer à chacune la même règle CSS. On y fait référence avec un (.) point.
Exemple d’utilisation de class Déclaration .monstyle { color: red } Application <p class=¨monstyle¨>Ceci est un paragraphe</p> Signifie littérallement «Met le texte rouge à chaque balise utilisant la classe ¨monstyle¨»
CSS appliqué dans un contexte #cadrepub h2 { color: red } Signifie littérallement «Assigner la couleur rouge a chaque balise <h2> a l’intérieur d’une balise nommée ‘cadrepub’. » Variante .cadrepub h2 { color: red } Signifie littérallement «Assigner la couleur rouge a chaque balise <h2> a l’intérieur d’une balise possédant la classe ‘cadrepub’. »
CSS appliqué sur toutes les balises h2 { color: red; } Signifie « Mettre le contenu de toutes les balises <h2> en rouge. » body { font-size: 12px; font-family: Arial, Times new roman; } Assigne le format de caractères à utiliser à l’intérieur du document. Notez que chaque règle est séparé d’un (;) point-virgule.
Les pseudos-classes a:hover { color: red } Applique la couleur rouge quand on survole un lien hypertexte a:visited { color: green } Applique la couleur verte aux liens qui ont été visités a:link { color: black } Les liens hypertexte deviennent noirs
Exemple de code html avec CSS <div id="main"> <p class="lettrine">L'Organisation mondiale de la santé (OMS) révèle samedi l'existence de 615 cas confirmés de grippe A </p> <div id="cadrepub"> <h2>Publicité :</h2> Ceci est une publicité. </div> <p>L'OMS a établi dans ce dernier bilan que quinze pays étaient touchés par le H1N1.</p>
La feuille de style #main {padding: 1px 1em 1px 1em; background-color:#FFFFFF; margin-left:203px; border-left: 1px solid #990000; border-right: 1px solid #990000; } #main .lettrine:first-letter{float:left; margin-right:5px; font- size:3em; } #main p {font-size:12px;} #main ul {font-size:10px;} #pied { padding: 1px 0px 1px 5%; background-color: #D5EDB3; text-align:center;border-top: 1px solid #990000;} #cadrepub{background-color: #3333FF; float: right; width: 200px; padding : 1em 1em 1em 1em; border:red;} .textepied {font-size:12px; font-style:italic;} h1 {font-size:18px;} img {float:left; padding : 0 1em 0 0; text-decoration: none; }
Références w3schools.com/css/css_reference.asp cssdebutant.com
Laboratoire Reproduire en utilisant les CSS la page suivante
CSS D’autres façon de constituer son sélecteur. #cadrepub, h2 { color: red } Signifie: Met le texte en rouge au texte à l’intérieur de la balise dont l’id est cadrepub et aussi à tous les titres <h2>. #cadrepub h2 { color: red } Signifie: Met du texte rouge au titre <h2> à l’intérieur de la balise dont l’id est cadrepub
CSS Sélecteur Example L’example sélectionne balise>balise div>p Toutes les balises <p> dont le parent est une balise <div> balise+balise div+p Toutes les balises <p> placées immédiattement après une balise <div> [attribut] [target] Tous les éléments avec l’attribut target [attribut=valeur] [target=_blank] Toutes les balises dont l’attribut target est “_blank” [attribut~=valeur] [title=flower] Toutes les balises avec un attribut title qui contient des mots séparés par des espaces, l’un de ceux-ci étant ‘fleur’ [attribut|=langage] [lang|=en] Toutes les balises dont l’attribut lang est “en”, même si la valeur contient un caractère (-), comme dans “en-us”.