Chapitre 2: CSS: C'est Ce Qui Vous Permet de

CSS
C'est ce qui vous permet de:

Chapitre 2 : CSS Choisir la couleur de votre texte.
Sélectionner la police utilisée sur votre site.
Définir la taille du texte
Définir les bordures
Définir le fond
Faire la mise en page de votre site.
Année Universitaire : 2022-2023
HTML & CSS 1 HTML & CSS 2
Où écrit-on le CSS ? Dans un fichier .css

Vous avez le choix car on peut écrire du code en langage CSS à trois
endroits différents :
On écrit le plus souvent le code CSS dans un fichier spécial ayant
l'extension .css
Fichier .css Méthode recommandée
C'est la méthode la plus pratique et la plus souple.
Cela nous évite de tout mélanger dans un même fichier.
-tête <head> du fichier HTML
Directement dans les balises Attribut style

HTML Méthode non-recommandée
HTML & CSS 3 HTML & CSS 4

Dans un fichier .css (Exemple) Dans un fichier .css (Exemple)
Créez un nouveau fichier vide dans votre éditeur de texte et copiez
ce bout de code CSS
Enregistrez le fichier en lui donnant un nom qui se termine par .css

, comme fichier_externe.css, dans le même dossier que le fichier
HTML
HTML & CSS 5 2021-2022 HTML & CSS 6
Dans l'en-tête <head> du fichier HTML Dans l'en-tête <head> du fichier HTML
Il existe une autre méthode pour utiliser du CSS dans les fichiers
HTML : cela consiste à insérer le code CSS directement dans une
balise <style> à l'intérieur de l'en-tête <head> .
2021-2022 HTML & CSS 7 2021-2022 HTML & CSS 8

Directement dans les balises (non recommandé) Directement dans les balises (non recommandé)
Dernière méthode, à manipuler avec précaution : vous pouvez

ajouter un attribut style à n'importe quelle balise.
2021-2022 HTML & CSS 9 2021-2022 HTML & CSS 10
Directement dans les balises (non recommandé)

Si vous placez le code CSS directement dans le fichier HTML, il
faudra copier ce code dans tous les fichiers HTML de votre site !
Par exemple si vous voulez que vos paragraphes soient écrits en
rouge et non en bleu, il faudra modifier chaque fichier HTML un à
Si vous travaillez avec un fichier CSS externe, vous n'aurez besoin

d'écrire cette instruction qu'une seule fois pour tout votre site,
2021-2022 HTML & CSS 11 2021-2022 HTML & CSS 12

Appliquer Un STYLE :sélectionner une balise Appliquer Un STYLE :sélectionner une balise
Dans un code CSS comme celui-ci, on trouve trois éléments

différents : 2. Des propriétés CSS : les « effets de style » de la page sont rangés
1. des noms de balises : on écrit les noms des balises dont on veut dans des propriétés. Il y a par exemple la propriété color qui
modifier l'apparence. Par exemple, si je veux modifier l'apparence permet d'indiquer la couleur du texte, font-size qui permet
de tous les paragraphes <p> , je dois écrire p ; d'indiquer la taille du texte, etc.
2021-2022 HTML & CSS 13 2021-2022 HTML & CSS 14
Appliquer Un STYLE :sélectionner une balise
3. Les valeurs : pour chaque propriété CSS, on doit indiquer une

valeur. Par exemple, pour la propriété color , il faut indiquer le
nom de la couleur. Pour font-size , il faut indiquer quelle taille on
veut, etc.
2021-2022 HTML & CSS 15 2021-2022 HTML & CSS 16

Appliquer Un STYLE :sélectionner une balise Appliquer un style à plusieurs balises
On écrit le nom de la balise (par exemple h1 ) et on ouvre des balises

accolades pour mettre les propriétés et valeurs que l'on souhaite.
On peut mettre autant de propriétés que l'on veut à l'intérieur des
accolades.
Chaque propriété est suivie du symbole « deux-points » ( : ) puis de
la valeur correspondante.
Enfin, chaque ligne se termine par un point-virgule ( ; ).
2021-2022 HTML & CSS 17 2021-2022 HTML & CSS 18
Appliquer un style à plusieurs balises

Appliquer un style à plusieurs balises Des commentaires dans du CSS
Pour faire un commentaire, tapez /* , suivi de votre commentaire,

puis */ pour terminer votre commentaire.
2021-2022 HTML & CSS 19 2021-2022 HTML & CSS 20

