HTML Cours 3. Plan du cours Les feuilles de styles CSS Mise en forme du texte et des paragraphes.

Présentation au sujet: "HTML Cours 3. Plan du cours Les feuilles de styles CSS Mise en forme du texte et des paragraphes."— Transcription de la présentation:

1 HTML Cours 3

2 Plan du cours Les feuilles de styles CSS Mise en forme du texte et des paragraphes

3 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. CSS2 comporte plus de 100 propriétés différentes

4 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é.

5 CSS La syntaxe du CSS est selecteur { propriété : valeur }

6 CSS On constitue le sélecteur de trois façons en faisant référence aux attributs id en faisant référence aux attributs class en faisant référence aux noms de balises

7 Exemple de code avec CSS Déclaration (head): #cadrepub h2 { color: red } #cadrepub p { color: blue } Application (body): Publicité : Ceci est une publicité. L'OMS a établi dans ce dernier bilan quinze pays étaient touchés par le H1N1.

8 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 BODY { color: red } H1 { color: blue } Avec une feuille attachée Dans l’attribut style d’une balise Exemple

9 CSS attaché La façon la plus couramment utilisée consiste à lier le document HTML à un fichier CSS externe. Notez que plusieurs feuilles CSS peuvent être attribuées au même document HTML. Vous pouvez attribuer différentes feuilles CSS selon le médium: print, handheld, braille, screen, etc.

10 L’attribut id Identifiant d’une balise. Peut être lié à un sélecteur CSS. Doit être unique dans le document. On peut assigner un attribut id à presque toutes les balises HTML. On y fait référence avec un #.

11 Exemple d’utilisation de l’id Déclaration #publicite { color: red } Application Ceci est un paragraphe Signifie littérallement « Met le texte a l’intérieur de la balise avec l’id ‘publicite’ en rouge. »

12 L’attribut class Nom(s) de classe de balise. Permet de faire référence à un ou plusieurs sélecteurs CSS. On peut assigner un attribut class à presque toutes les balises HTML. Une même classe peut être assignée à plusieurs balises différentes pour appliquer à chacune la même règle CSS. On y fait référence avec un (.) point.

13 Exemple d’utilisation de class Déclaration.monstyle { color: red } Application Ceci est un paragraphe Signifie littérallement «Met le texte rouge à chaque balise utilisant la classe ‘monstyle’»

14 Les éléments span et div Permet de délimiter un contexte distinct. La balises et 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 et sont des Boites de type bloc.

15 CSS appliqué dans un contexte #cadrepub h2 { color: red } Signifie littérallement «Assigner la couleur rouge a chaque balise a l’intérieur d’une balise nommée ‘cadrepub’. ».cadrepub h2 { color: red } Signifie littérallement «Assigner la couleur rouge a chaque balise a l’intérieur d’une balise possédant la classe ‘cadrepub’. »

16 CSS appliqué sur toutes les balises h2 { color: red; } Signifie « Mettre le contenu de toutes les balises 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.

17 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

18 CSS D’autres façons 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. #cadrepub h2 { color: red } Signifie: Met du texte rouge au titre à l’intérieur de la balise dont l’id est cadrepub

19 Exemple (index.html) L'Organisation mondiale de la santé (OMS) révèle samedi l'existence de 615 cas confirmés de grippe A Publicité : Ceci est une publicité. L'OMS a établi dans ce dernier bilan que quinze pays étaient touchés par le H1N1.

20 La feuille de style (main.css) #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; }

21 Références w3schools.com/css/css_reference.asp cssdebutant.com

22 Laboratoire Reproduire en utilisant les CSS la page suivante

23 CSS SélecteurExempleL’exemple sélectionne balise>balisediv>pToutes les balises dont le parent est une balise balise+balisediv+pToutes les balises placées immédiattement après une balise [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”.