Remerciez-le!

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

PROGRAMMATION WEB2.0: CHAPITRE1-LES FEUILLES DE STYLE CSS (CASCADING STYLE SHEE

PROGRAMMATION WEB2.0: CHAPITRE1-LES FEUILLES DE STYLE CSS (CASCADING STYLE SHEETS) Institut Supérieur d’Informatique de Mahdia Enseignants Responsable: Gargouri Fahmi Haddar Nahla Kaouthar Hila Branches: LAI1 & LARI1 1. Les feuilles de style CSS 2. Style dans la page 3. Du HTML au CSS 4. Création de style 5. Les feuilles de style externes 6. Propriétés héritées d'un parent 7. Les propriétés de style PLAN 2 LES 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. 3 4 STYLE DANS LA PAGE <style type="text/css"> body { margin: 10px ; text-align: center ; } </style> <HTML><HEA D> </HEAD> <BODY> Ici le corps de la page </BODY></HTML> 5 DU HTML AU CSS : PRINCIPE <HTML> <HEAD> <TITLE>Le CSS</TITLE> </HEAD> <BODY> <H1>Introduction</H1> ... </BODY> </HTML> H1 { color : red ; } .HTML Fichier.CSS Introduction … Le Résultat <link rel="stylesheet" type= "text/css" href= "fichier.css"> <link rel="stylesheet" type= "text/css" href= "fichier.css"> 1) Modifier le style des balises existantes: Consiste à modifier le style d’une ou plusieurs balise qui existent dans le corps du document HTML. <HTML><HEAD> <STYLE> TD, P {font-family : arial ; font-size : 12pt} </STYLE> </HEAD> <BODY> <TABLE> <TR> <TD> CELLULE 1</TD> <TD> CELLULE 2 </TD> </TR> </TABLE> <P>TEXTE</P> </BODY></HTML> Ici, toutes les cellules TD et P auront comme style par défaut Arial 12pt. On peut modifier ainsi toutes les balises existantes. Sélecteur HTML Propriété Valeur Définition CRÉATION DE STYLE 6 CRÉATION DE STYLE Le cas particulier de la balise de lien A La balise <A> est particulière, car elle peut être dérivée selon l'action du visiteur. On obtient ainsi 3 balises A. A:hover {color:gray} A:active {color:red} A:visited {color:green} Avec cette déclaration, le texte de lien : devient gris au passage de la souris, devient rouge sur un clic, reste vert pour indiquer que ce lien a été visité. 7 2) 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 : <HTML><HEAD> <STYLE TYPE="TEXT/CSS" > .code {font-family:courrier ; color:green} </STYLE> </HEAD> •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 : <P class="code">texte mis en forme</P> . •Pour donner le style courier new vert à une cellule de tableau, on écrit : <TD class="code">cellule en police courrier vert</TD> CRÉATION DE STYLE 8 Sélecteur de Classe Propriété Valeur Définition CRÉATION DE STYLE 3) 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é. 9 <BODY> <div id="bloc_unique"> Bloc A </div> </BODY> .HTML Le sélecteur id #bloc_unique { background-color:black; color:white ; } .CSS Le Résultat Bloc A L’élément devient unique, il est utilisé une seule fois dans la page. CRÉATION DE STYLE 3) Affecter l'attribut style Il n'est pas indispensable de créer une classe de style pour affecter un style à un objet. Par exemple : <div style="font-family: courier ; color:green"> Texte mis en forme </div> 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. 10 LES FEUILLES DE STYLE EXTERNES L'extension d'un fichier de feuille de style est toujours .css Le fichier CSS contient uniquement l'intérieur des balises <STYLE>.  Voici un exemple de fichier de style appelé style.css : /* Ceci est un commentaire */ TD {font-family:arial;font-size:12pt} .code {font-family:courrier;color:green}  Le fichier style.css ne contient pas les balises <STYLE>. Les commentaires sont marqués par /* */. 11 12 PROPRIÉTÉS HÉRITÉES D'UN PARENT Toutes balises ont un parent : une balise conteneur qui les encadre. Les balises HTML s'approprient généralement les styles des balises imbriquées dans leur parent : c'est l'héritage de style <body> /* style caractère par défaut est times*/ <b style="color:red" > /* style=times+bold*/ <i> Denis </i> </b> </body> Style=times+bold+italique Nous avons vu comment déclarer les styles dans une page. La norme CSS a prévu de nombreuses propriétés pour les différents objets HTML. Toutes ces propriétés ne sont pas prises en compte dans tous les navigateurs. Netscape 4.X en particulier est assez en retard par rapport à Internet Explorer 4 et 5, qui lui-même ne respecte pas toutes les normes. Les propriétés de police Normes respectées par Internet Explorer et Netscape. Propriété Signification Valeurs possibles font-size Hauteur de police en points ou pixels font-size:12px font-size:10pt font-family Nom de police font-family:arial,verdana font-family:sans serif font-weight Épaisseur de la police (gras) font-weight:bold font-weight:normal font-style Style de police (italic) font-style:italic font-style:normal color Couleur de police color:green color:#FFCC00 LES PROPRIÉTÉS DE STYLE 13 Les propriétés de texte Normes respectées par Internet Explorer et Netscape. Propriété Signification Valeurs possibles text-height Hauteur de ligne en points ou pixels text-height:12px text-decoration Attribut de soulignement text-decoration:overline text-decoration:line-through text-decoration:underline text-decoration:none text-align Alignement de paragraphe (balise P) text-align:left text-align:right text-align:center text-indent Indentation de paragraphe (balise P) text-indent:25px text-indent:-15px text-transform Transformation des majuscules text-transform:capitalize text-transform:uppercase text-transform:lowercase 14 Les propriétés d'arrière-plan Seul Internet Explorer 4 et 5 .. permet de choisir une image d'arrière plan. Propriété Signification Valeurs possibles background Image d'arrière-plan background:image.gif background-color Couleur d'arrière-plan background-color:black 15 Les propriétés de positionnement Netscape 4.X a un gestion particulière des propriétés de positionnement. Propriété Signification Valeurs possibles clip Clipping clip:auto width Largeur de la zone width:auto width:150 height Hauteur de la zone height:auto height:100 top Ordonnée du coin supérieur gauche top:10 left Abscisse du coin supérieur gauche left:400 overflow Recouvrement overflow:clip overflow:scroll overflow:none position Type de positionnement position:absolute position:relative position:static visibility Visibilité visibility:hidden visibility:visible 16 Les propriétés d'encadrement (1) Aucune de ces propriétés n'est reconnue par Netscape 4.X. Internet Explorer respecte presque complètement l'affichage de ces propriétés. Propriété Signification Valeurs possibles margin-top Marge du haut en pixels margin-top:10 margin-right Marge du bas en pixels margin-right:15 margin- bottom Marge du haut en pixels margin-bottom:15 margin-left Marge de gauche en pixels margin-left:10 margin Groupement des 4 marges haute, droite, bas et gauche margin:10,15,15,10 17 Les propriétés d'encadrement (2) padding-top Espacement en haut padding-top:10 padding-right Espacement à droite padding-right:10 padding- bottom Espacement en bas padding-bottom:10 padding-left Espacement à gauche padding-left:10 padding Groupement des espacements en haut, à droite, en bas et à gauche padding:10,10,10,10 18 Les propriétés d'encadrement (3) border-style Style de contour none, solid, double, groove, ridge, inset, outset border-color Couleur de contour border-color:red border-width Largeur de contour border-width:3px thin, medium, thick border-left- width Epaisseur du trait de contour gauche border-left-width:thin border-right- width Epaisseur du trait de contour droit border-right-width:medium border-top- width Epaisseur du trait de contour haut border-top-width:thick border- bottom-width Epaisseur du trait de contour bas border-bottom-width:0px float Flottaison du bloc A éviter float:right float:left 19 uploads/s3/ cascading-style-sheets-programmation-web2-0-chapitre1-les-feuilles-de-style-css.pdf