La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

Chapitre 4. Les feuilles de styles : CSS CSS : Cascading style sheet.

Présentations similaires


Présentation au sujet: "Chapitre 4. Les feuilles de styles : CSS CSS : Cascading style sheet."— Transcription de la présentation:

1 Chapitre 4. Les feuilles de styles : CSS CSS : Cascading style sheet

2 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 dimages

3 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 CSS2 au même degr é. L'acronyme CSS signifie Cascading Style Sheets (feuilles de styles en cascade).

4 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.

5 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

6 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 }

7 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é à lattribut style dune balise

8 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 lensemble dun site, Évolution rapide du « design » dun site. Feuille de style spécifique au média (taille de lécran, imprimante,...)

9 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 d un document HTML, Exemple : Histoire des feuilles de styles 1. La balise 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

10 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, Ces styles seront d é finies uniquement pour le document courant. Exemple : Nom du document Application d'un style sur un é l é ment texte du paragraphe…

11 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 :

12 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. Lensemble des balises HTML sont des sélecteurs potentiels

13 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 ;

14 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}

15 Notions de boîtes Le concept de bo î te (box) dans CSS-2 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.

16 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

17 Notions de boîtes

18 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

19 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: éléments HTML

20 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 :

21 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:

éléments HTML

22 Notions de boîtes LAYER AttributValeurLibellé NameChaineIdentifiant de la balise TopEntierPosition absolue / partie supérieur de lécran LeftEntierPosition absolue / partie gauche de lécran WidthEntierLargeur HeightEntierHauteur zIndexEntierPosition VisibilityShow Hidden Valeur de superposition

23 Notions de boîtes DIV SPAN AttributStyleValeur Libell é IDChaineIdentifiant de la balise NameChaineNom de la balise Positionstatic absolute relative Aucun mouvement par rapport au document positionnement par rapport au document par rapport à l' é l é ment pr é c é dent Topauto valeur num é rique enti è re valeur en pourcentage (%) distance au sommet automatique distance au sommet en pixels distance au sommet en pourcentage

24 Notions de boîtes DIV SPAN AttributStyleValeur Libell é Leftauto 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 Widthauto 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

25 Notions de boîtes DIV SPAN AttributStyleValeur Libell é Heightauto valeur num é rique enti è re valeur en pourcentage (%) hauteur automatique hauteur de l' é l é ment en pixels hauteur de l' é l é ment en pourcentage zIndexauto valeur num é rique enti è re superposition automatique valeur indiquant la profondeur Visibilityinherit hidden visible visibilit é par d é faut cach é visible Valeur de superposition

26 Propriétés de styles Padding Margin Color Border Font Display Filtre dimage

27 Notions de class Les class permettent d'affecter des styles diff é rents à des balises (modification dynamique de l'aspect d'une page HTML). Il est possible d ajouter une classe à un s é lecteur. La d é finition des classes:.nom_de_la_classe {propriété de style: Valeur; propriété de style: Valeur...} Pour utiliser une classe :... Javascript va permettre grâce à sa gestion d' é v é nement de changer dynamique la classe associ é e à une balise. (cf cours sp é cifique).

28 Notions de class Une même balise peut avoir plusieurs descriptions de styles. Exemple : Q.fra {color: blue} Q.ang {color: red} L'application des styles ainsi d é finis s effectuera via l'attribut class: Exemple : contenu de l'élément…

29 Notions de class Les ID permettent d'identifier les balises et d'associer un style à une balise. Javascript va r é f é rencer la r è gle de style voulue grace à l'ID On l'utilisera de la mani è re suivante :... Diff é rences entre l utilisation de l ID et de la CLASS ? –ID unique –CLASS multiple et modifiable

30 Notions de class En javascript pour changer la class associ é e à une balise on utilisera la propri é t é className. Bonjour Pour affecter un style à une balise en Javascript : document.all.nom_ID.style.propriété_de_style Ou nom_ID est l identifiant d une balise par exemple.