Appliquer un style : class et id Appliquer un style : class et id
Pour le moment, et pour faire simple, on ne va s'intéresser qu'à
Comment faire pour que seulement certains paragraphes soient l'attribut class.
écrits d'une manière différente ? c'est un attribut que l'on peut mettre sur n'importe quelle balise,
Pour résoudre le problème, on peut utiliser ces attributs spéciaux aussi bien titre que paragraphe, image, etc.
qui fonctionnent sur toutes les balises :
1. L'attribut class
2. L'attribut id
Les attributs class et id sont quasiment identiques.
2021-2022 HTML & CSS 21 2021-2022 HTML & CSS 22

En pratique, nous ne mettrons des id que sur des éléments qui sont
Maintenant que c'est fait, votre paragraphe est identifié. Il a un nom uniques dans la page :
:par1. Vous allez pouvoir réutiliser ce nom dans le fichier CSS pour
dire : « Je veux que seules les balises qui ont comme nom Si vous utilisez des id , lorsque vous définirez leurs propriétés dans
soient affichées en bleu ». le fichier CSS, il faudra faire précéder le nom de l' id par un dièse
Pour faire cela en CSS, indiquez le nom de votre classe en (#):
commençant par un point, comme ci-dessous :
2021-2022 HTML & CSS 23 2021-2022 HTML & CSS 24

En effet, le problème de class , c'est qu'il s'agit d'un attribut. Vous ne
pouvez donc en mettre que sur une balise. Si, par exemple, je veux
modifier uniquement « bienvenue » dans le paragraphe suivant
Retenez que : <span> </span> : c'est une balise de type inline, c'est-à-dire une
Deux balises peuvent avoir le même nom avec l'attribut class. balise que l'on place au sein d'un paragraphe de texte pour
Un nom d' id doit en revanche être unique dans la page HTML. sélectionner certains mots uniquement. Cette balise s'utilise donc au
milieu d'un paragraphe et c'est celle dont nous allons nous servir
pour colorer « bienvenue » ;
2021-2022 HTML & CSS 25 2021-2022 HTML & CSS 26
Appliquer un style : class et id

Appliquer un style : les sélecteurs avancés
Pour cibler (ou « sélectionner ») les éléments de la page à modifier,
on utilise ce qu'on appelle des sélecteurs.
On veut faire le style de

On veut faire le style de On veut faire le style de
tous les titres et les
tous les paragraphes tous les titres
paragraphes
2021-2022 HTML & CSS 27 2021-2022 HTML & CSS 28

Appliquer un style : les sélecteurs avancés Les sélecteurs avancés
On peut aussi sélectionner des balises précises à qui nous avons
donné un nom, grâce aux attributs class et id : A B : une balise contenue dans une
* : sélecteur universel autre
Sélectionne toutes les balises Sélectionne toutes les balises

sans exception. On l'appelle le <strong> situées à l'intérieur
sélecteur universel. d'une balise <p> . Notez qu'il
n'y a pas de virgule entre les
deux noms de balises. Ex
2021-2022 HTML & CSS 29 2021-2022 HTML & CSS 30
Les sélecteurs avancés Les sélecteurs avancés
A + B : une balise qui en suit une A[attribut] : une balise qui possède A[attribut="Valeur"] : une balise, A[attribut*="Valeur"] : une balise,
autre un attribut un attribut et une valeur exacte un attribut et une valeur
Sélectionne la première balise Sélectionne toutes les images Sélectionne toutes les images Sélectionne toutes les images
<p> située après un titre <h3> <img> qui possèdent un attribut <img> qui possèdent un <img> qui possèdent un attribut
alt. attribut alt dont la valeur est alt dont la valeur contient«
exactement « logo du site». logo».
2021-2022 HTML & CSS 31 2021-2022 HTML & CSS 32

Pseudo-classes Pseudo-classes
Une pseudo-classe est un mot clé préfixé par deux points (:) qui s'ajoute à Pseudo-classe :link Pseudo-classe :visited
un sélecteur CSS pour appliquer un style à un élément dans un cas
particulier. L'utilisation des pseudo-classes est très populaire sur les liens La pseudo-classe :link désigne A l'inverse de link, la pseudo-
hypertextes qui changent de décor selon si ils sont nouvellement affichés, un lien hypertexte dont la page classe :visited désigne un lien
déjà visités ou survolés cible (celle spécifiée dans son hypertexte dont la page cible a
attribut href) n'a pas encore été déjà été visitée. C'est un genre
Et pour les utiliser, on écrit comme suit: visitée. Elle peut aider les d'historique en quelque sorte.
internautes à distinguer les liens
sélecteur:pseudo-classe { qu'ils n'ont pas encore exploré
propriété: valeur;
}
2021-2022 HTML & CSS 33 2021-2022 HTML & CSS 34
Pseudo-classes Pseudo-classes : EXemple
Pseudo-classe :active Pseudo-classe :hover Code HTML Code CSS

La pseudo-classe :active désigne La pseudo-classe :hover désigne a{
un lien hypertexte sélectionné. un objet survolé par le curseur <a href="#">Hyperlien</a> font-weight:bold;
Il s'agit de l'instant où le visiteur de la souris, il peut être un
color:#EE6600;
clique sur le lien, si celui-ci reste hyperlien ou n'importe quel
affiché sur la page (cas où la autre objet. text-decoration:none;}
page est figée après le clic, ou le a:hover{
lien est ouvert dans une
color:#000088;
nouvelle fenêtre) on peut voir
l'effet de cette pseudo-classe. text-decoration:underline;}
2021-2022 HTML & CSS 35 2021-2022 HTML & CSS 36

Pseudo-classes : EXemple Pseudo-classes : EXemple
Code HTML + CSS
Dans cet exemple, nous avons spécifié un style qui s'applique à <img src="image.png" id="logo" />
tous les liens quelque soit leur état (sélecteur a). #logo{
Après nous avons explicité le style de l'état survolé (a:hover). Il opacity:1;
faut savoir que tous les styles déjà déclarés dans le premier filter:alpha(opacity=100);
sélecteur sont hérités par le sélecteur de l'état survolé, et ceux
qui ont été redéfinis seront écrasés et remplacés par leur cursor:pointer;}
nouvelle valeur (cas des propriétés color et text-decoration). #logo:hover{
opacity:0.5;
filter:alpha(opacity=50);}
2021-2022 HTML & CSS 37 2021-2022 HTML & CSS 38
Pseudo-classes : EXemple PSEUDO-CLASSES
Pseudo-classe :focus
Si vous survolez l'image, vous constatez que le curseur de la

