Les feuilles de style

Dimension: px

Commencer à balayer dès la page:

Download "Les feuilles de style"

Blanche Robichaud
il y a 6 ans
Total affichages :

1 1 Les feuilles de style 1. introduction déclaration de style dans le document définitions de style dans les fichiers externes Les attributs de définitions de style introduction Jusqu à présent nous avons mis en forme les documents HTML à l intérieur du document HTML. Cette méthode, si elle semble simple, présente plusieurs défauts :! La mise en forme est obligatoirement la même pour toutes les personnes ayant accès au document! La modification de la mise en forme est longue et délicate : il faut arriver à retrouver toutes les balises de mise en forme! La même présentation ne peut pas être réutilisée facilement : il faut la refaire chaque fois. C est pourquoi il peut être utile de séparer document et mise en forme en utilisant des feuilles de style ou en définissant une déclaration de style à l intérieur du document. A partir de la version d'internet Explorer 3.0 (qui 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. 2. déclaration de style dans le document Il est possible de définir un style pour un document à l intérieur des balises <STYLE> </STYLE> dans la zone <HEAD>. # STYLE SIMPLE On peut définir pour chaque balise un style en donnant le nom de la balise suivit de sa définition de style. h1{color: blue; font-style: italic} <h1>les feuilles CSS</h1> <p>moi je n'ai pas de style</p>

2 2 L attribut type permet d informer le navigateur du type de feuille de style utilisé. Pour les feuilles CSS le type est "text/css" il existe des feuilles de style JavaScript définit par : "text/javascript". # PLUS DE STYLES Pour ne pas être obligé d utiliser le même style pour toutes les balises de même nom, on peut utiliser l attribut CLASS à des balises HTML. On définit dans la partie style, des classes de styles que l on applique ensuite aux attributs des classes de même nom..bleue{color: blue; font-style: italic; text-align: center} //classe bleue.rouge{color: red; font-weight: bold}// classe rouge p{color: green} // paragraphe <h1 class=bleue>les feuilles CSS</h1> <h1 class=rouge>comment faire des multiples styles</h1> <p>moi je suis un paragraphe</p> # ENCORE PLUS DE STYLES La définition d une classe peut être relativement longue pour pouvoir régler un grand nombre de paramètres. Pour ne pas tout redéfinir, dans le cas où peu d attributs changent de valeur, on peut utiliser des ID qui permettront de modifier certains attributs tout en gardant tous les autres de la classe. Dans la définition de style le caractère # est l indicateur de définition d un ID en mode CSS.

3 3.bleue{color: blue; font-style: italic; font-size: 40; text-align: center} #mod {color: black; font-weight: bold}.rouge{color: red; font-weight: bold} p{color: green} <h1 class=bleue>les feuilles CSS</h1> <h1 class=bleue ID=mod>Le style en HTML</h1> <h1 class=rouge>comment faire des multiples styles</h1> <p>moi je suis un paragraphe</p> On peut aussi faire précéder la définition d un ID d un nom de balise pour restreindre la portée de l ID à cette balise HTML. H1#mod {color: black; font-weight: bold} N autorise l ID mod que pour les balises H1. # LA BALISE SPAN La balise SPAN permet d appliquer un style à une partie de texte non balisée (une partie de paragraphe par exemple). Il suffit de positionner une balise <SPAN></SPAN> au morceau de texte concerné. A l intérieur d une balise SPAN, on peut appliquer du style comme à l intérieur des autres balises. On peut donc appliquer les attributs CLASS ou ID..bleue{color: blue; font-style: italic; font-size: 40; text-align: center} #mod {color: black; font-weight: bold}.rouge{color: red; font-weight: bold}.p{color: green}