31 Notions de pseudo-class Les pseudo-classes sont en fait des classes sp é ciales permettant d'obtenir des effets particuliers. Certains des effets sont dynamiques et surviennent pendant ou apr è s une action de l'utilisateur. Pseudo-classe :first-child :first-childLa pseudo-classe :first-child affecte le premier é l é ment-enfant d'un autre é l é ment. Exemple de r è gle DIV > P:first-child {color: blue}

32 Notions de pseudo-class Analyse de la syntaxe utilis é e. Le premier s é lecteur indique l' é l é ment parent, le signe > pr é c è de le deuxi è me s é lecteur pour lequel la pseudo-classe :first-child est sp é cifi é e. On comprendra ainsi que tout premier é l é ment- enfant "paragraphe" d'un é l é ment sera affich é en bleu dans le document.

33 Notions de pseudo-class Pseudo-classes pour les liens :Link, :visitedCes deux pseudo-classes permettent de d é finir un style pour les hyperliens non-visit é s (link) et un autre pour les hyperliens visit é s (visited). Exemple de r è gle : A:link {color: blue} A:visited {color: green} Ainsi, les hyperliens non-visit é s seront affich é s en bleu et les hyperliens visit é s seront affich é s en vert.

34 Notions de pseudo-class Pseudo-classes dynamiques Ces pseudo-classes permettent de d é finir des effets de style survenant lors d'actions de l'utilisateur. :hoverSurvient lorsque l'utilisateur pointe l' é l é ment : Exemple de r è gle A:hover {background-color: yellow} la couleur d'arri è re-plan d'un hyperlien passera au jaune d è s que l'utilisateur le pointera.

35 Notions de pseudo-class :activeSurvient lorsque l'utilisateur active (clique sur) l' é l é ment : Exemple de r è gle : A:active {color: red} la couleur du texte d'un hyperlien passera au rouge d è s que l'utilisateur l'activera.

