Cours Css

Les feuilles de styles
1
Introduction aux feuilles de styles
 Cette technologie a été introduite par
Microsoft en 1996.
But de CSS:
 Placer pour chaque élément de la page
une série de propriétés de style qui
permettent de modifier l’apparence de
tout élément, de sa police de sa couleur,
et de sa position…
 Contrôle parfait de la mise en page des
différents éléments qui composent le
document HTML. 2
Définition des styles(CSS)
 <style> cette balise définit une zone dans la région
d’en-tête(<head>) du document HTML où on
trouve toutes les définitions de style du document;
 Il existe trois méthodes pour déclarer un style dans
une page HTML:
1. Utiliser l’attribut style pour la balise à laquelle on
veut définir un style;
Exemple:
<p style="font-family :arial; font-size:16pt;
color: green">
3
Définition des styles(CSS)
2.Définir tous les styles utilisés dans la page HTML
entre la balise <style> et </style> dans l’entête
du document
Exemple: Définition d’un style de paragraphe ou la
couleur du texte serait bleue et ou la taille des
caractères serait de 16 points:
<STYLE>
P { font-size: 16pt; color: blue }
</STYLE>
4
Exemples
ul { color: blue; } met l’ensemble du contenu
des listes non ordonnées en bleu.
h1,h2,h3,h4,h5,h6 { color: red; } met

l’ensemble des titres de rubrique en rouge.
* { color: black; } met tout en noir. Dans ce

cas précis, on préférera une règle body {
color: black; }
5
Définition des styles(suite)
Class et ID:
 Il est possible de déterminer des styles qui seront
appliqués soit à tous les éléments d’un certain
type, soit à tous les éléments disposant d’un
attribut CLASS particulier, soit encore à tous les
éléments disposant d’un attribut ID particulier.
 Pour appliquer un style à un ensemble
d’éléments,il suffit de déclarer cet élément dans
la feuille de style et lui assigner les attributs de
style à appliquer
 pour appliquer un style à un ensemble
d’éléments disposant d’une classe de style
particulière, il suffit de noter le nom de cette
classe, précédée du symbole point.
6
 Pour passer tous les éléments de la page ayant
leur attribut CLASS valant classe1 à une police
arial de 10 pixels, nous noterons dans la feuille
de style:
<STYLE >
.classe1 {font-family: arial; font-size: 10pt;}
</STYLE>
 Pour appliquer un style à tous les éléments

ayant un attribut ID particulier, Il suffit de noter
le nom de cet identifiant précédé du symbole #:
<STYLE >
#id1 {font-family: arial; font-size: 10pt;}
7
</STYLE>
 L’attribut ID est utilisé pour réaliser une
exception dans une classe ou bien il peut
être utilisé seul; dans ce cas, il ne
présente pas de différence avec une
classe.
8
Exemple
<STYLE >
.rouge { color: red }

.noir { color: black }
P.grasRouge { color: red; font-weight: bold }
</STYLE>
<P CLASS=rouge> ce texte est rouge </P>

<P CLASS=grasRouge> ce texte est rouge et gras</P>
<H1 CLASS=grasRouge> ce texte reste standard car la
classe grasRouge ne s’applique qu’au paragraphe</H1>
9
Exemple:
<html>
<head>
<style >
H2.test
{
font-size: 12pt;
color: red
}
</style>
</head>
<body>
<h2 class="test">Titre défini avec une class de nom test</h2>
<h2>Titre normal de niveau 2</H2>
</body>
</html>
10
Exemple
<STYLE >
#vert { color: green }
.classe1 { color: red; font-weight: bold;
font-size: 20pt }
</STYLE>
<P CLASS=classe1> ce texte est rouge et

gras, et en 20 point</P>
<P CLASS=classe1 ID=vert> ce texte est
en 20 point, gras mais vert!</P>
<P ID=vert> ce dernier texte utilise la
police par défaut, mais sa couleur est
verte.</P> 11
3. Définir les styles dans un fichier externe et
l’inclure dans la page HTML en utilisant la
balise:
<link rel="stylesheet" href="mafeuille.css">
12
A une partie de contenu de paragraphe
 Pour que certains mots d'un paragraphe
