Remerciez-le!

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

Chapitre 2 Les feuilles de styles : CSS3 CSS : Cascading style sheet Enseignant

Chapitre 2 Les feuilles de styles : CSS3 CSS : Cascading style sheet Enseignante : Mme Mayssa Bensalah Email : bensalah-maissa@hotmail.fr Plan du chapitre 1. Introduction 2. Historique 3. Structure des feuilles de styles 4. Héritage 5. Localisation externe, interne, intra-ligne 6. Règles de rédaction 7. Sélecteurs regroupés 8. Notions de boites 9. Propriétés de styles 10. Notions de class 11. Notions de pseudo-class 12. Notions de pseudo-élément 13. Règles spéciales 14. Unités de mesures 15. Commentaires 16. Filtres d’images Introduction Les feuilles de styles offrent un moyen efficace pour contrôler l'apparence et le rendu des documents HTML. Elles permettent de séparer le contenu de la forme. Tous les navigateurs n'interprètent pas toutes les propriétés CSS au même degré. L'acronyme CSS signifie Cascading Style Sheets (feuilles de styles en cascade). Historique • Conçu initialement pour HTML, la première version dite CSS niveau 1 (CSS-1) est publiée en 1996, • Les feuilles de styles sont apparues en 1997 avec le browser Internet Explorer 3.0, • 1998, le W3C publie une nouvelle version CSS-2. Elle introduit la notion de type de média, • Elles se sont généralisées avec les versions 4.0 d'Internet Explorer et de Netscape Navigator. • IE 5 gère la quasi totalité des spécifications CSS-2, • Le site du W3C propose une validation en ligne permettant de vérifier la conformité d’un style à la norme CSS-2. Structure des feuilles de styles • Une feuille de styles est composée d'un ensemble de descriptions de styles. Sélecteur { propriété: valeur; propriété: valeur … } • Exemple : H2 { COLOR: navy; FONT: 18px; FONT-FAMILY: sans-serif } • Aucune limite dans le nombre de couple propriétés / valeurs Héritage • Pour chaque propriété la valeur « inherit » permet de préciser si la valeur doit être héritée. • Exemple : H3 { COLOR: navy; FONT: inhérit; FONT-FAMILY: sans-serif } Localisation des styles La déclaration de règles de styles peut être soit : • externe au document HTML dans une feuille de style, • interne au document HTML dans la section HEAD, • intra-ligne, associé à l’attribut style d’une balise Feuille de styles externe • Séparation de la présentation de la page HTML, • Réduit la taille de la page HTML, • Style identique pour l’ensemble d’un site, • Évolution rapide du « design » d’un site. • Feuille de style spécifique au média (taille de l’écran, imprimante,...) Feuille de styles externe • Une feuille de styles externe est un fichier texte portant habituellement l'extension .css, • Le lien entre le document HTML et le fichier CSS s’effectue dans la section <HEAD> d’un document HTML, • Exemple : <HEAD> <TITLE>Histoire des feuilles de styles</TITLE> <link REL="StyleSheet" TYPE="text/css" HREF="../styles.css"> </HEAD> 1. La balise <LINK> avertit le navigateur qu'il doit établir un lien 2. rel=stylesheet précise qu'il s'agit d'une feuille externe 3. type="text/css" avertit qu'il s'agit de feuilles de style en cascade 4. href=" ... " définit l'emplacement de la feuille de style Feuille de styles interne • Une feuille de styles interne est insérée en en-tête du fichier HTML à l'aide de l'élément <STYLE>, • Ces styles seront définies uniquement pour le document courant. • Exemple : <HEAD> <TITLE>Nom du document</TITLE> <style>  </style> </HEAD> • Application d'un style sur un élément <P CLASS="toto">texte du paragraphe… Styles intra-ligne • La description d'un style intra-ligne est insérée directement dans la balise d'ouverture d'un élément HTML, • Le style est appliqué à l'aide de l'attribut HTML style inséré dans la balise d'ouverture de l'élément, • Exemple : <P STYLE="COLOR: navy; FONT: 12px; FONT-FAMILY: sans- serif"> Règles de rédaction Les règles sont à la base de toute feuille de styles. Elles ont une syntaxe précise et sont construites de la manière suivante : Sélecteur {propriété: valeur; propriété: valeur …} Une règle est composée du sélecteur suivi du bloc de déclaration définissant le style. Le sélecteur identifie le style, il lui donne son nom. L’ensemble des balises HTML sont des sélecteurs potentiels Règles de rédaction Les accolades ( { } ) fixent les limites d'un bloc de déclarations. Un bloc de déclaration comprend l'ensemble de toutes les déclarations composant un style. Une déclaration est composée du nom d'une propriété, suivi du caractère deux-points ( : ) puis des valeurs associées à la propriété. Chaque déclaration doit être terminée par un ; Sélecteurs regroupés • Possibilité de regrouper plusieurs sélecteurs pour une même description de style. • Exemple : H1, H2, H3, H4 {color: blue} est identique à : H1 {color: blue} H2 {color: blue} H3 {color: blue} H4 {color: blue} Notions de boîtes • Le concept de boîte (box) dans CSS3 permet de définir les surfaces sur lesquelles sont appliquées plusieurs propriétés. • Le contenu de presque tous éléments d'un document est inséré dans une boîte. • Il est possible qu'une boîte soit placée à l'intérieur d'une autre et ainsi de suite. • Une boîte qui en contient une autre devient la boîte englobante de la deuxième. • Chaque boîte est composée de plusieurs rectangles portant des noms et ayant un rôle à jouer. Notions de boîtes • Ces rectangles sont formés par : – les marges (margin) – les bordures (borders) – la boîte de remplissage (padding) – la boîte de contenu (content) • Une Balise DIV est un cadre avec un espace et une marge (une boite), • Un Balise SPAN permet de définir un style spécifique pour un texte Notions de boîtes Notions de boîtes • Les balises DIV / LAYER permettent de définir des "couches" contenant des éléments et pouvant être positionnées sur l'écran. • Il s'agit en réalité de balises HTML spéciales pouvant contenir elles-mêmes d'autres balises HTML, et dont les attributs sont entre-autres: – La position par rapport au haut du navigateur, – La position par rapport à la bordure gauche du navigateur, – La largeur, – La hauteur, – Le Z-Index, c'est-à-dire le niveau de superposition de la balise Notions de boîtes • La première (LAYER) est une balise spécifique à Netscape Navigator, • Les balises DIV et SPAN sont plus génériques mais sont toutefois mieux supportées par Internet Explorer que Netscape Navigator • La syntaxe de la balise LAYER est la suivante: <LAYER NAME="Nom de la couche" LEFT="Distance au bord gauche" TOP="Distance au haut"> éléments HTML </LAYER> Notions de boîtes • Ainsi, le positionnement de deux images superposées sous Netscape Navigator (version 4 ou supérieure) peut se faire de la manière suivante • Exemple : <LAYER NAME="IMG1" LEFT="20" TOP="30"> <IMG SRC="image.gif"> </LAYER> <LAYER NAME="IMG2" LEFT="25" TOP="35"> <IMG SRC="image2.gif"> </LAYER> Notions de boîtes • Avec Internet Explorer (versions 4 et supérieures), le positionnement des éléments se fait selon le concept des CSS-2, au moyen des balises DIV et SPAN. • Avec les balises DIV et SPAN, le positionnement peut se faire de deux façons: – Le positionnement absolu se détermine par rapport au coin supérieur gauche de la fenêtre du navigateur. Les coordonnées d'un point s'expriment alors de haut en bas (top) et de gauche à droite (left). – Le positionnement relatif se fait par rapport à d'autres éléments, comme une image, c'est-à-dire que les éléments contenus dans la balises DIV ou SPAN seront positionnés à la suite des éléments HTML après lesquels ils se trouvent. • La syntaxe des balises DIV/SPAN est la suivante: <DIV style="position: absolute; top: 99 px; left: 99 px; visibility : visible;z-index : 2;"> éléments HTML </DIV> Notions de boîtes • LAYER Attribut Valeur Libellé Name Chaine Identifiant de la balise Top Entier Position absolue / partie supérieur de l’écran Left Entier Position absolue / partie gauche de l’écran Width Entier Largeur Height Entier Hauteur zIndex Entier Position Visibility Show Hidden Valeur de superposition Notions de boîtes • DIV • SPAN Attribut Style Valeur Libellé ID Chaine Identifiant de la balise Name Chaine Nom de la balise Position static absolute relative Aucun mouvement par rapport au document positionnement par rapport au document par rapport à l'élément précédent Top auto valeur numérique entière valeur en pourcentage (%) distance au sommet automatique distance au sommet en pixels distance au sommet en pourcentage Notions de boîtes • DIV • SPAN Attribut Style Valeur Libellé Left auto valeur numérique entière valeur en pourcentage (%) distance à la bordure gauche automatique distance à la bordure gauche en pixels distance à la bordure gauche en pourcentage Width auto valeur numérique entière valeur en pourcentage (%) largeur automatique largeur de l'élément en pixels largeur de l'élément en pourcentage Largeur Notions de boîtes • DIV • SPAN Attribut Style Valeur Libellé Height auto valeur numérique entière valeur en pourcentage (%) hauteur automatique hauteur de l'élément en pixels hauteur de l'élément en pourcentage zIndex auto valeur numérique entière superposition automatique valeur indiquant la profondeur Visibility inherit hidden visible visibilité par défaut caché visible Valeur de superposition Propriétés de styles • Padding • Margin • Color • Border • Font • Display • Filtre d’image Notions de class • Les class permettent d'affecter des styles différents à des balises (modification dynamique de l'aspect d'une uploads/s3/ cours-css3.pdf