ICTFF Section Informatique

Qu'est-ce qu'un block?

Il s'agit de toutes les balises de type block ou de rendu block.

Une balise, selon sont type, a ce qu'on appelle un "rendu", selon celui-ci certaines propriétés de mise en page seront possibles et d'autres non.

Pour exemple: une balise de rendu inline ne peut recevoir de bordures.

Anatomie d'un élément de rendu block

Toutes les balises de rendu block ont les caractéristiques suivantes:

un contenu informatif (width et height)
le contenu du block est séparé de la bordure par des marges internes (padding)
le block est séparé de son environnement par des marges externes (margin)
les bordures d'un block séparent les marges internes et externes (border)

Les dimensions d'un block se calculent de la façon suisvante:

La hauteur (height) et la largeur (width) du block correspondent à la place prise par le contenu du block.
Largeur totale du block = width + (padding-left + padding-right) + (border-width-left+border-width-right) + (margin-left+margin-right)
Hauteur totale du block = height + (padding-top + padding-bottom) + (border-width-top+border-width-bottom) + (margin-top+margin-bottom)

Démo
	<style>
	.blockref1	{
		width:300px;
		height:100px;
		margin-left:2rem;
		padding:1rem;
		border:solid 2px rgb(255,0,0);
		background:rgba(0,200,0,1);
		font-size:1.5rem;
	}
	</style>
	</head>
	<body>
		<section>
		<div class="blockref1">Mon monde.</div>
		</section>
	</body>

Bordures d'un élément block

La bordure d'une balise de type block c'est:

un style de bordure border-style
une épaisseur de bordure border-width
une couleur de bordure border-color
l'arrondi des coins border-radius

Chaque bordure peut être différente:

un style de bordure border-top-style, border-right-style, border-bottom-style, border-left-style
une épaisseur de bordure border-top-width, border-right-width, border-bottom-width, border-left-width
une couleur de bordure border-top-color, border-right-color, border-bottom-color, border-left-color
l'arrondi des coins border-radius auquel on donne 4 valeurs dans l'ordre suivant: top, right, bottom, left

Exemple 1: 4 bordures de même épaisseur sans radius

Comme conseillé par le W3C nous utiliserons la forme abrégée en veillant à respecter l'ordre ci-dessus.

Démo
	<style>
	.blockref1	{
		width:300px;
		height:100px;
		border: solid 5px rgb(150,50,50);
	}
	</style>
	</head>
	<body>
		<div class="blockref1">Mon monde.</div>
	</body>

Exemple 2: 4 bordures de même épaisseur et 1 radius

On utilise la forme abrégée pour le radius, dans le sens des aiguilles d'une montre en commençant par le coin supérieur gauche:

coin sup gauche
coin sup droit
coin inf droit
coin inf gauche

Démo
	<style>
	.blockref1	{
		width:300px;
		height:100px;
		border: ridge 3px rgb(0,150,50);
		border-radius: 5px 5px 15px 5px;
	}
	</style>
	</head>
	<body>
		<div class="blockref1">Mon monde.</div>
	</body>

Exemple 3: 4 bordures qui n'ont pas la même épaisseur

On utilise la forme abrégée pour le style et la couleur, on vise individuellement chaque bordure pour l'épaisseur.

Démo
	<style>
	.blockref1	{
		width:300px;
		height:100px;
		background:rgba(0,200,0,1);
		border: solid rgb(50,50,50);
		border-top-width:5px;
		border-right-width:10px;
		border-bottom-width:20px;
		border-left-width:30px;
		border-radius: 15px;
	}
	</style>
	</head>
	<body>
		<div class="blockref1">Mon monde.</div>
	</body>

Exemple 4: 4 bordures sont différentes

On utilise la forme abrégée pour chaque bordure.

Démo
	<style>
	.blockref1	{
		width:300px;
		height:100px;
		background:rgba(0,200,0,1);
		border-top:solid 5px rgb(200,50,50);
		border-right:dotted 10px rgb(50,200,250); 
		border-bottom:inset 20px rgb(50,50,200);
		border-left:outset 30px rgb(50,50,50);
		border-radius: 5px;
	}
	</style>
	</head>
	<body>
		<div class="blockref1">Mon monde.</div>
	</body>

Si vous voulez faire un rond parfait, il suffit d'utiliser border-radius:100%

Les dimensions d'un block

Les propriétés width et height concernent les largeur et hauteur du contenu (ou zone utile).
Un block peut être dimensionné dans les deux sens (largeur et hauteur), au moyen d'unités absolues ou en pourcentage de la dimension de l'élément englobant.

Largeur et hauteur:
width : 50%	/une largeur de 50%/
height : 10%	/une hauteur de 10%/

Démo
	<style>
	.b1	{
		border:solid 10px  red;
		width:50%;
		height:10%;
	}
	</style>
	</head>
	<body>
		<div class="b1">La vie est un mystère qu'il faut vivre, et non un problème à résoudre.(Ghandi)</div>
	</body>

La taille du block

Une mise en page oblige parfois à calculer les dimensions réelles d'un block, C'est pourquoi la propriété box-sizing permet de faire le choix entre:

