Télécharger la présentation
La présentation est en train de télécharger. S'il vous plaît, attendez
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. 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
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
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>
7
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>
8
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
9
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 #.
10
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. »
11
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.
12
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¨»
13
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’. »
14
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.
15
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
16
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>
17
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; }
18
Références w3schools.com/css/css_reference.asp cssdebutant.com
19
Laboratoire Reproduire en utilisant les CSS la page suivante
20
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
21
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”.
Présentations similaires
