Qu'est-ce que CSS?

CSS: Cascading Style Sheets

CSS : comment afficher les éléments HTML

Ajoutés à HTML 4.0 pour résoudre un problème

Les feuilles de style externes permettent d'économiser beaucoup de travail

Les feuilles de style externes sont stockées dans des fichiers CSS

1/33

Feuilles de style pour résoudre un gros problème

HTML n'a jamais été destiné à contenir des balises pour le formatage d'un document.

HTML a été destiné à définir le contenu d'un document, comme:

<h1>Ceci est un titre</h1>

<p>Ceci est un paragraphe.</p>

Lorsque les balises comme <font>, et les attributs de couleur ont été ajoutées à la spécificationHTML 3.2, -> cauchemar pour les développeurs.

Processus long et coûteux.

Pour résoudre ce problème, le World Wide Web Consortium (W3C) a créé CSS.

En HTML 4.0, la mise en forme peut être retiré du document HTML, et stockée dans un fichierCSS séparé.

Tous les navigateurs prennent en charge CSS aujourd'hui.

CSS permet d'économiser beaucoup de travail!

2/33

Syntaxe CSS

Une règle CSS comporte deux parties principales: un sélecteur et une ou plusieurs déclarations:

h1 {color:blue;font-size:12px}

Le sélecteur est normalement l'élément HTML que vous voulez mettre en forme.

La propriété est l'attribut de style que vous souhaitez modifier. Chaque propriété a une valeur.

3/33

Commentaires en CSS

Les commentaires sont utilisés pour expliquer votre code, et peuvent vous aider lorsque vousmodifiez le code source à une date ultérieure. Les commentaires sont ignorés par les navigateurs.Un commentaire commence par CSS "/*", et se termine par "*/", comme ceci:

/*Ceci est un commentaire*/p{text-align:center;/*Un autre comentaire*/color:black;font-family:arial;}

4/33

CSS id et class

En plus de définir un style pour un élément HTML, CSS vous permet de spécifier vos propressélecteurs appelés id et class.

Le sélecteur d'ID est utilisé pour spécifier un style pour un seul élément unique.Le sélecteur d'ID utilise l'attribut id de l'élément HTML, et est définie par un "#".La règle de style ci-dessous sera appliquée à l'élément avec un id = "para1":

#para1{text-align:center;color:red;}

Le sélecteur de classe est utilisé pour spécifier un style pour un groupe d'éléments. Contrairementau sélecteur d'ID, le sélecteur de classe est le plus souvent utilisé sur plusieurs éléments.Cela vous permet de définir un style particulier pour les éléments HTML avec la même classe.Le sélecteur de classe utilise l'attribut HTML class, et est définie par un "."Dans l'exemple ci-dessous, tous les éléments HTML avec class = "center" seront alignés au centre:

.center {text-align:center;}p.center {text-align:center;}td.center {text-align:center;}...

5/33

Regroupement des sélecteurs

.texte {margin-left: 0;}p {margin-left: 0;}h1 {margin-left: 0;}h2 {margin-left: 0;}

Sera équivalent à :

.texte, p, h1, h2 {margin-left: 0;}

6/33

Regroupement des propriétés

p {font-family: Arial, sans-serif;font-style: italic;font-weight: bold;font-size: 120%;line-height: 140%;}

peut se remplacer en :

p {font : italic bold 120%/140% Arial, sans-serif;}

7/33

Autres sélecteurs hiérarchiques

Les normes CSS 2 et CSS 3 (actuellement en préparation) prévoient d’autres formes de sélectionhiérarchique. On peut ainsi ne désigner que le premier enfant d’un élément, ne pointer que deséléments directement adjacents à un autre, etc.Il est même possible de prendre en compte les attributs des éléments pour les sélectionner.

Motif Description

* n'importe quel élément.

e les éléments de type e

e f les éléments f descendants de e

e > f les élements f qui sont des fils de e

e:first-child les éléments e qui sont les premiers fils de leur parent

