Scribd
Importer
3K vues9 pages

Exercice Enoncé Et Corrigé (HTML + CSS)

Le document décrit les styles CSS appliqués à différents éléments HTML comme le header, la navigation, la section et l'article. Il spécifie des propriétés telles que les couleurs, polices, bordures, dimensions pour styliser ces éléments.

Transféré par

Slim Regaieg
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
3K vues9 pages

Exercice Enoncé Et Corrigé (HTML + CSS)

Le document décrit les styles CSS appliqués à différents éléments HTML comme le header, la navigation, la section et l'article. Il spécifie des propriétés telles que les couleurs, polices, bordures, dimensions pour styliser ces éléments.

Transféré par

Slim Regaieg
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
Vous êtes sur la page 1/ 9

Exercice 3sti

couleur de fond :mauve


titre 1
titre 2
coueur de police :rouge
borure arrondu :25px
marge gauche :30px

largeur :800px

: hauteur :30px
Header(2 titres)

couleur de fond :jaune


style :pointillé
Nav
couleur de bordure :noir
(3 boutons de navigations)
coueur de police :blanc
section
bordure arrondu :25px
c

Article
Aside
(un formulaire qui inclut un fieldset lui-même
inclut un tableau compotant deux labels et (comporte une image)
deux champs de saisies)

1
Exercice 3sti

couleur de fond :rgba de valeur ((255, 99, 71, 0.4)


Les bouttons:
police d’écriture :cursive
couleur de police :blanc
bordure arronu :25px
marge intérieur gauche 10px ,droit 20 px
c

En survolant le bouton: couleur de fond : rgba de valeur ((255, 199, 71, 0.4)
Les div :contenants les boutons alignement :centré
taille de la police d’écriture :16px
affichage :en ligne (affichage→display)
bordure arronu :15px
marge intérieur gauche 10px ,droit 20 px
marge extérieur :auto (pour centrer les éléments à
l’intérieur du parent)
c

Section: couleur de fond :mauve


bordure arrondu :15px
couleur de la bodure :jaune
couleur de fond : mauve

Article: couleur de fond :oranger


largeur : 400px
couleur de la bodure :jaune
aligné : a gauche
style de la bordure :continu
couleur de la bordure : 2
Exercice 3sti

couleur:rouge
alignéement de texte: centré
hgroup:

l’élément legend du fieldset:


fieldset legend:
couleur:bleu
taille d’écriture : 18px

l’élément * devant le champ zone de saisie du Nom


span
couleur:rouge
aligné verticalement : au milieu

aside :position de l’élément aside qui va contenir l’image

position :relative
gauche :420px
haut :-50px
largeur : 350px

largeur :300px
Img hauteur :3000px
affichage:enligne
borure arrondu de:15px;
style de la bordure-:continu (solid)
couleur de la bordure-:or
largeur de la bordure:3px;
3
Exercice 3sti

Correction :
Code html :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="project1.css">
</head>
<body>
<header class="e1">
<hgroup>
<h1>My first website</h1>
<h2>Internet Of Things</h2>
</hgroup>
</header>

<nav class="n1">
<div class="b1"><input class="btn" type="button" value="Accueil"/></div>
<div class="b1"><input class="btn" type="button"value="A propos"
href="https://www.aliexpress.com/item/32996463686.html"/></div>
<div class="b1"><input class="btn" type="button"value="Forrum" url = "project.html"/></div>

</nav>
<section>
<article class="n1">
<form name="inscription">
<fieldset>

4
Exercice 3sti

<legend>Information générale</legend>
<table>
<tr>
<td>
Nom
</td>
<td>
<input type="text" placeholder="écrire votre nom" required>
<span class="et">*</span></td>
</tr>
<tr>
<td>
Prénom</td>

<td>
<input type="text"></td></tr>
</table>
</fieldset>
</form>
</article>
<aside>
<img class="a" src="internet-things.jpg" height="350px" width="350px"/>
</aside>
</section>

</body>
</html>

5
Exercice 3sti

Code css :
fieldset legend{
font-size:18px;
color:red;

}
.gold{
font-size:18px;
color:yellow;
text-align:center;
}
hgroup
{color:red;
text-align:center;

}
header.e1
{margin:30px;
width:800px;
background-color:purple;
padding: 10px 12px 11px 10px;
border-radius:15px;
color:white;
}
nav.n1
{width:800px;

6
Exercice 3sti

background-color:yellow;
border-radius:15px;
border-style:dotted;
height:30px;
}
input.btn
{color:white;
font-family:cursive;
font-size:16px;
border-radius:25px;
background-color:rgba(255, 99, 71, 0.4);
}
input:hover
{
background-color:rgba(255, 180, 71, 0.4);

div.b1
{float:center;
font-size:16px;
color:white;
display:inline;
margin:auto;
width:100px;
border-radius:15px;
padding: 40px 12px 11px 40px;
margin:auto;

7
Exercice 3sti

}
section
{

border-radius:15px;
width:800px;
height:400px;
float:left;
background-color:purple;
border-style:dashed;
border-style:solid;
border-color:yellow;
}

article.n1
{width:400px;
float:left;
background-color:orange;
border-style:dotted;
border-style:solid;
border-color:black;
}
aside

8
Exercice 3sti

{position:relative;
left:420px;top:-50px;
width:300px;}
img.a
{width:300px;
height:300px;
display:inline;
border-radius:15px;
border-style:solid;
border-color:gold;
border-spacing:3px;
}

span.et
{
vertical-align:middle;
color:red;
}

Vous aimerez peut-être aussi