4 4.exec{background-color: black; color: white; font-size: 30}.jav{background-color: #CDCDCD; color: black; font-size: 25} <h1 class=bleue>les feuilles CSS</h1> <h1 class=bleue ID=mod>Le style en HTML</h1> <h1 class=rouge>comment faire des multiples styles</h1> <p class=p> Il existe de nombreuses façons d'appliquer du style en HTML. Il existe la balise style, <SPAN class=exec>les feuilles de style CSS</SPAN><SPAN class=jav> Les feuilles de style JavaScript</span></p> # GROUPEMENT Afin de simplifier l écriture, il est possible de grouper plusieurs balises HTML, sur une même liste de définition. h1,h2,h3 {color: blue; font-style: italic} # SELECTION CONTEXTUELLE Il est possible de définir dans quel contexte le style va s appliquer. Par exemple, on souhaite que seules les citations (CITE) définies dans les titres de niveau H2 soient de couleur bleue. h1{color: red; font-style: italic; font-size: 40; text-align: center} h2 CITE {color: blue; font-weight: bold} <h1 >Les feuilles CSS</h1> <h1 >Le style en HTML</h1>

5 5 <h2> Il existe de nombreuses façons d'appliquer du style en HTML. Il existe la balise style, <CITE>les feuilles de style CSS</CITE> Les feuilles de style JavaScript</h2> # HERITAGE DE STYLES Lorsqu on imbrique d autres balises à l intérieur de balises définissant un style, elles héritent du style défini dans les balises de niveau supérieur..bleue{color: blue; font-size: 40;text-align: center} <h1 class=bleue>les feuilles CSS <br><em>le style en HTML</EM><br>// applique le style de H1 comment faire des multiples styles</h1> 3. définitions de style dans les fichiers externes Pour éviter de recopier dans un ensemble de document HTML des définitions de style qui sont communes, on utilise des feuilles de styles externes qui sont jointes au document. # LE FICHIER STYLE Le fichier style ne contient que les définitions de styles en langage CSS (ou JavaScript), sans commencer par une balise <style> ou autre. L extension du fichier n a pas de règle précise.

6 6 Pour aider à la compréhension du fichier on peut rajouter des commentaires, encadrés par : /* */. # UTILISATION DES FICHIERS DE STYLES Pour lier un fichier style à un document HTML on utilise la balise <LINK> dans la partie HEAD du document. Syntaxe : <LINK REL=stylesheet TYPE=text/norme HREF="adresse"> L attribut REL=stylesheet permet d indiquer que le fichier que l on veut utiliser est un fichier de styles. Il est possible grâce à cette balise de référencer d autres types de fichier. L attribut TYPE permet de spécifier la norme utilisée (text/css ou text/javascript). L attribut HREF va permettre de spécifier l adresse du fichier de style. Document HTML <LINK REL=stylesheet TYPE=text/css HREF="style1.css"> <h1 class=bleue>les feuilles CSS</h1> <h1 class=bleue ID=mod>Le style en HTML</h1> <h1 class=rouge>comment faire des multiples styles</h1> <p class=p>il existe de nombreuses façons d'appliquer du style en HTML. Il existe la balise style, <SPAN class=exec>les feuilles de style CSS</SPAN><SPAN class=jav> Les feuilles de style JavaScript</span></p> Document CSS.bleue{color: blue; font-style: italic; font-size: 40;text-align: center} #mod {color: black; font-weight: bold}.rouge{color: red; font-weight: bold}.p{color: green}.exec{background-color: black; color: white; font-size: 30}.jav{background-color: #CDCDCD; color: black; font-size: 25} Le résultat obtenu est le même que précédemment (balise SPAN). 4. les attributs de définitions de styles Les principaux attributs de définition de style sont :

7 7 Nom font-size font-style font-family font-weight line-height text-align text-indent text-transform Définition Taille de la police de caractères Style (normal ou italic) Police utilisée «graisse» des caractères (normal, bold, bolder, lighter) Hauteur de l interligne (nombre ou pourcentage) Alignement du texte (right, left, justify) Retrait du texte sur la première ligne (pourcentage ou nombre) Transformation du texte en minuscule (lowercase), majuscule (uppercase), premier caractère en majuscule (capitalize) Il existe des attributs permettant de fixer le style d un bloc (paragraphe, balise H1..), son positionnement dans la page. Il faut faire attention : le positionnement se fait d un bloc par rapport à un autre. Nom height width background-color background-image margin-right margin-left margin-top margin-bottom padding-right padding-left padding-top padding-bottom border-style border-top-width border-right-width border-bottom-width border-left-width border-color Hauteur du bloc Largeur du bloc Couleur de fond Image de fond Marge de droite Marge de gauche Marge du haut Marge du bas Espace à droite Espace à gauche Espace en haut Définition Espace en bas Bordure (none : pas de bordure, 3D : en relief, solid :trait plein) Taille segment du haut Segment de droite Segment du bas Segment de gauche Couleur de la bordure

8 Feuille de style :.bleue{color: blue; font-style: italic; font-size: 40;text-align: center} #mod {color: black; font-weight: bold}.rouge{color: red; font-weight: bold}.p{color: green}.

8 8 Feuille de style :.bleue{color: blue; font-style: italic; font-size: 40;text-align: center} #mod {color: black; font-weight: bold}.rouge{color: red; font-weight: bold}.p{color: green}.exec{background-color: black; color: white; font-size: 30}.jav{background-color: #CDCDCD; color: black; font-size: 25} h1{background-color: yellow; margin-right: 40; margin-left: 40; margin-top: 40; margin-bottom: 20; padding-bottom: 60; border-color: black; border-style: solid} p{margin-right: 40; margin-left: 40; margin-top: 40}

Documents pareils

.. CSS. Damien Nouvel. Damien Nouvel (Inalco) CSS 1 / 15

.. CSS. Damien Nouvel. Damien Nouvel (Inalco) CSS 1 / 15 .. CSS Damien Nouvel Damien Nouvel (Inalco) CSS 1 / 15 Feuilles de styles Plan 1. Feuilles de styles 2. Sélecteurs 3. Attributs Damien Nouvel (Inalco) CSS 2 / 15 Feuilles de styles Déportation des styles