Réalisé par : Sara RHAZLANE Chaimaa MESSAOUDI PLAN • C’est quoi le CSS ? • HTML vs CSS • Pourquoi le CSS? • Notion de cascade • Syntaxe du CSS • Notion d’héritage • Notion de classe • Balise DIV et SPAN • Notion ID • Points forts du CSS • Liste des propriétés • Les liens CSS • Positionnement des éléments 19/12/2013 • Conclusion 2 C’est quoi le CSS ? CSS = Cascading Style Sheets
• Apparu en 1996 • Code complémentaire à l’HTML
19/12/2013 3 HTML vs CSS Avant CSS : Structure
HTML gère Apparence
Après CSS:
HTML gère la structure
CSS gère l’apparence
19/12/2013 4 Pourquoi le CSS ?
• Modification de la structure et de l’apparence
séparément • Changer l’apparence facilement • Moins de code HTML (1 seul fichier .css suffit) • Vitesse de chargement de la page
19/12/2013 5 Pourquoi le CSS ? Un exemple ? Changer le fond des pages en gris. Si j'ai un site de 5 pages, je vais répéter 5 fois : En HTML simple : <body bgcolor="#CCCCCC">
Par contre si j’ai dans un fichier CSS :
body { background-color: #CCCCCC; } , si je souhaite modifier la couleur de mes pages, j'ai un seul fichier a modifier .
Conclusion : CSS Centralisation de l’information 19/12/2013 6 Notion de Cascade Déclaration des styles à différents endroits+ Ordre de propriété des ses endroits => une cascade de style
<body style=" background-color:red"></body>
Attributs des balises html
<head> <title>titre de ma page</title> Internal <style type="text/css"> body{background-color : blue;} </style> (HEAD) </head>
<head> <title>titre de ma page</title> <link rel="stylesheet" type="text/css" href="style.css"/> External </head>
19/12/2013 7 La syntaxe du CSS Syntaxe simple, se compose d'un selecteur et une propriété associé à une valeur :
Selecteur
Propriété Valeur
19/12/2013 8 La syntaxe du CSS Exemple: p {font-family: Georgia,Arial ; font-style: Gras;}
19/12/2013 9 Notion d'héritage Fondé sur le modèle Parent – Enfant
Exemple: <H1> Le principe de <I> l'héritage </I> </H1> Définir une couleur rouge d’arrière plan sur la balise <H1> « Père » => la balise<l> « Enfant » aura aussi une couleur rouge en arrière plan
Attention: Il existe des propriétés ou l’héritage ne fonctionne pas ( Margin, Padding…)
19/12/2013 10 Notion de classe en CSS
Classe = appliquer un style précis au sein d’une balise HTML
19/12/2013 11 Notion de classe en CSS Côté CSS: .greenboldtext{ font-size: small; color: #008080; font-weight: bold; } Côté HTML: <p>\nVoici un texte <span class="greenboldtext"> avec une phrase en gras et vert</span> alors que le reste ne change pas </p>
19/12/2013 12 Les balises DIV, SPAN Les balises DIV et SPAN: Appliquer un style à un contenu Difference entre div et span: - <SPAN> permet d'appliquer des styles à un morceau de paragraphe.
Exemple : Un monde de géants.
<HTML> <HEAD> <STYLE type="text/css"> .element{font-size: x-large; color: navy} </STYLE> </HEAD> <BODY> <P>Un monde de <SPAN class=element>géants</SPAN>.</P> 19/12/2013 13 </BODY></HTML> Les balises DIV, SPAN Les balises DIV et SPAN: - <DIV> permet d'appliquer des styles plusieurs paragraphes. • Exemple : La balise <DIV> Commentaire : N'oubliez pas l'attribut class!
<HTML><HEAD> <STYLE type="text/css"> .zone{font-size: x-small} </STYLE> </HEAD> <BODY> La balise <DIV> <DIV class=zone> <P>Commentaire :</P> <P>N'oubliez pas l'attribut class!</P> 19/12/2013 </DIV> </BODY></HTML> 14 La notion d’ ID ID: Notion ID ≈ Notion de classe Code CSS: #container{ width: 80%; padding: 20px; border: 1px solid #666; background: #ffffff; } Code HTML: <div id="container"> Ici le code HTML relatif au contenu.. </div>
Classe ou ID ? Css sans script Il suffit d’utiliser les classes CSS avec script (DHTML) Notion ID indispensable
19/12/2013 15 Points forts du CSS
• Permet à l'utilisateur de personnaliser une page web
• Les pages web se chargent plus rapidement et utilisent
moins de bande passante
• Facilite le positionnement dans les moteurs de recherche
19/12/2013 16 Liste des propriétés STYLES DE POLICE font-family définit un nom de H3 {font-family: police ou une Arial} famille de police font-style définit le style de H3 {font-style: l'écriture italic} normal ou italique ou oblique font-size définit la taille de la P {font-size: small} police
19/12/2013 17 STYLES DE TEXTE
text-align définit l'alignement H1 {text-align:
du texte center} left ou center ou right
text-decoration définit une H1{text-decoration:
décoration du blink} texte, soit barré, clignotant, etc. color définit la couleur H3 {color: red} du texte
19/12/2013 18 ListeARRIERE desPLANS propriétés background-color définit la couleur H1 {background- de l'arrière-plan color: #000000} couleur ou transparent
background-image définit l'image de BODY
l'arrière-plan {background- URL de l'image image: image.gif} background- spécifie si l'image BODY attachment d'arrière-plan {background- reste fixe avec les image: image.gif; déplacements de background- l'écran attachement: scroll ou fixed fixed}
19/12/2013 22 Les liens en CSS Les pseudos-classes de liens sont des pseudo-classes spécifiques à la balise <A> : • a:link - normal, non visité • a:visited – visité par l’utilisateur • a:hover – souris sur le lien • a:active – le moment où le lien est cliqué
Exemple: a:hover {color:#FF00FF;} /* mouse over link */
19/12/2013 23 Les liens en CSS Exemple: a:link {background-color:gray;}
19/12/2013 24 Le positionnement des éléments Comment modifier la position des éléments ?
Etape 1: Spécifier la valeur de la propriété position
On a 4 valeurs possibles : static, fixed,relative,absolute
Etape2: Spécifier la propriété top,bottom,left,right
19/12/2013 25 Positionnement statique Positionnement par défaut Attention: ne prends pas en compte les vals de top, …
19/12/2013 26 Positionnement Fixe • Positionnée relativement au browser • Ne bouge pas si la page est scrollée <!DOCTYPE html> <html> <head> <style> p.pos_fixed { position:fixed; top:30px; right:5px; } </style> </head> <body>
<p class="pos_fixed">Some more text</p>
<p><b>Note:</b> IE7 and IE8 supports the fixed value only if a !DOCTYPE is specified.</p> <p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p> <p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p> <p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p> </body> </html>
19/12/2013 27 Positionnement Relatif • Positionnée relativement à sa position initiale <!DOCTYPE html> <html> <head> <style> h2.pos_left { position:relative; left:-20px; }
<body> <h2>This is a heading with no position</h2> <h2 class="pos_left">This heading is moved left according to its normal position</h2> <h2 class="pos_right">This heading is moved right according to its normal position</h2> <p>Relative positioning moves an element RELATIVE to its original position.</p> <p>The style "left:-20px" subtracts 20 pixels from the element's original left position.</p> <p>The style "left:20px" adds 20 pixels to the element's original left position.</p> </body></html>
19/12/2013 28 Positionnement Relatif
19/12/2013 29 Positionnement Absolu • Positionné relativement au premier élément parent qui a une autre position que la position statique • Si pas de parent trouvé alors le parent = <html> <!DOCTYPE html> <html> <head> <style> h2 { position:absolute; left:100px; top:150px; } </style> </head>
<body> <h2>This is a heading with an absolute position</h2> <p>With absolute positioning, an element can be placed anywhere on a page. The heading below is placed 100px from the left of the page and 150px from the top of the page.</p> </body>
![[Esr] Tp4 - HTML](https://imgv2-2-f.scribdassets.com/img/document/132104557/149x198/f342f9b174/1364145374?v=1)