sourie change de forme pour ressembler à celle qu'on a La pseudo-classe :focus désigne un élément activé ou sélectionné
l'habitude de voir sur des liens hypertextes. C'est grâce à la suite à un clic ou une tabulation. C'est souvent utilisé sur les
propriété cursor à laquelle on a attribué la valeur pointer. Il champs de formulaire.
existe d'autres valeurs comme move, crosshair, default...
2021-2022 HTML & CSS 39 2021-2022 HTML & CSS 40

Pseudo-classes : Exemple Pseudo-classes : Exemple
<input type="text" name="login" />

Là encore vous avez remarqué la propriété outline à laquelle on a donné la
valeur none. Elle désigne un cadre qui ressemble à la bordure mais qui
input[type="text"]{ entoure l'objet (sa bordure comprise). Certains navigateur (comme Google
border:solid 1px #CCCCCC; Chrome) appliquent automatiquement ce cadre aux champs de formulaires
color:#888888; sélectionnés, ce qui peut altérer un peu le design souhaité. La valeur none
padding:10px; élimine tout cadre éventuel.
border-radius:4px;} La propriété outline a les mêmes valeurs que la propriété border.
input[type="text"]:focus{
border:solid 1px #EE6600;
color:#888888;
outline:none;}
2021-2022 HTML & CSS 41 2021-2022 HTML & CSS 42
PSEUDO-CLASSES PSEUDO-CLASSES
Pseudo-classe :first-child Pseudo-classe :nth-child(n)
La pseudo-classe first-child désigne le premier élément enfant. Supposons Si la pseudo-classe first-child permet d'accéder au premier
que nous avons déclaré le sélecteur suivant span:first-child. Le navigateur élément enfant d'un parent quelconque, la pseudo-classe nth-
appliquera le style associé à toutes les balises <span> qui figurent en tant child(n) quant à elle, permet d'accéder à un élément enfant de
que premier élément enfant de n'importe quelle balise. Si le code HTML
était comme ceci: n'importe quel rang et pas que le premier. Le paramètre n mis
<div> entre les parenthèse désigne le rand de l'élément à styler. Il
<span>Bonjour</span> s'agit d'un indice numérique qui commence de 1 (1 étant le
à premier élément, 2 le deuxième et ainsi de suite...).
<span>tous</span>
</div> Pour l'exemple HTML précédent, le sélecteur div>span:nth-
Alors seule la premier balise <span> s'attribuerait le style décrit dans le child(2) fait référence à la deuxième balise <span>.
sélecteur.
2021-2022 HTML & CSS 43 2021-2022 HTML & CSS 44
Pseudo-éléments Pseudo-élement ::first-letter
Le pseudo-élément ::first-letter désigne la première lettre de
l'élément auquel il est associé. Il permet de donner un style
particulier à la première lettre d'un élément.
<div>
Les pseudo-éléments sont préfixés par deux points (:) et ajoutés au
La première lettre de ce texte est différente!
sélecteur. Si les pseudo-classe décrivent un état d'un élément
(comme un lien hypertexte survolé), les pseudo-éléments eux </div>
accèdent à certaines parties de l'élément pour les styler. div::first-letter{
font-size:24pt;
color:orange;}
2021-2022 HTML & CSS 45 2021-2022 HTML & CSS 46
Pseudo-élement ::first-letter Pseudo-élément ::first-line
Le pseudo-élément ::first-line désigne la première ligne de l'élément.

