Css 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>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<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>




1
 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>
2
 Methode5 utiliser un fichier css
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</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
3
Titre écrit en bleu
Application1 :
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>
4
</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>
<title>bold.html</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>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>
6
</html>
</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>
<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>emphasis.html</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>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>
<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>redScript.html</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>linkStates.html</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 = "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>
<div id = "special">
<p>The paragraphs in this div are different.</p>
</div>
</body>
</html>
10
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>
<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">
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>

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="http://www.google.com">Google</a></li>
<li><a href="http://www.yahoo.com" target="_blank">Yahoo</a></li>
<li><a href="http://www.bing.com" target="_blank">Bing</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>
14
<!DOCTYPE html>
<html >
<head>
<title>imgFloatLeft.html</title>
img {
float: left;
}
</style>
</head>
<body>
<p>
<img src = "Koala.jpg" alt = "Koala" width="100" height="100" />
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>
15
16

Css 1

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Css 1

Transféré par

Droits d'auteur :

Formats disponibles

www.mathinfo.

 Methode1 changer style dans la balise

<p class="introduction">Bonjour et bienvenue sur mon site </p>

 Saisir puis visualisez

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

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

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

<strong>utilisation de la balise strong</strong>

<style type = "text/css">

float avec les images

Vous aimerez peut-être aussi