CSS : Cascading Style

Sheets
CHAPITRE 6 – PARTIE 2
La taille du texte
En pixels : c'est une façon très précise d'indiquer la taille du texte.
p
{
font-size:16px; /* Paragraphes de 16 pixels */ }
h1
{
font-size:22px; /* Titres de 22 pixels */ }

En pourcentage :
"100%", le texte aura une taille "normale".
"130%", le texte aura une taille correspondant à 130% de la taille normale.
La taille du texte
En donnant une valeur relative : Exemple

xx-small :minuscule p
{
x-small :très petit
font-size: small;
small :petit
}
h1
medium :moyen
{
large :grand
font-size: large;
x-large :très grand }
xx-large : plus grand que le x-large
La taille du texte
En em : c’est une autre façon d’indiquer de Exemple
manière relative la taille du texte.
.petit_em {
On doit indiquer la taille du texte par
rapport à la taille normale de la police. font-size: 0.7em;
}
"1 em" signifie "Taille normale".
.grand_em {
•Pour grossir le texte → inscrire une valeur
supérieure à 1 (exemple 1.3em) font-size: 1.3em;
•Pour réduire le texte → inscrire une valeur }
inférieure à 1 (exemple 0.8em)
La police
La propriété CSS qui permet d'indiquer la police est :

font-family

balise
{
font-family: police;
}
 Différentes polices
Voici une liste de polices qui fonctionnent bien sur la plupart des navigateurs :
•Arial
•Arial Black
•Comic Sans MS
•Courier New
•Georgia
•Impact
•Times New Roman
•Trebuchet MS
•Verdana
Alignement simple
On utilise la propriété text-align, et on indique l’alignement désiré :

left :le texte sera aligné à gauche (c'est le réglage par défaut).
center: le texte sera centré.
right: le texte sera aligné à droite.
justify: le texte sera "justifié".
Exemple
h1
{
text-align: center;
}

p
{
text-align: justify;
}
.signature
{
text-align: right;
}
L'indentation: la mise en retrait du texte
Cela permet de faire commencer un paragraphe un peu plus à droite.
On utilise la propriété text-indent
On doit indiquer quelle est la taille du retrait : on peut le faire en pixels, en centimètres, en
millimètres...

p{
text-indent: 30px; /* Les paragraphes commenceront 30 pixels sur la droite */
text-align: justify; /* Ils seront justifiés*/
font-size: large;
}
 Effets de style
Mettre en italique :
h2 {
font-style: italic; /* Les titres h2 seront en italique */
}

Mettre en gras :
p{
font-weight: bold; /* Les titres h2 seront en gras*/
}
Les majuscules
La propriété text-transform. Elle peut prendre ces valeurs :

uppercase :tout le texte sera écrit en majuscules.

lowercase :tout le texte sera en minuscules.

capitalize :la première lettre de chaque mot sera en majuscules.

h1
{
text-align:center;
font-family: Arial;
text-transform: capitalize; /* Les premières lettres des mots du titre seront en majuscules*/
}
 La décoration
La propriété text-decoration
underline :souligné.
line-through :barré.
overline :ligne au-dessus.
blink :clignotant. Attention, cette propriété ne marche pas sous Internet Explorer. Elle
fonctionne en revanche bien sur tous les autres navigateurs, dont Mozilla Firefox.
 Les couleurs
La propriété qui permet de changer la couleur du texte est:
Color

16 couleurs que vous pouvez utiliser en tapant simplement leur nom :

h1
{
color: maroon;
}
Exemple
h1 {
text-align:center;
font-family:Arial;
text- decoration: underline;
color: green;/* Le titre en vert */
}
p{
text-indent: 20px;
color: blue;/* Les paragraphes en bleu */
}
La notation hexadécimale
•Un nom de couleur en hexadécimal, c’est une combinaison de lettres et de chiffres qui
indiquent une couleur.

•On doit toujours commencer par écrire un dièse (#), suivi de 6 lettres ou chiffres allant de
0 à 9 et de A à F.

•Ces lettres ou chiffres fonctionnent deux par deux:

➢ Les 2 premiers indiquent une quantité de rouge

➢ Les 2 suivants une quantité de vert

➢ Les 2 derniers une quantité de bleu.

→ En mélangeant ces quantités (qui sont les composantes Rouge-Vert-Bleu de la couleur) on

peut obtenir la couleur qu’on veut.
Exemple
p
{
color: #00FF00;
}
La méthode RGB (Red-Green-Blue)
• On doit définir une quantité de rouge, de vert et de bleu pour choisir une couleur.
• Utiliser la palette des couleurs.

On relève les quantités de Rouge - Vert - Bleu

correspondantes indiquées en bas à droite de la fenêtre
(243- 65 - 243).

Je recopie ces valeurs dans cet ordre dans le fichier

CSS, comme ceci :
p
{
color: rgb(240,96,204);
}
Couleur de fond
•Le fond ne désigne pas forcément le fond de toute une page web.
• On peut aussi appliquer un fond uniquement aux titres, ou aux paragraphes, ou
encore à certains mots d’un paragraphe.

• Il existe 2 types de fonds :

• Les fonds comportant une couleur.
• Les fonds comportant une image de fond.
La couleur de fond
•Pour indiquer une couleur de fond, on utilise la propriété CSS background-color.
•Pour indiquer la couleur de fond de la page web, il faut travailler sur la balise <body> qui
correspond à toute la page web.

body {

background-color : black;

color:white;
}
→appliquer une couleur de fond noire et une couleur
de texte blanc à la balise <body>
Images de fond
• La propriété permettant d'indiquer une image de fond est
background-image
•Comme valeur, on doit lui mettre url ("nom_image.jpg")

•Exemple
•Appliquer une image de fond à toute la page (on doit utiliser la balise <body>)

body {
background-image : url ("../images/neige.png");
}
La transparence
La propriété opacity: permet d'indiquer le niveau d'opacité (c'est l'inverse de la
transparence).
•Avec une valeur de 1, l'élément sera totalement opaque : c'est le comportement par défaut.
•Avec une valeur de 0, l'élément sera totalement transparent.
→ Il faut donc choisir une valeur comprise entre 0 et 1

p
{
opacity: 0.6;
}
Exemple
body
{
background: url('neige.jpg');
}

p
{
background-color: black;
color: white;
opacity: 0.3;
}
Exercice
Les activités
Séminaires
1. Les nouvelles technologies
2. Le web

Publications
Ateliers
1. Internet
2. Flash
3. Wifi

Commentaire:
Flexbox
Flexbox est une méthode de mise en page selon un axe principal, permettant de disposer des
éléments en ligne ou en colonne. Les éléments se dilatent ou se rétractent pour occuper
l'espace disponible.
Exemple
section
{
display: flex;
}
Donner une direction avec la
propriété flex-direction
Flexbox permet d'agencer ces éléments dans le sens que l'on veut. Avec flex-direction, on
peut les positionner verticalement ou encore les inverser. Cette propriété CSS peut prendre les
valeurs suivantes :
•row : organisés sur une ligne (par défaut) ;
•column : organisés sur une colonne ;
•row-reverse : organisés sur une ligne, mais en ordre inversé ;
•column-reverse : organisés sur une colonne, mais en ordre inversé.
Exemple
.container {
display: flex;
flex-direction: column;
}
Les éléments du conteneur sont disposés en colonne