Chapitre 3 : initiation CSS
0 j'aime103 vues
Ce document présente une initiation au CSS3, abordant les généralités, l'importance des feuilles de style, et des aspects avancés tels que les sélecteurs et les pseudo-classes. Il souligne l'importance de séparer le contenu et la présentation pour une maintenance facile et comprend des exemples pratiques d'application du CSS. Les nouveautés de CSS3 sont également discutées, incluant des effets visuels et des animations.
![Importance de la feuille de style
Utilisation de l’attribut id
L’attribut id s’utilise (quasiment) comme l’attribut class
Définition dans le css avec ] (et non un point)
Définition d’un identifiant dans le css
On définit les valeurs des propriétés qui vont être appliquées aux balises
ayant l’attribut class.
]nomID {
propriete : valeur ;
}
Attention : id ne peut être utilisé qu’une seule fois !
19 / 44](https://image.slidesharecdn.com/chapitre2css-181205210655/85/Chapitre-3-initiation-CSS-19-320.jpg)
Chapitre 3 : initiation CSS
- 1. Université Jendouba Faculté des Sciences Juridiques Économiques et de Gestion Développement Web: Initiation CSS 3 Manel Ben Sassi Université de Jendouba, FSJEG bensassi.manel@gmail.com 1 / 44
- 2. Sommaire 1 CSS des généralités 2 Importance de la feuille de style 3 Les aspects avancés du CSS Les notations courtes et longues Les sélecteurs CSS avancés Les pseudo classee CSS Les pseudo Elements 4 CSS 3 ... les nouveautés Les effets visuels Les transitions d’images en CSS Les animations en CSS Les Sprites d’images en CSS 5 Annexe 6 Bibliographie 2 / 44
- 3. CSS des généralités Le CSS, C’est quoi Cascading Style Sheets : feuilles de style Contient les instructions de mise en forme de la page html Titres en bleu et centrés La couleur du fond est jaune. L’écriture utilisée est le Times New Roman 12 italique... Intérêt du CSS Permet de séparer la mise en forme et le contenu du site Facilite la maintenance 3 / 44
- 4. Importance de la feuille de style Pourquoi dois-je avoir une feuille de style ? 4 / 44
- 5. Importance de la feuille de style Le CSS, Pour quelle raison ? Question "HTML me permet aussi de rajouter des couleurs de mettre en gras ... Alors pourquoi se compliquer la vie ?" 5 / 44
- 6. Importance de la feuille de style Le CSS, Pour quelle raison ? Question "HTML me permet aussi de rajouter des couleurs de mettre en gras ... Alors pourquoi se compliquer la vie ?" Objectifs Séparer le fond (le contenu) de la forme (la présentation ou la mise en forme)... Avoir un code facilement compréhensible ) maintenable, évolutif et réutilisable On se pose la question ... Je ne vois pas pourquoi ? je comprendrais toujours mon code... ? 6 / 44
- 7. Importance de la feuille de style Le CSS, Pour quelle raison ? L’inconvénient d’avoir un code fusionné 7 / 44
- 8. Importance de la feuille de style Le CSS, Pour quelle raison ? 8 / 44
- 9. Importance de la feuille de style Le CSS, Pour quelle raison ? 9 / 44
- 10. Importance de la feuille de style Où placer une feuille de style ? 10 / 44
- 11. Importance de la feuille de style Où placer le code CSS ? Deux endroits : Dans une balise style qui est elle-même placée dans la balise head de notre page HTML. C’est pratique car on a ainsi le code HTML et le code CSS dans la même page. C’est ce que nous ferons pour nos premiers essais. Dans un autre fichier dédié au style avec une extension .css. On utilise dans ce cas une balise link placé elle aussi dans la balise head de notre page HTML pour indiquer l’emplacement du fichier CSS. 11 / 44
- 12. Importance de la feuille de style Où placer le code CSS ? Exemple de page HTML avec le code CSS intégré via la balise style : 12 / 44
- 13. Importance de la feuille de style Où placer le code CSS ? Exemple de page HTML avec le code CSS intégré via un fichier externe : 13 / 44
- 14. Importance de la feuille de style Principe du CSS ... balise { propriete : valeur ; propriete : valeur ; } Balise : Nom de la balise dont on modifie l’apparence (ex : < em >, < h1 >,etc) propriete : catégorie d’effet de style (color, font-size) valeur : valeur associée à la propriété (red, blue). 14 / 44
- 15. Importance de la feuille de style Principe du CSS ... Appliquer des règles à plusieurs balises balise1, balise2, ..., BaliseN { propriete : valeur ; propriete : valeur ; } Balise : Nom de la (ou les) balise(s) dont on modifie l’apparence (ex : < em >, < h1 >,etc) propriete : catégorie d’effet de style (color, font-size) valeur : valeur associée à la propriété (red, blue). 15 / 44
- 16. Importance de la feuille de style Principe du CSS ... Imbrication de balises balise1 balise2 balise3 { propriete : valeur ; } Quand on est dans la balise "balise3" contenue dans la balise "balise2", elle-même contenue ... 16 / 44
- 17. Importance de la feuille de style Attributs class et id Comment faire pour que seulement quelques mots mis en valeur (mais pas tous !) soient en vert et de taille 30 pixels ? Utilisation des attributs class et id. Permettent de définir un style personnalisé Peuvent être mis sur n’importe quelle balise Permettent de ne modifier que certains mots, titres, ... 17 / 44
- 18. Importance de la feuille de style Utilisation de l’attribut class 1. Modification du fichier html On ajoute l’attribut "class" dans les balises que l’on souhaite modifier. <h1 class="nom1"></h1> <p class="nom2"></p> 2. Modification du fichier CSS On définit les valeurs des propriétés qui vont être appliquées aux balises ayant l’attribut class. .nomdelaclasse { propriete : valeur ; } Contrairement aux balises, il faut ajouter un point devant le nom de la classe 18 / 44
- 19. Importance de la feuille de style Utilisation de l’attribut id L’attribut id s’utilise (quasiment) comme l’attribut class Définition dans le css avec ] (et non un point) Définition d’un identifiant dans le css On définit les valeurs des propriétés qui vont être appliquées aux balises ayant l’attribut class. ]nomID { propriete : valeur ; } Attention : id ne peut être utilisé qu’une seule fois ! 19 / 44
- 20. Importance de la feuille de style Différence entre class et id L’identifiant (id) utilisé pour référencer un élément utilisé pour la disposition des éléments de la page (entête, menu, pied de page, ...) L’attribut class utilisé plusieurs fois (pas de référence à un objet précis) utilisé dans les autres cas. 20 / 44
- 21. Importance de la feuille de style Balises universelles Comment modifier l’apparence d’un mot qui n’est contenu dans aucune balise Utilisation des balises universelles Deux types de balises universelles : Balise de type inline : <span>... </span> Balise de type block : <div> ... </div> Balises qui "ne servent à rien" Permettent de rajouter des classe modifiant la partie comprise entre ces balises. Exemple <span class="grasRouge"> Bonjour </span> 21 / 44
- 22. Les aspects avancés du CSS Les aspects avancés du CSS 22 / 44
- 23. Les aspects avancés du CSS Les notations courtes et longues Notations Long Hand Vs Short Hand Pour définir une bordure, nous avons deux façons de faire : Notation Long Hand Exemple : pour définir une bordure, nous avons utiliser les trois propriétés CSS border-width, border-style et border-color Notation Short Hand Pour le même exemple, nous pouvons utilisé la propriété border avec les valeurs des trois propriétés précédentes ) D’autres exemples Cette règle s’applique aussi sur les propriétés des modèles de boîtes23 / 44
- 24. Les aspects avancés du CSS Les sélecteurs CSS avancés Sélecteurs CSS Avancés Etoile (*) sélecteur universel permet de sélectionner tous les éléments HTML d’une page d’un coup 24 / 44
- 25. Les aspects avancés du CSS Les sélecteurs CSS avancés Sélecteurs CSS Avancés Imbrication (A B) Sélectionner un élément B contenu dans un élément A (même dans une classe). 25 / 44
- 26. Les aspects avancés du CSS Les sélecteurs CSS avancés Sélecteurs CSS Avancés A + B Sélectionner tous les éléments B de même niveau et suivant immédiatement les éléments A 26 / 44
- 27. Les aspects avancés du CSS Les sélecteurs CSS avancés Sélecteurs CSS Avancés A > B Sélectionner tous les éléments B qui sont des éléments enfants directs de A. 27 / 44
- 28. Les aspects avancés du CSS Les pseudo classee CSS Les pseudo classes CSS :link permet de styliser un lien non visité ; :visited permet de styliser un lien une fois celui-ci visité (parfois un style ignoré par les navigateurs pour des raisons de sécurité) :hover permet de changer l’aspect d’un élément lorsque les visiteurs poseront leur curseur dessus ; :active permet de modifier l’aspect d’un lien lors du clic. 28 / 44
- 29. Les aspects avancés du CSS Les pseudo classee CSS Les pseudo Classes CSS :first-child sélectionner le premier élément enfant HTML d’un certain type par rapport à un élément parent. :last-child sélectionner le dernier élément enfant HTML d’un certain type par rapport à un élément parent. 29 / 44
- 30. Les aspects avancés du CSS Les pseudo classee CSS Les Pseudo Classes CSS :nth-child permet de cibler certains enfants d’un élément HTML.Nous mettons entre les parenthèses () soit un nombre, soit un mot clef. (Exemple paire ou impaire) 30 / 44
- 31. Les aspects avancés du CSS Les pseudo Elements Les Pseudo Elements CSS Les pseudo éléments Permettent de modifier l’apparence d’une partie seulement d’un ou de plusieurs éléments HTML, ou encore d’ajouter du contenu au début ou à la fin d’un certain élément HTML. Sont reconnaissables en CSS à leur écriture. Ils commencent par « : : » (un double deux-points). : :first-letter permet de Ne sélectionner Que la première lettre d’un texte contenu dans un élément ; : :first-line permet de Ne sélectionner Que la première ligne d’un texte contenu dans un élément ; : :selection permet de sélectionner la partie d’un élément sélectionnée (par un double clic) par l’utilisateur ; : :before permet d’insérer du contenu au début d’un élément HTML ; : :after permet d’insérer du contenu à la fin d’un élément HTML. 31 / 44
- 32. Les aspects avancés du CSS Les pseudo Elements Les Pseudo Elements CSS Exemple Figure – La lettrine Nb : Pour plus d’exemples, voir l’annexe 32 / 44
- 33. CSS 3 ... les nouveautés Les nouveautés apportés au CSS3 ? 33 / 44
- 34. CSS 3 ... les nouveautés Les nouveautés- Quoi de neuf ? Les nouveautés sont divisées en trois grandes parties : Les effets visuels Les sélecteurs Les nouveaux outils pratiques Il ne s’agit pas de l’intégralité des nouveautés, mais ça vous permettra d’avoir un très bon aperçu global. 34 / 44
- 35. CSS 3 ... les nouveautés Les effets visuels Les effets visuels ... 35 / 44
- 36. CSS 3 ... les nouveautés Les effets visuels Effets visuels Border radius : Arrondit les bords d’ un bloc Transition : Passe d’un état à un autre d’un élément avec par une transition animée 36 / 44
- 37. CSS 3 ... les nouveautés Les effets visuels Effets visuels Box-shadow : Applique une ombre sur un bloc : Text-shadow : Applique une ombre sur un texte : 37 / 44
- 38. CSS 3 ... les nouveautés Les animations en CSS Effets visuels Transform : Déplace, déforme, ou effectue la rotation d’un élément 3D- Transform : Effectue des transformations en 3D 38 / 44
- 39. Annexe Quelques exemples de codes ... 39 / 44
- 40. Annexe Les notations longues et courtes Un exemple de notation courte et longue pour les boites 40 / 44
- 41. Annexe Les Pseudo Elements CSS Exemple Figure – La première line 41 / 44
- 42. Annexe Les Pseudo Elements CSS Exemple Figure – Les deux pseudo Elements before et After 42 / 44
- 44. Bibliographie Références Bibliographiques 1 HTML5 et CSS3 Cours et exercices corrigés,Jean Engels, Edition Eyrolles, 2012 2 CSS avancées : Vers HTML5 et CSS3, Raphaël Goetter, 2me Edition, Eyrolles, 2012 3 CSS3 : Pratique du design web, H. Giraudel et R. Goetter, Edition Eyrolles, 26 février 2015 4 CSS3 : Le design web moderne, Vincent de Oliveira et Cedric Esnault, Dunod, 2012, téléchargeable sur : "https ://fr.scribd.com/doc/242268597/css3-le-design-web-moderne- pdf" 44 / 44