Remerciez-le!

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

CSS (Cascading Style Sheet) 1 Présentation des feuilles de style (01) Présenta

CSS (Cascading Style Sheet) 1 Présentation des feuilles de style (01) Présentation des feuilles de style Le concept de feuilles de style est apparu en 1996 avec la publication par le W3C d'une nouvelle recommandation intitulée Cascading StyleSheets (feuilles de style en cascade). Les feuilles de style ont été mises au point afin de compenser les manques du langage HTML en ce qui concerne la mise en page et la présentation. Le HTML offre un certain nombre de balises permettant de mettre en page et de définir le style d'un texte, toutefois chaque élément possède son propre style, indépendamment des éléments qui l'entourent. En utilisant les feuilles de style, lorsque la charte graphique d'un site composé de plusieurs « centaines » de pages web doit être changée, il suffit de modifier la définition des feuilles de style en un seul endroit pour changer l'apparence du site tout entier ! 2 Présentation des feuilles de style (02) Présentation des feuilles de style Exemple d’utilisation On souhaite, par exemple, que toutes les pages d'un site aient les mêmes attributs : police de caractères : Helvetica ; couleur de fonds : bleu pâle ; titres : centrés et soulignés.; paragraphes : commençant par un retrait de 12 pixels; marge générale de 10 pixels ; espacement autour des tableaux et images de 8 pixels ; certains paragraphes qu'on considère comme des annotations ou notes : en italique, taille des caractères diminuée à 70%. En HTML, ces caractéristiques peuvent être codées à chaque endroit où elles apparaissent. Mais cela présente plusieurs inconvénients : travail fastidieux et long ; risque d'erreurs et d'omissions ; si on veut modifier un élément de présentation, il faut reprendre tous les fichiers déjà existant, puis les remettre en ligne. 3 Présentation des feuilles de style (03) Présentation des feuilles de style Exemple d’utilisation Les CSS simplifient le travail : Tous les attributs communs à plusieurs fichiers HTML peuvent être déclarés une seule fois dans un fichier particulier il suffira de faire référence en tête de chaque page HTML. Toute modification de la "feuille de style" sera immédiatement appliquée partout où cette dernière est utilisée. 4 Présentation des feuilles de style (04) Présentation des feuilles de style Le principe des feuilles de style consiste à : Attribuer des caractéristiques de mise en forme à des groupes d'éléments. Il est par exemple possible de décider de créer un groupe de titres en police Arial, de couleur verte et en italique. Autoriser le contrôle des attributs de présentation de la totalité des balises d'un projet HTML à partir d'une seule et unique feuille CSS. On les appelle "feuilles de style en cascade" car on peut en définir plusieurs, et, en cas de redondance de style, un ordre de priorité est donné par le navigateur. Les feuilles de style permettent: D'avoir une présentation homogène sur tout un site sans répéter dans chacune des pages les commandes de mise en forme. De pouvoir changer l'aspect du site entier en modifiant quelques lignes. Une plus grande lisibilité du HTML. Le positionnement rigoureux des éléments. Des chargements de page plus rapides. 5 Présentation des feuilles de style (05) La compatibilité des navigateurs Malgré l'existence de recommandations du W3C, les feuilles de style ne sont pas reconnus de la même façon selon les navigateurs. Le premier navigateur a avoir intégré les feuilles de style est Microsoft Internet Explorer 3.0, puis l'utilisation des feuilles de style s'est généralisé avec les versions 4.0 et supérieures d'Internet Explorer et de Netscape Navigator. Navigateurs supportant les feuilles de style :  Microsoft Internet Explorer 3.0 (partiellement)  Microsoft Internet Explorer 4.x  Microsoft Internet Explorer 5.x  Microsoft Internet Explorer 6.x  Netscape Navigator 4.x  Netscape Navigator 6.x  Netscape Navigator 7.x  Opera 5.x  Opera 6.x  Opera 7.x 6 Insertion des styles (03) Insertion des styles On peut appliquer des règles de style à un document de différentes façons Grâce à une feuille de style intégrée au document, celle-ci sera située dans l'entête, entre les balises <head> ... </head> . On utilisera alors la balise <style> Une règle peut être appliquée directement à l'élément concerné, on parle alors de style en ligne. La balise aura alors l'attribut style Faire appel à une feuille de style externe au document. Elle est la plus conforme à l'esprit des CSS et aussi la plus pratique On l'appellera grâce à la balise <link> dans l'entête du document Importer une feuille de style, en utilisant @import dans la balise <style> 7 Insertion des styles (04) Insertion des styles Insertion dans un document HTML Une définition de mise en page par les feuilles de style sera encadré par une balise HTML spécifique. La commande <STYLE...> insère une définition des feuilles de style. La commande </STYLE> ferme la définition des feuilles de style. Les règles de présentation doivent être placées dans l'en-tête (<HEAD>) du document HTML. Des balises de commentaires devront encadrer l'énumération des définitions de style afin d'en éviter l'affichage dans un navigateur ne supportant pas cette technologie. <HTML> <HEAD> <STYLE> <-- Règles de style... --> </STYLE> ... </HEAD> <BODY> ... Diverses commandes HTML ... </BODY> </HTML> 8 Insertion des styles (05) Insertion des styles Insertion dans un document <html> <head> <title>style interne au document</title> <style type="text/css> html, body { font-family: sans-serif; background-color: white; } h1, h2 { color: blue; } p {text-align: justify; } </style> </head> </html> 9 Insertion des styles (06) Insertion des styles Les styles en ligne Il est possible d'appliquer aux balises HTML un style caractéristique à partir de la balise elle-même. La commande STYLE="Définition de style" insère une définition de style au sein d'une balise.  L'attribut STYLE est utilisable dans pratiquement toutes les balises HTML sauf : HTML, HEAD, BASE, META, TITLE, SCRIPT, STYLE, PARAM, BASEFONT <HTML> <HEAD> ... </HEAD> <BODY> <H1 STYLE="Style; Style2; etc."> Titre <H1> ... Diverses commandes HTML ... </BODY> </HTML> <p style="text-indent:15px"> Un style en ligne... </p> 10 Insertion des styles (07)  Insertion des styles  Les feuilles de style externes  Lorsqu'une définition est énumérée au sein d'un document HTML, les règles de présentation en découlant s'appliquent à la page courante.  Si l'on désire qu'une feuille de style provenant d'un fichier différent soit utilisée dans la présentation d'une page HTML, une commande spéciale est nécessaire afin de rapatrier les informations de style requises.  La commande <LINK...> applique une série de définitions externes des feuilles de style.  L'attribut HREF="Adresse du CSS" permet de lier le document courant à une feuille de style externe.  L'attribut REL="Type de relation« indique la relation entre le document et la cible. Stylesheet : Définit une feuille de style par défaut, ou une feuilles de style persistante. alternate stylesheet : Définit une feuille de style alternative. etc  L'attribut TITLE="Texte" spécifie si la feuille de style est par défaut et si elle peut être désactivée par l'utilisateur.  L'attribut TYPE="text/css définit les types de styles inclus au sein des balises <STYLE>.  L’attribut media précise le type de média concerné par les styles du document CSS.  Les valeurs de l’attribut media sont :  screen (écran d’ordinateur), print (imprimante), tty (télétype), tv (téléviseur), projections (rétro ou vidéo projecteur), handheld (PDA, téléphone), braille (terminal braille), aural (navigateurs oraux) et all (tous les médias). 11 Insertion des styles (08) Insertion des styles Les feuilles de style externes Mise en application : Création d'un fichier-feuille de style, portant l'extension .css (par exemple : monstyle.css). Dans l'en-tête des fichiers html concernés, insérer la spécification faisant référence à la CSS Éventuellement spécifier les styles particuliers dans le corps <HTML> <HEAD> <LINK HREF="Adresse cible" TYPE="text/css" REL="stylesheet" MEDIA="Type de Média"> <LINK HREF="Adresse cible" TYPE="text/css" REL="alternate stylesheet" TITLE="Description" MEDIA="Type de Média"> ... </HEAD> <BODY> ... Diverses commandes HTML ... </BODY></HTML> 12 Insertion des styles (09) Insertion des styles Les feuilles de style externes Le fichier de style .css Le fichier .html body { background-color: #EEEEFF ; font-family: Helvetica ; margin: 10 ; padding: 8 ; } p { text-indent: 12 } h1, h2, h3, h4, h5, h6 { text-align: center; text-decoration: underline ;} .note { font-size: 70% ; font-style: italic ; text-indent:12 } <html><head><title>appel à une feuille de style externe</title> <link rel="stylesheet" href="feuilledestyle.css" type="text/css" /> </head> 13 Insertion des styles (11) Insertion des styles Combinaison et alternative des feuilles de style externes Lorsqu'un appel à plusieurs feuilles de style externe est pratiqué, le résultat est une combinaison en cascade d'ensembles de définitions de style. Les styles spécifiés pour des balises HTML seront tous chargés à condition qu'ils soient tous affectés à des éléments différents. Dans le cas où les styles ne sont pas affectés à des éléments différents, les doublons seront écrasés en sachant que les derniers styles énoncés ont la priorité. En affectant la valeur stylesheet à l'attribut REL de la balise LINK, les feuilles de styles externes devraient logiquement se combiner. <LINK HREF="feuille1.css" REL="stylesheet"> <LINK HREF="feuille2.css" REL="stylesheet"> 14 Insertion des styles (12) Insertion des styles Combinaison et alternative des feuilles de style externes Si la valeur alternate stylesheet est appliquée uploads/s3/ css-2013-part-3.pdf