Remerciez-le!

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

Feuilles de Styles Cette technologie a été introduite par Microsoft avec la ver

Feuilles de Styles Cette technologie a été introduite par Microsoft avec la version 3.0 (1996) avec pour but de modifier le contenu d'une page par une grande variété d'effets surprenants (Dynamic HTML) et cela en un clin d'œil. En fait, avec les feuilles de styles (CSS ou Cascading Style Sheets), vous contrôlez parfaitement la mise en page des différents éléments qui composent votre document. Par exemple, vous pouvez définir la couleur d'une police, sa taille, le positionnement d'un objet (image, texte,...), l'espacement entre les paragraphes, et même gérer des effets de transition. Note : Internet Explorer à partir de la version 3.0 (attention la version d'Internet Explorer 3.0 ne gère pas toutes les propriétés des feuilles de styles) et, Netscape à partir de la version 4 supportent les feuilles de styles. 1. La syntaxe Normalement, la syntaxe des déclarations CSS est toujours identique. La méthode est simple : il s'agit de redéfinir le rôle d'une balise HTML en lui imposant de nouvelles propriétés : 1. Comme les feuilles de styles ne sont pas une composante directe du HTML, vous pouvez définir à l'aide de la balise META (dans l'en-tête de la page) la déclaration suivante : <META HTTP-EQUIV="Content-Style-Type" content="text/CSS"> 2. Comme pour les navigateurs ignorant le JavaScript, vous devez cacher le code des feuilles de styles à l'aide des commentaires :  3. Quatre méthodes différentes sont possibles pour intégrer les feuilles de styles en HTML : o L'instruction STYLE en tant qu'élément : <STYLE TYPE="text/CSS"> o L'élément LINK pour établir un lien vers une feuille de style externe (fichier texte avec l'extension .css) : <LINK TITLE="TEST" TYPE="text/CSS" rel="stylesheet" HREF="body.css"> o L'instruction STYLE en tant qu'attribut : <P STYLE="font-size: 12pt; color: green" > Fgfdghfgjhhhhffffffffffffffffffffffffffffffffff ghhhhhhhhhhhhhhhhhhh </p> o Importer une feuille de style (fichier texte avec l'extension .css) : <STYLE TYPE="text/CSS"> @import url(http://www.allhtml.com/feuille.css); </STYLE> Note : Le fichier .css ne doit pas contenir de code HTML. 4. Pour définir une propriété, on indique d'abord la balise concernée, puis entre deux accolades les caractéristiques de cette propriété (s'il y a plusieurs propriétés, on les sépare par un point virgule): <HTML> <HEAD> <STYLE TYPE="text/css">  </STYLE> </HEAD> Si on opte pour la balise <DIV> la syntaxe sera : <DIV STYLE="margin-left: 50px; color: blue"> Ce paragraphe sera placé à 50 pixels de la marge de gauche et sera de couleur bleu. </DIV> 2. Propriétés et valeurs Tableau résumant toutes les propriétés et valeurs possibles (et les plus courantes) pour définir une feuille de style : Propriété Valeur(s) Description Exemple font-size xx-small, x-small, small, medium, large, x-large, xx-large, larger, smaller, ou taille défini en pixels (px) cm (cm), mm (mm), point (pt), pourcentage (%) Taille de la police {font-size: 12pt} font-family serif, sans-serif, cursive, fantasy, monospace, ou nom de la police (Arial, Verdana, etc...) Type de police {font-family: Arial} font-weight normal, bold, bolder, lighter, ou valeur numérique de 100 à 900 (par tranche de 100) Poids de la police {font-weight: bold} font-style normal, italic, oblique Style de la police {font-style: italic} font-variant normal, small-caps Variante de la police {font-variant: small-caps} line-height point (pt), pourcentage (%) Hauteur de la ligne {line-height: 5pt} Color nom ou valeur hexadécimale de la couleur Couleur de la police {color: green} background-image URL du fichier Image d'arrière-plan {background-image: url(image/fichier.gif)} background-repeat repeat , no-repeat, repeat-x, repeat-y Répétition de l'arrière- plan {background-repeat: no-repeat} background- attachment scroll, fixed Effet de filigrane {background- attachment: fixed} background-position top, center, bottom, left, right Position de l'arrière- plan (verticale et horizontale) {background-position: center center} vertical-align baseline, sub, super, top, text-top, middle, bottom, text-bottom, ou valeurs en pourcentage Alignement vertical {vertical-align: top} text-align left, right, center, justify Alignement du texte {text-align: justify} text-indent valeur en pixel ou pourcentage Retrait de la première ligne {text-indent: 10px} text-decoration none, underline, overline, line-through Décoration du texte {text-decoration: overline} text-transform capitalize, uppercase, lowercase, none Casse du texte {text-transform: none} margin-left (ou -right, -top, -bottom) valeur en pixel ou pourcentage Valeurs des marges {margin-right: 10px} padding-left (ou -right, -top, -bottom) valeur en pixel ou pourcentage Remplissage du bloc {padding-left: 15pt} border-left (ou -right, -top, -bottom) medium, thick, ou un style Type de bordure {border-top: medium} border-x-width (x à remplacer par right, left, top, bottom) medium, thick ou taille. Taille de la bordure {border-top-width: 15} border-style none, dotted, dashed, solid, double, groove, ridge, inset,outset Style de la bordure {border-stylet: ridge} border-color nom ou valeur hexadécimale de la couleur Couleur de la bordure {border-color: red} Float none, left, right, both Alignement d'un bloc par rapport à un autre {float: right} Clear none, left, right,both Autorise l'alignement d'un bloc par rapport à un autre {clear: right} letter-spacing normal ou valeur en point Esapcement des lettres {letter-spacing: 2pt} 3. Les éléments CLASS et ID Comme nous l'avons vu plus haut, on peut redéfinir l'utilité d'une balise, mais si vous voulez que cette balise ne soit pas limitée aux seules feuilles de styles, alors l'élément CLASS doit être utilisé. L'élément ID (identifiant) peut l'être aussi, sa différence avec CLASS se situe au niveau de l'utilisation. En effet, on opte pour une ID de préférence lors d'un script JavaScript. Exemple avec une CLASS : <HTML> <HEAD> <STYLE TYPE="text/css"> H2.test { font-size: 12pt; color: red } </STYLE> </HEAD> </BODY> <H2 class="test">Titre défini avec une CLASS</H2> <BODY> <HTML> Exemple avec une ID (à noter le #) : <HTML> <HEAD> <STYLE TYPE="text/css">  </STYLE> </HEAD> </BODY> <H2 id="test">Titre défini avec une ID</H2> <H2>Titre normal de niveau 2</H2> <BODY> <HTML> 4. Le paramètre MEDIA On utilise le paramètre MEDIA (à l'intérieur de la balise STYLE) pour obtenir des présentations différentes, selon le type de média utilisé (ordinateur, synthétiseurs vocaux, ...). Tableau résumant les valeurs disponibles pour le paramètre MEDIA. Valeur Information(s) all Pour tous les types de périphériques screen Type classique, pour tous les moniteurs courants tty Type télévision (basse résolution) projection Type projecteur handheld Type PC de poche (Psion, Windows CE, Pilot ...) print Type impression (pour les imprimantes) braille Pour les dispositifs de représentation en braille aural Pour les synthétiseurs vocaux Exemple d'utilisation du paramètre MEDIA (ici pour les PC de poche et les PC standards) : <HEAD> <STYLE TYPE="text/css" MEDIA="screen">  </STYLE> <STYLE TYPE="text/css" MEDIA="handheld">  </STYLE> </HEAD> 5. DIV et SPAN Les balises DIV et SPAN permettent de désactiver certaines instructions de la feuille de styles. Vous pouvez de cette façon modifier le style appliqué à certaines balises, tout en conservant les autres effets définis dans le fichier CSS. A noter que :  DIV est normalement utilisé pour des blocs de texte entier.  SPAN est lui, utilisé que pour des petites portions de texte (mots ou lettres). SPAN et DIV, prennent en charge les attributs ID et CLASS. Exemple avec DIV : <HTML> <HEAD> <STYLE TYPE="text/css"> H1 { font-size: 10pt; color: green } </STYLE> </HEAD> <BODY> <H1>Titre défini avec une CSS</H1> <DIV STYLE="margin-left: 50px; color: blue"> Ce paragraphe sera placé à 50 pixels de la marge de gauche et sera de couleur bleu. </DIV> </BODY> </HTML> 6. Le positionnement d'élément Un des avantages des feuilles de styles, c'est le positionnement des éléments (bloc de textes, images ...) au pixels prés !! Finies les multitudes de balises (surtout les tableaux) pour essayer de faire une mise en page correcte. Pour placer un élément, il existe deux types de positionnement :  Le positionnement absolu : c'est le plus rencontré. Ce type de positionnement est identique aux logiciels de PAO tels que Publisher ou XPress, le placement d'un objet s'effectue à l'aide d'une boîte indépendante du reste du contenu de la page où l'on insère du texte ou des images.  Le positionnement relatif : (le moins précis) il est identique au HTML, le navigateur affichera l'élément par rapport à l'emplacement de la balise concernée (dans le code source de la page). Exemple de positionnement relatif : <DIV STYLE="position: relative; left: 50; top:100"> Ce texte est placé à 50 pixels (de la bordure gauche) de la commande DIV (code source HTML de la page) et à 100 pixels du haut de la commande DIV </DIV> Exemple de positionnement absolu : <DIV STYLE="position: absolute; left: 50; top:100"> Ce texte est placé à 50 pixels de la bordure gauche de la fenêtre du navigateur et à 100 pixels du haut de cette même fenêtre </DIV> Note : La valeur z-index précise le chevauchement des éléments les uns par rapport aux autres (image en dessous du texte par exemple). Un élément sera affiché au-dessus d'un autre s'il possède un ordre d'affichage supérieur, par exemple si un élément à la valeur : {z-index: 2} il va alors recouvrir l'élément qui a comme valeur {z-index: 1}. uploads/s3/ internet-css.pdf