36 Notions de pseudo-class Exemple A:link{ color: #000099; text-decoration: none; font-weight: normal } A:visited{ color: #000099; text-decoration: underline; font-weight: bold; } A:hover{ color: #ff0066; text-decoration: underline; font-weight: normal;}

37 Notions de pseudo-class :focusSurvient lorsque l' é l é ment obtient le focus via le clavier ou le pointeur de la souris. Exemple de r è gle : A:focus {font-size: larger} la taille du texte sera augment é e d'un cran lorsque l' é l é ment obtiendra le focus.

38 Notions de pseudo-éléments Il existe quatre pseudo- é l é ments. Ils permettent d'agir sur du contenu impossible à identifier avec le langage HTML. :first-lineS é lectionne la premi è re ligne d'un é l é ment. Exemple de r è gle : P:first-line {color: blue} La premi è re ligne de chaque paragraphe sera affich é e en bleu.

39 Notions de pseudo-éléments :first-letterS é lectionne la premi è re lettre d'un é l é ment, Exemple de r è gle : P:first-line {font-size: 24pt} la premi è re lettre de chaque paragraphe sera affich é e avec la taille 24 points. :after :before Ces pseudo- é l é ments permettent l'insertion de texte ou d'images devant ou apr è s le texte de l' é l é ment.

40 Règles spéciales Les AT-rules sont destin é es à fournir des informations à l Utilis é e au d é but d'une feuille de styles permet l importation d une autre feuille de styles. Sa valeur doit être une URL Exemple de r è gle url(http://www.reseau.com/styles.css)http://www.reseau.com/styles.css Plusieurs r è une à la suite de l'autre.

41 Règles Permet d'indiquer le m é dia cible Plusieurs r è peuvent cohabiter. Chacune d'entre-elles devant être associ é es à des r è gles sp é cifiques. Exemple de r è gle print {BODY {background-color: white} Dans cet exemple, la r è gle de style qui suit est destin é e aux imprimantes.

42 Règles spéciales Liste des m é dias disponibles –allTous les m é dias. –auralSynth é tiseurs vocaux. –brailleAppareils lisant le braille. –embossedImprimantes pour le braille. –handheldPetits é crans, é crans monochromes, etc. –printImprimantes et dispositifs d'aper ç u avant impression. –projectionProjecteurs, ac é tates é lectroniques. –screen É crans d'ordinateurs. –tty É crans de type t é l é type (terminaux). –tvT é l é vision

43 Règles D é finir les param è tres d'une bo î te de page (page box), Une bo î te de page est une zone contenant deux aires appel é es aire de la page (page area) et aire des marges (margin area), Cette r è gle permet d'ins é rer des instructions concernant les dimensions, orientation, marges, etc.. La bo î te de page agit en tant que bo î te englobante

44 Règles spéciales La r è peut utiliser les propri é t é s suivantes : –size, –margin, –marks Exemple { size: 8.5in 11in; margin: 2cm } Les propri é t é s des pages de gauche et de droite se pr é sentent comme suit :left { size: 8.5in 11in; margin: 2cm :right { size: 8.5in 14in; margin: 2cm } Il est aussi possible de sp é cifier les propri é t é s de la premi è re page du document :first { size: landscape; margin: 2cm }

45 Les unités de mesures Unités de longueurs (lenght) Les longueurs, tailles, épaisseurs des propriétés définies dans les styles sont à associer à des unités de mesures. Exemples. : 10pt 1.2em 0.7em 12px 0

46 Les unités de mesures Deux groupes d'unités de longueurs sont utilisées avec CSS2 : Unités de longueurs relatives –Elles permettent un ajustement automatique des dimensions en fonction du support employé. –em(relative à la taille définissant l'élément parent. 1.2em = 120% de la taille de caractère définie dans l'élément parent) –ex(relative à la valeur de la hauteur définie dans lélément parent (x-height).) –px(valeur relative à la résolution du support visuel, par exemple l'écran)

47 Les unités de mesures Unités de longueurs absolues Intéressantes uniquement lorsque le support de sortie du document est connu à l'avance. – in(pouces) –cm(centimètres) –mm(millimètres) –pt(points; 1pt = 1/72in) –pc(picas; 1pc = 12pt) Pourcentage –Les pourcentages sont composés d'un nombre suivi du symbole %.

48 Les unités de mesures Les couleurs Une valeur de couleur est définie par un nom (nom de la couleur lorsqu'elle existe) ou un code de couleur RGB. Noms de couleurs : aqua, black, fuschia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white et yellow. Codes de couleurs : #rrggbbex. : #6666FF

49 Les commentaires P { font-size : 10px ; } /* commentaire ici */

50 Les filtres dimages Spécifiques à Internet Explorer Disponibles à partir de la version –xRay(enabled=1) –gray(enabled=1) –invert(enabled=1) –alpha(opacity=15,enabled=1) –flipV –flipH Exemple.filtre {filter:xRay(enabled=1) gray(enabled=1) invert(enabled=1) alpha(opacity=15,enabled=1) flipV flipH}

51 Les filtres dimages Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?) BlendTrans(Duration=?) Blur(Add=?, Direction=?, Strength=?) Chroma(Color=?) DropShadow(Color=?, OffX=?, OffY=?, Positive=?) FlipH FlipV Glow(Color=?, Strength=?) Gris Invert (invert) Lumière Mask(Color=?) RevealTrans(Duration=?, Transition=?) Shadow(Color=?, Direction=?) Wave(Add=?, Freq=?, LightStrength=?, Phase=?, Strength=?) Xray

52 Les filtres dimages Exemple : –fliph(enabled=1) –flipv(enabled=1) –gray(enabled=1) –invert(enabled=1) –xray(enabled=1) –alpha(opacity=50,enabled=1) –blur(direction=45,strength=15, add=0, enabled=1) –chroma(color=#FF0000,enabled=1) –dropshadow(offx=5, offy=9, color=#008fff,enabled=1) –glow(strength=5, color=#ffff00,enabled=1) –mask(color=#FF0000,enabled=1) –shadow(color=#FF0088,direction=315,enabled=1) –wave(freq=2, strength=6, phase=0, lightstrength=0, add=0, enabled=1) –wave(freq=4, strength=8, phase=0, lightstrength=25, add=1, enabled=1) –chroma(color=#ff0000,enabled=1) shadow(color=#ff0000,enabled=1) chroma(color=ffff00,enabled=1)


Télécharger ppt "Chapitre 4. Les feuilles de styles : CSS CSS : Cascading style sheet."

Présentations similaires


Annonces Google