Vous êtes sur la page 1sur 18

Partie IV: les feuilles de styles

CSS

I.BOUZOUITA, ENIT, 2014-2015


Les CSS: pourquoi
• Objectif: fournir un mécanisme pour associer
différents styles à un même document

Article

Présentations

Contenu
...
Exemple
• il arrive fréquemment que l'on attribue à certains éléments des
caractéristiques de mise en forme identiques. Par exemple, les noms de
chapitres seront mis en police Arial, en gras et en couleur bleue.
 Appeler cette mise en forme "titre"  l’appliquer à chaque nouveau
chapitre

• Cette définition de mise en forme particulière, on va l'appeler feuille de


style.
• Idée reprise de MS-WORD

<H1><B><FONT COLOR=blue>Titre1</FONT></B></H1> STYLE des titres


<H2><B><FONT COLOR="green">- A -</FONT></B></H2>
<H3><B><FONT COLOR="red">...a....</FONT></B></H3> STYLE des sous-titres
<H1><B><FONT COLOR=blue>Titre2</FONT></B></H1>
<H2><B><FONT COLOR="green">- B-</FONT></B></H2> STYLE du texte
<H3><B><FONT COLOR="red">...b....</FONT></B></H3> STYLE
des titres
STYLE des
Utilité et avantages
• Séparation du contenu et de la mise en forme.

• Cohésion de la présentation tout au long du site avec les feuilles de style

externes.

• Modifier l'aspect d'une page ou d'un site sans en modifier le contenu et

cela en quelques lignes plutôt que de devoir changer un grand nombre

de balises.

• Un "langage" neuf, compréhensible, simple et logique par rapport au Html

et à ses différentes versions.


Utilité et avantages
• Une façon d'écriture concise et nette par rapport au Html.

• Réduire le temps de chargement des pages.

• Pallier certaines insuffisances du langage Html (contrôle des polices,

contrôle de la distance entre les lignes, contrôle des marges et des

indentations (sans devoir utiliser de tableaux) et ainsi augmenter la

créativité des écrivains du Web.


Définition d'un style
La définition de base d'un style est simple :
 
balise { propriété de style: valeur; propriété de style: valeur }
 
Exemple :
  H3 { font-family: Arial; font-style: italic }
 
Donc ici, la balise H3 sera en Arial et en italique. Et dans votre document,
toutes les balises <H3> auront comme style Arial et italique.
Exemple: Fizzics1.html (sans feuilles de style)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
Transitional//EN">
<HTML>
<HEAD> <TITLE>New Advances in Physics</TITLE> </HEAD>
<BODY>
<H1>New Advances in Physics</H1>
<H2>Turning Gold into Lead</H2>
In a startling breakthrough, scientist B.O. "Gus" Fizzics
has invented a <STRONG>practical</STRONG> technique for
transmutation! For more details, please see
<A HREF="give-us-your-gold.html">our transmutation
thesis</A>.
...
</BODY></HTML>
Résultat
Exemple: Fizzics1.html (avec feuilles de style)
<HEAD>
<TITLE>Document Title</TITLE>
<STYLE TYPE="text/css">
<!--
BODY { background: URL(images/confetti-background.jpg) }
H1 { text-align: center;
font-family: Blackout }
H2 { font-family: MeppDisplayShadow }
STRONG { text-decoration: underline }
-->
</STYLE>
</HEAD>
Résultat
Définition d'un style : Attention !!!!

• Les propriétés de style sont entourées par des "{" et pas des [ ou des parenthèses.

• Le couple "propriété de style/valeur" est séparé par un double-point (:).

• Chaque couple "propriété de style/valeur" est séparé par un point-virgule (;).

• Pas de limite pour le nombre de couples "propriétés de style/valeur".


Définition d'un style : Attention !!!!
• L'espace entre propriétés de style et valeur non obligatoire ( lisibilité du code
source).
• Ecrire vos styles sur plusieurs lignes :
H3 {font-family: Arial;
font-style: italic;
font-color: green}
• Attribuer plusieurs valeurs à une même propriété: H3 {font-family: Arial, Helvetica,
sans-serif}

• Attribuer un même style à plusieurs balises: H1, H2, H3 {font-family: Arial; font-
style: italic}
Définition du style : A l'intérieur des balises
<HEAD></HEAD>

<HTML><HEAD>
ce qui suit est du texte et qu'il
<STYLE type= "text/css“ >
on va utiliser des s'agit de cascading style sheets
feuilles de style <!-- (css)
La ou les feuille(s) de style
-->
</STYLE>
si le browser ne connaît pas les CSS il va
</HEAD> les considérer comme des commentaires
<BODY>    
Définition du style : A l'intérieur des balises
<Body></Body>

<HTML> <BODY>
<H1 style="font-family: Arial;
font-style: italic">
Fac des Sciences </H1>
</BODY>
</HTML>
Le style Arial, italique n'affectera que
 
cette seule balise H1

    la syntaxe est légèrement différente de la précédente

      <STYLE type="text/css">

H1 { "font-family: Arial; font-style: italic" }

</STYLE>

fonctionne aussi.

  peu conforme à l'esprit des feuilles de style (définir un style déterminé valable
pour la globalité du document)
Définition du style : Styles externes
 Définir une présentation de style valable pour plusieurs pages
 créer une page externe qui regroupera toutes les feuilles de style, et faire le lien
 
