[Link].
tn
PARTIE II CSS
Methode1 changer style dans la balise
Saisir puis visualisez
<!DOCTYPE html>
<html>
<head>
<title>Premiers tests du CSS</title>
</head>
<body>
<h1>Mon super site</h1>
<p style="color: blue;">Bonjour et bienvenue sur mon site !</p>
</body>
</html>
Methode2 Utiliser l’attribut class***
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="[Link]" />
<title>Premiers tests du CSS</title>
<style>
.introduction
{
color: blue;
}
</style>
</head>
<body>
<h1>Mon super site</h1>
<p class="introduction">Bonjour et bienvenue sur mon site </p>
<p>Pour le moment, mon site est un peu <em>vide</em>. Patientez
encore un peu !</p>
</body>
</html>
1
Methode3 utiliser un selecteur universel dans la partie head***
Saisir puis visualisez
<html>
<head>
<title>Premiers tests du CSS</title>
<style>
p {
color: red;
}
</style>
</head>
<body>
<h1>Mon super site</h1>
<p >Bonjour et bienvenue sur mon site !</p>
</body>
</html>
Methode4 utiliser un identifiant # dans la partie head***
Saisir puis visualisez
<!DOCTYPE html>
<html>
<head>
<title>Premiers tests du CSS</title>
<style>
#p10 {
color: green;
}
</style>
</head>
<body>
<h1>Mon super site</h1>
<p id ='p10'>Bonjour et bienvenue sur mon site !</p>
</body>
</html>
2
Methode5 utiliser un fichier css
Saisir puis visualisez
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="[Link]" />
<title>Premiers tests du CSS</title>
</head>
<body>
<h1>Mon super site</h1>
<p>Bonjour et bienvenue sur mon site !</p>
</body>
</html>
Dans votre explorateur de fichiers, vous devriez les voir apparaître côte
à côte. D'un côté [Link], de l'autre [Link], comme à la figure suivante.
Tester
3
Titre écrit en bleu
Application1 :
Saisir puis visualisez
[Link]
h1,em
{
color: blue;
}
[Link]
<!DOCTYPE html>
<html>
<head>
<title>Premiers tests du CSS</title>
<link rel="stylesheet" href="[Link]" />
</head>
<body>
<h1>Mon super site</h1>
<p>Bonjour et bienvenue sur mon site !</p>
<p>Pour le moment, mon site est un peu <em>vide</em>. Patientez
encore un peu !</p>
4
</body>
</html>
*** on peut aussi utiliser cette methode dans un fichier css
Application2 :
<!DOCTYPE html>
<head>
<title>[Link]</title>
<style>
p {
font-style: italic;
}
</style>
</head>
<body>
<h1>Italics</h1>
<p>Le paragraphe est en forme italique</p>
</body>
</html>
<!DOCTYPE html>
<html >
<head>
<title>[Link]</title>
<style >
p {
font-weight: bold;
}
</style>
</head>
<body>
<h1>Boldface</h1>
<p>
Le paragraphe est en gras.
</p>
</body>
</html>
5
<!DOCTYPE html>
<html>
<head>
<title>[Link]</title>
<style>
p {
text-decoration: underline;
}
</style>
</head>
<body>
<h1>Souligner</h1>
<p>
Le paragraphe est souligné.
</p>
</body>
</html>
<title>[Link]</title>
<style>
p {
text-decoration: line-through;
}
</style>
</head>
<body>
<h1>Barer</h1>
<p>
Le paragraphe est baré.
</p>
</body>
</html>
<!DOCTYPE html>
<html >
<head>
<title>[Link]</title>
<style>
p {
text-align: center;
}
</style>
</head>
<body>
<h1>Centrer</h1>
<p>Le paragraphe est centré.</p>
</body>
6
</html>
</html>
Application 3
<!DOCTYPE html>
<html >
<head>
<title>[Link]</title>
<style>
#quote {
font: bold italic 130% Garamond, Comic Sans MS, fantasy;
text-align: center;
}
#attribution {
font: 80% monospace;
text-align: right;
}
</style>
</head>
<body>
<h1>Quote du jour</h1>
<p>
Meilleur quote:
</p>
<p id = "quote">
be or not to be
</p>
<p id = "attribution">
-William Shakespeare (Henry IV Part I)
</p>
</body>
</html>
Application5
<!DOCTYPE html>
<html >
<head>
<title>[Link]</title>
<style>
em {
font-style: normal;
background-color: yellow;
}
strong {
color: red;
font-size: 110%;
7
}
</style>
</head>
<body>
<h1>Mise en valeur</h1>
<p>
Il y'a deux types de mise en valeur
<em>utilisation de la balise em </em>
<strong>utilisation de la balise strong</strong>
</p>
</body>
</html>
Application6
<!DOCTYPE html>
<html >
<head>
<title>[Link]</title>
<style
.question {
font: italic 150% arial, sans-serif;
text-align: left;
}
.answer {
font: 120% Comic Sans MS, cursive;
text-align: right;
color: #00F;
}
</style>
</head>
<body>
<h1>Meilleur cuisine</h1>
<p class = "question">
Quel est le repas favoris en Japon?
</p>
<p class = "answer">
Suchi
</p>
<p class = "question">
Quel est le repas favoris en Italie?
</p>
<p class = "answer">
Pizza
</p>
</body>
</html>
8
Application7
<!DOCTYPE html>
<html >
<head>
<title>[Link]</title>
<style>
.red {
color: white;
background-color: red;
}
.script {
font-family: cursive;
}
</style>
</head>
<body>
<h1> Classes Multiples</h1>
<p class = "red">
Ce paragraphe utilise classe rouge
</p>
<p class = "script">
Ce paragraphe utilise classe script
</p>
<p class = "red script">
Ce paragraphe utilise les deux classes
</p>
</body>
</html>
Application8
<!DOCTYPE html>
<html>
<head>
<title>[Link]</title>
<style>
a {
color: black;
background-color: white;
}
a:visited {
color: black;
background-color: #FFFF33;
}
a:hover {
color: white;
background-color: black;
9
}
</style>
</head>
<body>
<h1>Pseudo-classes et liens</h1>
<p>
<a href = "[Link] normal</a>
</p>
<p>
<a href = "[Link] est visité</a>
</p>
<p>
<a href = "[Link] en dessus</a>
</p>
</body>
</html>
Application9
text-align: right
<!DOCTYPE html>
<html >
<head>
<title>context-style</title>
<style>
#special p {
text-align: right;
}
</style>
</head>
<body>
<h1>Selecting By
Context</h1>
<div>
<p>This paragraph
is left-
justified.</p>
<p>This paragraph
is left-justified.</p>
<p>This paragraph is left-justified.</p>
</div>
<div id = "special">
<p>The paragraphs in this div are different.</p>
<p>The paragraphs in this div are different.</p>
<p>The paragraphs in this div are different.</p>
</div>
</body>
</html>
10
Application10
<!DOCTYPE html>
<html >
<head>
<title>[Link]</title>
<style>
h1, h2, h3 {
text-align: center;
font-family: "Bradley Hand ITC", cursive;
background-color: yellow;
}
h3 {
font-family: monospace;
}
</style>
</head>
<body>
<h1>H1 Heading</h1>
<h2>H2 Heading</h2>
<h3>H3 Heading</h3>
</body>
</html>
Application11
Bordures standard
<!DOCTYPE html>
<html >
<head>
<title>[Link]</title>
<style type = "text/css">
h1 {
border-color: red;
border-width: .25em;
border-style: double;
}
</style>
</head>
<body>
<h1>Texte qui a une bordure</h1>
</body>
</html>
11
h1 {border: red 5px solid;}
Application12 tableau
<!DOCTYPE html>
<html >
<head>
<meta charset = "UTF-8">
<title>tableau css</title>
<meta charset="UTF-8">
<style type = "text/css">
table
{
border-collapse:collapse;
border-color:blue;
width:400px;
background-color:lightblue;
}
th
{
border : 1px solid black;
}
td
{
border : 1px solid black;
}
caption
{
color : red;
}
</style>
</head>
12
<body>
<header>
<h1>Tableau avec css</h1>
</header>
<table>
<caption>Balance 2019 </caption>
<tr>
<th width="150"></th>
<th>Debit</th>
<th>Credit</th>
<th
width="150">Balance</th>
</tr>
<tr>
<th>Janvier</th>
<td>250.00</td>
<td>660.50</td>
<td>410.50</td>
</tr>
<tr>
<th>Fevrier</th>
<td>135.55</td>
<td>895.20</td>
<td>1170.15</td>
</tr>
</table>
</body>
</html>
Application13
<!DOCTYPE html>
<html >
<head>
<meta charset = "UTF-8">
<title>list</title>
<style type = "text/css">
p{
background-color: white;
padding: 5px;
}
li a {
color: white;
}
13
li {
display: inline;
font-size: 20px;
font-weight: bold;
}
ul{
background-color: navy;
</style>
</head>
<body>
<h1>Moteur de recherche:</h1>
<ul>
<li><a href="[Link]
<li><a href="[Link] target="_blank">Yahoo</a></li>
<li><a href="[Link] target="_blank">Bing</a></li>
</ul>
</body>
</html>
Application14
float avec les images
<!DOCTYPE html>
<html >
<head>
<title>[Link]</title>
</head>
<body>
<p>
<img src = "[Link]" alt = "Koala"
width="100" height="100" />
Image est à gauche
</p>
</body>
</html>
14
<!DOCTYPE html>
<html >
<head>
<title>[Link]</title>
<style type = "text/css">
img {
float: left;
}
</style>
</head>
<body>
<p>
<img src = "[Link]" alt = "Koala" width="100" height="100" />
Image est à gauche
</p>
</body>
</html>
Application12
<!DOCTYPE html>
<html>
<body>
<p>
<img src="[Link]" alt="Smiley face"
style="float:right;width:42px;height:42px;">
A paragraph with a floating image. A paragraph with a floating image. A
paragraph with a floating image.
</p>
<p><strong>Float the image to the left:</strong></p>
<p>
<img src="[Link]" alt="Smiley face"
style="float:left;width:42px;height:42px;">
A paragraph with a floating image. A paragraph with a floating image. A
paragraph with a floating image.
</p>
</body>
</html>
15
16