En fait, sans pseudo-élément on aurait du mettre la lettre L dans la
On peut lui donner un style particulier tout comme pour first-letter.
balise <span> qu'on stylera par la suite à notre guise, mais ça fait
Le contenu de la première ligne peut changer selon la largeur de la
plus de travail!
fenêtre du navigateur.
2021-2022 HTML & CSS 47 2021-2022 HTML & CSS 48

Pseudo-élément ::first-line Pseudo-éléments ::before et ::after
<p class="paragraphe">
Tout comme les pseudo-classes, les pseudo-éléments sont préfixés ::before permet de créer un pseudo-élément au début de l'élément
par deux points (:) et ajoutés au sélecteur. Si les pseudo-classe sur lequel il est déclaré.
décrivent un état d'un élément (comme un lien hypertexte survolé), On peut intégrer du texte à un élément grâce au CSS, mais il ne faut
les pseudo-éléments eux accèdent à certaines parties de l'élément recourir à cette pratique tout le temps, car n'oubliez pas que c'est
pour les styler. HTML qui devrait créer le contenu et le CSS ne fait que le styler.
</p> ::after crée un pseudo-élément à la fin de l'élément sur lequel il est
.paragraphe::first-line{ déclaré.
color:blue; Les pseudo-éléments ::before et ::after font appel à la propriété
content qui ajoute du contenu (par défaut de type inline).
}
2021-2022 HTML & CSS 49 2021-2022 HTML & CSS 50
Pseudo-éléments ::before et ::after CSS3 : formatage du texte

<div>
Contenu de la DIV
Nom de police
</div>
Propriété Valeurs possible
div::before{ div::after{ font-family Indiquer les noms de polices possibles par ordre de préférence :
font-family :police1, police2, police3;
content:"Avant"; content:"Après"; Utilisez des guillemets si le nom de la police comporte des espaces. Essayez
color:red; color:blue; de toujours mettre comme dernière police possible "serif" ou "sans-serif".
Exemple :
} } font-family : "Arial Black", Arial, Verdana, serif;
2021-2022 HTML & CSS 51 2021-2022 HTML & CSS 52

