Cascading style sheets programmation web2 0 chapitre1 les feuilles de style css

Institut Supérieur d ? Informatique de Mahdia PROGRAMMATION WEB CHAPITRE - LES FEUILLES DE STYLE CSS CASCADING STYLE SHEETS Enseignants Responsable Gargouri Fahmi Haddar Nahla Kaouthar Hila Branches LAI LARI CPLAN Les feuilles de style CSS Style dans la page Du HTML au CSS Création de style Les feuilles de style externes Propriétés héritées d'un parent Les propriétés de style CLES FEUILLES DE STYLE CSS o Le World Wide Web a introduit les feuilles de styles en cascade pour compléter la langage HTML o Les CSS permettent de gérer l'apparence des documents o Les feuilles indiquent aux balises HTML leur comportement ou style CSTYLE DANS LA PAGE D Ici le corps de la page CDU HTML AU CSS PRINCIPE HTML Introduction Le Résultat Introduction ? H color red Fichier CSS CCRÉATION DE STYLE Modifier le style des balises existantes Consiste à modifier le style d ? une ou plusieurs balise qui existent dans le corps du document HTML Sélecteur HTML Propriété Valeur Définition CELLULE CELLULE TEXTE Ici toutes les cellules TD et P auront comme style par défaut Arial pt On peut modifier ainsi toutes les balises existantes CCRÉATION DE STYLE Le cas particulier de la balise de lien A La balise est particulière car elle peut être dérivée selon l'action du visiteur On obtient ainsi balises E E E A A hover color gray A active color red A visited color green Avec cette E E déclaration le texte de lien devient gris au passage de la souris devient rouge sur E un clic reste vert pour indiquer que ce lien a été visité CCRÉATION DE STYLE Création de classes Une classe est un style indépendant que l'on peut appliquer à toute balises HTML Par exemple dans cette page les parties de code sont en courier new vert gr? ce à la classe de style code qui est déclarée ainsi Sélecteur de Classe Propriété Valeur Définition ? Le point devant code indique la création d'une nouvelle classe appelée code ? Pour affecter ce style à une portion de texte on écrit texte mis en forme ? Pour donner le style courier new vert à une cellule de tableau on écrit cellule en police courrier vert CCRÉATION DE STYLE Création de ID Très utile pour spécifier des règles qui ne s'appliquent qu'à un élément avec un ID unique donné défini par l'attribut id en HTML Pas plus d'un élément ne doit avoir un ID donné HTML Le Résultat Bloc A Bloc A Le sélecteur id bloc unique CSS background-color black color white L ? élément devient unique il est utilisé une seule fois dans la C page CRÉATION DE STYLE A ?ecter l'attribut style Il n'est pas indispensable de créer une classe de style pour a ?ecter un style à un objet Par exemple Texte mis en forme L'attribut style d'une balise reçoit les propriétés de style Il est toutefois préférable de déclarer une classe pour regrouper la mise en forme CLES FEUILLES DE STYLE EXTERNES L'extension d'un fichier de

  • 44
  • 0
  • 0
Afficher les détails des licences
Licence et utilisation
Gratuit pour un usage personnel Attribution requise
Partager