Les proprits CSS

Mise en forme du texte.

La proprit CSS qui permet d'indiquer la police utiliser, dans un paragraphe, est font-
family. On doit crire le nom de la police comme ceci :

{ font-family: police;

et police peut tre :

Arial; Arial Black ; Comic Sans MS ; Courier New ; Georgia ; Impact ; Times New Roman ;
Trebuchet MS ; Verdana...

Soulignement et autres dcorations de texte :

La proprit CSS permettant de dcorer le texte (le souligner, le barrer, est : Text-
decoration. Elle peut prendre les valeurs suivante :

underline : soulign.
line-through : barr.
overline : ligne au-dessus.
blink : clignotant. Mais elle ne fonctionne pas sur tous les navigateurs (Internet
Explorer et Google Chrome, notamment).
none : aucune dcoration

Exemple

h1

{ text-decoration: blink;

Alignement du texte

text-align et on indique l'alignement dsir :

left : le texte sera align gauche (c'est le rglage par dfaut).

center : le texte sera centr.
right : le texte sera align droite.
justify : pour ajuster le texte .

Couleurs des liens hypertexte Apparences dynamiques

a:active /* Quand le visiteur clique sur le lien */

{ background-color: #FFCC66;
}

a:focus /* Quand le visiteur slectionne le lien */

{ background-color: #FFCC66;
}

a:visited /* Quand le visiteur a dj vu la page concerne */

{ color: #AAA; /* Appliquer une couleur grise */
}

a:hover /* Apparence au survol des liens */

{ text-decoration: underline;
color: green; }

Les flottantes
Le CSS nous permet de faire flotter un lment autour du texte. On dit aussi qu'on fait un
habillage .
Exemple

.imageflottante
{ float: left;
}
.dessous
{ clear: both;
}
<p>
<img src="flash.gif" class="imageflottante"
alt="Image flottante" />
</p><p>Ce texte est crit ct de l'image
flottante.</p><p class="dessous">Ce texte est
crit sous l'image flottante.</p>

Notion de blocs/Botes/Cadres
Tout comme les blocs h1 et p, HTML5 propose dautres blocs, pour
structurer smantiquement une page web, tels que :
<div></div> pour rserver une partie de la page appele aussi
une division pour un certain contenu.

Position des blocs( absolute, fix, relative)

bloc
{ position: absolute;
right: 0px;
bottom: 0px;
}

lment
{ position: absolute;
right: 0px;
bottom: 0px;
z-index: 1;
}
element2
{ position: absolute;
right: 30px;
bottom: 30px;
z-index: 2;
}
Position fixed
element

{ position: fixed;

right: 0px;

bottom: 0px; }

Position relative
strong

{ background-color: red;

color: yellow;

position: relative;

left: 55px; top: 10px;

Exemple
<div class="static">
texte

<div >

.relative1 {
position : relat ive ;
}
.relative2 {
position : relative ;
top : - 20px ;
left : 20px ;
background - color : white ;
width : 500px ;
}
<div class="relative1">
relative se comporte de la mme faon que static sauf si vous
ajoutez quelques proprits en plus.
</div>
<div class="relative2">
Ajouter les proprits top, right, bottom et left un lment
positionn en relative va le placer ailleurs que sa position normale. Le
reste du contenu ne sera pas ajust pour prendre la place dans
l'espace laiss par l'lment.
}
<div class="fixed">
Bonjour ! Ne faites pas attention moi pour l'instant.
</div>
animation:
Translation :
@keyframes move {
from {left : 0px;}
to {left : 1000px;}
}
.div1
{
border : 1px solid black;
background-color : Pink;
position:relative;
-webkit-animation : move 5s Infinite alternate;
animation : move 5s Infinite alternate;
}

Le principe du responsive web design

Le responsive web design est une technique de ralisation de site web, qui permet de
faire des sites qui s'adaptent automatiquement l'espace disponible sur l'cran dun
dispositif (Smartphone, Tablettes ).

Code HTML correspondant :

<meta name="viewport" content="width=device-width, initial-

scale=1.0">
Cette balise suffit en gnral rgler tous les soucis de dzoom.

Autres valeurs de la balise <meta> viewport

La balise <meta> autorise d'autres valeurs utilisables dans vos projets :
Width : largeur de fentre viewport (par exemple width="device-width")
height : hauteur de fentre viewport (par exemple height="device-
height")
initial-scale : niveau de zoom initial (par exemple initial-
scale="1.0")
 minimum-scale : niveau de zoom minimal (par exemple minimum-
scale="0.5")
maximum-scale : niveau de zoom maximal (par exemple maximum-
scale="3.0"). Attention, la valeur "1.0" interdit le zoom et peut rendre
vos pages inaccessibles
user-scalable : possibilit l'utilisateur de zoomer (par exemple
user-scalable="yes"). Attention, la valeur "no" interdit le zoom et peut
rendre vos pages inaccessibles
target-densitydpi : choix de rsolution, en dpi, de l'affichage gnral
(spcifique Webkit et semble avoir t abandonn).

Tableaux rcapitulatifs des proprits CSS.

Proprit Valeurs (exemples) Description

police1, police2, police3,

font- family Nom de police
serif, sans-serif, monospace

@font-face Nom et source de la police Police personnalise

font-size 1.3em, 16px, 120%... Taille du texte

font- weight bold, normal Gras

font-style italic, oblique, normal Italique

underline, overline, line-

text- decoration Soulignement, ligne au-dessus, barr ou clignotant
through, blink, none

font- variant small-caps, normal Petites capitales

capitalize, lowercase,
text- transform Capitales
uppercase

Super proprit de police. Combine : font-weight,

font -
font-style, font-size, font-variant, font-family.

text-align left, center, right, justify Alignement horizontal

baseline, middle, sub, super, Alignement vertical (cellules de tableau ou lments

vertical- align
top, bottom inline-block uniquement)
line- height 18px, 120%, normal... Hauteur de ligne

text- indent 25px Alina

white- space pre, nowrap, normal Csure

word-wrap break-word, normal Csure force

5px5px2pxblue
text- shadow
(horizontale, verticale, Ombre de texte
fondu, couleur)