e:link, e:visited les éléments e s'ils sont les sources d'une ancre ou d'un hyperlien (pas encore visité ou visité)

e:active, e:hover, e:focus les éléments e suivant une action

e:lang(c) les éléments e dont la langue est c.

e + f les éléments f tel que l'élément frère qui précède est un élément e

e[foo] les éléments e avec un attribut "foo"

e[foo="warning"] les éléments e avec un attribut "foo" dont la valeur est "warning"

e[foo~="warning"] les éléments e avec un attribut "foo" dont l'une des valeurs est "warning"

e[lang|="en"]les éléments e avec un attribut "foo" dont l'une des valeurs (séparé par un trait d'union) est"en"

div.warning identique à div[class~="warning"]

e#myid l'élément e ayant pour id "myid"

8/33

Trois façon d'insérer une feuille de style

Feuille de style externe

Une feuille de style externe est idéal lorsque le style est appliqué à plusieurs pages.Avec une feuille de style externe, vous pouvez modifier l'apparence d'un site Web tout enchangeant un seul fichier.Chaque page doit être liée à la feuille de style en utilisant la balise <link> à l'intérieur de la sectiond'entêre:

<head><link rel="stylesheet" type="text/css" href="mystyle.css" /></head>

9/33

Trois façon d'insérer une feuille de style

Feuille de style interne

Une feuille de style interne doit être utilisée quand un seul document a un style unique. Vousdéfinissez les styles internes dans la section head d'une page HTML, en utilisant la balise <style>,comme ceci:

<head><style type="text/css">hr {color:sienna;}p {margin-left:20px;}body {background-image:url("images/back40.gif");}</style></head>

10/33

Trois façon d'insérer une feuille de style

Inline Styles

Utilisez cette méthode avec parcimonie!Pour utiliser des styles inline vous utilisez l'attribut de style dans la balise considérée.L'attribut style peut contenir n'importe quelle propriété CSS.L'exemple qui suit montre comment changer la couleur et la marge de gauche d'un paragraphe:

<p style="color:sienna;margin-left:20px">Ceci est un paragraphe.</p>

11/33

Plusieurs feuilles de style

Feuille de style externe

h3{color:red;text-align:left;font-size:8pt;}

Feuille de style interne

h3{text-align:right;font-size:20pt;}

Alors une feuille contenant les deux définitions aura comme propriétés:

color:red;text-align:right;font-size:20pt;

12/33

Plusieurs feuilles de style en cascade

Les styles peuvent être spécifiées à plusieurs endroits

A l'intérieur d'un élément HTMLDans la section entête du document HTMLDans un fichier externe

Remarque: Plusieurs feuilles de style externes peuvent être utiliséesPriorité:

Navigateur par défaut1.Feuille de style externe2.Feuille de style interne (section head)3.Style en ligne4.

Note: Si le lien vers la feuille de style externe est placée après la feuille de style interne en HTML,la feuille de style externe remplace la feuille interne.Hack CSS: !important permet de définir une propriété de style qui sera obligatoirement utilisé.

13/33

Toutes les propriétés de fond en CSS

Propriété Description Valeurs CSS (1 ou 2)

background fixe toutes les propriétés en une seule

background-colorbackground-imagebackground-repeat background-attachment background-position

1

background-attachmentl'image est fixe ou bouge avec le reste de lapage

scroll,fixed 1

background-color couleur de fond d'un élément