garder l'option par défaut pour la largeur et la hauteur

intégrer le padding et le border (pas le margin!!) dans la largeur et la hauteur

Chaque fois qu'on utilisera l'option border-box, la largeur et la hauteur contiendront respectivement:

Largeur = width + padding-left + padding-right + border-left + border-right
Hauteur = height + padding-top + padding-bottom + border-top + border-bottom

Dorénavant on peut définir un modèle de box grâce à box-sizing.

Le box-sizing
box-sizing : content-box	/la largeur et la hauteur concernent width et height/
box-sizing : border-box	/padding, border, width ou height sont inclus dans la largeur et la hauteur/

Démo
	<html>
	<head>
	<style>
	.b1	{
		box-sizing:border-box;
		padding:10px;
		border:solid 10px  red;
		width:300px;
		height:50px;
		}
	.b2	{
		padding:10px;
		border:solid 10px  red;
		width:300px;
		height:50px;
		}
	</style>
	</head>
	<body>
	<div class="b1">La vie est un mystère qu'il faut vivre, et non un problème à résoudre.(Ghandi) </div>
	<div class="b2">La vie est un mystère qu'il faut vivre, et non un problème à résoudre.(Ghandi) </div>
	</body>
	</html>

L'exemple précédent n'est pas très élégant mais on constate clairement la différence entre box-sizing:border-box et box-sizing : content-box qui est l'option par défaut.

Les marges externes

Les marges sont caractérisées uniquement par leur épaisseur, qui est exprimée par défaut en pixels.
Elles sont transparentes, si une image de fond ou une couleur a été spécifiée pour le document et/ou pour le block, elles doivent être visibles.

En groupe:
margin:20px	les 4 marges externes ont une épaisseur de 20 px.
Individuellement:
margin-top: 20px;	marges haute externe de 20 px.
margin-right: 10px;	marges droite externe de 10 px.
margin-bottom: 20px;	marges basse externe de 20 px.
margin-left: 5px;	marges gauche externe de 5 px.

Démo
	<html>
	<head>
	<style>
	.b1	{
		margin:20px;
		border:solid 10px red;
		width:300px;
		height:50px;
	}
	.b2	{
		margin-left:200px;
		border:solid 10px  red;
		width:300px;
		height:50px;
	}
	</style>
	</head>
	<body>
		<div class="b1">La vie est un mystère qu'il faut vivre, et non un problème à résoudre.(Ghandi) </div>
		<div class="b2">La vie est un mystère qu'il faut vivre, et non un problème à résoudre.(Ghandi) </div>
	</body>
	</html>

Centrer un bloc au sein de son container

Il suffit de donner auto comme valeur à margin, le browser place alors une marge gauche et droite équivalentes, ce qui a pour effet de centrer le bloc.

Démo
<html>
<head>
<style>
main	{
	margin:auto;
	width:75vw;
	border:solid 5px red;
}
article	{
	margin:auto;
	width:75%;
	border:solid 5px blue;
}

</style>
</head>
<body>
<main>
	<article>
	 N'ouvre la bouche que si tu es sûr que ce que tu vas dire est plus beau que le silence.(Proverbe arabe)
	</article>
</main>
</body>
	</html>

On constate:

le main fait 75% de la largeur de la fenêtre et est bien centré sur son container qui est le body
article fait bien 75% de la largeur de son container qui est le main

Les marges internes

En groupe:
padding: 20px	les 4 marges internes ont une épaisseur de 20 px.
padding: 20px 10px	les 2 marges sup et inf ont une épaisseur de 20 px, les marges gauche et droite 10px
Individuellement:
padding-top: 20px	marges haute interne de 20 px.
padding- right: 10px	marges droite interne de 10 px.
padding- bottom: 20px	marges basse interne de 20 px.
padding- left: 5px	marges gauche interne de 5 px.

Démo
	<html>
	<head>
	<style>
	.b1	{
		padding:30px;
		border:solid 10px red;
	}
	.b2	{
		padding-left:30px;
		border:solid 10px  red;
	}
	</style>
	</head>
	<body>
		<div class="b1">La vie est un mystère qu'il faut vivre, et non un problème à résoudre.(Ghandi) </div>
		<div class="b2">La vie est un mystère qu'il faut vivre, et non un problème à résoudre.(Ghandi) </div>
	</body>
	</html>

Ombrage

Détails de la propriété border-shadow, dans l'ordre:

décalage horizontal, à droite si positif et à gauche si négatif
décalage vertical, en bas si positif et en haut si négatif
le flou, uniquement une valeur positive (si 0 pas de flou). Si 5px, le flou commence à 5px à l'intérieur du flou et se termine à 5px à l'extérieur du flou
L'ombre fera n px de plus en hauteur et en largeur que l'élément
Couleur de l'ombre, son nom ou sous forme rgba

L'ombrage interne fonctionne comme l'externe, il suffit d'utiliser le mot inset

