PARTIE II CSS Methode1 changer style dans la balise Saisir puis visualisez

(1)

1

www.mathinfo.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>

<style>

.introduction {

color: blue;

}

</style>

</head>

<body>

<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>



(2)

2

 Methode3 utiliser un selecteur universel dans la partie head***

<html>

<head>

<style>

p {

color: red;

}

</style>

</head>

<body>

<p >Bonjour et bienvenue sur mon site !</p>

</body>

</html>

 Methode4 utiliser un identifiant # dans la partie head***

<!DOCTYPE html>

<html>

<head>

<style>

#p10 {

color: green;

}

</style>

</head>

<body>

<p id ='p10'>Bonjour et bienvenue sur mon site !</p>

</body>

</html>

(3)

3

 Methode5 utiliser un fichier css

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<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é le.html, de l'autre le.css, comme à la figure suivante.

Tester

(4)

4

Titre écrit en bleu Application1 :

 Saisir puis visualisez style.css

h1,em {

color: blue;

}

page1.html

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<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>

(5)

5

</body>

</html>

*** on peut aussi utiliser cette methode dans un fichier css Application2 :

<!DOCTYPE html>

<head>

<title>italics.html</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>

p {

font-weight: bold;

}

</style>

</head>

<body>

<h1>Boldface</h1>

<p>

Le paragraphe est en gras.

</p>

</body>

</html>

(6)

6

<!DOCTYPE html>

<html>

<head>

<title>underline.html</title>

<style>

p {

text-decoration: underline;

}

</style>

</head>

<body>

<h1>Souligner</h1>

<p>

Le paragraphe est souligné.

</p>

</body>

</html>

<title>underline.html</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>center.html</title>

<style>

p {

text-align: center;

}

</style>

</head>

<body>

<h1>Centrer</h1>

<p>Le paragraphe est centré.</p>

</body>

(7)

7

</html>

Application 3

<!DOCTYPE html>

<html >

<head>

<title>quote.html</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>

be or not to be

</p>

-William Shakespeare (Henry IV Part I)

</p>

</body>

</html>

Application5

<!DOCTYPE html>

<html >

<head>

<title>emphasis.html</title>

<style>

em {

font-style: normal;

background-color: yellow;

}

strong { color: red;

font-size: 110%;

(8)

8

}

</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>classes.html</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>

Quel est le repas favoris en Japon?

</p>

Suchi

</p>

Quel est le repas favoris en Italie?

</p>

Pizza

</p>

</body>

</html>

(9)

9

Application7

<!DOCTYPE html>

<html >

<head>

<title>redScript.html</title>

<style>

.red {

color: white;

background-color: red;

}

.script {

font-family: cursive;

}

</style>

</head>

<body>

<h1> Classes Multiples</h1>

Ce paragraphe utilise classe rouge

</p>

Ce paragraphe utilise classe script

</p>

Ce paragraphe utilise les deux classes

</p>

</body>

</html>

Application8

<!DOCTYPE html>

<html>

<head>

<title>linkStates.html</title>

<style>

a {

color: black;

background-color: white;

}

a:visited { color: black;

background-color: #FFFF33;

}

a:hover { color: white;

background-color: black;

(10)

10

}

</style>

</head>

<body>

<h1>Pseudo-classes et liens</h1>

<p>

<a href = "http://www.google.com">Lien normal</a>

</p>

<p>

<a href = "http://www.reddit.com">Lien est visité</a>

</p>

<p>

<a href = "http://www.digg.com">Souris 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>

<p>The paragraphs in this div are different.</p>

</div>

</body>

</html>

(11)

11

Application10

<!DOCTYPE html>

<html >

<head>

<title>multiStyle.html</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>borderProps.html</title>

h1 {

border-color: red;

border-width: .25em;

border-style: double;

}

</style>

</head>

<body>

<h1>Texte qui a une bordure</h1>

</body>

</html>

(12)

12

h1 {border: red 5px solid;}

Application12 tableau

<!DOCTYPE html>

<html >

<head>

<title>tableau css</title>

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>

(13)

13

<body>

<h1>Tableau avec css</h1>

</header>

<table>

<caption>Balance 2019 </caption>

<tr>

<th>Debit</th>

<th>Credit</th>

<th

width="150">Balance</th>

</tr>

<tr>

<th>Janvier</th>

</tr>

<tr>

<th>Fevrier</th>

</tr>

</table>

</body>

</html>

Application13

<!DOCTYPE html>

<html >

<head>

p{

background-color: white;

padding: 5px;

}

li a {

color: white;

}

(14)

14

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="http://www.google.com">Google</a></li>

<li><a href="http://www.yahoo.com" target="_blank">Yahoo</a></li>

</ul>

</body>

</html>

Application14

float avec les images

<!DOCTYPE html>

<html >

<head>

<title>imgFloatLeft.html</title>

</head>

<body>

<p>

<img src = "Koala.jpg" alt = "Koala"

width="100" height="100" />

Image est à gauche

</p>

</body>

</html>

(15)

15

<!DOCTYPE html>

<html >

<head>

<title>imgFloatLeft.html</title>

img {

float: left;

}

</style>

</head>

<body>

<p>

Image est à gauche

</p>

</body>

</html>

Application12

<!DOCTYPE html>

<html>

<body>

<p>

<img src="smiley.gif" 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="smiley.gif" 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>

(16)

16