Heritiana Antonio

Chapitre 3:Techniques principales

Cascade de CSS

Les feuilles de style CSS en cascade peuvent provenir de trois sources différentes:

Utilisateur: peut spécifier des informations de style pour un document spécifique.

Auteur : Génère la feuille de style associée au document source.

Agent utilisateur (navigateur) : doit d’abord appliquer sa feuille de style par défaut

La cascade CSS détermine la hiérarchie ou le poids de chaque règle de style. Par défaut, les règles de feuille de style auteur ont priorité sur les règles de feuille de style utilisateur. Cependant, l’ordre hiérarchique des règles « !important » est inversé. Les règles pour les auteurs et les utilisateurs ont priorité sur les règles de la feuille de style par défaut de l’institution

Ancêtres, Parents, Enfants et Frères

Chaque document HTML a des conteneurs qui peuvent être des ancêtres, des parents, des enfants ou des frères :

Un élément ancêtre est un élément qui contient un élément ou une hiérarchie d’éléments.

Un bloc parent est un élément qui contient directement un autre bloc. Par exemple DIV

avec le paragraphe P.ATTENTION : Si ce paragraphe contient des éléments (par exemple STRONG), le DIV n’est pas le parent de l’élément STRONG,mais son ancêtre. Les parents sont donc des ancêtres directs. – Un bloc qui se trouve directement à l’intérieur d’un autre bloc est dit enfant de cet élément. Par exemple, ici l’élément LI est un enfant de son conteneur UL.– Les éléments avec le même élément parent sont appelés frères et sœurs.

L’héritage

Les éléments enfants héritent des valeurs spécifiques des éléments parents dans l’arborescence du document.Chaque propriété détermine si elle est héritée ou non.Ici, par exemple, tous les descendants de BODY ont la valeur de couleur « noir », propriété
« couleur » est hérité :

BODY { color: black; }

NB : Une valeur héritée fait que les propriétés héritent des valeurs. c’est aussi valable Propriétés dont la valeur n’est normalement pas héritée.

Unités de mesures

CSS propose 8 unités possibles pour exprimer la taille et la longueur (hors pourcentages).
W3C les divise en unités absolues et relatives :
– Les unités absolues sont : point (pt), pica (pc), centimètre (cm), millimètre (mm) et
pouces (in). Toutes ces unités sont équivalentes car elles sont proportionnelles entre elles (1 pouce = 2,54
cm = 25,4 mm = 72 pt= 6 pc). Le W3C stipule que ces entités ne peuvent être utilisées que lorsque les propriétés La physique des supports de sortie est bien connue et ce n’est jamais le cas avec les écrans. En gros ça unités sont utilisées pour l’impression papier uniquement.

– Les unités relatives sont : « em » (em), « ex » (ex), pourcentage (%) et pixels (px). Les deux 
premières unités font référence à la police de référence : 1 em correspond à la taille de cette police, tandis que 1 ex est la hauteur du « x » dans cette police (par ex.Relation Donc
em/ex dépend de la police utilisée. Le W3C parle d’unité « relative » pour dire le résultat La physique de
dépend du contexte.

NB : Le W3C classe le pixel comme une unité relative sous prétexte que depuis il n’a pas de taille clairement définie. Certains experts préfèrent parler d’une unité fixe par pixel.
pour deux raisons : Si la taille du texte est en pixels, la taille du texte affiché ne tiendra pas compte de vos préférences. D’autre part,Certains navigateurs n’autorisent pas le redimensionnement instantané du texte en pixels.

Flux normal

La circulation normale (ou universelle) d’un document peut être décrite comme un comportement naturel Code pour afficher les éléments de la page Web. En d’autres termes, les éléments sont affichés dans l’ordre dans lequel ils apparaissent.
Deux groupes d’éléments peuvent être distingués :

– éléments de bloc (div, p, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dd, table,
guillemet bloc, adresse précédente, adresse, etc.)
– éléments en inline(span, a, img, span, em, strong, cite, code, abbr, etc.)

Un élément de type bloc diffère d’un élément en ligne par des principes clés parmi les suivants :

– Occupe toute la largeur du conteneur

– Permet d’attribuer des marges verticales

– Permet de modifier la hauteur et la largeur

Sauf exception, les éléments en ligne occupent le minimum d’espace dont ils ont besoin
contenu.

NB : En général, les éléments de bloc peuvent contenir à la fois des éléments en ligne et d’autres éléments Bloc . Les éléments intégrés ne peuvent contenir que des données et d’autres éléments intégrés.

<html>
<head>
	<title>Boîtes de type bloc en flux normal</title>
	<style type="text/css">
		.rouge {background-color: #ff9999;}
		.vert {background-color: #99cc99;}
		.bleu {background-color: #9999cc;
			width: 50%; height: 50px; margin-top: 50px; /* propriétés applicables pour un élément bloc */
		}
	</style>
</head>
<body>
	<p class="rouge">Une boîte rouge</p>
	<p class="vert">Une boîte verte</p>
	<p class="bleu">Une boîte bleue</p>
</body>
</html>

Voici un exemple de son utilisation

Une boîte rouge

Une boîte verte

Une boîte bleue

On peut modier ce comportement avec la propriété display.

<html>
<head>
	<title>La propriété display</title>
	<style type="text/css">
		.rouge {background-color: #ff9999; display: block;}
		.vert {background-color: #99cc99; display: block;}
		.bleu {background-color: #9999cc; display: block;
			width: 50%; height: 50px; margin-top: 50px; /* propriétés maintenant applicables (block) */
		}
	</style>
</head>
<body>
	<p>
		<span class="rouge">Une boîte rouge</span>
		<span class="vert">Une boîte verte</span>
		<span class="bleu">Une boîte bleue</p>
		</p>
	</body>
	</html>

Une boîte rouge Une boîte verte Une boîte bleue