Ombrage externe
box-shadow : 10px 10px 5px 0px darkcyan
box-shadow : 10px 10px 5px 0px rgba(255,120,50,0.5)
Ombrage interne
box-shadow : 10px 10px 30px 0px darkcyan inset;
box-shadow : 10px 10px 5px 0px rgba(255,120,50,0.5) inset

Démo
	<html>
	<head>
	<style>
	.b1	{
		border:solid 10px red;
		box-shadow : 10px 10px 5px 0px darkcyan;
	}
	</style>
	</head>
	<body>
		<div class="b1">La vie est un mystère qu'il faut vivre, et non un problème à résoudre.(Ghandi) </div>
	</div>
	</body>
	</html>

La propriété visibility

Cette propriété accepte deux valeurs: visible (par défaut) et hidden pour rendre un block invisible.

Le block invisible reste dans le fux, il est présent sur la page mais invisible.


visibility: visible;	valeur par défaut, le block est visible.
visibility: hidden;	le block est invisible.

Démo
	<html>
	<head>
	<style>
		.b1	{
			border:solid 10px red;
			border-shadow : 10px 10px 5px 0px darkcyan;
			visibility: hidden;
		}
		.b2	{
			border:solid 2px red;
		}

	</style>
	</head>
	<body>
		<div class="b1">La vie est un mystère qu'il faut vivre, et non un problème à résoudre.(Ghandi) </div>
		<div class="b2">La règle d'or de la conduite est la tolérance mutuelle, car nous ne penserons jamais tous de la même façon,
 nous ne verrons qu'une partie de la vérité et sous des angles différents.(Ghandi) </div>
	</div>
	</body>
	</html>

La propriété display

Cette propriété permet de modifier le rendu d'une balise, une balise peut donc se comporter selon n'importe quel rendu pour peu qu'on précise celui-ci avec la propriété display.

Lorsque cette propriété a la valeur: none le block est supprimé du flux.

Il existe de nombreuses valeurs possibles, il faut retenir: block, inline, inline-block et none .

Démo
	<html>
	<head>
	<style>
	.b1	{
		padding:10px;
		border:solid 10px red;
		border-shadow : 10px 10px 5px 0px darkcyan;
		}
	.ib	{
		display:inline-block;
		border:solid 2px darkcyan;
		width:300px;
		text-align:center;
	}
	</style>
	</head>
	<body>
		<div class="b1">La vie est un <strong class=ib>mystère</strong> qu'il faut vivre, et non un problème à résoudre.(Ghandi) </div>
	</div>
	</body>
	</html>

La propriété overflow

Cette propriété accepte trois valeurs: visible (par défaut), hidden (pour rendre tout ce qui déborde du block contenant invisible) et scroll (pour ajouter une barre de défilement).

Démo
	<html>
	<head>
	<style>
		.b1	{
		border:thin solid red;
		padding:15px;
		text-align:justify;
		width:300px;
		height:240px;
		overflow:scroll;
		}
	</style>
	</head>
	<body>
	<div class="b1"> L’HTML est né au CERN de Genève (Centre Européen de Recherche Nucléaire), Tim Berners-Lee propose en mars 1989 un projet de système hypertexte 
	destiné à permettre aux physiciens du monde entier d’échanger aisément des informations. La première version de l’HTML n’apparaît qu’en mai 1991,
	il faut attendre janvier 1992 pour une version destinée au grand public.<br>
	Tout démarre vraiment en février 1993, quand Marc Andreessens, un étudiant de l’université d’Illinois (USA), annonçe Mosaic, un navigateur (browser)
	Web sous XWindows. Mosaic se caractérise rapidement par sa facilité d’utilisation. La consécration date de fin 1993 quand apparaissent des versions pour Windows et Macintosh.
	Un outil performant est né pour « surfer » sur le réseau Internet au travers du protocole « http:// ». La grande aventure du WWW (World Wide Web) peut commencer.
	<br>
	Marc Andreessens et Jim Clark fondent la société Mosaic Communication, rebaptisée peu après Netscape.
	</div>


	</body>
	</html>

La propriété z-index

Cette propriété ne fonctionne que pour les éléments positionnés (position:absolute, position:relative ou position:fixed), elle définit une place au sein d'une pile.

L'élément d'index le plus élevé sera au sommet de la pile, le plus bas sera à la fin de la pile (les valeurs négatives sont autorisées).

La valeur par défaut est 1.

Démo
	<html>
	<head>
	<style>
		.b1 {
		background-color:red;
		width:110px;
		height:240px;
		position:absolute;
		left:10px;
		top:10px;
		z-index:1;
		} 

		.b2{
		background-color:yellow;
		width:110px;
		height:240px;
		position:absolute;
		left:50px;
		top:50px;
		z-index:2;

		} 
		.b3{
		background-color:aqua;
		width:110px;
		height:240px;
		position:absolute;
		left:100px;
		top:100px;
		z-index:3;

		} 
	</style>
	</head>
	<body>
		<div class="b1"> Mon block rouge.</div>
		<div class="b2"> Mon block jaune.</div>
		<div class="b3"> Mon block bleu aqua.</div>
	</body>
	</html>

Quiz

Le rendu block 1

Le rendu block

Aller à