color-rgb (eg. rgb(255,255,255))color-hex(eg. #00ff00)color-name(eg. red,blue)transparent

1

background-image définit l'image de fond d'un élémenturl(url)none

1

background-positiondéfinit la position de départ d'une image defond

left top, left center, left bottom, righttop, right center, right bottom,center top, center center, centerbottomx% y%xpos ypos

1

background-repeat définit la répétition de l'image

repeatrepeat-xrepeat-yno-repeat

1

14/33

Toutes les propriétés de texte en CSS

Propriété Description Valeurs CSS (1 ou 2)

color définit la couleur d'un texte couleur 1

direction définit l'orientation du texte ltr, rtl 2

line-height définit la distance entre les lignes

normalnumberlength%

1

letter-spacingaugmenter ou diminuer l'espace entre lescaractères

normallength

1

text-align aligne le texte dans un élément left, right, center, justify 1

text-decoration ajoute une décoration au textenone, underline, overline,line-through, blink

1

text-indentretrait de la première ligne de texte dans unélément

length%

1

text-shadow ombre d'un textenonecolorlength

text-transform contrôles des lettres dans un élémentnone, capitalize, uppercase,lowercase

1

vertical-align définit l'alignement vertical d'un élément

baseline, sub, super, top, text-top,middle, bottom, text-bottomlength%

1

white-spacedéfinit comment sont traités les espaces àl'intérieur d'un élément

normal, pre, nowrap 1

word-spacing augmenter ou diminuer l'espace entre les motsnormallength

1

15/33

Toutes les propriétés de fonte en CSS

Propriété Description Valeurs CSS (1 ou 2)

fontdéfinit toutes les propriétés de police en unedéclaration

font-style, font-variant, font-weight,font-size/line-height, font-family,caption, icon, menu, message-box,small-caption, status-bar,

1

font-family spécifie la famille de polices pour le textefamily-namegeneric-family

1

font-size spécifie la taille de la police du texte

xx-small, x-small, small, medium,large, x-large, xx-large, smaller,larger, length%

1

font-style indique le style de police pour le texte normal, italic, oblique 1

font-variantindique si un texte doit être affiché dans unepolice small-caps

normal, small-caps 1

font-weight indique l'épaisseur d'une policenormal,bold, bolder, lighter100, 200, 300, 400, 500, 600, 700,800, 900

1

16/33

Toutes les propriétés de liste en CSS

Propriété Description Valeurs CSS (1 ou 2)

list-styledéfinit toutes les propriétés d'une liste en unedéclaration

list-style-typelist-style-positionlist-style-image

1

list-style-imagespécifie une image comme marqueur d'élémentde liste

urlnone

1

list-style-positionindique si le point de marqueurs liste doitapparaître à l'intérieur ou à l'extérieur du fluxde contenu

inside, outside 1

list-style-type indique le type de marqueur

none, disc, circle, square, decimal,decimal-leading-zero, armenian,georgian, lower-alpha, upper-alpha,lower-greek, lower-latin, upper-latin, lower-roman, upper-roman

1

17/33

Boîtes en CSS

Marge externe (margin) : efface une zone autour de la frontière. La marge est complètementtransparenteBordure (border) : Une frontière qui délimite la marge extérieure de la marge intérieure.Labordure est affectée par la couleur de fond de la boîteMarge interne (padding) : Efface une zone autour du contenu. La marge intérieure est affectéepar la couleur de fond de la boîteContenu : zone où le texte et les images apparaissent

La largeur d'un élément se calcule comme suit : largeur totale = largeur + padding gauche +padding right + bordure gauche + bordure droite + marge gauche + marge droite

La hauteur d'un élément se calcule comme suit : hauteur totale = hauteur + padding haut + paddingbas + bordure haute + bordure basse + marge haute + marge basse

marginborderpaddingcontenu

18/33

Boîtes en CSS

Compatibilité avec IE : IE inclut le padding et le border dans la largeur, lorsque la propriétéwidth est fixée, sauf si un DOCTYPE est déclaré.

marginborderpaddingcontenu

19/33

Toutes les propriétés de la bordure en CSS

Propriété Description Valeurs CSS (1 ou 2)

border toutes les déclaration en uneborder-width, border-style,border-color

1

border-bottomtoutes les déclarations pour border-bottom enune

border-bottom-width, border-bottom-style, border-bottom-color

1

border-bottom-color définit la couleur pour la bordure basse border-color 2

border-bottom-style définit le style de la bordure basse border-style 2

border-bottom-width définit l'épaisseur de la bordure basse border-width 1

border-color définit la couleur des quatre bordurescolor_name, hex_number,rgb_number, transparent

1

border-left toutes les déclarations pour border-left en uneborder-left-width, border-left-style,border-left-color

1

border-left-color définit la couleur de la bordure gauche border-color 2

border-left-style définit le style de la bordure gauche border-style 2

border-left-width définit l'épaisseur de la bordure gauche border-width 1

border-right toutes les déclarations pour border-right en uneborder-right-width, border-right-style, border-right-color

1

border-right-color définit la couleur de la bordure droite border-color 2

border-right-style définit le style de la bordure droite border-style 2

border-right-width définit l'épaisseur de la bordure droite border-width 1

border-style définit le style pour les quatre borduresnone, hidden, dotted, dashed, solid,double, groove, ridge, inset, outset

1

border-top toutes les déclarations pour border-top en uneborder-top-width, border-top-style,border-top-color

1

border-top-color définit la couleur pour la bordure haute border-color 2

border-top-style définit le style pour la bordure haute border-style 2

border-top-width définit l'épaisseur de la bordure haute border-width 1

border-width définit l'épaisseur pour les quatre borduresthin, medium, thicklength

120/33

Toutes les propriétés du contour en CSS

Un contour est une ligne dessinée autour des éléments, en dehors de la bordure, afin dedémarquer cet élément.

un exemple avec la propriété {outline-style:dotted;border:1px solid red;}

Propriété Description Valeurs CSS (1 ou 2)

outlinedéfinit toutes les propriétés du contour en unedéclaration

outline-color, outline-style,outline-width

2

outline-color définit la couleur du contourcolor_name, hex_number,rgb_number, invert

2

outline-style définit le style du contournone, dotted, dashed, solid, double,groove, ridge, inset, outset

2

outline-width définit l'épaisseur du contourthin, medium, thicklength

2

21/33

Toutes les propriétés de la marge extérieure enCSS

Propriété Description Valeurs CSS (1 ou 2)

margindéfinit toutes les propriétés de la margeextérieure en une déclaration

margin-top, margin-right, margin-bottom, margin-left

1

margin-bottom définit la marge extérieure basseautolength%

1

margin-left définit la marge extérieure gaucheautolength%

1

margin-right définit la marge extérieure droiteautolength%

1

margin-top définit la marge extérieure hauteautolength%

1

22/33

Toutes les propriétés de la marge intérieure enCSS

Propriété Description Valeurs CSS (1 ou 2)

paddingdéfinit toutes les propriétés de la margeintérieure en une déclaration

padding-top, padding-right,padding-bottom, padding-left

1

padding-bottom définit la marge intérieure basseautolength%

1

padding-left définit la marge intérieure gaucheautolength%

1

padding-right définit la marge intérieure droiteautolength%

1

padding-top définit la marge intérieure hauteautolength%

1

23/33

Affichage et visibilité en CSS

display:none

du texte<div> style="display:none;width:100px;height:100px;color:red"></div>du texte en dessous du div

du texte du texte en dessous du div

visibility:hidden

du texte<div style="visibility:hidden;width:100px;height:100px;color:red"></div>du texte en dessous du div

du texte

du texte en dessous du div

La propriété display permet de modifier la propriété d'afichage par défaut des éléments (block ouinline)

24/33

Positionnement des éléments en CSS

Le positionnement statique : les éléments HTML sont par défaut en position statique (par rapportau flux normal d'affichage). Les éléments en position statique ne sont pas affectés par lespropriétés top,left,right et bottom.

Le positionnement fixe : les éléments HTML en position fixe sont positionnés relativement parrapport à la fenêtre du navigateur. Ces éléments ne bougeront pas même si l'on se déplace dans lapage.

Le positionnement relatif : positionnement par rapport à sa position normale (positionnementstatique)

Le positionnement absolu : un élément en position absolu est positionné relativement par rapport àun élément parent dont la position est autre que statique. Si un tel élément parent n'existe pas leblock conteneur est <html>Les éléments en position absolue sont retirés du flux normal (comme la propriété display:none).Ces élément peuvent se chevaucher. On règle la priorité de chevauchement (par défaut le fluxnormal) en utilisant la propriété z-index en CSS. L'élément possédant la valeur la plus grande enz-index sera affiché au dessus des autres éléments.

25/33

Positionnement des éléments en CSS

Propriété Description Valeurs CSS (1 ou 2)

bottom définit le positionnement bas d'un élément auto, length, % 2

clip clip un élément possédant la position absolue. shape, auto 2

cursor spécifie le type de curseur à afficher

url, auto, crosshair, default, pointer,move, e-resize, ne-resize, nw-resize,n-resize, se-resize, sw-resize,s-resize, w-resize, text, wait, help

2

left définit le positionnement gauche d'un élément auto, length, % 2

overflowdéfinit ce que l'on doit faire si un élément sortde la boîte parente

auto, hidden, scroll, visible 2

position définit le positionnement d'un élément absolute, fixed, relative, static, 2

right définit le positionnement droit d'un élément auto, length, % 2

top définit le positionnement haut d'un élément auto, length, % 2

z-index définit l'empilement des éléments number, auto 2

Une liste dans le flux normal :

élément 11.élément 22.élement 33.

La même liste en position relative avec un décalage à gauche de 1 cm et de 0.5 cm en haut :

élément 11.élément 22.élement 33.

26/33

La propriété flottant en CSS

Par défaut, les éléments de type block occupent toute la largeur de la page, même si l'on spécifieune largeur.Pour positionner deux éléments de type block l'un à côté de l'autre, on utilise la propriétéfloat(left,right,none).

Exemple : deux éléments de type block de largeur 3cm dans le flux normal

Les mêmes avec la propriété {float:left;margin-left:2mm} :

Pour repositionnner les éléments HTML dans le flux normal, on utilise la propriétéclear(left,right,none,both)Même avec un <br/>, le texte continue à côté du div flottant.

Maintenant on revient dans le flux normal d'affichage.

27/33

Pseudo-classes en CSS

Nom Description CSS (1 ou 2)

:active ajoute un style à un élément qui est activé 1

:first-child ajoute un style à un élément qui est le premier enfant d'un autre élément 2

:focus ajoute un style à un élément qui a le focus clavier 2

:hover ajoute un style à un élément lorsque l'on passe la souris dessus 1

:lang ajoute un style à un élément avec un attribut lang spécifiques 2

:link ajoute un style à un lien non visité 1

:visited ajoute un style à un lien visité 1

28/33

Pseudo-éléments en CSS

Nom Description CSS (1 ou 2)

:after ajoute un contenu après un élément 2

:before ajoute un contenu avant un élément 2

:first-letter ajoute un style sur le premier caractère d'un texte (lettrine) 1

:first-line ajoute un style à la première ligne d'un texte 1

29/33

Maladies exotiques des CSS ?

La divite chronique

Symptômes : crise de la perception du monde sensé, le malade ne jurant plus que par une seulebalise : l’élément <div>, par lequel il remplace toutes les structures utilisées auparavant (tableauximbriqués, paragraphes, titres, citations, etc.). Le patient transforme donc tout ce qu’il a connu en<div>. Il s’exprime souvent de la sorte : « Sus aux tableaux ! Je les remplace par des <div>) ».

Conséquences : transformer cent cellules de tableaux imbriquées en autant de <div> imbriqués nerésout rien. La structure, plus complexe, est devenue incompréhensible et inutilisable.

Pire : remplacer toutes les balises logiques (<p>, <h1>, <cite>, <blockquote>, …) par la baliseunique et générique <div> fait perdre aux documents tout leur sens et toute leur sémantique, lesrendant inintelligibles aux navigateurs non graphiques et aux moteurs de recherche.

Traitement : un traitement lourd est nécessaire. Il faut (ré)apprendre au patient qu’un documentHTML doit avoir du sens et qu’il faut y utiliser chaque balise à bon escient : <p> structure desparagraphes, <div> délimite les grandes zones du document, <h1>… <h6> dénotent les niveauxde titres, <ul> introduit les listes et menus, etc. Le risque de rechute est alors faible.

30/33

Maladies exotiques des CSS ?

La classite aiguëC’est une admiration exacerbée des classes CSS, proche de la dévotion. Certaines thèses y voientun rapprochement religieux.

Symptômes : la classite se manifeste par une utilisation à outrance des propriétés class sur chaquebalise rencontrée. Ce besoin d’identifier chaque élément par une classe (souvent répétée) témoigned’un soudain manque de confiance en soi provoqué par une connaissance évasive des sélecteursCSS et de leur héritage parent-enfant.

<div id="menuglobal"><ul class="menu"><li class="menuitem"><a class="bouton" href="#">Lien 1</a></li><li class="menuitem"><a class="bouton" href="#">Lien 2</a></li><li class="menuitem"><a class="bouton" href="#">Lien 3</a></li><li class="menuitem"><a class="bouton" href="#">Lien 4</a></li></ul>

Conséquences : prise de poids soudaine et excessive (exprimée en octets). Le code est inutilementalourdi et la répétition de ces propriétés le rend parfois difficile à interpréter.

Traitement : une cure d’apprentissage des sélecteurs CSS et de leurs propriétés d’héritage estnécessaire pour venir à bout de cette affection.

<ul id="menu"><li><a href="#">Lien 1</a></li><li><a href="#">Lien 2</a></li><li><a href="#">Lien 3</a></li><li><a href="#">Lien 4</a></li></ul>

31/33

Maladies exotiques des CSS ?

La cellulite ravageuse

Cette forme de maladie est une réminiscence de nos anciennes habitudes de conception de sitesweb à l’aide de tableaux et de cellules. Cette technique impliquait de multiples découpes deséléments en petites cellules, contenant chacune un morceau d’image de l’arrière-plan ou une partiedu contenu.

Symptômes : on reconnaît le patient atteint de cellulite ravageuse à son obsession à vouloir toutdécouper, imbriquer et « celluliser ».Par exemple, le site d’Alsacréations sera immédiatement perçu comme un enchevêtrementélémentaire de multiples cellules auxquelles seront appliqués des équivalents des propriétésrowspan et colspan. Autre symptôme fréquent : le patient continue de tronçonner toutes ses imagesd’arrière-plan en plusieurs fichiers, se compliquant la tâche pour l’intégration de son code.

Conséquences : à l’instar de la classite, la cellulite ravageuse implique une prise de poidsconséquente chez le malade. Elle produit surtout une structure inextricable et illogique, opaquemême aux yeux d’un utilisateur averti. Avec le temps et l’évolution de la maladie, le patient necomprendra plus son propre code. Quant aux navigateurs, la complexité du site les incitera à malinterpréter les documents.

Traitement : cette pathologie lourde nécessite une complète remise en cause de ses propresconceptions et de son expérience de webmaster.32/33

Maladies exotiques des CSS ?

La négativite virulente

C’est l’obstination à nier en bloc l’existence des maladies précédentes. Le malade reste cloîtrédans son monde et refuse de s’ouvrir à la réalité. Il feint de croire aux promesses des standardsCSS tout en réfutant chaque argument proposé en leur faveur.

La strictite aveugle

Cette nouvelle forme de contagion fait croire aux débutants que tous les sites web doivent êtrevalidés en XHTML Strict.Méfiez-vous de ces charlatans de la médecine qui vous submergent de remèdes (règles, doctypes,prologues). Le débutant est alors noyé de doctrines à respecter, alors qu’il est souvent préférabled’aller à son rythme, de commencer en transitionnel, voire de conserver un squelette minimal entableaux et d’y insérer les mises en forme CSS par à-coups.

33/33