CSS3
Ce documentne contient que certaines propriétés CSS.
La totalité des propriétés CSS sont vus en classes dans les activités pratiques.
1 INTRODUCTION
1.1 CSS3 ?
Est-ce qu’il y a CSS2 ?
C’est quoi la différence avec CSS2 ?
2 LES POLICES D’ECRITURES :
2.1 EXEMPLE DE POLICE D’ECRITURE (FONT)
2.2 DIFFERENCE ENTRE LES TYPES DE FONT « SANS-SERIF » ET « SERIF »
Remarque : Sur les écrans d'ordinateur, les polices « sans-serif » sont
considérées comme plus faciles à lire que les polices « serif ».
Page 1 sur 17
2.3 FONT-STYLE
Code source Résultat
<!DOCTYPE html>
<html>
<head>
<style>
p.a {
font-style: normal;
}
p.b {
font-style: italic;
}
</style>
</head>
<body>
<p class="a">This is a paragraph,
normal.</p>
<p class="b">This is a paragraph,
italic.</p>
</body>
</html>
2.4 FONT-FAMILY
Code source Résultat
<!DOCTYPE html>
<html>
<head>
<style>
p.a {
font-family: "Times New Roman", Times,
serif;
}
p.b {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<p class="a">This is a paragraph</p>
<p class="b">This is a paragraph</p>
</body>
</html>
Page 2 sur 17
2.5 FONT-WEIGHT
Code source Résultat
<!DOCTYPE html>
<html>
<head>
<style>
.p1 {
font-weight: normal;
}
.p2 {
font-weight: lighter;
}
.p3{
font-weight: bold;
}
.p4 {
font-weight: bolder;
}
</style>
</head>
<body>
<p class="p1">This is a paragraph.</p>
<p class="p2">This is a paragraph.</p>
<p class="p3">This is a paragraph.</p>
<p class="p4">This is a paragraph.</p>
</body>
</html>
Page 3 sur 17
2.6 FONT (COMBINE PLUSIEURS PROPRIETES )
Font: font-style font-weight font-size(obligatoire) font-family(obligatoire);
Il faut suivre cet ordre
(personnalisé selon l’annexe du bac)
[Link]
[Link]
Code source Résultat
<!DOCTYPE html>
<html>
<head>
<style>
.p1 {
font-style: italic;
font-weight: bold;
font-size: 20px;
font-family: Arial ;
}
.p2{
font: italic bold 20px Arial;
}
</style>
</head>
<body>
<p class="p1">This is a paragraph, shown in the
Arial font.</p>
<p class="p2">This is a paragraph, shown in the
Arial font.</p>
</body>
</html>
Page 4 sur 17
3 TEXT-ALIGN, BORDER, BORDER-STYLE, BORDER-RADIUS
Code source Résultat
<!DOCTYPE html>
<html>
<head>
<style>
.s {
font-size: 30px;
text-align : center;
width:500px;
border:1px solid red;
}
.s2 {
text-align : justify; /* left, right, center, justify */
width:500px;
border-color : blue;
border-style : double; /* solid, dashed, dotted,
double, ... */
border-width : 2px; /*(medium ; thin ; thick ; valeur
en px) */
border-radius : 10px; /* le rayon des coins arrondis
*/
}
</style>
</head>
<body>
<p class="s">This is a paragraph.</p>
<p class="s2">This is another paragraph. Nec piget
dicere avide magis hanc insulam populum Romanum
invasisse quam iuste. Ptolomaeo enim rege foederato
nobis et socio ob aerarii nostri angustias iusso sine
ulla culpa proscribi ideoque hausto veneno voluntaria
morte deleto et tributaria facta est et velut hostiles
eius exuviae classi inpositae in urbem advectae sunt
per Catonem, nunc repetetur ordo gestorum.</p>
</body>
</html>
Page 5 sur 17
4 SELECTEUR *
Code source Résultat
<!DOCTYPE html>
<html>
<head>
<style>
*{
color: red;
}
</style>
</head>
<body>
<h1>Titre</h1>
<p class="p1">Ceci est un text</p>
<div>Contenu du div</div>
</body>
</html>
5 TEXT-SHADOW
Syntaxe CSS :
text-shadow: h-shadow v-shadow blur-radius color;
[Link]
Example :
Code source Résultat
<!DOCTYPE html>
<html>
<head>
<style>
.p1, .p2, .p3{
font-size:70px;
line-height:0; /* hors programme */
}
.p1 {
text-shadow: 10px 5px 4px red;
}
.p2 {
text-shadow: 10px 5px 0px red;
/* ou bien */
/* text-shadow: 10px 5px red; */
}
</style>
</head>
<body>
<p class="p1">text</p>
<p class="p2">text</p>
</body>
</html>
Page 6 sur 17
6 TEXT-TRANSFORM
Code source Résultat
<!DOCTYPE html>
<html>
<head>
<style>
.p1, .p2, .p3{
font-size:40px;
line-height:0; /* hors programme */
}
.p1 {
text-transform: lowercase;
}
.p2 {
text-transform: uppercase;
}
.p3 {
text-transform: capitalize;
}
</style>
</head>
<body>
<p class="p1">Ceci est un text</p>
<p class="p2">Ceci est un text</p>
<p class="p3">Ceci est un text</p>
</body>
</html>
Page 7 sur 17
7 LES LISTES
7.1 LIST-STYLE-TYPE
Code source Résultat
<!DOCTYPE html>
<html>
<head>
<style>
ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}
</style>
</head>
<body>
Exemple 1:
<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
Exemple 2:
<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
Exemple 3:
<ol class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
Exemple 4:
<ol class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</body>
</html>
Page 8 sur 17
7.2 LIST-STYLE-POSITION
Code source Résultat
<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
list-style-position: outside;
}
ul.b {
list-style-position: inside;
}
</style>
</head>
<body>
Exemple 1 :
<ul class="a">
<li>Coffee - A brewed drink prepared from roasted
coffee beans, which are the seeds of berries from the
Coffea plant</li>
<li>Coffee - A brewed drink prepared from roasted
coffee beans, which are the seeds of berries from the
Coffea plant</li>
</ul>
Exemple 2 :
<ul class="b">
<li>Coffee - A brewed drink prepared from roasted
coffee beans, which are the seeds of berries from the
Coffea plant</li>
<li>Coffee - A brewed drink prepared from roasted
coffee beans, which are the seeds of berries from the
Coffea plant</li>
</ul>
</body>
</html>
Page 9 sur 17
7.3 LIST-STYLE-IMAGE
pour tester : [Link]
Code source Résultat
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-image: url('[Link]');
}
</style>
</head>
<body>
Exemple :
<ul>
<li>Coffee</li>
<li>Tea</li>
</ul>
</body>
</html>
7.4 LIST-STYLE
Syntaxe :list-style: list-style-type list-style-position list-style-image;
Remarque 1 : combine plusieurs propriétés de liste
Remarque 2 : si l’image spécifiée est introuvable, il applique « list-style-type »
Code source Résultat
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style: circle inside url("[Link]");
}
</style>
</head>
<body>
Exemple :
<ul>
<li>Coffee - A brewed drink prepared from
roasted coffee beans, which are the seeds
of berries from the Coffea plant</li>
<li>Coffee - A brewed drink prepared from
roasted coffee beans, which are the seeds
of berries from the Coffea plant</li>
</ul>
</body>
</html>
Page 10 sur 17
8 L’ARRIERE PLAN
8.1 BACKGROUND-COLOR
Code source Résultat
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: yellow;
}
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
8.2 BACKGROUND-IMAGE
Soient les 2 images suivantes
img_tree.gif [Link]
Code source Résultat
<!DOCTYPE html>
<html>
<head>
<style>
#cadre1 {
background-image: url("img_tree.gif"), url("[Link]");
width : 500px;
height: 500px;
}
</style>
</head>
<body>
<div id="cadre1">
Contenu text du div
<div>
</body>
</html>
Page 11 sur 17
8.3 BACKGROUND-REPEAT
Code source Résultat
<!DOCTYPE html>
<html>
<head>
<style>
#cadre1 {
background-image: url("img_tree.gif");
background-repeat: no-repeat; /* ou repeat */
background-color: yellow;
width : 500px;
height: 500px;
}
</style>
</head>
<body>
<div id="cadre1">
Contenu text du div
<div>
</body>
</html>
Page 12 sur 17
8.4 BACKGROUND-SIZE
Code source Résultat
<!DOCTYPE html>
<html>
<head>
<style>
div{
border : 1px solid;
margin:10px;
}
#cadre1 {
background-image: url("img_tree.gif");
background-repeat: no-repeat; /* ou repeat */
background-size: 100% 100%;
background-color: yellow;
width : 500px;
height: 200px;
}
#cadre2 {
background-image: url("img_tree.gif");
background-repeat: no-repeat; /* ou repeat */
background-size: 50px 150px;
background-color: yellow;
width : 500px;
height: 200px;
}
</style>
</head>
<body>
<div id="cadre1">
Contenu text du div
</div>
<div id="cadre2">
Contenu text du div
</div>
</body>
</html>
Page 13 sur 17
8.5 BACKGROUND (COMBINE PLISEURS PROPRIETES)
Syntaxe :
background: bg-color bg-imagebg-position/bg-size bg-repeat ;
Code source Résultat
<!DOCTYPE html>
<html>
<head>
<style>
div{
border : 1px solid;
margin:10px;
}
#cadre1 {
background: yellow url("img_tree.gif") 0
0/50px 150px no-repeat ;
width : 500px;
height: 200px;
}
#cadre2 {
background-image: url("img_tree.gif");
background-repeat: no-repeat; /* ou repeat */
background-position: 0 0; /* hors programme */
background-size: 50px 150px;
background-color: yellow;
width : 500px;
height: 200px;
}
</style>
</head>
<body>
<div id="cadre1">
Contenu text du div
</div>
<div id="cadre2">
Contenu text du div
</div>
</body>
</html>
Page 14 sur 17
9 FILTER
Important : The filter property is not supported in Edge 12 or Internet Explorer
Code source Résultat
<!DOCTYPE html>
<html>
<head>
<style>
img {
width:100px;
height:100px;
}
#i2{
filter: grayscale(100%);
}
#i3{
filter: blur(5px);
}
#i4{
filter: invert(100%);
}
</style>
</head>
<body>
i1 : <img id="i1" src="[Link]" ><br>
i2 : <img id="i2" src="[Link]" ><br>
i3 : <img id="i3" src="[Link]" ><br>
i4 : <img id="i4" src="[Link]" >
</body>
</html>
Page 15 sur 17
10TABLE-COLLAPSE
Code source Résultat
<!DOCTYPE html>
<html>
<head>
<style>
table {
border: 1px solid black;
}
th,td {
border: 1px solid black;
}
table.a{
border-collapse: separate;
}
table.b {
border-collapse: collapse;
}
</style>
</head>
<body>
<h2> border-collapse: separate</h2>
<table class="a">
<tr>
<th>Company</th>
<th>Contact</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
</tr>
</table>
<h2> border-collapse: collapse</h2>
<table class="b">
<tr>
<th>Company</th>
<th>Contact</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
</tr>
</table>
</body>
</html>
Page 16 sur 17
11TABLE-LAYOUT
Code source Résultat
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
border: 1px solid black;
}
th,td {
border: 1px solid black;
}
table.a {
table-layout: auto;
width: 80px;
}
table.b {
table-layout: fixed;
width: 80px;
}
</style>
</head>
<body>
<h2>table-layout: auto; width: 80px:</h2>
<table class="a">
<tr>
<th>Company</th>
<th>Contact</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
</tr>
</table>
<h2>table-layout: fixed; width: 80px:</h2>
<table class="b">
<tr>
<th>Company</th>
<th>Contact</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
</tr>
</table>
</body>
</html>
Page 17 sur 17