Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Les feuilles de style Réalisé par : Sara RHAZLANE Chaimaa MESSAOUDI PLAN • C’es

Les feuilles de style 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 • Conclusion 19/12/2013 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 Attributs des balises html Internal (HEAD) External <head> <title>titre de ma page</title> <style type="text/css"> body{background-color : blue;} </style> </head> <head> <title>titre de ma page</title> <link rel="stylesheet" type="text/css" href="style.css"/> </head> 19/12/2013 7 <body style=" background-color:red"></body> Déclaration des styles à différents endroits+ Ordre de propriété des ses endroits => une cascade de style 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;} Combination de selecteurs: h1, h2, h3, h4, h5, h6 { color: black; font-family: Georgia;} Mettre des commentaires dans le CSS: /* Commentaire ici */ 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 Façon de nommage : . + nom_de_la_classe Ne pas confondre les sélecteurs et les classes : Sélecteur  H3 {font-family: Arial} Classe  .Toto { font-weight: bold; font-color: #000080 } 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> </BODY></HTML> 19/12/2013 13 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> </DIV> </BODY></HTML> 19/12/2013 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 19/12/2013 17 STYLES DE POLICE font-family définit un nom de police ou une famille de police H3 {font-family: Arial} font-style définit le style de l'écriture normal ou italique ou oblique H3 {font-style: italic} font-size définit la taille de la police P {font-size: small} 19/12/2013 18 STYLES DE TEXTE text-align définit l'alignement du texte left ou center ou right H1 {text-align: center} text-decoration définit une décoration du texte, soit barré, clignotant, etc. H1{text-decoration: blink} color définit la couleur du texte H3 {color: red} Liste des propriétés 19/12/2013 19 ARRIERE PLANS background-color définit la couleur de l'arrière-plan couleur ou transparent H1 {background- color: #000000} background-image définit l'image de l'arrière-plan URL de l'image BODY {background- image: image.gif} background- attachment spécifie si l'image d'arrière-plan reste fixe avec les déplacements de l'écran scroll ou fixed BODY {background- image: image.gif; background- attachement: fixed} Les Marges 19/12/2013 20 Exemple: h1{ h1{ margin-top:10px; margin:10px; margin-right:10px; => background-color:cyan; margin-left:10px; color:black;} margin-bottom:10px; background-color: cyan; color: black;} 19/12/2013 21 LES LISTES list-style-type détermine le type de puces ou de numérotation OL {list-style-type: square} list-style-image permet de remplacer les puces par une image ul { list-style-image: url('sqpurple.gif'); } Les liens en CSS 19/12/2013 22 • Pour parler des liens en CSS, il faut définir la notion de pseudo-classe : Pseudo-classe = d’ajouter des effets spéciaux à quelques sélecteurs suite à une réaction à un événement par exemple. selector:pseudo-class {property:value;} Exemple: P:first-line { text-transform: uppercase } Les liens en CSS 19/12/2013 23 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 */ Les liens en CSS 19/12/2013 24 Exemple: a:link {background-color:gray;} Le positionnement des éléments 19/12/2013 25 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 Positionnement statique 19/12/2013 26 Positionnement par défaut Attention: ne prends pas en compte les vals de top, … Positionnement Fixe 19/12/2013 27 • 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> Positionnement Relatif 19/12/2013 28 • Positionnée relativement à sa position initiale <!DOCTYPE html> <html> <head> <style> h2.pos_left { position:relative; left:-20px; } h2.pos_right { position:relative; left:20px; } </style> </head> <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> Positionnement Relatif 19/12/2013 29 Positionnement Absolu 19/12/2013 30 • 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> </html> Positionnement Absolu 19/12/2013 31 CONCLUSION 19/12/2013 32 19/12/2013 33 MERCI uploads/Ingenierie_Lourd/ css-php 1 .pdf