【法语学习】CSS法语教程.ppt

Les feuilles de style CSS,2,Les feuilles de style CSS,CSS = Cascading Style Sheets (Feuille de style en cascade)Document permettant de spécifier toutes les caractéristiques de mise en forme d’une page HTMLElles permettent de définir la mise en forme au niveau de chaque balise HTML,3,Les avantages des CSS,Séparation du contenu et de la forme: Amélioration de l’accessibilité numérique Cohésion de la présentation pour l’ensemble du site Modification très simple de l’apparence d’un site sans avoir à en modifier le contenu Facilitation de la maintenanceOutil de mise en forme plus propre et plus puissant que ce que propose HTML Palier à certaine insuffisance de HTML (contrôle de la police, des marges, de l’indentation, …) Positionnement au pixel prèsAméliore le temps de chargement des pages,4,Syntaxe d’un style CSS,Syntaxe suivante: Balise { propriété_de_style : valeur } Où: Balise : Permet de préciser la balise dont on souhaite modifier le style Propriété_de_style : Permet de spécifier la propriété de la balise que l’on souhaite modifier (alignement, couleur, …) Valeur : Permet de spécifier la nouvelle valeur associée à la propriété Il est possible de modifier plusieurs propriétés pour une même balise en les séparant par des « ; »,5,Exemple de style CSS,H1 { font-family : Arial;font-style : italic }H1,H2,H3 {color : blue },Les titres H1 posséderont alors le style suivant: Police : Arial Ecriture en italique Couleur bleueH2 et H3 : Couleur bleueOn constate que Les définitions des propriétés s’accumulent pour une même balise Il est possible de modifier simultanément les propriétés de plusieurs balises,,6,Style CSS et redondance,Dans le cas où la même propriété d’une même balise est définie plusieurs fois on ne conserve que la dernière déclaration,H1 { font-family : Arial;font-style : italic }H1,H2,H3 {color : blue },H3 {color : red },,7,CSS et contexte,Il est même possible d’affiner la prise en compte des propriétés d’un balise en fonction du contexte dans lequel elle est utilisée.,H2 I {color : green },,8,Insertion de règles CSS (1/5),Il existe 3 méthodes : Méthode globale Méthode intra-ligne Méthode importée,9,Insertion de règles CSS (2/5) : méthode globale,Insertion de l’en-tête de la page HTML c-a-d entre les balises … Utilisation des balises : en précisant qu’il s’agit de règles CSS Attribut type = ’’text/css’’,… ,]]>… ,10,Insertion de règles CSS (3/5) : méthode intra-ligne,Insertion des règles CSS au niveau des balises qui les concernent Utilisation de l’attribut « style » disponible pour toutes les balises HTML,Ceci est un titre H1 ,11,Insertion des règles CSS (4/5),Ces deux premières méthodes ajoutent les règles CSS à l’intérieur même des pages Web Perte de la notion de séparation entre forme et contenu Perte de l’uniformisation des pages du site Perte de la facilité de maintenanceCes deux méthodes sont donc à proscrire Eventuellement dans des cas bien précis Lors de la phase de tests des règles CSS,12,Insertion des règles CSS (5/5) : Méthode importée,Insertion des règles CSS dans un fichier dédié Ce fichier sera : Commun à tout le site Lié à toutes les pages Web du siteC’est la méthode CSS la plus importante,… ,13,Règles CSS & Classes (1/4),Il peut tout de même être contraignant de définir un style commun à tout le site pour une balise donnéeLes classes permettent des modifications ponctuelles de style,14,Règles CSS & Classes (2/4),Syntaxe : Balise.classe {nom_de_la_propriété1 : « valeur1 »;nom_de_la_propriété2 : « valeur2 »; }Où: Balise : nom de la balise dont on souhaite modifier le style Classe : le nom associé à la classe (lettre, chiffre et tiret),15,Règles CSS & Classes (3/4),Utilisation de l’attribut « class » au niveau des balises concernées.,H1{font-style : italic ;color : blue }H1.classe1{color : red }, ceci est un titre idem ,,16,Règles CSS & Classes (4/4) : La classe universelle,Classe dont la balise n’a pas été précisée,.important{color : red;font-weight : bold }, ceci est un titre ceci un titre important ceci un div ceci un paragraphe,H1{font-style : italic ;color : blue },,17,Règles CSS & Pseudo classes,Elles permettent d’affiner le style appliqué à certaine balise : En réaction à un événement En réaction à la position relative de l’élémentContrairement aux classes : Les noms des pseudo-classes disponibles sont prédéfinis Il est impossible d’en créer de nouvelles,18,Pseudo classes dynamiques (1/2),Réaction à un événement Typiquement c’est le cas des liens hypertextesIl en existe 3: Hover: permet d’affecter un style lors du survol de l’élément par la sourisActive: permet d’affecter un style à l’élément lorsque l’utilisateur clique dessus (entre le moment où il clique et le moment ou il le relâche)Focus: permet de définir un style lorsque l’élément sélectionné,19,Pseudo classes dynamiques (2/2) : Exemple,A:active{/*Lien actif*/ color:red; background-color : yellow; } A:hover{/*Souris au dessus du lien*/ color:orange; font-style:italic; font-weight:bold; font-size:20px; },,。