Soumettre la recherche
Mettre en ligne
Le Langage CSS
•
17 j'aime
•
4,114 vues
Mohammed Amine Mostefai
Suivre
The CSS 3 Language
Lire moins
Lire la suite
Technologie
Signaler
Partager
Signaler
Partager
1 sur 122
Recommandé
Cours d'introduction aux HTML5 & CSS3
Cours d'introduction aux HTML5 & CSS3
Abel LIFAEFI MBULA
Cours JavaScript
Cours JavaScript
Olivier Le Goaër
Intégration Web HTML 5 & CSS 3
Intégration Web HTML 5 & CSS 3
Stephane PERES
Examen principal- php - correction
Examen principal- php - correction
Ines Ouaz
Cours HTML/CSS
Cours HTML/CSS
Axel Chalon
Initiation html css
Initiation html css
thamer belfkih
HTML 5 - intro - en francais
HTML 5 - intro - en francais
Vlad Posea
Initiation à Bootstrap
Initiation à Bootstrap
Abdoulaye Dieng
Recommandé
Cours d'introduction aux HTML5 & CSS3
Cours d'introduction aux HTML5 & CSS3
Abel LIFAEFI MBULA
Cours JavaScript
Cours JavaScript
Olivier Le Goaër
Intégration Web HTML 5 & CSS 3
Intégration Web HTML 5 & CSS 3
Stephane PERES
Examen principal- php - correction
Examen principal- php - correction
Ines Ouaz
Cours HTML/CSS
Cours HTML/CSS
Axel Chalon
Initiation html css
Initiation html css
thamer belfkih
HTML 5 - intro - en francais
HTML 5 - intro - en francais
Vlad Posea
Initiation à Bootstrap
Initiation à Bootstrap
Abdoulaye Dieng
CV Chef de Projets S.I
CV Chef de Projets S.I
Christophe Martimort
Html css
Html css
sloumaallagui1
Introduction au Framework Laravel
Introduction au Framework Laravel
Houcem Hedhly
Formation HTML pour Bac Informatique
Formation HTML pour Bac Informatique
Mohamed Anas Ben Othman
Formation html5 css3 java script
Formation html5 css3 java script
Arrow Group
Manuel des TP : Atelier Web 2
Manuel des TP : Atelier Web 2
Faycel Chaoua
Les règles de passage
Les règles de passage
marwa baich
exposé en HTML
exposé en HTML
Yaya Im
Tp java ee.pptx
Tp java ee.pptx
Eric Bourdet
Rapport de mini projet de programation web
Rapport de mini projet de programation web
MOHAMMED MOURADI
Fascicule de tp atelier développement web
Fascicule de tp atelier développement web
Houda TOUKABRI
Base de-donn-es-bac-si-95ae18
Base de-donn-es-bac-si-95ae18
Wael Ismail
Support du cours : Programmation Web 2
Support du cours : Programmation Web 2
Faycel Chaoua
Introduction à React JS
Introduction à React JS
Abdoulaye Dieng
Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5
Jose Augusto Cintra
Les bases de l'HTML / CSS
Les bases de l'HTML / CSS
Samuel Robert
TP Informatique 1 excel
TP Informatique 1 excel
Zhour Add
Hive ppt (1)
Hive ppt (1)
marwa baich
Introduction to Javascript
Introduction to Javascript
Seble Nigussie
HTML Introduction, HTML History, HTML Uses, HTML benifits
HTML Introduction, HTML History, HTML Uses, HTML benifits
Pro Guide
Chapitre 2_CSS_complet_Version1.pdf
Chapitre 2_CSS_complet_Version1.pdf
YassineZARIOUH
Chapitre 2_CSS_complet_Version1.pdf
Chapitre 2_CSS_complet_Version1.pdf
YassineZARIOUH
Contenu connexe
Tendances
CV Chef de Projets S.I
CV Chef de Projets S.I
Christophe Martimort
Html css
Html css
sloumaallagui1
Introduction au Framework Laravel
Introduction au Framework Laravel
Houcem Hedhly
Formation HTML pour Bac Informatique
Formation HTML pour Bac Informatique
Mohamed Anas Ben Othman
Formation html5 css3 java script
Formation html5 css3 java script
Arrow Group
Manuel des TP : Atelier Web 2
Manuel des TP : Atelier Web 2
Faycel Chaoua
Les règles de passage
Les règles de passage
marwa baich
exposé en HTML
exposé en HTML
Yaya Im
Tp java ee.pptx
Tp java ee.pptx
Eric Bourdet
Rapport de mini projet de programation web
Rapport de mini projet de programation web
MOHAMMED MOURADI
Fascicule de tp atelier développement web
Fascicule de tp atelier développement web
Houda TOUKABRI
Base de-donn-es-bac-si-95ae18
Base de-donn-es-bac-si-95ae18
Wael Ismail
Support du cours : Programmation Web 2
Support du cours : Programmation Web 2
Faycel Chaoua
Introduction à React JS
Introduction à React JS
Abdoulaye Dieng
Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5
Jose Augusto Cintra
Les bases de l'HTML / CSS
Les bases de l'HTML / CSS
Samuel Robert
TP Informatique 1 excel
TP Informatique 1 excel
Zhour Add
Hive ppt (1)
Hive ppt (1)
marwa baich
Introduction to Javascript
Introduction to Javascript
Seble Nigussie
HTML Introduction, HTML History, HTML Uses, HTML benifits
HTML Introduction, HTML History, HTML Uses, HTML benifits
Pro Guide
Tendances
(20)
CV Chef de Projets S.I
CV Chef de Projets S.I
Html css
Html css
Introduction au Framework Laravel
Introduction au Framework Laravel
Formation HTML pour Bac Informatique
Formation HTML pour Bac Informatique
Formation html5 css3 java script
Formation html5 css3 java script
Manuel des TP : Atelier Web 2
Manuel des TP : Atelier Web 2
Les règles de passage
Les règles de passage
exposé en HTML
exposé en HTML
Tp java ee.pptx
Tp java ee.pptx
Rapport de mini projet de programation web
Rapport de mini projet de programation web
Fascicule de tp atelier développement web
Fascicule de tp atelier développement web
Base de-donn-es-bac-si-95ae18
Base de-donn-es-bac-si-95ae18
Support du cours : Programmation Web 2
Support du cours : Programmation Web 2
Introduction à React JS
Introduction à React JS
Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5
Les bases de l'HTML / CSS
Les bases de l'HTML / CSS
TP Informatique 1 excel
TP Informatique 1 excel
Hive ppt (1)
Hive ppt (1)
Introduction to Javascript
Introduction to Javascript
HTML Introduction, HTML History, HTML Uses, HTML benifits
HTML Introduction, HTML History, HTML Uses, HTML benifits
Similaire à Le Langage CSS
Chapitre 2_CSS_complet_Version1.pdf
Chapitre 2_CSS_complet_Version1.pdf
YassineZARIOUH
Chapitre 2_CSS_complet_Version1.pdf
Chapitre 2_CSS_complet_Version1.pdf
YassineZARIOUH
Langage HTML - Fondamentaux et ateliers
Langage HTML - Fondamentaux et ateliers
Frédéric Simonet
Chapitre 3 : initiation CSS
Chapitre 3 : initiation CSS
Manel Ben Sassi
seance3-1 CSS.ppt
seance3-1 CSS.ppt
AmineReal
Programmation web1partie3
Programmation web1partie3
Annabi Gihed
Css
Css
krymo
Langage CSS
Langage CSS
El Habib NFAOUI
Css présentation Pour des sites web dynamique
Css présentation Pour des sites web dynamique
DanielMohamed4
Fondamentaux des CMS
Fondamentaux des CMS
Frédéric Simonet
Cours_1 - HTML5 et JS.ppt
Cours_1 - HTML5 et JS.ppt
RihabBENLAMINE
Cascading Style Sheet et CSS en sigle.pdf
Cascading Style Sheet et CSS en sigle.pdf
Sweetman3
Drupal 7 - Fondamentaux et ateliers
Drupal 7 - Fondamentaux et ateliers
Frédéric Simonet
Css
Css
mohamed el haddad
Drupal en bibliothèque (2009)
Drupal en bibliothèque (2009)
Nicolas Morin
BDW-ProgWEB_P2.pdf
BDW-ProgWEB_P2.pdf
RihabBENLAMINE
Support de cours technologie et application m.youssfi
Support de cours technologie et application m.youssfi
ENSET, Université Hassan II Casablanca
CSS 3
CSS 3
Thomas Bodin
"Réussir son projet web... ou pas !" - Webschool Tours, 09/2015
"Réussir son projet web... ou pas !" - Webschool Tours, 09/2015
webschooltours
Cours html5
Cours html5
Abdelmonem NAAMANE
Similaire à Le Langage CSS
(20)
Chapitre 2_CSS_complet_Version1.pdf
Chapitre 2_CSS_complet_Version1.pdf
Chapitre 2_CSS_complet_Version1.pdf
Chapitre 2_CSS_complet_Version1.pdf
Langage HTML - Fondamentaux et ateliers
Langage HTML - Fondamentaux et ateliers
Chapitre 3 : initiation CSS
Chapitre 3 : initiation CSS
seance3-1 CSS.ppt
seance3-1 CSS.ppt
Programmation web1partie3
Programmation web1partie3
Css
Css
Langage CSS
Langage CSS
Css présentation Pour des sites web dynamique
Css présentation Pour des sites web dynamique
Fondamentaux des CMS
Fondamentaux des CMS
Cours_1 - HTML5 et JS.ppt
Cours_1 - HTML5 et JS.ppt
Cascading Style Sheet et CSS en sigle.pdf
Cascading Style Sheet et CSS en sigle.pdf
Drupal 7 - Fondamentaux et ateliers
Drupal 7 - Fondamentaux et ateliers
Css
Css
Drupal en bibliothèque (2009)
Drupal en bibliothèque (2009)
BDW-ProgWEB_P2.pdf
BDW-ProgWEB_P2.pdf
Support de cours technologie et application m.youssfi
Support de cours technologie et application m.youssfi
CSS 3
CSS 3
"Réussir son projet web... ou pas !" - Webschool Tours, 09/2015
"Réussir son projet web... ou pas !" - Webschool Tours, 09/2015
Cours html5
Cours html5
Plus de Mohammed Amine Mostefai
Utilisation de Sharepoint (Collaboration)
Utilisation de Sharepoint (Collaboration)
Mohammed Amine Mostefai
Utilisation de Sharepoint 2013 - Personnalisation
Utilisation de Sharepoint 2013 - Personnalisation
Mohammed Amine Mostefai
Utilisation Sharepoint (Listes)
Utilisation Sharepoint (Listes)
Mohammed Amine Mostefai
Utilisation de Sharepoint - Gestion de Documents
Utilisation de Sharepoint - Gestion de Documents
Mohammed Amine Mostefai
Utilisation de Sharepoiunt - Introduction
Utilisation de Sharepoiunt - Introduction
Mohammed Amine Mostefai
Pratiques agiles
Pratiques agiles
Mohammed Amine Mostefai
Introduction à Scrum
Introduction à Scrum
Mohammed Amine Mostefai
Méthodes Agiles - La Méthode XP
Méthodes Agiles - La Méthode XP
Mohammed Amine Mostefai
Le Manifeste Agile
Le Manifeste Agile
Mohammed Amine Mostefai
Méthodes Agiles - Généralités
Méthodes Agiles - Généralités
Mohammed Amine Mostefai
Introduction aux technologies mobiles
Introduction aux technologies mobiles
Mohammed Amine Mostefai
Workflow Foundation - Cours 5
Workflow Foundation - Cours 5
Mohammed Amine Mostefai
Workflow Foundation Module 4
Workflow Foundation Module 4
Mohammed Amine Mostefai
Présentation cloud journée azure
Présentation cloud journée azure
Mohammed Amine Mostefai
Wf module3
Wf module3
Mohammed Amine Mostefai
Microsoft Workflow Foundation - Cours 2
Microsoft Workflow Foundation - Cours 2
Mohammed Amine Mostefai
Introduction to Workflow Foundation
Introduction to Workflow Foundation
Mohammed Amine Mostefai
Sécurisation des applications ASP.NET
Sécurisation des applications ASP.NET
Mohammed Amine Mostefai
Présentation sharepoint 2013
Présentation sharepoint 2013
Mohammed Amine Mostefai
Module 8 programmation avancée d'asp.net
Module 8 programmation avancée d'asp.net
Mohammed Amine Mostefai
Plus de Mohammed Amine Mostefai
(20)
Utilisation de Sharepoint (Collaboration)
Utilisation de Sharepoint (Collaboration)
Utilisation de Sharepoint 2013 - Personnalisation
Utilisation de Sharepoint 2013 - Personnalisation
Utilisation Sharepoint (Listes)
Utilisation Sharepoint (Listes)
Utilisation de Sharepoint - Gestion de Documents
Utilisation de Sharepoint - Gestion de Documents
Utilisation de Sharepoiunt - Introduction
Utilisation de Sharepoiunt - Introduction
Pratiques agiles
Pratiques agiles
Introduction à Scrum
Introduction à Scrum
Méthodes Agiles - La Méthode XP
Méthodes Agiles - La Méthode XP
Le Manifeste Agile
Le Manifeste Agile
Méthodes Agiles - Généralités
Méthodes Agiles - Généralités
Introduction aux technologies mobiles
Introduction aux technologies mobiles
Workflow Foundation - Cours 5
Workflow Foundation - Cours 5
Workflow Foundation Module 4
Workflow Foundation Module 4
Présentation cloud journée azure
Présentation cloud journée azure
Wf module3
Wf module3
Microsoft Workflow Foundation - Cours 2
Microsoft Workflow Foundation - Cours 2
Introduction to Workflow Foundation
Introduction to Workflow Foundation
Sécurisation des applications ASP.NET
Sécurisation des applications ASP.NET
Présentation sharepoint 2013
Présentation sharepoint 2013
Module 8 programmation avancée d'asp.net
Module 8 programmation avancée d'asp.net
Le Langage CSS
1.
Technologies et Développement Web Cours
3 – Les Feuilles de Styles (CSS) Copyright © 2013, Mostefai Mohammed Amine
2.
Technologies et Développement
Web Objectifs du module 2 Faire un tour d’horizon du langage CSS, ses propriétés et ses règles Appliquer CSS sur des pages web Cours 3 – Les Feuilles de Styles (CSS) Copyright © 2013, Mostefai Mohammed Amine
3.
Technologies et Développement
Web Plan du module 3 Introduction Images Sélecteurs CSS Transitions et Transformations Couleur Animations Texte Boîtes Disposition Cours 3 – Les Feuilles de Styles (CSS) Copyright © 2013, Mostefai Mohammed Amine
4.
4 Cours 3 –
Les Feuilles de Styles (CSS) Technologies et Développement Web Section 1 : Introduction Copyright © 2013, Mostefai Mohammed Amine
5.
Technologies et Développement
Web Qu’est-ce que le CSS ? Un langage de règles permettant d’affecter un style à des éléments Ce style peut être une couleur, une police de caractères, une position, …etc. Les règles peuvent être déclarées à l’intérieur du fichier HTML ou à l’extérieur en utilisant un fichier CSS séparé Section 1 : Introduction Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 5
6.
Technologies et Développement
Web Comment ça fonctionne ? 6 Le comportement du style diffère selon l’affichage de l’élément est en mode bloc (p, h1,…) ou en mode en ligne (span, b,…) Demo : inline-block.html Section 1 : Introduction Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) Chaque élément est dans une « boîte invisible »
7.
Technologies et Développement
Web Syntaxe 7 Déclaration p { border : 1px solid red; font-family :Arial; } Section 1 : Introduction Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) Sélecteur
8.
Technologies et Développement
Web Syntaxe - Suite 8 Une déclaration peut s’appliquer à plusieurs sélecteurs s’ils sont séparés par des virgules Les déclarations indiquent les styles à appliquer aux éléments appartenant au sélecteur Section 1 : Introduction Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) Le sélecteur indique à quels éléments appliquer le style
9.
Technologies et Développement
Web Syntaxe, suite 9 Propriétés Courrs 3 - Les Feuilles de Styles (CSS) Valeurs h1, h2 { margin: 5px; font-family :Arial; color :Yellow; } Section 1 : Introduction Copyright © 2013, Mostefai Mohammed Amine
10.
Technologies et Développement
Web Syntaxe - Suite 10 Les valeurs concernent quelle valeur affecter à un aspect (par exemple, bleu à couleur) Exemple : voir syntaxe.html Section 1 : Introduction Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) Les propriétés concernent l’aspect à styler : taille, couleur, police,…
11.
Technologies et Développement
Web CSS intégré dans le fichier HTML 11 Le CSS peut être intégré dans le HTML en utilisant la balise « style » Courrs 3 - Les Feuilles de Styles (CSS) La balise a un attribut « type » qui dit être à « text/css » <style type="text/css"> p { font-family: 'Trebuchet MS‘; margin-bottom: 5px; } h1, h2 { color: blue; } </style> Section 1 : Introduction Copyright © 2013, Mostefai Mohammed Amine
12.
Technologies et Développement
Web CSS externe 12 La feuille de style peut être dans un fichier externe dont l’extension est « css » Courrs 3 - Les Feuilles de Styles (CSS) Le lien entre le fichier HTML se fait à travers la balise link L’attribut « href » spécifie l’URL du fichier CSS L’attribut « type » doit être à « text/css » L’attribut « rel » doit être à « stylesheet » Section 1 : Introduction Copyright © 2013, Mostefai Mohammed Amine
13.
Technologies et Développement
Web La balise link 13 <link href="external.css" rel="stylesheet" type="text/css" /> Section 1 : Introduction Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) Voir « external.html »
14.
Technologies et Développement
Web CSS externe 14 Il vaut mieux mettre les feuilles de style dans des fichiers externes pour faciliter la maintenance Section 1 : Introduction Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) Un fichier HTML peut référencer plusieurs fichiers CSS
15.
Technologies et Développement
Web Exercice 1 Intégrez une feuille de style externe et un style interne à votre page personnelle. Section 1 : Introduction Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 15
16.
16 Cours 3 –
Les Feuilles de Styles (CSS) Technologies et Développement Web Section 2 : Sélecteurs CSS Copyright © 2013, Mostefai Mohammed Amine
17.
Technologies et Développement
Web Introduction Les sélecteurs permettent de sélectionner des éléments ayant un critère particulier : par exemple tous les éléments, appartenant à la même balise, même classe,… Les sélecteurs CSS sont sensibles à la casse Voir démonstrations dans selctors,html et advancedselectors.html Section 2 : Sélecteurs CSS Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 17
18.
Technologies et Développement
Web Sélecteurs CSS 18 Description Exemple Sélecteur universel Sélectionne tous les éléments. Utilise le symbole « * » * {} : tous les éléments Sélecteur de type Concerne tous les éléments appartenant à la même balise h2{} : tous les « h2 » p, span{} tous les paragraphes et les spans Sélecteurs de classe Concerne tous les éléments appartenant à une certaine classe (identifiés par l’attribut « classe ». Un élément HTML peut appartenir à plusieurs classes. span.nuance : tous les span dont la classe est « nuance » .couleurVerte{} : n’impote quel élément ayant la classe « couleurVerte » Sélecteur d’id Concerne un seul élément identifié par son attribut « id » span#spanId {} : le span qui a l’attribut id à « spanId » #unElement {} : n’importe quel élément ayant comme id « unElement » Section 2 : Sélecteurs CSS Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) Sélecteur
19.
Technologies et Développement
Web Sélecteurs CSS - Suite 19 Description Exemple Descendant direct Les éléments qui sont descendants directs d’un autre élément. Le symbole « > » est utilisé. La fonction nth-child spécifie quel élément choisir. div > p : paragraphes descendants directs d’une div div->a:nth-child(2) : le deuxième lien descendant direct d’un div div->a:nth-child(2n+1) : tous les 2nème + 1 descendants directs : 1er, 3ème, 5ème,…etc Descendants indirects Tous les éléments qui sont des enfants (pas forcément directs) d’autres éléments div span.spanInterne : les span avec la classe « spanInterne » qui sont des descendants d’un div Frère direct Un éléments adjacent à un autre élément et qui sont au même niveau (symbole +) h2+p : le paragraphe qui vient directement après un h2 Frère indirect Les éléments se trouvant au même niveau qu’un autre élément (symbole ~) li~li : un élément adjacent à un autre élément de liste. Exclut le premier. Section 2 : Sélecteurs CSS Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) Sélecteur
20.
Technologies et Développement
Web Sélecteurs avancés 20 Description :link Liens pas encore visités :visited Lien visité :hover Élément qui est survolé par la souris :focus Élément qui détient le focus input:focus : contrôle qui reçoit le focus [attribut=valeur] Sélectionne des élément ayant des attributs avec une certaine valeur a[target=_blank] {} : sélectionne les liens qui ouvrent dans une nouvelle fenêtre [attribut^=valeur] Sélectionne les éléments ayant un attribut commençant par une valeur a[href^=http] : sélectionne les liens ayant une URL commençant par HTTP [attribut*=valeur] Sélectionne les éléments ayant un attribut contenant la valeur a[href*=ynt] : sélectionne des liens qui contiennent « ynt » dans l’URL :only-child Sélectionne l’élément qui est l’unique descendant d’un autre élément div p:only-child : sélectionne le paragraphe unique à l’intérieur d’un div Section 2 : Sélecteurs CSS Exemple Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) Sélecteur
21.
Technologies et Développement
Web Sélecteurs avancés 21 Description Exemple nth-child(n) Nème descendant n-child(2) : deuxième descendant n-child(2n+1), tous les descendants impairs :first-child Premier enfant :first-line Première ligne d’un paragraphe :first-letter Première lettre d’un paragraphe :before Ajoute du contenu avant l’élément :after Ajoute du contenu après l’élément not Sélectionne les éléments qui ne sont pas un élément donné Section 2 : Sélecteurs CSS p > not(a) tous les éléments sauf les liens Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) Sélecteur
22.
Technologies et Développement
Web Cascade Si plusieurs règles s’appliquent un élément, les mécanismes suivants sont appliqués (voir cascade.html) Si deux règles sont identiques, la dernière est prise Si une règle est plus spécifique que l’autre, elle est prise sur l’autre. h1 est spécifique sur *. span#id est spcifique à span. Span,maClasse est spécifique à .maClasse. Si on veut prioriser une règle, on la marque avec le mot clé « !important » Section 2 : Sélecteurs CSS Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 22
23.
Technologies et Développement
Web 23 Courrs 3 - Les Feuilles de Styles (CSS) Exercice 1 Appliquez les sélecteurs sur votre page personnelle. Section 1 : Introduction Copyright © 2013, Mostefai Mohammed Amine
24.
24 Cours 3 –
Les Feuilles de Styles (CSS) Technologies et Développement Web Section 3 : Les Couleurs Copyright © 2013, Mostefai Mohammed Amine
25.
Technologies et Développement
Web Qu’est-ce qu’une couleur ? 25 La propriété « color » définit la couleur de texte La propriété « background-color » définit la couleur de fond La propriété « border-color » définit la couleur de bordure Pour choisir une couleur : http://www.w3schools.com/tags/ref_colorpicker.asp Section 3 : Les Couleurs Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) Un mix entre trois valeurs : rouge, vert et bleu
26.
Technologies et Développement
Web Valeur des couleurs 26 On peut affecter une couleur par nom, par exemple « red » ou « darkcyan ». CSS prend en charge 147 noms de couleurs. Par valeur hexadécimale de RGB. Par exemple #20977a; Par valeur hexadécimale raccourcie : #f60 qui est équivalent à #ff6600. Par la fonction rgb qui demande trois paramètres : rouge, vert et bleu. Cette fonction demande trois paramètres allant de 0 à 255 Section 3 : Les Couleurs Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) Voir « couleurs.html »,
27.
Technologies et Développement
Web Couleurs standard - Exemples 27 div#byName > span:nth-child(1) { } Courrs 3 - Les Feuilles de Styles (CSS) border-color: red; div#byHex > span:nth-child(1) { background-color: #982222;} div#byShortHex > span:nth-child(1) { border-color: #bb1; } div#byRGB > span:nth-child(1) { color: rgb(11,11,11); } Section 3 : Les Couleurs Copyright © 2013, Mostefai Mohammed Amine
28.
Technologies et Développement
Web Couleurs CSS3 - HSL La fonction hsl (hue + saturation + lightness) définit une couleur à partir de la teinte, saturation et brillance La teinte est une valeur de 0 à 360, la roue de couleur. 120 correspond à vert et 240 à bleu. La saturation est une valeur de 0 à 100%. 0% correspond à un niveau de gris. 100% correspond à la couleur d’origine. La luminosité est une valeur de 0 à 100%. 0% correspond à noir, 100% correspond à blanc. Section 3 : Les Couleurs Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 28
29.
Technologies et Développement
Web Couleurs HSL - Exemples 29 div#byHSL > span:nth-child(1) { Courrs 3 - Les Feuilles de Styles (CSS) background-color: hsl(120,30%,50%); color: hsl(0,100%,50%); border-color: hsl(0,100%,25%); } Section 3 : Les Couleurs Copyright © 2013, Mostefai Mohammed Amine
30.
Technologies et Développement
Web Couleurs CSS3 - Transparence En plus des fonctions rgb et hsl, CSS3 définit deux nouvelles fonctions prenant un quatrième paramètres (alpha) qui sont rgba et hsla Alpha peut être entre 0 et 1. 0 pour complètement transparent et 1 pour complètement opaque. L’opacité peut être aussi définie en utilisant la propriété CSS3 « opacity » Section 3 : Les Couleurs Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 30
31.
Technologies et Développement
Web Transparence : Exemples 31 Section 3 : Les Couleurs Courrs 3 - Les Feuilles de Styles (CSS) div#byRGBA > span:nth-child(2) { background-color: rgba(0,0,0,0.5); } div#byHSLA > span:nth-child(2) { background-color: hsla(250,75%,50%,0.5); } div#byOpacity > span:nth-child(2) { background-color: darkolivegreen; opacity : 0.5; } Copyright © 2013, Mostefai Mohammed Amine
32.
Technologies et Développement
Web 32 Courrs 3 - Les Feuilles de Styles (CSS) Couleurs : démonstration Section 3 : Les Couleurs Copyright © 2013, Mostefai Mohammed Amine
33.
Technologies et Développement
Web Couleurs : démonstration En utilisant les différentes fonctions de couleur, faites vivre votre site personnel en utilisant les couleurs Section 3 : Les Couleurs Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 33
34.
34 Cours 3 –
Les Feuilles de Styles (CSS) Technologies et Développement Web Section 4 : Le Texte Copyright © 2013, Mostefai Mohammed Amine
35.
Technologies et Développement
Web Polices de caractère - Typologie Une police de caractère serif est une police avec des traits additionnels sur les caractères. Ces polices sont appréciées en lectures car très lisibles. Les petits traits supplémentaires sont appelés « serifs » Les polices sans-serif sont des polices sans les traits supplémentaires. Elles sont très claires sur un dispositif comme l’écran. Les polices monospace sont des polices où tous les caractères ont la même largeur. Une des utilisation des polices monospace est le code source Section 4 : Le Texte Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 35
36.
Technologies et Développement
Web Polices de caractère - Typologie Une police courbée (cursive) est une police qui ressemble à l’écriture de main Une police fantaisiste (fantasy) est une police ayant un caractère décoratif Section 4 : Le Texte Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 36
37.
Technologies et Développement
Web Polices de caractère - Typologie 37 Courrs 3 - Les Feuilles de Styles (CSS) Police serif cambria Police sans serif Arial Police mono-space consolas Section 4 : Le Texte Copyright © 2013, Mostefai Mohammed Amine
38.
Technologies et Développement
Web Polices de caractère - Typologie Police cursive Monotype Corsiva Police fantaisiste Haettenschweiler Section 4 : Le Texte Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 38
39.
Technologies et Développement
Web 39 Lorsqu’une page web utilise un texte écrit avec une police données, il faut que cette police soit installé dans le PC du navigateur pour qu’elle soit correctement affichée Certaines polices standard sont installés sur la plupart des ordinateurs / tablettes (times, georgia, times new roman, arial, verdana, helvetica,…) Les navigateurs doivent supporter au moins une police générique par groupe (serif, sans serif, …) CSS3 offre un moyen de contourner cette limitation Section 4 : Le Texte Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) Utilisation des polices de caractères dans les pages web
40.
Technologies et Développement
Web 40 La propriété font-family spécifie la police de caractères. La police doit être installée sur le poste du navigateur CSS3 a introduit la règle font-face qui permet de télécharger une police si celle-ci n’est pas installé sur le poste du navigateur Section 4 : Le Texte Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) Application d’une police dans une page
41.
Technologies et Développement
Web Font-Family 41 Permet de spécifier plusieurs polices séparées par des virgules. Si une police n’existe pas, elle est remplacée par la suivante. Peut inclure une police générique (par exemple serif). Cherche la police par défaut correspondante à cette police. Voir la démonstration « fontfamily.html » Section 4 : Le Texte Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) Spécifie la police de caractères à utiliser dans une page
42.
Technologies et Développement
Web Font-family Syntaxe 42 ul li:nth-child(1) { } ul li:nth-child(2) { font-family: Tahoma, Geneva, Verdana, sans-serif; } ul li:nth-child(3) { font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; } Section 4 : Le Texte Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) font-family: Verdana;
43.
Technologies et Développement
Web 43 Courrs 3 - Les Feuilles de Styles (CSS) Font-family Section 4 : Le Texte Copyright © 2013, Mostefai Mohammed Amine
44.
Technologies et Développement
Web Taille du texte La taille du texte est spécifiée en utilisant font-size. La taille est faite en pixels. L’affichage du texte dépend de la résolution. Moins la résolution est grande, plus les caractères sont grands. La taille du texte peut être spécifiée en pourcentage (%) par rapport au parent. La taille par défaut dans les navigateurs est 100%. La taille des caractères peut être spécifiée en points pour de meilleurs résultats sur des supports imprimés. Section 4 : Le Texte Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 44
45.
Technologies et Développement
Web Taille du texte La taille peut être spécifiée en (em) où « em » correspond à la taille en cours de la police sur le navigateur. Par défaut 1em équivaut à 16px. 1 em est équivalent à la largeur de la lettre « m » La taille peut être spécifiée en utilisant les alias : « xx-small », « x-small », « small », « medium », « x-large », « xx-large », « smaller » et « larger » L’alias inherit permet d’hériter du parent Démonstration « fontsize.html » Section 4 : Le Texte Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 45
46.
Technologies et Développement
Web Font-size Syntaxe 46 ul li:nth-child(2) { font-size: 14px; Courrs 3 - Les Feuilles de Styles (CSS) } ul li:nth-child(3) { font-size: 14pt; } ul li:nth-child(4) { font-size: 150%; } ul li:nth-child(5) { font-size: 2em; } Section 4 : Le Texte Copyright © 2013, Mostefai Mohammed Amine
47.
Technologies et Développement
Web 47 Courrs 3 - Les Feuilles de Styles (CSS) Font-size Section 4 : Le Texte Copyright © 2013, Mostefai Mohammed Amine
48.
Technologies et Développement
Web La règle @font-face (CSS3) La balise @font-face permet de télécharger des polices qui ne sont pas installées sur le poste L’attribut src spécifie l’URL de la police de caractères L’attribut format définit son format L’attribut font-family définit son nom Une fois une police spécifiée, elle peut être utilisée comme les autres polices installées Section 4 : Le Texte Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 48
49.
Technologies et Développement
Web Formats de polices de caractères 49 Le format « opentype embedded » (extension eot) est proposé par Microsoft et pris en charge par ses navigateurs Le format « web open format » (extension woff » est un format soutenu par Microsoft et la fondation Mozilla. Il est pris en charge par Chrome ainsi que les versions récentes de IE et Firefox. Le format truetype (extension ttf) est promu par Apple et est compatible avec Chrome et Safari Section 4 : Le Texte Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) Il existe plusieurs formats de police
50.
Technologies et Développement
Web Formats de polices de caractères - suite 50 Certes polices sont soumises à des licences et ne peuvent être utilisées sans payer des commissions Certains sites comme « http://www.fontsquirrel.com/ » proposent des polices gratuites sous tous les formats Le format svg des polices est associé au format des images vectorielles. Il a été conçu pour le web et les applications mobiles. Voir démonstration « fontface.html » Section 4 : Le Texte Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) Le format « opentype format » (extension otf) est une extension vectorielle de « trutype » et a été proposé par Microsoft
51.
Technologies et Développement
Web @font-face syntaxe 51 font-family: 'blackjack'; src: url('Fonts/black_jack-webfont.woff') format('woff'), url('Fonts/black_jack.ttf') format('truetype'), url('Fonts/black_jack-webfont.eot') format('opentype'); font-weight: normal; font-style: normal; } Section 4 : Le Texte Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) @font-face {
52.
Technologies et Développement
Web 52 Courrs 3 - Les Feuilles de Styles (CSS) @font-face Section 4 : Le Texte Copyright © 2013, Mostefai Mohammed Amine
53.
Technologies et Développement
Web Autres propriétés de texte (textcss.html) Description font-weight Permet de créer un texte en gras. (bold, bolder ou normal) sont des valeurs possibles. font-style Style de la police, par exemple italique, oblique ou normal text-transform Transforme en majuscule (uppercase), minuscule (lowercase) ou première lettre majuscule (capitalize) text-decoration Souligné (underline), surligné (overline) ou avec tiret (linethrough) ou supprimer la ligne (none) line-height Hauteur de la ligne. Idéal pour centrer verticalement le texte. letter-spacing Espacement entre les lettres word-spacing Espacement entre les mots Section 4 : Le Texte Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) Règle 53
54.
Technologies et Développement
Web Autres propriétés de texte (textcss.html) - suite Description text-align Alignement du texte. Left, right, center ou justify vertical-align Alignement vertical des éléments en ligne text-indent Indentation du texte :first-letter Première lettre :first-line Première ligne Section 4 : Le Texte Courrs 3 - Les Feuilles de Styles (CSS) Règle 54 Copyright © 2013, Mostefai Mohammed Amine
55.
Technologies et Développement
Web 55 Courrs 3 - Les Feuilles de Styles (CSS) Autres propriétés texte Section 4 : Le Texte Copyright © 2013, Mostefai Mohammed Amine
56.
Technologies et Développement
Web Text-Shadow (css3) 56 Syntaxe : texte-shadow dh dv couleur; dh : décalage horizontal, dv : décalage vertical, couleur : couleur de l’ombre Démonstration : text-shadow.html Section 4 : Le Texte Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) Permet un effet d’ombre sur le texte
57.
Technologies et Développement
Web Exercice En utilisant les différentes propriétés de texte, restylez votre page personnelle. Section 4 : Le Texte Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 57
58.
Technologies et Développement
Web Cours 3 – Les Feuilles de Styles (CSS) 58 Section 5 : Boîtes, Listes et Tableaux Copyright © 2013, Mostefai Mohammed Amine
59.
Technologies et Développement
Web Taille des éléments Par défaut, un conteneur change sa taille pour s’adapter à son contenu Pour fixer la taille d’un élément, il faut affecter les propriétés width (largeur) et height (hauteur) Les tailles peuvent être fixées en pixel, em ou pourcentage Pour définir des limites de redimensionnement : min-height, minwidth, max-height, max-width Section 5 : Boîtes, Listes et Tableaux Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 59
60.
Technologies et Développement
Web Contrôler les dépassements Lorsque les tailles sont définies, il y a un risque que le contenu d’un élément dépasse sa taille La propriété « overfow » contrôle ce dépassement La valeur « hidden » permet de masquer les dépassements La valeur « scroll » affiche des barres de défilements Voir « WidthHeight.html » Section 5 : Boîtes, Listes et Tableaux Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 60
61.
Technologies et Développement
Web Bordures et Marges 61 Marge Extérieure (Margin) Courrs 3 - Les Feuilles de Styles (CSS) Bordure (Border) Marge Intérieure (Padding) Section 5 : Boîtes, Listes et Tableaux Copyright © 2013, Mostefai Mohammed Amine
62.
Technologies et Développement
Web Bordures et Marges Un élément (boîte) a la largeur et le placement contrôlés par les propriétés « border », « margin » et « padding » Section 5 : Boîtes, Listes et Tableaux Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 62
63.
Technologies et Développement
Web Bordures 63 Description border-width Spécifie la largeur de la bordure. Cette largeur peut être en pixels ou en alias (thin, medium ou thick). CSS permet aussi de spécifier des largeurs différentes aux quatre bordures en utilisant border-top-width, border-right-width border-bottom-width et border-leftwidth. Des raccourcis peuvent être utilisés : border-width : haut droite bas gauche. border-style Contrôle l’apparence de la bordure. Plusieurs styles sont possibles : solid (continu), dotted (pointillés), dashed, insert, ridge, none. border-color Spécifie la couleur de la bordure. Des couleurs différentes peuvent être spécifiées pour les quatre côtés. Section 5 : Boîtes, Listes et Tableaux Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) Règle
64.
Technologies et Développement
Web Bordure raccourci 64 div p:nth-child(3) { Courrs 3 - Les Feuilles de Styles (CSS) border : 5px solid blue; } Section 5 : Boîtes, Listes et Tableaux Copyright © 2013, Mostefai Mohammed Amine
65.
Technologies et Développement
Web Marges 65 Les marges intérieures sont définies avec la propriété « padding » Les marges extérieures sont définies avec la propriété « margin » Les côtés peuvent avoir des marges différentes La formule raccourcie peut être utilisée Une marge « auto » permet de centrer horizontalement un élément à condition qu’il ait une largeur Voir « BorderMaginPadding.html » Section 5 : Boîtes, Listes et Tableaux Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) Les marges sont exprimées en pixel ou en pourcentage
66.
Technologies et Développement
Web Affichage des éléments 66 La valeur « collapse » de « visibility » s’applique aux tableaux et aux colonnes et permet de cacher une ligne ou une colonne sans affecter la disposition du tableau Un élément peut aussi être caché en utilisant la propriété « display » avec la valeur « none ». La différence avec visibility est que la valeur « hidden » laisse l’espace de l’élément réservé tandis que la valeur « none » le cache et ne réserve pas sans espace. Voir « DisplayVisibility.html » Section 5 : Boîtes, Listes et Tableaux Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) La propriété « visibility » permet d’afficher ou de cacher un élément. Elle peut avoir les valeur « visible » ou « hidden ».
67.
Technologies et Développement
Web Propriété display 67 Description none L’élément ne sera pas affiché block L’élément sera affiché en mode bloc Inline L’élément sera affiché en mode en ligne List-item Permet d’afficher les éléments sous forme de liste. table,table-column, tablerow et table-cell Affiche l’élément sous forme de tableau, ligne, colonne ou cellule Voir « Display.html » Inline-block Section 5 : Boîtes, Listes et Tableaux Combine en ligne et bloc Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) Valeur
68.
Technologies et Développement
Web Bordures de type image (CSS3) CSS3 permet de définir de nouvelles bordures L’image spécifiée est découpée en neuf (09) portions qui sont utilisées pour les lignes et les coins. La propriété « border-image-source » spécifie l’URL de l’image à utiliser comme bordure. Les propriété « border-image-slice » et « border-image-width » déterminent comment découper cette image. La propriété « border-image-stretch » détermine comment dessiner une bordure. « stretch » ajuste l’image à la taille, « repeat » répète l’image et « round » répète avec ajustement. Section 5 : Boîtes, Listes et Tableaux Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 68
69.
Technologies et Développement
Web Bordures de type image (CSS3), Syntaxe 69 border-image: url(Images/border.png) 30 30 stretch; Section 5 : Boîtes, Listes et Tableaux Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) border-image: url(Images/border.png) 30 30 round;
70.
Technologies et Développement
Web Ombre Portée (box-shadow) 70 La règle ajoutant l’ombre est « box-shadow » La syntaxe est comme suit : Box-shadow: d-horizontal d-vertical flou diffusion couleur; Section 5 : Boîtes, Listes et Tableaux Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) Permet d’ajouter une ombre à une boîte
71.
Technologies et Développement
Web Ombre Portée (box-shadow), Suite 71 Description d-horizontal Décalage horizontal, les valeurs négatives sont acceptées d-vertical Décalage vertical, les valeurs négatives sont acceptées flou Paramètre optionnel, le fou à apporter sur l’ombre diffusion Paramètre optionnel, la diffusion de l’ombre Section 5 : Boîtes, Listes et Tableaux Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) Valeur
72.
Technologies et Développement
Web Coins arrondis (CSS 3) 72 La propriété « border-radius » permet d’arrondir avec une valeur égale à tous les coins ou des valeurs différentes border-radius: 15px; border-radius: 15px 20px 35px 10px; Section 5 : Boîtes, Listes et Tableaux Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) CSS3 permet d’arrondir les coins d’une boîte
73.
Technologies et Développement
Web Démonstration 73 Courrs 3 - Les Feuilles de Styles (CSS) Démonstrations dans « NewBorders.html » Section 5 : Boîtes, Listes et Tableaux Copyright © 2013, Mostefai Mohammed Amine
74.
Technologies et Développement
Web Style de liste 74 Description list-style-type Permet de définir le type alloué aux éléments de liste. Pour les listes non numérotées, la valeur peut être « circle », « square » ou « disc » par exemple. Pour les listes numérotées, les valeurs peuvent être « decimal », « decimal-leading-zero », « loweralpha », « upper-alpha », « lower-roman » ou « upper-roman ». La valeur « none » désactive la numérotation. list-style-image Permet de spécifier une image pour les éléments. list-style-position Spécifie si la puce ou le numéro est à l’intérieur ou à l’extérieur de l’élément list-style Raccourci des autres règles concernant les liste Section 5 : Boîtes, Listes et Tableaux Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) Valeur
75.
Technologies et Développement
Web Styles de listes (Démonstration, Lists.html) 75 list-style: square; Courrs 3 - Les Feuilles de Styles (CSS) list-style: square outside; Section 5 : Boîtes, Listes et Tableaux Copyright © 2013, Mostefai Mohammed Amine
76.
Technologies et Développement
Web Styler les tableaux Toutes les règles du CSS s’appliquent aux tableaux, notamment « border » qui définit les bordures. « border-spacing » permet de définir l’espacement des cellules. « border-collapse » permet de définir le comportement des bordures qui se rejoignent. Une valeur « collapse » fusionne les bordures. Une valeur « separate » les affiche séparées. Section 5 : Boîtes, Listes et Tableaux Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 76
77.
Technologies et Développement
Web 77 Courrs 3 - Les Feuilles de Styles (CSS) Styler les tableaux (Voir tableaux.html) Section 5 : Boîtes, Listes et Tableaux Copyright © 2013, Mostefai Mohammed Amine
78.
Technologies et Développement
Web Styler les formulaires 78 Utiliser les listes ordonnées pour une meilleure indexation La propriété CSS3 « box-sizing » permet de mieux contrôler la largeur des éléments Section 5 : Boîtes, Listes et Tableaux Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) Ne pas utiliser les tableaux.
79.
Technologies et Développement
Web 79 Courrs 3 - Les Feuilles de Styles (CSS) Styler les formulaires (Démonstration, formulaire.html) Section 5 : Boîtes, Listes et Tableaux Copyright © 2013, Mostefai Mohammed Amine
80.
80 Cours 3 –
Les Feuilles de Styles (CSS) Technologies et Développement Web Section 6 : Disposition Copyright © 2013, Mostefai Mohammed Amine
81.
Technologies et Développement
Web Introduction HTML est composé d’éléments en mode en ligne et d’autres en mode bloc Le regroupement en mode bloc permet de gérer la disposition des éléments Les « div » ou les nouvelles balises HTML5 (nav, aside, header,..) sont utilisées pour la navigation Section 6 : Disposition Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 81
82.
Technologies et Développement
Web Disposition simple HTML est composé d’éléments en mode en ligne et d’autres en mode bloc Le regroupement en mode bloc permet de gérer la disposition des éléments Les « div » ou les nouvelles balises HTML5 (nav, aside, header,..) sont utilisées pour la navigation Voir « position.html » Dans un scénario normal, chaque élément en mode bloc est affiché en dessous de l’autres Si « width » ou « max-width » ne sont pas spécifiées , l’élément prend toute la largeur disponible Section 6 : Disposition Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 82
83.
Technologies et Développement
Web Positionnement relatif Une position relative déplace un élément par rapport à sa position « normale » Pour indiquer une position relative, utiliser la règle « position » avec la valeur « relative » Pour bouger l’élément par rapport à sa position normale, utiliser « top », « left », « right » ou « bottom ». Les valeurs peuvent être en pixels, ems ou %. Le déplacement relatif a parfois par conséquence, de mettre un élément sur un autre (le premier couvre le deuxième). Pour soigner l’effet, utiliser la propriété « z-index ». Voir exemple 2 et 3 Section 6 : Disposition Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 83
84.
Technologies et Développement
Web Positionnement absolu Lorsqu’une position absolue est attribuée à un élément, il est positionné par rapport aux coordonnées (top, left, right et bottom) et l’élément n’a plus aucun impact sur les autres. (Exemple 4) Lorsqu’un élément est positionné d’une manière absolue à l’intérieur d’un autre élément en mode relatif, il est positionné par rapport à l’élément parent. (Exemple 5) Section 6 : Disposition Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 84
85.
Technologies et Développement
Web Positionnement fixe La position fixe est semblable au positionnement absolu sauf que l’élément garde toujours la même position lorsque l’utilisateur défile la page Exemple 6 Section 6 : Disposition Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 85
86.
Technologies et Développement
Web 86 Courrs 3 - Les Feuilles de Styles (CSS) Positionnement Section 6 : Disposition Copyright © 2013, Mostefai Mohammed Amine
87.
Technologies et Développement
Web Éléments flottants Un élément flottant est pris de sa position « normale » puis mis à gauche ou à droite Les autres éléments d’adaptent pour contourner l’élément flottant Voir « floats.html » Section 6 : Disposition Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 87
88.
Technologies et Développement
Web 88 Courrs 3 - Les Feuilles de Styles (CSS) Éléments flottants Section 6 : Disposition Copyright © 2013, Mostefai Mohammed Amine
89.
Technologies et Développement
Web Éléments flottants pour la disposition 89 Les éléments flottants aident à mettre en place des dispositions multi-colonnes Voir « dispositions.html » La règle « clear » permet de réinitialiser les flottements Section 6 : Disposition Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) Les éléments flottants peuvent mettre des élément côte à côté
90.
Technologies et Développement
Web 90 Courrs 3 - Les Feuilles de Styles (CSS) Disposition (Dispositions.html) Section 6 : Disposition Copyright © 2013, Mostefai Mohammed Amine
91.
Technologies et Développement
Web 91 Courrs 3 - Les Feuilles de Styles (CSS) Disposition (Album.html) Section 6 : Disposition Copyright © 2013, Mostefai Mohammed Amine
92.
Technologies et Développement
Web Boîte Flexible (Flexbox, CSS3) 92 Nouveau mode de positionnement basé sur CSS3 Courrs 3 - Les Feuilles de Styles (CSS) Le parent devient un cadre d’affichage Distribution des éléments enfants Alignement horizontal et vertical Gestion de l’espace disponible Réorganisation des éléments Section 6 : Disposition Copyright © 2013, Mostefai Mohammed Amine
93.
Technologies et Développement
Web 93 La version standard n’est pas encore compatible avec les navigateurs récents Utiliser les préfixes (-webkit-) pour chrome, (-moz-) pour FireFox et –ms- pour IE Section 6 : Disposition Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) Grille Flexible, Compatibilité des navigateurs
94.
Technologies et Développement
Web Possibilité du flexbox (voir flex.html) 94 Description flex-direction Peut être row ou column pour un affichage en colonnes ou un affichage en lignes. Les valeurs row-reverse et column-reverse affiche les valeurs inversées. flex-wrap Indique le comportement en cas de dépassement. nowrap indique que les éléments restent sur la même ligne. wrap et wrap-reverse provoquent une nouvelle ligne. flex-flow Regroupe les deux propriétés flex-direction et flex-wrap justify-content Alignement des élément par rapport à l’axe principal qui est le contenteur. La valeur flex-start les aligne au début, flex-end à la fin, center au centre, space-between espace les éléments et space-around les espace avec des marges à l’intérieur. Section 6 : Disposition Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) Propriété
95.
Technologies et Développement
Web Possibilité du flexbox - Suite 95 Description align-items Deuxième axe d’alignement des enfants, par rapport à eux même. Valeurs possibles : flex-end : flex (appliquée aux enfants) Indique le montant d’espace à utiliser dans l’espace restant. Une valeur de 2 signifie un double d’une valeur de 1, une valeur de 9 signifie le triple de 3, …etc. align-self Aligne un seul élément par rapport aux autres Section 6 : Disposition Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) Propriété
96.
96 Cours 3 –
Les Feuilles de Styles (CSS) Technologies et Développement Web Section 7 : Les images Copyright © 2013, Mostefai Mohammed Amine
97.
Technologies et Développement
Web Introduction 97 Les propriétés « width » et « height » définissent la largeur et hauteur d’une image Les propriétés « float » permet de faire flotter une image par rapport à un texte Section 7 : Les images Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) Beaucoup de concepts CSS s’appliquent aux images
98.
Technologies et Développement
Web Arrière plan de type image La propriété « background-image » permet de définir une image comme un arrière plan (voir images.html) La propriété « background-repeat » permet de définir la répétition de l’arrière plan : horizontal (repeat-x) ou vertical (repeat-y). La valeur « norepeat » désactive la répétition. La propriété « background-attachment » définit le comportement de l’arrière plan par rapport à la page. Une valeur de « fixed » fixe l’arrière plan tandis que « scroll » le fait défiler avec la page. Section 7 : Les images Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 98
99.
Technologies et Développement
Web Position de l’arrière plan La position de l’arrière plan est définie avec « backgroundposition » Des valeurs comme « left top », « center center » ou « bottom right » sont acceptées Les propriété « background-position-x » et « background-positiony » définissent le décalage de l’arrière plan. Les valeurs peuvent être en pixel ou en pourcentage. Section 7 : Les images Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 99
100.
Technologies et Développement
Web Alias Toutes les valeurs de l’arrière plan peuvent être utilisées avec l’alias « background » Ordre : couleur image répétition attachement position background: red url("Images/bois.jpg") repeat-y scroll 0 0; Section 7 : Les images Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 100
101.
Technologies et Développement
Web Dégradés CSS3 CSS3 introduit la possibilité de définir des dégradés directement en utilisant la propriété « background-image » sans passer par des images CSS3 supporte les dégradés linéaires et les dégradés radiaux Section 7 : Les images Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 101
102.
Technologies et Développement
Web Dégradés linéaires 102 x, y : direction (to left / to right, to top, to bottom, to right bottom) Couleurs : couleurs constituant le dégradé Section 7 : Les images Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) background : linear-gradient(x y, couleur1, couleur2, couleurN)
103.
Technologies et Développement
Web Dégradés radiaux background : radial-gradient(ellipse at x, y, couleur1, couleur2, couleurN) x, y : direction (top, center,…) Couleurs : couleurs constituant le dégradé Section 7 : Les images Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 103
104.
Technologies et Développement
Web 104 Courrs 3 - Les Feuilles de Styles (CSS) Images et dégradés Section 7 : Les images Copyright © 2013, Mostefai Mohammed Amine
105.
Technologies et Développement
Web Cours 3 – Les Feuilles de Styles (CSS) 105 Section 8 : Les transitions et les transformations (CSS3) Copyright © 2013, Mostefai Mohammed Amine
106.
Technologies et Développement
Web Introduction Les transitions CSS3 permettent aux développeurs d’effectuer des animations simples sans passer par JavaScript Le support des transitions reste limité aux navigateurs récents Le principe des transitions est de changer la valeur une propriété CSS d’une manière douce et progressive ce qui donne l’effet d’une animation Exemples : changer de couleur, de dimension, …etc. Section 8 : Transitions et Transformations Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 106
107.
Technologies et Développement
Web Propriétés 107 Description transition-property Propriétés à animer. Peut être « all » pour toutes les propriétés animables ou « none » pour aucune. Peut aussi contenir plusieurs noms de propriétés à condition que ces propriétés soient animables. transition-duration Durée de la transition. Spécifiée en secondes (s) ou millisecondes (ms). transition-timing-function Fonction d’interpolation, gère la vitesse de l’animation. transition-delay Retard ou avance de la transition (en secondes ou millisecondes) transition Un alias pour les paramètres de transition Section 8 : Transitions et Transformations Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) Propriété
108.
Technologies et Développement
Web Propriétés animables La liste des propriétés animables est disponibles sur http://www.w3.org/TR/css3-transitions/#properties-from-css Pour qu’une propriété soit animable, le navigateur doit être capable de faire des interpolations dessus. Par exemple les couleurs et les dimensions sont animables. Voir transitions.html Section 8 : Transitions et Transformations Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 108
109.
Technologies et Développement
Web transition-timing-function 109 Description ease Rapide au début, lent à la fin linear Vitesse constante ease-in Lent au début, rapide à la fin ease-in-out Lent au début et à la fin steps Exécute l’animation en plusieurs étapes discrètes. Par exemple steps (5,start) ou steps (3,end) début ou fin. Section 8 : Transitions et Transformations Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) Propriété
110.
Technologies et Développement
Web 110 Les transitions peuvent être déclenchée par JavaScript simplement en changeant une propriété sur laquelle a été paramétrée une transition Le changement d’une propriété CSS se fait via la propriété « style » d’un élément Section 8 : Transitions et Transformations Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) Déclenchement des transitions par JavaScript
111.
Technologies et Développement
Web Introduction aux transformations Les transformations sont des actions géométriques (tels quel la rotation ou la translation) qui sont effectués sur des éléments HTML Il existe deux types de transformations : en deux dimensions et en 3 dimensions Les transformations 2D sont plus largement supportées que les transformations 3d Section 8 : Transitions et Transformations Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 111
112.
Technologies et Développement
Web Transformations (transformations.html) Description none Pas de transformation translate(x,y) Translation deux dimensions translate3d(x,y,z) Translation 3d translateX(x), translateY(y) et / ou translateZ(z) Translation sur l’un des trois axes scale(x,y) Mise à l’échelle. Une valeur 1 correspond à la même taille, 0.5 à la moitié et 2 double scale3d(x,y,z) Mise à l’échelle 3 dimensions scaleX(x), scaleY(y) ou scaleZ(z) Mise à l’échelle sur l’un des trois axes Section 8 : Transitions et Transformations Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) Propriété 112
113.
Technologies et Développement
Web Transformations (transformations.html) - Suite Description rotate(a) Où a est un angle, rotation d’un élément rotate3d(x,y,z,a) Rotation 3 dimensions rotateX(x), rotateY(y) ou rotateZ(z) Rotation sur l’un des trois angles skew(a,b) Où a et b sont des angles. Inclinaison bidimensionnelle de l’élément skewX(x) ou skewY(y) Inclinaison sur l’un des deux axes matrix(n1..n6) Transformation sur matrice 2d matrix3d(n1..n16) Transformation matrice 3d perspective(n) Perspective 3d Section 8 : Transitions et Transformations Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) Propriété 113
114.
Technologies et Développement
Web Introduction aux transformations Les transformations sont des actions géométriques (tels quel la rotation ou la translation) qui sont effectués sur des éléments HTML Il existe deux types de transformations : en deux dimensions et en 3 dimensions Les transformations 2D sont plus largement supportées que les transformations 3d Section 8 : Transitions et Transformations Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 114
115.
Technologies et Développement
Web Origine des transformations 115 La propriété transform-origin définit l’origine de la transformation Courrs 3 - Les Feuilles de Styles (CSS) Syntaxe : tansform-origin : axe-x axe-y axe-z Par défaut, les valeurs sont 50% 50% 0 Section 8 : Transitions et Transformations Copyright © 2013, Mostefai Mohammed Amine
116.
Technologies et Développement
Web 116 Courrs 3 - Les Feuilles de Styles (CSS) Transitions et Transformations Section 8 : Transitions et Transformations Copyright © 2013, Mostefai Mohammed Amine
117.
Technologies et Développement
Web Cours 3 – Les Feuilles de Styles (CSS) 117 Section 9 : Animations (CSS3) Copyright © 2013, Mostefai Mohammed Amine
118.
Technologies et Développement
Web Introduction Contrairement aux transitions qui animent une seule propriété sur une période, les animations sont constituées de plusieurs cadres et chaque cadre anime une ou plusieurs propriétés Une animation contient au moins deux cadres Les navigateurs utilisent le GPU pour les animations Section 9 : Animations Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 118
119.
Technologies et Développement
Web Déclaration des cadres 119 @keyframes nom_de_l_animation from Courrs 3 - Les Feuilles de Styles (CSS) { { propriété_à_animer: valeur_initiale; } 50% { propriété_à_animer: valeur_intermédiaire; } to { propriété_à_animer: valeur_finale; } } Section 9 : Animations Copyright © 2013, Mostefai Mohammed Amine
120.
Technologies et Développement
Web Propriétés d’animation (Voir animations.html) Description animation-name Nom de l’animation animation-duration Durée de l’animation animation-iteration-count Nombre d’itérations. « infinite » signifie une animation infinie. animation-timing-function Fonction d’interpolation utilisée pour l’animation. Les mêmes que celles des transitions. animation-direction Direction de l’animation : normal, alternate, reverse ou alternate-reverse animation-play-state Statut de l’animation (running, paused) animation-delay Délai de lecture Section 9 : Animations Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) Propriété 120
121.
Technologies et Développement
Web 121 Courrs 3 - Les Feuilles de Styles (CSS) Animations Section 9 : Animations Copyright © 2013, Mostefai Mohammed Amine
122.
Technologies et Développement
Web Bibliographie 122 Jon Duckett, HTML & CSS, Wiley Editions Tutoriaux Alsacréation « Introduction aux animations CSS3 », David Rousset Cours 3 – Les Feuilles de Styles (CSS) Copyright © 2013, Mostefai Mohammed Amine