I. Introduction▲
De nos jours le design d'un site est presque aussi important que son contenu.
C'est là que les feuilles de style en CSS3 entrent en jeu.
Avec la Méthode Développement Facile, vous allez rendre votre site encore plus attractif grâce aux feuilles de style CSS3.
Retrouvez un extrait de la formation CSS3 Facile, composée de plus de 30 cours professionnels pour vous aider à progresser rapidement avec la maîtrise du langage CSS3.
II. Personnalisez les blocs div avec CSS3 - partie 1▲
Le contenu de votre page web se trouve dans les blocs div.
Apprennez grâce à cette vidéo à modifier la hauteur, la largeur, les marges ou le fond de ces blocs.
Ci-dessous l'exemple de code
<!DOCTYPE html>
<html lang="fr">
<head>
<!--
/**
The Initial Developer of the Original Code is
Matthieu - http://www.programmation-facile.com/
Portions created by the Initial Developer are Copyright (C) 2013
the Initial Developer. All Rights Reserved.
Contributor(s) :
*/
-->
<title>HTML5</title>
<meta charset="UTF-8">
<style>
div {width: 300px;
height: 300px;
border: 5px solid blue;
background-color: #ccc;
padding: 20px;
margin: 20px; }
ul { list-style: none;
padding: 5px;}
li { display: inline;
border: 2px solid red;
background-color: #ccc;
text-align: center;
margin-right: 4px;
padding-right: 13px;
padding-left: 13px;}
</style>
</head>
<body>
<div>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.<br />
Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.</div><br /><br />
<ul>
<li>ActionScript</li>
<li>JavaScript</li>
<li>PHP</li>
</ul>
<p>Largeur width</p>
<div style= "border: 3px solid blue; width: 150px;">Le Lorem Ipsum est simplement du faux texte</div>
<p>Largeur minimale min-width</p>
<div style="border: 3px solid blue;min-width: 150px;">Le Lorem Ipsum est simplement du faux texte</div>
<p>Margeur maximale max-width</p>
<div style="border: 3px solid blue; width: 250px;max-width: 100px;">Le Lorem Ipsum est simplement du faux texte</div>
<footer>
<hr>
<p>Copyright <a href="http://www.programmation-facile.com/" target="_blank">www.Developpement-Facile.com</a> 2014</p>
</footer>
</body>
</html>
III. Personnalisez les blocs div avec CSS3 - partie 2▲
Dans cette seconde partie sur les blocs div,
Apprenez à complètement personnaliser les bordures de vos blocs.
Ci-dessous, un exemple de code complet
<!DOCTYPE html>
<html lang="fr">
<head>
<!--
/**
The Initial Developer of the Original Code is
Matthieu - http://www.programmation-facile.com/
Portions created by the Initial Developer are Copyright (C) 2013
the Initial Developer. All Rights Reserved.
Contributor(s) :
*/
-->
<title>HTML5</title>
<meta charset="UTF-8">
<style>
div {width: 300px;
height: 300px;
border-style: solid;
border-width: 10px;
border-height: 5px;
border-top-color: #ccc;
border-bottom-color: #ccc;
border-left-color: #eee;
border-right-color: #eee;
background-color: #ddd;
text-align: center; }
p {width: 300px;
height: 300px;
border-style: solid;
border-width: thick;
border-height: thin;
border-top-color: #ccc;
border-bottom-color: #ccc;
border-left-color: #eee;
border-right-color: #eee;
background-color: #ddd;
text-align: center; }
span {width: 300px;
height: 300px;
border-style: groove;
border-width: thick;
border-height: thin;
border-color: #ccc;
text-align: center; }
</style>
</head>
<body>
<div>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.<br />
Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.</div><br /><br />
<p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.<br />
Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.</p>
<span>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.<br />
Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.</span><br /><br />
<footer>
<hr>
<p>Copyright <a href="http://www.programmation-facile.com/" target="_blank">www.Developpement-Facile.com</a> 2014</p>
</footer>
</body>
</html>
IV. Positionnez vos blocs avec CSS3 - partie 1▲
Dans cette vidéo vous allez apprendre a positionner les blocs dans votre page web.
Position absolue, relative, statique, ...
Quelques exemples dans le code ci-dessous
<!DOCTYPE html>
<html lang="fr">
<head>
<!--
/**
The Initial Developer of the Original Code is
Matthieu - http://www.programmation-facile.com/
Portions created by the Initial Developer are Copyright (C) 2013
the Initial Developer. All Rights Reserved.
Contributor(s) :
*/
-->
<title>HTML5</title>
<meta charset="UTF-8">
<style>
.static { width: 250px;
border: 2px solid red;
text-align: center;}
.relative { position: relative;
top: 30px;
left: 60px;
width: 250px;
border: 2px solid blue;
text-align: center;}
.absolute { position: absolute;
top: 30px;
left: 360px;
width: 250px;
border: 2px solid blue;
text-align: center;}
.fixed { position: fixed;
top: 300px;
left: 60px;
width: 250px;
border: 2px solid blue;
text-align: center;}
</style>
</head>
<body>
<div class="static"> Position normale statique </div>
<p>_____________________________________</p>
<div class="relative"> Position relative </div>
<p>_____________________________________</p>
<div class="absolute"> Position absolu </div>
<p>_____________________________________</p>
<div class="fixed"> Position fixed </div>
<footer>
<hr>
<p>Copyright <a href="http://www.programmation-facile.com/" target="_blank">www.Developpement-Facile.com</a> 2014</p>
</footer>
</body>
</html>
V. Positionnez vos blocs avec CSS3 - partie 2▲
Découvrez de nouvelles techniques pour positionner vos blocs dans votre page web.
Ci-dessous l'exemple de code
<!DOCTYPE html>
<html lang="fr">
<head>
<!--
/**
The Initial Developer of the Original Code is
Matthieu - http://www.programmation-facile.com/
Portions created by the Initial Developer are Copyright (C) 2013
the Initial Developer. All Rights Reserved.
Contributor(s) :
*/
-->
<title>HTML5</title>
<meta charset="UTF-8">
<style>
.bloc1 { position: absolute;
left: 30px; top: 30px; width: 150px; height: 60px;
padding: 5px;
border: 2px solid red; background-color: #8904B1;
z-index: 1;}
.bloc2 { position: absolute;
left: 50px; top: 60px; width: 150px; height: 60px;
padding: 5px;
border: 2px solid blue; background-color: #FE2E2E;
z-index: 2;}
.bloc3 { position: absolute;
left: 80px; top: 100px; width: 150px; height: 60px;
padding: 5px;
border: 2px solid gray; background-color: #FAAC58;
z-index: 3;}
.bloc4 { position: absolute;
left: 300px;
top: 80px;
width: 150px; height: 60px;
padding: 5px;
border: 2px solid red;
background-color: #cccccc;
overflow: auto;
cursor: help;}
</style>
</head>
<body>
<div class="bloc1">z-index 1</div>
<div class="bloc2">z-index 2 </div>
<div class="bloc3">z-index 3</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<div class="bloc4">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte.</div>
<footer>
<hr>
<p>Copyright <a href="http://www.programmation-facile.com/" target="_blank">www.Developpement-Facile.com</a> 2014</p>
</footer>
</body>
</html>
VI. Personnalisez vos listes avec CSS3▲
Découvrez comment personnaliser vos listes numérotées et imbriquées avec CSS3,
de la puce à l'image en passant par une numérotation classique.
Exemple de listes ci-dessous
<!DOCTYPE html>
<html lang="fr">
<head>
<!--
/**
The Initial Developer of the Original Code is
Matthieu - http://www.programmation-facile.com/
Portions created by the Initial Developer are Copyright (C) 2013
the Initial Developer. All Rights Reserved.
Contributor(s) :
*/
-->
<title>HTML5</title>
<meta charset="UTF-8">
<style>
.txt1 { list-style-type:disc;}
.txt2 { list-style-type:circle;}
.txt3 { list-style-type:square;}
.txt4 { list-style-type:decimal;}
.txt5 { list-style-type:decimal-leading-zero;}
.txt6 { list-style-type:upper-roman;}
.txt7 { list-style-type:lower-roman;}
.txt8 { list-style-type:upper-alpha;}
.txt9 { list-style-type:lower-alpha;}
.txt10 { list-style-position: outside;}
.txt20 { list-style-position: inside;}
</style>
</head>
<body>
<ul>
<li class="txt1">Disque plein</li>
<li class="txt2">Cercle</li>
<li class="txt3">Carré</li>
<li class="txt4">Décimal</li>
<li class="txt5">Décimal</li>
</ul>
<ol>
<li class="txt6">Romain majuscule</li>
<li class="txt7">Romain minuscule</li>
<li class="txt8">Alphabet majuscule</li>
<li class="txt9">Alphabet minuscule</li>
</ol>
<ul>
<li class="txt10">Disque plein</li>
<li class="txt10">Cercle</li>
<li class="txt10">Carré</li>
</ul>
<ul>
<li class="txt20">Décimal</li>
<li class="txt20">Décimal</li>
<li class="txt20">Décimal</li>
</ul>
<footer>
<hr>
<p>Copyright <a href="http://www.programmation-facile.com/" target="_blank">www.Developpement-Facile.com</a> 2014</p>
</footer>
</body>
</html>
VII. Recevez Gratuitement la Formation CSS3 Facile▲
Si vous souhaitez aller plus loin dans la création de site web incroyable,
vous pouvez recevoir gratuitement la formation CSS3 Facile avec des cours pas à pas, accompagnés des codes source commentés.
Ainsi, vous progressez à votre rythme, avec un suivi personnalisé et individuel. Vous avez la possibilité de poser toutes vos questions techniques sous chaque cours.
Cliquez simplement ici pour recevoir gratuitement la formation CSS3 FacileCliquez simplement ici pour recevoir gratuitement la formation CSS3 Facile
VIII. Remerciements▲
Merci beaucoup à l'équipe de rédaction de Developpez.com de contribuer à la diffusion de ce tutoriel.
J'adresse également un merci tout particulier à Jean-Philippe Andréjacques_jean pour sa relecture orthographique.