CSS3 : formatage du texte CSS3 : formatage du texte
Taille du texte
Propriété Valeurs possible Gras et italique
font-size Plusieurs unités sont possibles :
px (pixels) Propriété Valeurs possible
% (pourcentage, 100% = normal)
em (taille relative, 1.0 = normal) font-weight bold : gras
ex (taille relative à la hauteur de la lettre "x". 1.0 = normal) bolder : plus gras
nom de taille : lighter : plus fin
xx-small : très très petit normal : pas gras (par défaut)
x-small : très petit
small : petit font-style italic : italique
medium : moyen oblique : autre façon de mettre en italique
large : grand normal : normal (par défaut)
x-large : très grand
xx-large : très très grand
2021-2022 HTML & CSS 53 2021-2022 HTML & CSS 54
Autres Autres
Letter-spacing permet d'ajuster l'espace entre chaque lettres. Valeurs possibles : Propriété Valeurs possible
normal
direction permet de choisir le sens du texte. Valeurs possibles :
une unité de longueur.
ltr de gauche à droite,
text-shadow permet de créer une ombre au texte. Valeurs possibles :
rtl de droite à gauche.
none,
une couleur et / ou une longueur. text-shadow permet de créer une ombre au texte. Valeurs possibles :
word-spacing permet d'ajuster l'espace entre chaque mot. Valeurs possibles : none,
normal une couleur et / ou une longueur.
une longueur. word-spacing : permet d'ajuster l'espace entre chaque mot. Valeurs possibles :
direction permet de choisir le sens du texte. Valeurs possibles : normal
ltr de gauche à droite une longueur.
rtl de droite à gauche.
2021-2022 HTML & CSS 55 2021-2022 HTML & CSS 56

Alignement Alignement
line-height Hauteur de ligne : Indiquer une valeur en pixels (px) ou en pourcentage
text-align Alignement horizontal (%)
left : à gauche (par défaut)
text-indent Appliquer un retrait à un paragraphe. Indiquez une valeur en pixels (px)
center : centré
pour définir l'alinéa de vos paragraphes.
right : à droite
Vos paragraphes commenceront avec le retrait que vous avez indiqué.
justify : texte justifié (prend toute la largeur de la page)
white-space Retour à la ligne
vertical-align Alignement vertical : A utiliser dans des cellules de tableau
normal : le passage à la ligne est automatique (par défaut)
top : en haut
nowrap : pas de passage à la ligne automatique, à moins qu'une balise
middle : au milieu
xHTML comme <br /> ne soit présente.
bottom : en bas
pre : le passage à la ligne se fait tel que le texte a été saisi dans le code
source.
2021-2022 HTML & CSS 57 2021-2022 HTML & CSS 58
CSS3 : Couleur et fond CSS3 : Couleur et fond
Image de fond, fond fixé et répétition du fond

