Scribd
Importer
16 vues29 pages

Module1 CSS Part1

Transféré par

Chekri Dina
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
16 vues29 pages

Module1 CSS Part1

Transféré par

Chekri Dina
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
Vous êtes sur la page 1/ 29

Ingénierie du Web Avancé (IWA)

Module 1 : Initiation web: HTML – CSS – PHP

CSS 5
▪ Fonctionnement
▪ Arrière plan
▪ Police des caractères

2021/2022 - Faculté des Sciences - Tétouan - Maroc


Cascading Style Sheets

Les feuilles de style en cascade CSS « Cascading Style Sheets »


(CSS) est un outil pour la présentation des sites Web. Elles peuvent faire gagner
beaucoup de temps, et elles permettent de créer des sites Web de façon entièrement
nouvelle.
L'utilisation de CSS nécessite une connaissance de base de HTML.

Module 1 : Initiation web: HTML – CSS – PHP / par Prof. Youssef Zaz
Comment CSS fonctionne-t-il ?

La syntaxe CSS de base


Exp: le fond d'une page Web rouge :
Avec HTML :
<body bgcolor="#FF0000">

Avec CSS :
body {background-color: #FF0000;}

Module 1 : Initiation web: HTML – CSS – PHP / par Prof. Youssef Zaz
Modèle fondamental de CSS

Module 1 : Initiation web: HTML – CSS – PHP / par Prof. Youssef Zaz
Méthodes d’appliquer CSS à un document HTML

Il existe 3 façons
Méthode 1 : Dans la ligne (l'attribut style)
Avec l'attribut HTML style.
Exp : <html>
<head>
<title>Exemple</title>
</head>
<body style="background-color: #FF0000;">
<p>Cette page est rouge</p>
</body>
</html>

Module 1 : Initiation web: HTML – CSS – PHP / par Prof. Youssef Zaz
Méthodes d’appliquer CSS à un document HTML

Méthode 2 : Interne (l'élément style)


Une autre méthode consiste à inclure le code CSS avec la balise HTML <style>.
Exp:
<html>
<head>
<title>Exemple</title>
<style type="text/css">
body {background-color: #FF0000;}
</style>
</head>
<body>
<p>Cette page est rouge</p>
</body>
</html>
Module 1 : Initiation web: HTML – CSS – PHP / par Prof. Youssef Zaz
Méthodes d’appliquer CSS à un document HTML

Méthode 3 : Externe (un lien vers une feuille de style)


La méthode recommandée est celle avec un lien vers feuille de style externe.
Une feuille de style externe est un fichier texte ayant l'extension « .css ».
Exemple:

On crée un lien depuis (default.htm) vers la feuille de style (style.css). Ce lien peut être créé en
une ligne de code HTML :
<link rel="stylesheet" href="style/style.css" />
La ligne de code doit s'inscrire entre les balises <head> et </head>.

Module 1 : Initiation web: HTML – CSS – PHP / par Prof. Youssef Zaz
Couleurs et arrières-plans

La couleur d'avant-plan : la propriété 'color'


La propriété color décrit la couleur d'avant-plan d'un élément.
Par exemple, les titres rouge foncé. <h1>.

h1 { color: #ff0000; }

La propriété 'background-color'
La propriété background-color décrit la couleur d'arrière-plan.
Pour changer la couleur d'arrière-plan d'une page entière, il faudrait l’ appliquer à l'élément <body>.
Exp: Les couleurs d'arrière-plan différentes sont appliquées aux éléments <body> et <h1>.

body { background-color: #FFCC66; }


h1 { color: #990000;
background-color: #FC9804; }
Module 1 : Initiation web: HTML – CSS – PHP / par Prof. Youssef Zaz
Images d'arrière-plan [background-image]

background-image : insérer une image d'arrière-plan.

body
{ background-color: #FFCC66;
background-image: url("butterfly.gif");
}
h1
{ color: #990000;
background-color: #FC9804;
}

Module 1 : Initiation web: HTML – CSS – PHP / par Prof. Youssef Zaz
Arrière-plan [background-repeat]

Les quatre valeurs de background-repeat.

Valeur Description

Background-repeat: repeat-x L'image se répète horizontalement


background-repeat: repeat-y L'image se répète verticalement

background-repeat: repeat L'image se répète horizontalement et verticalement

background-repeat: no-repeat L'image ne se répète pas

Module 1 : Initiation web: HTML – CSS – PHP / par Prof. Youssef Zaz
Arrière-plan [background-repeat]

Pour éviter la répétition d'une image d'arrière-plan:

body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
}
h1 {
color: #990000;
background-color: #FC9804;
}

Module 1 : Initiation web: HTML – CSS – PHP / par Prof. Youssef Zaz
Arrière-plan [background-attachment]

background-attachment: pour fixer ou défiler l'image d'arrière-plan avec


l'élément conteneur.

Valeur Description

Background-attachment: scroll L'image défile avec la page (non bloquée)

Background-attachment: fixed L'image est bloquée

Module 1 : Initiation web: HTML – CSS – PHP / par Prof. Youssef Zaz
Arrière-plan [background-attachment]

Pour bloquer l'image d'arrière-plan.

body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
}
h1 {
color: #990000; background-color: #FC9804;
}

Module 1 : Initiation web: HTML – CSS – PHP / par Prof. Youssef Zaz
Positionner une image d'arrière-plan [background-position]
Par défaut, l'image d'arrière-plan se positionne dans le coin supérieur gauche de l'écran.
background-position :permet de changer la position prédéfinie et de placer l'image d'arrière-plan n'importe où à
l'écran.
Exemple: la valeur'100px 200px' positionne l'image d'arrière-plan à 100px depuis la gauche et à 200px depuis le
haut de la fenêtre du navigateur.
Les coordonnées peuvent s'exprimer en pourcentages de la largeur de l'écran, ou en unités fixes (pixels,
centimètres, etc.), ou on peut utiliser les mots-clés "top", "bottom", "center", "left" ou "right".

Module 1 : Initiation web: HTML – CSS – PHP / par Prof. Youssef Zaz
Positionner une image d'arrière-plan [background-position]

Description
Valeur
L'image est positionnée à 2 cm de la gauche et à
background-position: 2cm 2cm
2 cm du haut de la page
L'image est positionnée au centre et à un quart de
background-position: 50% 25%
la page vers le bas
L'image est positionnée au coin supérieur droit de
background-position: top right
la page

Module 1 : Initiation web: HTML – CSS – PHP / par Prof. Youssef Zaz
Positionner une image d'arrière-plan [background-position]

L'exemple de code à suivre positionne l'image d'arrière-plan dans le coin inférieur


droit de la page :

body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
}
h1 {
color: #990000; background-color: #FC9804;
}

On peut obtenir le même résultat avec background en une seule ligne de code :
background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;

Module 1 : Initiation web: HTML – CSS – PHP / par Prof. Youssef Zaz
Polices [font-family]

font-family : indique la liste prioritaire des polices à utiliser pour l'affichage d'un
élément donné ou d'une page Web. Si la première police de la liste n'est pas
disponible sur l'ordinateur utilisé pour accéder au site, la police suivante est essayée
et ainsi de suite.

Module 1 : Initiation web: HTML – CSS – PHP / par Prof. Youssef Zaz
Polices [font-family]

La différence entre les polices :

Module 1 : Initiation web: HTML – CSS – PHP / par Prof. Youssef Zaz
Polices [font-family]

Il est recommandé de terminer la liste par une famille générique. Ainsi, la page s'affichera au
moins avec une police de la même famille si aucune des polices indiquées n'était disponible.
Exp :

h1 {font-family: arial, verdana, sans-serif;}


h2 {font-family: "Times New Roman", serif;}

Module 1 : Initiation web: HTML – CSS – PHP / par Prof. Youssef Zaz
Style des polices [font-style]

La propriété font-style définit le style de la police concernée être normal, italic ou oblique.
Exp:

h1 {font-family: arial, verdana, sans-serif;}


h2 {font-family: "Times New Roman", serif;
font-style: italic;}

Module 1 : Initiation web: HTML – CSS – PHP / par Prof. Youssef Zaz
Variantes de polices [font-variant]

La propriété font-variant sert à choisir entre les variantes normal ou small-caps d'une
police.
Une police small-caps utilise des lettres en capitales de taille réduite à la place des lettres
en minuscules.
Exp. :

h1 {font-variant: small-caps;}
h2 {font-variant: normal;}

Module 1 : Initiation web: HTML – CSS – PHP / par Prof. Youssef Zaz
Graisse des polices [font-weight]

Font-weight décrit le degré de graisse de la police. Elle peut avoir une graisse normal
ou bold.

Exp:

p {font-family: arial, verdana, sans-serif;}


td {font-family: arial, verdana, sans-serif;
font-weight: bold;}

Module 1 : Initiation web: HTML – CSS – PHP / par Prof. Youssef Zaz
Taille des polices [font-size]

Le corps d'une police se règle par la propriété font-size.


On peut choisir parmi beaucoup d'unités différentes (par exemple, pixels et pourcentages) pour décrire
les corps des polices.
Exp :
h1 {font-size: 30px;}
h2 {font-size: 12pt;}
h3 {font-size: 120%;}
p {font-size: 1em;}

Il existe une différence essentielle entre les quatre unités précédentes. Les unités « px » et « pt » font
que le corps de la police est absolu, tandis que « % » et « em » permettent à l'utilisateur de l'ajuster si
nécessaire. Il est souhaitable utiliser des unités ajustables telles que « % » ou « em ».

Module 1 : Initiation web: HTML – CSS – PHP / par Prof. Youssef Zaz
Concision [font]

Avec la propriété raccourcie font, il est possible de couvrir toutes les différentes propriétés de police
en un coup.
Exp:
p{ font-style: italic;
font-weight: bold;
font-size: 30px;
font-family: arial, sans-serif; }
Avec la propriété raccourcie, on peut simplifier le code :
p { font: italic bold 30px arial, sans-serif; }

L'ordre des valeurs de la propriété font est le suivant :


font-style | font-variant | font-weight | font-size | font-family

Module 1 : Initiation web: HTML – CSS – PHP / par Prof. Youssef Zaz
Indentation du texte [text-indent]

La propriété text-indent permet d'ajouter une touche d'élégance aux paragraphes de texte en
appliquant une indentation à la première ligne du paragraphe.
Exp:

p { text-indent: 30px; }

Module 1 : Initiation web: HTML – CSS – PHP / par Prof. Youssef Zaz
Alignement du texte [text-align]

La propriété CSS text-align correspond à l'attribut align utilisé dans le HTML. Le texte peut
être aligné à gauche (left), à droite (right) ou centré (center). La valeur justify étirera
chaque ligne de sorte que les marges à gauche et à droite soient droites toutes les deux.
Exp:
th { text-align: right; }
td { text-align: center; }
p { text-align: justify; }

Module 1 : Initiation web: HTML – CSS – PHP / par Prof. Youssef Zaz
Décoration du texte [text-decoration]

La propriété text-decoration permet d'ajouter des « effets » différents au texte. Par


exemple, on peut souligner le texte, le barrer, ou tracer un trait au-dessus.
Exp:

h1 { text-decoration: underline; }
h2 { text-decoration: overline; }
h3 { text-decoration: line-through; }

Module 1 : Initiation web: HTML – CSS – PHP / par Prof. Youssef Zaz
Espacement des lettres [letter-spacing]

L'espacement entre les caractères du texte peut être défini avec la propriété letter-spacing.
La valeur de la propriété est celle de l'espacement désiré.
Exp:

h1 { letter-spacing: 6px; }
p { letter-spacing: 3px; }

Module 1 : Initiation web: HTML – CSS – PHP / par Prof. Youssef Zaz
Transformation du texte [text-transform]

La propriété text-transform contrôle la capitalisation du texte. On peut choisir une capitalisation


initiale, une mise en majuscules ou une mise en minuscules, indépendamment de l'aspect du texte
original dans le code HTML.
Exp: le mot « titre » que l'on peut présenter à l'utilisateur comme « TITRE » ou « Titre ».
La propriété text-transform admet quatre valeurs possibles :
Capitalize: Elle capitalise la première lettre de chaque mot.
Uppercase: Elle convertit toutes les lettres en majuscules.
Lowercase: Elle convertit toutes les lettres en minuscules.
None: Aucune transformation n’est appliquée.
Exp:

h1 { text-transform: uppercase; }
li { text-transform: capitalize; }

Module 1 : Initiation web: HTML – CSS – PHP / par Prof. Youssef Zaz

Vous aimerez peut-être aussi