avertit le browser qu'il
faudra réaliser un lien
Fichier .css (momstyle.css)
<HTML> <HEAD>
<HTML>
<LINK rel=stylesheet type="text/css" href=“monstyle.css">
<HEAD>
</HEAD>
--- Les différentes
feuilles de style ---
l'information est du
</HEAD> texte et du genre
cascading style
<BODY> sheets (css).

</BODY>
le chemin d'accès et
</HTML> précise qu'il y trouvera
une feuille de style
le nom du fichier à
externe. lier
Atelier : feuille de style externe
• feuille de style :
– une page à fond blanc, avec une police de caractère par défaut Verdana noire,
– un titre de premier niveau bleu marine centré,
– un titre de deuxième niveau bleu décalé de 15 pixels,
– des liens passant du vert au gris avec un petit effet rouge non souligné au passage de la souris

html,body,p,ul,li,td { h1 { h2 {
font-size : 10pt; font-size : 20pt; font-size : 14pt;
font-family : Verdana, Arial, font-family : Verdana, Arial, font-family : Verdana, Arial,
Helvetica, Geneva, sans-serif; Helvetica, Geneva, sans-serif; Helvetica, Geneva, sans-serif;
color : navy; color : blue;
text-align: center; padding-left:15px;
color : black;
}
background-color : white; }
}

a:link {color: green; text-decoration:underline;}


a:visited {color: gray; text-decoration:underline;}
a:hover {color:red; text-decoration:none;}
Notion de Classe
Affecter des styles différents à une même balise  les classes  
 
balise { propriété de style: valeur }  balise.nom_de_classe { propriété de style: valeur }
.nom_de_classe { propriété de style: valeur }

(.) devant le nom de classe est indispensable

faire appel à une classe <balise class="nom_de-classe"> .... </balise>

 
Je souhaite mettre ce qui est important dans le texte en gras et en bleu. :
.essentiel { font-weight: bold; font-color: #000080 }
 
dans le document Html,
<P class=".essentiel"> ... blabla ... </P>
<H1 class=".essentiel">Titre 1</H1>
<TABLE><TR><TD class=".essentiel">cellule</TD></TD>...
Notion de pseudo-classe
Applicable concrètement à la balise A

Celle ci peut connaître plusieurs contextes de formes selon que le lien est

inactif, visité, ou en train d'être visité.  on peut définir alors pour chacun

des états de la balise une mise en forme particulière.

  Exemple:
A:link {font-family:Arial; color:"#0099FF"; font-size:12px; cursor:text;}
A:visited {font-family:Arial; color:blue; font-size:12px; cursor:text;}
A:active {color:red;}
A:hover {color:red; text-decoration:none;}

Vous aimerez peut-être aussi