Couleur background-image Image de fond :Indiquer l'url de l'image (notation absolue ou
Propriété Valeurs possible relative)
background-image :url("images/fond.png");
color Indiquer une couleur de texte avec l'une des méthodes suivantes :
En tapant le nom de la couleur en anglais (black, blue, green, white, background- Fond fixé
red...). attachment fixed : le fond reste fixe quand on descend plus bas sur la page
En indiquant la couleur en hexadécimal (#CC48A1) scroll : le fond défile avec le texte (par défaut)
En indiquant la couleur en RGB : rgb (128, 255, 0) background-repeat Répétition de fond
repeat : le fond se répète (par défaut)
background- Même fonctionnement que color. Cela définit cette fois la couleur de fond
repeat-x : le fond ne se répète que sur une ligne, horizontalement
color du texte
repeat-y : le fond ne se répète que sur une colonne, verticalement
no-repeat : le fond ne se répète pas, il n'est affiché qu'une fois
2021-2022 HTML & CSS 59 2021-2022 HTML & CSS 60
CSS3 : Couleur et fond CSS3 : Couleur et fond
Position du fond Raccourci

background-position Position du fond, il y 2 façons de faire :
- En notant une distance en px ou %, par rapport au coin en haut à gauche.
Propriété Valeurs possibles
- En utilisant des valeurs prédéfinies, une pour la verticale et une pour background ndiquer une ou plusieurs valeurs issues des propriétés
l'horizontale : background-image, background-repeat, background- attachment,
top : en haut, verticalement background-position.
center : au milieu, verticalement L'ordre des valeurs n'a pas d'importance et vous n'êtes pas obligés
bottom : en bas, verticalement de mettre toutes les valeurs de ces propriétés (au moins une suffit)
left : à gauche, horizontalement Exemple : background : url("images/fond.png") no-repeat
center : au centre, horizontalement
fixed top right;
right : à droite, horizontalement
: :
/* Le fond fond.png reste affiché en haut à droite de l'écran
et n'est pas répété. */
2021-2022 HTML & CSS 61 2021-2022 HTML & CSS 62
CSS3 : Propriétés des boîtes CSS3 : Propriétés des boîtes
Dimensions Marges extérieures

width Largeur : Valeur en px, %, ou encore "auto" (valeur par défaut, la largeur Propriété Valeurs possibles
dépendra du texte à l'intérieur)
height Hauteur :Idem margin-top Marge en haut :Indiquer une valeur comme 20px, 1.5em...
min-width Largeur minimale : Indiquer une valeur, en pixels par exemple. margin-left Marge à gauche : Idem
max-width Largeur maximale : Idem margin-right Marge à droite : Idem

min-height Hauteur minimale : Idem margin-
Marge en bas : Idem
bottom
max-height Hauteur maximale : Idem
2021-2022 HTML & CSS 63 2021-2022 HTML & CSS 64

Marges extérieures - Raccourcis Marges intérieures

Indiquez de 1 à 4 valeurs à la suite. Selon le nombre de valeurs que vous mettez, la Propriété Valeurs possibles
signification change :
1 valeur : ce sera la marge pour le haut, le bas, la gauche et la droite padding-top Marge intérieure en haut :Indiquer une valeur comme 20px, 1.5em...
2 valeurs : la première correspond à la marge pour le haut et le bas, la seconde
pour la gauche et la droite padding-left Marge intérieure à gauche : Idem
margin 3 valeurs : la première correspond à la marge du haut, la seconde aux marges à
gauche et à droite, la troisième à la marge du bas padding-right Marge intérieure à droite : Idem
4 valeurs : respectivement la marge du haut, de la droite, du bas, de la gauche.
Exemple : padding-bottom Marge intérieure en bas : Idem
margin :20px 5px; /* 20px de marge en haut et en bas, 5px à gauche et à droite
*/
padding Raccourci :Idem margin
2021-2022 HTML & CSS 65 2021-2022 HTML & CSS 66
Bordures Bordures
Propriété Valeurs possibles Propriété Valeurs possibles
border-width Epaisseur de la bordure : Indiquer une valeur en px. Bordure à gauche : Indiquer la couleur, l'épaisseur et le type de bordure pour la
bordure gauche. L'ordre n'a pas d'importance.
border-left
Exemple :
border-color Couleur de la bordure : Indiquer une valeur de couleur.
border-left : 2px inset blue; /* Bordure bleue de 2px avec effet 3D "enfoncé" */
Type de bordure
none : pas de bordure (par défaut)
border-top Bordure en haut : Idem
hidden : bordure cachée
solid : ligne pleine border-right Bordure à droite : Idem
double : ligne double (nécessite une taille de bordure de 3px minimum)
border-style
dashed : en tirets
border-bottom Bordure en bas : Idem
dotted : en pointillés
inset : effet 3D "enfoncé"
outset : effet 3D "surélevé" border Raccourci : Indiquera l'apparence des bordures en haut, à droite, en bas et à gauche.
ridge : autre effet 3D
2021-2022 HTML & CSS 67 2021-2022 HTML & CSS 68

CSS3 : Propriétés de positionnement et CSS3 : Propriétés de positionnement et
d'affichage d'affichage
Affichage Affichage
Type Limiter les dimensions
none : l'élément ne sera pas affiché
visible : tout l'élément sera affiché (par défaut).
display block : l'élément devient de type "block" (bloc, comme <p>)
inline : l'élément devient de type "inline" (en ligne, comme <strong>)
hidden : l'élément sera coupé s'il dépasse les limites définies par height et
list-item : l'élément devient de type "élément de liste à puce" (comme <li>) width. On ne pourra pas voir la partie du texte coupée.
scroll : tout comme hidden, l'élément sera coupé s'il dépasse les limites.
Affichage overflow
hidden : masqué Toutefois, cette fois le navigateur ajoutera des barres de défilement pour qu'on
visibility visible : visible (par défaut) puisse voir la suite du texte.
display :none; fait complètement disparaître l'élément, tandis que visibility :hidden; auto : c'est le navigateur qui décide d'ajouter des barres de défilement ou pas
masque l'élément, qui continue quand même à prendre de la place sur l'écran. en fonction des cas. Bien souvent, utiliser cette valeur revient à utiliser la
valeur "scroll".
2021-2022 HTML & CSS 69 2021-2022 HTML & CSS 70
CSS3 : Propriétés de positionnement et CSS3 : Propriétés de positionnement et

d'affichage d'affichage
Affichage Affichage

Flottant Type de positionnement
absolute : position absolue par rapport au coin en haut à gauche
left : flottant à gauche
float position
fixed : position fixe (fonctionne comme la position absolue). L'élément reste à sa
right : flottant à droite position même quand on descend plus bas dans la page.
none : pas de flottant (par défaut) relative : position relative, par rapport à la position "normale" de l'élément
Stopper un flottant static : positionnement normal (par défaut)
left : supprime l'effet d'un flottant à gauche précédent Position par rapport au haut : Valeur en px, %, em... A utiliser pour un positionnement
top
clear right : supprime l'effet d'un flottant à droite précédent absolu, fixe ou relatif.
both : supprime l'effet d'un flottant précédent, qu'il soit à gauche ou à droite bottom Position par rapport au bas : Idem
none : pas de suppression de l'effet du flottant (par défaut) left Position par rapport à gauche : Idem
right Position par rapport à droite : Idem
2021-2022 HTML & CSS 71 2021-2022 HTML & CSS 72

CSS3 : Propriétés de positionnement et
CSS3 : Propriétés des listes
d'affichage
Affichage Type de listes

Pour les listes non ordonnées (<ul>) :
Propriété Valeurs possibles disc : un disque noir (par défaut).
circle : un cercle.
square : un carré.
Par exemple en cas de positionnement absolu, si 2 éléments se chevauchent, none : aucune puce ne sera utilisée.
Pour les listes ordonnées (<ol>) :
z-index permet d'indiquer quel élément doit être affiché au-dessus de l'autre. decimal : des nombres 1, 2, 3, 4, 5... (par défaut)
Indiquez un nombre. Plus ce nombre est élevé, plus l'élément sera affiché en list-style-type
z-index decimal-leading-zero : des nombres commençant par zéro (01, 02, 03, 04, 05...). Ne
avant. fonctionne pas sur Internet Explorer
Exemple, si vous avez 2 éléments positionnés en absolus avec un z-index : 10 upper-roman : numérotation romaine, en majuscules (I, II, III, IV, V ...)
lower-roman : numérotation romaine, en minuscules (i, ii, iii, iv, v...)
pour l'un et z-index : 20 pour l'autre, c'est celui qui a un z-index de 20 qui sera upper-alpha : numérotation alphabétique, en majuscules (A, B, C, D, E...)
affiché par-dessus. lower-alpha : numérotation alphabétique, en minuscules (a, b, c, d, e...)
lower-greek : numérotation grecque. Ne fonctionne pas sur Internet Explorer
2021-2022 HTML & CSS 73 2021-2022 HTML & CSS 74
CSS3 : Propriétés des listes CSS3 : Autres Propriétés
Position en retrait, puce personnalisée et raccourci Les pseudo-

list-style- inside : sans retrait a :link : lien non-visité
position outside : avec retrait (par défaut) a :visited : lien visité
a
list-style- Indiquer l'url de l'image qui servira de puce. a :hover : lien survolé
image Exemple : list-style-image : url("images/puce.png"); a :active : lien activé
Vous pouvez réunir les valeurs de list-style-type, list-style-position et
list-style list-style-image. Vous n'êtes pas obligés de mettre toutes les valeurs, et
l'ordre n'a pas d'importance. Exemple : list-style : inside square;
2021-2022 HTML & CSS 75 2021-2022 HTML & CSS 76

CSS3 : Autres Propriétés CSS3 : Autres Propriétés
Les barres de défilement Les barres de défilement

scrollbar-3dlight-color : permet de modifier la couleur pour les effets de scrollbar-face-color : permet de modifier la couleur de la surface de la barre
relief. Valeur possible : une couleur. de défilement. Valeur possible : une couleur.
scrollbar-arrow-color : permet de modifier la couleur pour les pointeurs de scrollbar-highlight-color : permet de modifier la couleur pour le bord haut
défilement. Valeur possible : une couleur. et le bord gauche. Valeur possible : une couleur.
scrollbar
scrollbar-base-color : permet de modifier la couleur de la surface de la barre scrollbar scrollbar-shadow-color : permet de modifier la couleur pour le bord droit et
de défilement. Valeur possible : une couleur. le bord du bas. Valeur possible : une couleur.
scrollbar-darkshadow-color : permet de modifier la couleur pour les scrollbar-track-color : permet de modifier la couleur pour la barre de
ombres. Valeur possible : une couleur. défilement non cachée par le pointeur de défilement. Valeur possible : une
couleur.
2021-2022 HTML & CSS 77 2021-2022 HTML & CSS 78

Chapitre 2: CSS: C'est Ce Qui Vous Permet de

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

Chapitre 2: CSS: C'est Ce Qui Vous Permet de

Transféré par

Droits d'auteur :

Formats disponibles

CSS

C'est ce qui vous permet de:

HTML & CSS 1 HTML & CSS 2

Où écrit-on le CSS ? Dans un fichier .css

Directement dans les balises Attribut style

HTML & CSS 3 HTML & CSS 4

Enregistrez le fichier en lui donnant un nom qui se termine par .css

HTML & CSS 5 2021-2022 HTML & CSS 6

2021-2022 HTML & CSS 7 2021-2022 HTML & CSS 8

Dernière méthode, à manipuler avec précaution : vous pouvez

2021-2022 HTML & CSS 9 2021-2022 HTML & CSS 10

Directement dans les balises (non recommandé)

Si vous travaillez avec un fichier CSS externe, vous n'aurez besoin

2021-2022 HTML & CSS 11 2021-2022 HTML & CSS 12

Dans un code CSS comme celui-ci, on trouve trois éléments

2021-2022 HTML & CSS 13 2021-2022 HTML & CSS 14

Appliquer Un STYLE :sélectionner une balise

3. Les valeurs : pour chaque propriété CSS, on doit indiquer une

2021-2022 HTML & CSS 15 2021-2022 HTML & CSS 16

On écrit le nom de la balise (par exemple h1 ) et on ouvre des balises

2021-2022 HTML & CSS 17 2021-2022 HTML & CSS 18

Appliquer un style à plusieurs balises

Pour faire un commentaire, tapez /* , suivi de votre commentaire,

2021-2022 HTML & CSS 19 2021-2022 HTML & CSS 20

2021-2022 HTML & CSS 21 2021-2022 HTML & CSS 22

Appliquer un style : class et id Appliquer un style : class et id

2021-2022 HTML & CSS 23 2021-2022 HTML & CSS 24

2021-2022 HTML & CSS 25 2021-2022 HTML & CSS 26

Appliquer un style : class et id

On veut faire le style de

2021-2022 HTML & CSS 27 2021-2022 HTML & CSS 28

Sélectionne toutes les balises Sélectionne toutes les balises

Les sélecteurs avancés Les sélecteurs avancés

2021-2022 HTML & CSS 31 2021-2022 HTML & CSS 32

Pseudo-classes Pseudo-classes : EXemple

Pseudo-classe :active Pseudo-classe :hover Code HTML Code CSS

2021-2022 HTML & CSS 35 2021-2022 HTML & CSS 36

Code HTML + CSS

Pseudo-classes : EXemple PSEUDO-CLASSES

Si vous survolez l'image, vous constatez que le curseur de la

2021-2022 HTML & CSS 39 2021-2022 HTML & CSS 40

<input type="text" name="login" />

Pseudo-classe :first-child Pseudo-classe :nth-child(n)

2021-2022 HTML & CSS 45 2021-2022 HTML & CSS 46

Pseudo-élement ::first-letter Pseudo-élément ::first-line

Le pseudo-élément ::first-line désigne la première ligne de l'élément.

2021-2022 HTML & CSS 47 2021-2022 HTML & CSS 48

2021-2022 HTML & CSS 49 2021-2022 HTML & CSS 50

Pseudo-éléments ::before et ::after CSS3 : formatage du texte

2021-2022 HTML & CSS 51 2021-2022 HTML & CSS 52

CSS3 : formatage du texte CSS3 : formatage du texte

2021-2022 HTML & CSS 55 2021-2022 HTML & CSS 56

CSS3 : Couleur et fond CSS3 : Couleur et fond

Image de fond, fond fixé et répétition du fond

Position du fond Raccourci

CSS3 : Propriétés des boîtes CSS3 : Propriétés des boîtes

Dimensions Marges extérieures

Propriété Valeurs possibles

max-width Largeur maximale : Idem margin-right Marge à droite : Idem

2021-2022 HTML & CSS 63 2021-2022 HTML & CSS 64

Marges extérieures - Raccourcis Marges intérieures

Propriété Valeurs possibles

2021-2022 HTML & CSS 65 2021-2022 HTML & CSS 66