TP2 Suite

Université de JIJEL L2 Informatique 01/03/2023
Suite de TP N°2 DAW : CSS (Feuille de style)
1. Thème
Principes de base du mécanisme des feuilles de styles CSS (Cascading Style Sheets) en
HTML : application sur une page du TP n°1.
2. Balises
1) Définition et référenciation à une feuille de style CSS (à placer dans le bloc
<HEAD>...</HEAD>)
 Référenciation à une feuille de style externe à la page :
<LINK REL="stylesheet" HREF="URL" TYPE="text/css">
(Donner l'extension .css au nom du fichier de feuille de style)
 Définition d'une feuille de style à l'intérieur de la page (propre à la page) :
<STYLE TYPE="text/css">

</STYLE>
2) La feuille de style contient un ensemble de "règles" dont la forme est la suivante :
(attention : les caractères "{" et "}" doivent être entrés tels quels (ne désignent pas des
parties optionelles) )
 SELECTEUR,SELECTEUR... { propriété: valeur ; propriété: valeur ... }
ou
SELECTEUR.classe { propriété: valeur ; propriété: valeur ...}
où les "SELECTEUR" font référence aux noms de balises HTML
3) Une description exhaustive de toutes les possibilités de règles est impossible ici (voir
norme CSS).
Quelques exemples classiques :
 La règle suivante affectera l'ensemble du document (body) :
BODY { margin-left: 30px ; color: navy ; background: white
URL(image.gif) ; font-family: "Times New Roman", serif }
 Règle affectant les titres de niveaux 1 à 3 :
H1,H2,H3 { text-align: center ; font-family: Arial, Helvetica,
sans-serif ; font-variant: small-caps ; font-size: x-large ; color:
white ; background: #DD0000 ; border-witdh: 1 ; border: solid }
 Règle n'affectant que les titres de 1er niveau :
H1 { margin-top: 20pt }
 Règle affectant le texte préformaté :
PRE { font-family: monospace ; color: red ; font-weight: bold ;
font-size: smaller }
 Règle affectant les images :
IMG { border: 0 }
 Pour faire des encadrements de parties de texte ou paragraphes :
{ color:#cc6633; background-color: #ffeecc; border-style: dotted;
border-width: 1px; border-color: #cc6633; padding-left: 7px; padding-
right: 7px; }
et voir aussi border-style: dotted; , border-style: dotted;
1
 Pour faire des arrondis de bordure dans un affichage de background

{ background: couleur ; border-radius: 5px } en CSS3
{ background: couleur ; -moz-border-radius: 5px } pour navigateurs
Gecko (Firefox...)
{ background: couleur ; -webkit-border-radius: 5px } pour navigateurs
Webkit (Safari, Chrome...)
 Règle affectant les cellules de type en-tête d'un tableau :
TH { background: silver }
 Règle affectant les objets de listes numérotées seulement (pas les objets de listes
non numérotées) de façon analogue à la méthode classique <OL
TYPE="1|a|A|i|I"> (notez les espaces et non pas virgules entre les sélecteurs OL
et LI !) :
OL LI { list-style-type: upper-alpha } (numérot. 1er niveau = lettres
maj.)
OL OL LI { list-style-type: upper-roman } (numérot. 2e niveau =
chiffres romains maj.)
OL OL OL LI { list-style-type: lower-alpha } (numérot. 3e niveau =
lettres minusc.)
OL OL OL OL LI { list-style-type: lower-roman } (numérot. 4e niveau =
chiffres romains minusc.)
OL OL OL OL OL LI { list-style-type: decimal } (numérot. 5e niveau =
chiffres)
 Règle définissant une puce graphique (via un fichier image) pour les listes non
numérotées :
UL { list-style-image: url("smile.gif"); }
4) Usage de "classes" et référence à des "id"
Usage de "classes" définies dans la feuille de style avec .classe. Exemple :
 La classe suivante : P.taille9 { font-size: 9pt; }
pourra être utilisée ainsi : <P CLASS="taille9"> paragraphe en taille 9 pts </P>
Se référer à un "id" dans une feuille de style avec #id. Exemple :
 La définition suivante : #rouge li { color: #f00; }
affichera en rouge les éléments de liste se trouvant dans une division :
<DIV ID="rouge"> ... </DIV>
5) Usage de "pseudo-éléments" (ou pseudo-classes) prédéfinis par le standard CSS
(dès IE5 et N6). Exemples :
 Règles affectant les liens :
A:link { color: red } (liens non visités)
A:active { color: maroon } (lien pendant que l'on clic dessus)
A:visited { color: maroon } (liens visités)
 Règles affectant le 1er caractère ou la 1ère ligne de chaque paragraphe :
P:first-letter { font-size: 300% ; float: left ; color: green }
("lettrine" taille 3x sup. au texte)
P:first-line { font-style: small-caps } (1ère ligne en petites
majuscules)
2
 Les pseudo-éléments peuvent être combinés avec les classes, par ex :

P.premier:first-letter { font-size: 300% ; float: left }
n'affectera que les paragraphes identifiés par :
<P CLASS="premier"> paragraphe </P>
6) Usage de styles CSS à l'intérieur des balises ("inline" styles) par recours au nouvel
attribut "STYLE=", principalement utilisé dans les balises <DIV> et <SPAN>. Exemples :
 <DIV STYLE="font-family: cursive ; color: blue"> bloc de texte dans le
style spécifié </DIV>
 <SPAN STYLE="page-break-before: always;"><SPAN> : insére un saut de page
à l'impression !
ATTENTION : pour qu'un document basé sur une feuille de style s'affiche proprement, il
est fortement conseillé de ne pas négliger les balises de fermeture (telles que </P>,
</LI>, </TR>, </TD>, </TH>, etc...).
Exercice : Zoning et modele de mise en page
Si l'on souhaite créer un site web, il va falloir apprendre à créer des zones (un zoning).
Avant d'intégrer des images ou encore de saisir du texte, nous avons besoin de définir
des emplacements pour un positionnement précis de nos informations. Pour cela, nous
allons créer deux nouveaux fichiers : modele1.html & modele1.css pour Reproduire cette
page :

TP2 Suite

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

TP2 Suite

Transféré par

Droits d'auteur :

Formats disponibles

Université de JIJEL L2 Informatique 01/03/2023

Suite de TP N°2 DAW : CSS (Feuille de style)

 Pour faire des arrondis de bordure dans un affichage de background

 Les pseudo-éléments peuvent être combinés avec les classes, par ex :

Exercice : Zoning et modele de mise en page

Vous aimerez peut-être aussi