soient gris, on applique la classe .gris à
l'élément span :
 <p>...<span class="gris">ceci sera en
gris</span>...</p>
13
Exemple(span)
#element1 {
background-color:#00CCFF; /* bleu ciel */
}
#element2 {
background-color:#FF6666; /* rouge */
}
#element3 {
background-color:#6699FF; /* mauve */
<p>texte…<span id="element1">mot1</span>…texte </p>

<span id="element2">mot2</span>
<span id="element3">mot3</span></P>
Résultat:
14
A un élément contenu dans un autre
élément:
 Pour que le contenu de l'élément em soit en
rouge seulement dans les titres h2, on
définit la règle:
h2 em { color: #ff0000;}
 Qui s'appliquera à: <h2>...<em>en
rouge</em>...</h2>
15
A un élément suivant un autre élément:
 Pour que le paragraphe suivant une image
soit rouge, on écrira:
 img + p { color: #ff0000;}
 Qui s'appliquera à:<img /><p>en rouge</p>
16
Couleur et image d'arrière-plan
 Pour que l'arrière-plan d'un élément soit blanc:
background-color: #ffffff;
 Pour qu'une image occupe l'arrière-plan d'un élément:
background-image: url("...url de l'image...")
 Pour que l'image d'arrière-plan ne se répète pas dans
l'élément:
background-repeat: no-repeat;
 background-repeat peut prendre ces valeurs :
 no-repeat : le fond ne sera pas répété. L'image sera donc

unique sur la page.
 repeat-x : le fond sera répété uniquement sur la première
ligne, horizontalement.
 repeat-y : le fond sera répété uniquement sur la première
colonne, verticalement. 17
Image d'arrière-plan
 Pour que l'image d'arrière-plan soit centrée dans l'élément:
background-position: center;
background-position: top right;
 La propriété background-attachment peut prendre deux valeurs :
 fixed : l'image de fond reste fixe.

 scroll : l'image de fond défile avec le texte (par défaut).
Exemple:
body { background-image: url("../images/neige.png");
background-attachment: fixed; /* Le fond restera fixe
*/ }
Exemple:
body {
background-image:
url("../images/degrade.png");
background-repeat: repeat-y; /* Le fond
ne se répètera que sur la première
colonne, verticalement */ }
19
Bordures
 Largeur du bordure:
Pour indiquez la largeur de votre bordure. Mettez une valeur en
pixels (comme 2px), ou utilisez un des mots-clé suivants :
thin : bordure fine

medium : bordure moyenne
thick : bordure épaisse
o Exemple:border-width:thin
 Type de bordure:
- Pour que l'élément ait une bordure noir et continue de 5
pixels d'épaisseur:
border: 5px solid #000000;
- Pour que la bordure soit en pointillé:
border: 5px dotted #0000ff;
- Pour que la bordure donne une impression de relief:
border: 5px groove #0000ff; 20
Type de bordure(suite)
 dashed: tirets.
 double: bordure double.
 ridge: effet 3D.
 inset: autre effet 3D (on a l'impression
que le block forme un creux).
 outset: encore un autre effet 3D (on a
l'impression que le block est surélevé).
21
Bordures en haut,en bas, à droite et à
gauche
 border-top: bordure en haut.

 border-bottom : bordure en bas.
 border-left : bordure à gauche.
 border-right: bordure à droite.
22
Taille, Alignement et Positionnement
Largeurs, hauteurs:
 Pour spécifier la largeur d'un élément:
width: 250px;
 Pour spécifier la hauteur d'un élément:
height: 250px;
Marges, espacement:
 Pour spécifier la largeur d'une marge autour d'un
élément:
margin: 25px;
 Pour spécifier la largeur de l'espacement autour
d'un élément (ici 25px):
padding: 25px;
23
Alignement du texte:
 Pour centrer un texte:
text-align: center;
 Pour aligner un texte à gauche:
text-align: left;
 Pour aligner un texte à droite:
text-align: right;
24
Positionnement des éléments:
 Pour centrer horizontalement un élément dans la
page (ici avec une largeur de 70% de celle-ci):
margin-left: 15%;
margin-right: 15%;
 Pour positionner un élément à gauche:
float: left;
 Pour positionner un élément à droite:
float: right;
25
Police
 font-family: spécifie la police ou famille de police à utiliser
par le navigateur,il est recommandé de déclarer une famille
générique après les polices (séparer par une virgule) pour
obliger le navigateur si la police n’est pas trouvée à lui
substituer une police similaire.
 Voici une liste de polices qui fonctionnent bien sur la plupart

des navigateurs et que vous pouvez donc utiliser sans crainte
o Arial
o Arial Black
o Comic Sans MS
o Courier New
o Georgia
o Impact
o Times New Roman
o Trebuchet MS 26
o Verdana
Police
 font-size: définit la taille de la police en
pixel ou en donnant une valeur relative:
 xx-small : minuscule
 x-small : très petit
 small : petit
 medium : moyen
 large : grand
 x-large : très grand
 xx-large :très très grand
27
Police
 font-style: définit le style de police à
utiliser à savoir italic, oblique ou normal.
 font-variant: définit la casse des
caractères : normal ou small-caps
(majuscules).
 font-weight: normal, bold (gras).
28
Police(suite)
 line-height définit l’espace interligne ou la
hauteur intrinsèque de tout élément non
remplacé.
 text-decoration définit l’ornement du texte :
none, underline (souligné), overline (surligné),
blink (clignotant) et line-through (barré).
29
Exemple
30
listes
 list-style-image définit l’image qui sera
employée comme marqueur d’item de liste.
Quand l’image est indisponible, elle remplace le
marqueur produit par la propriété list-style-type
 list-style-type définit l’apparence d’une liste

numérotée ou non : disc(cercle plein), circle
(cercle vide), square (carré), decimal(nombres),
upper-alpha ou lower-alpha (lettres de
l’alphabet), upper-roman ou lower-roman
(chiffres romains) et none
31
Formats d'hyperliens
 Pour définir la couleur par défaut des hyperliens (ici,
bleu):
a { color: #0000ff; }
 Pour définir des hyperliens non soulignés:
a { text-decoration: none; }
 Pour définir la couleur des hyperliens visités (ici, violet):
a:visited { color: #800080; }
 Pour définir la couleur des hyperliens survolés (ici,
violet):
a:hover { color: #800080; }
 Pour définir la couleur des hyperliens activés (ici, violet):
a:active { color: #800080; }
32
text-transform
 Permet de transformer les caractères en
majuscule(uppercase) ou minuscule
(lowercase) ou juste la première lettre en
majuscule(capitalize):
 text-transform: uppercase;
 text-transform: lowercase;
 text-transform: capitalize;
Display
 Permet de modifier le type de rendu d'un élément.
 inline-block : Eléments positionnés les uns à côté
des autres .
 none : l'élément n'est pas affiché
 block : l'élément est interprété comme un bloc
(<div>).
Le positionnement absolu
 « Position:absolute »: cette propriété sert à
définir la position des éléments dans une page
HTML.
 left : position par rapport à la gauche de la
page ;
 right : position par rapport à la droite de la
page ;
 top : position par rapport au haut de la page ;
 bottom : position par rapport au bas de la
page.
Le positionnement absolu
Le positionnement relatif
 « Position:relative » permet d'effectuer des
«ajustements» : l'élément est décalé par rapport à sa
position initiale
 Left/Right/Top/bottom

Cours Css

Transféré par

Informations du document

Titre original

Copyright

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 :

Cours Css

Titre original :

Transféré par

Droits d'auteur :

Les feuilles de styles

h1,h2,h3,h4,h5,h6 { color: red; } met

* { color: black; } met tout en noir. Dans ce

 Pour appliquer un style à tous les éléments

.rouge { color: red }

<P CLASS=rouge> ce texte est rouge </P>

<P CLASS=classe1> ce texte est rouge et

<p>texte…<span id="element1">mot1</span>…texte </p>

 no-repeat : le fond ne sera pas répété. L'image sera donc

 fixed : l'image de fond reste fixe.

thin : bordure fine

 border-top: bordure en haut.

 Voici une liste de polices qui fonctionnent bien sur la plupart

 list-style-type définit l’apparence d’une liste

Vous aimerez peut-être aussi