En CSS, les éléments sont généralement traités comme des boîtes rectangulaires ou des bandes. Pour décrire les boîtes, les propriétés suivantes - que vous connaissez sûrement maintenant - sont utilisées :
• width – la largeur de l'élément
• height – la hauteur de l'élément
• left – la distance de la gauche
• right – la distance de la droite
• top – la distance du haut
• bottom – la distance du bas
• margin – la marge extérieure
• border – le cadre autour de l'élément
• padding – la marge intérieure, donc la distance entre le cadre et le contenu de l'élément
Ces propriétés ont déjà été présentées.
La largeur totale d'un élément est la somme des largeurs des spécifications individuelles. (Cela s'applique également à la hauteur).
Un exemple :
div#box {
width: 100px;
padding: 20px; /* 20px à gauche et à droite /
border: 2px solid; / 2px à gauche et à droite /
margin: 0 30px; / 30px à gauche et à droite */
}Quelle est la largeur de cette zone div? Examinons les valeurs individuelles :
• 100 pixels
• 2 fois 20 pixels
• 2 fois 2 pixels
• 2 fois 30 pixels
Cela donne une largeur totale de l'élément de 204 pixels.
La largeur et la hauteur des éléments sont déterminées par width et height. Si ces spécifications ne sont pas explicites dans la feuille de style, les règles suivantes s'appliquent :
• En l'absence de width, la boîte est affichée aussi large que l'élément environnant.
• En l'absence de height, l'élément est affiché aussi haut que son contenu.
Un exemple :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
div#box {
border: 1px solid; /* 2px à gauche et à droite */
margin: 0 30px; /* 30px à gauche et à droite */
background-color:#6600CC;
}
</style>
</head>
<body>
<div id="box">PSD-Tutorials.de</div>
</body>
</html>
Voici ce que cela donne dans le navigateur :
L'élément parent de l'élément div est body. Par conséquent, l'élément est effectivement aussi large que l'élément body. En ce qui concerne la hauteur, elle dépend du contenu.
Tout à zéro
Chaque navigateur a une feuille de style intégrée. Ces feuilles de style définissent certaines valeurs par défaut. Cela s'applique par exemple à padding et margin. Malheureusement, ces valeurs par défaut varient selon les navigateurs. Cela rend difficile d'obtenir des résultats identiques dans les différents navigateurs, notamment en ce qui concerne le modèle de boîte. Il est donc recommandé de mettre les marges par défaut définies par les navigateurs à zéro. Voici comment procéder :
* { padding: 0; margin: 0; }
Ajoutez cette ligne au début de votre feuille de style. Vous pouvez maintenant commencer à positionner les boîtes comme vous le souhaitez.
Types de boîtes
La façon dont un élément est finalement affiché et influence les autres éléments dépend du type d'élément. En fait, la spécification CSS distingue entre les éléments de type bloc et les éléments en ligne. (Il existe d'autres types, mais ils ne sont pas abordés ici car ils jouent un rôle mineur).
Les éléments de bloc créent toujours une nouvelle ligne. Les éléments suivants commencent également sur une nouvelle ligne. Les éléments de bloc typiques sont par exemple p, div, h1, ul, etc. Pour ces éléments, les propriétés précédemment énumérées s'appliquent aux marges extérieures, aux marges intérieures, à la hauteur, à la largeur et au cadre.
<h1>Digital Painting & Matte Painting: Bildaufbau definieren</h1> <p>Modul 2 - Teil 2: Ein Bild ist immer ein Ganzes. Jedoch muss man sich immer überlegen, wo der Betrachter als Erstes hinsehen sollte.</p>
Un aperçu du résultat dans le navigateur montre que h1 et p créent chacun une ligne propre.
Les éléments en ligne, en revanche, ne créent pas leur propre paragraphe, mais sont plutôt affichés dans le flux de texte normal. Les éléments en ligne typiques sont span, em, strong, img, br, etc. Pour les éléments en ligne, il n'y a pas de marges extérieures verticales et pas de spécifications de largeur et de hauteur.
<h1><em>Digital Painting & Matte Painting</em>: Bildaufbau definieren</h1> <p>Modul 2 - Teil zwei: <strong>Ein Bild ist immer ein Ganzes</strong>. Jedoch muss man sich immer überlegen, wo der Betrachter als Erstes hinsehen sollte.</p>
Et voici un aperçu du résultat:
Vous pouvez maintenant transformer des éléments qui sont normalement des éléments de bloc en éléments en ligne.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
h1 {
background-color:#00CCFF;
}
</style>
</head>
<body>
<h1>Digital Painting & Matte Painting</h1>
<p>Module 2 - Partie 2: <em>Une image est toujours un tout</em>. Cependant, il est toujours important de réfléchir à l'endroit où le spectateur devrait regarder en premier.</p>
</body>
</html>Regardez le résultat dans le navigateur.
La couleur de fond de l'en-tête h1 signifie que l'élément s'étend sur toute la largeur. La largeur est basée sur l'élément parent body.
Maintenant, entrons dans la propriété display.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
h1 {
display:inline;
background-color:#00CCFF;
}
</style>
</head>
<body>
<h1>Digital Painting & Matte Painting</h1>
<p>Module 2 - Partie 2: <em>Une image est toujours un tout</em>. Cependant, il est toujours important de réfléchir à l'endroit où le spectateur devrait regarder en premier.</p>
</body>
</html>
Avec display: inline, la largeur de l'élément change.
En effet, maintenant la largeur de l'élément s'adapte au contenu existant. Voici un aperçu des valeurs que display peut prendre:
• none – pas d'affichage
• block – l'élément est affiché comme un élément de bloc, créant une nouvelle ligne.
• inline – l'élément est affiché comme un élément en ligne, apparaissant dans le flux de texte en cours.
• inline-block – externalement, l'élément est un bloc pour lequel la hauteur, la largeur et la marge extérieure peuvent être spécifiées. Cependant, chaque élément reste dans le flux de texte. Il s'agit donc d'une combinaison d'un bloc et d'un élément en ligne.
• list-item – l'élément est affiché comme un élément de bloc. Mais en plus, un marqueur d'item est ajouté devant lui.
• run-in – selon le contenu, l'élément peut être un bloc ou un élément en ligne.
• table – fonctionne comme l'élément table connu en HTML.
• inline-table – agit comme l'élément table en HTML, mais en ligne.
• table-row – l'élément contient des éléments enfants disposés côte à côte. Fonctionne comme l'élément tr en HTML.
• table-cell – l'élément représente une cellule de tableau et agit comme les éléments HTML th et td.
• table-row-group – l'élément contient un groupe d'éléments avec plusieurs éléments enfants disposés côte à côte et fonctionne comme l'élément tbody en HTML.
• table-header-group – l'élément contient un groupe d'éléments avec plusieurs éléments enfants disposés côte à côte et fonctionne comme l'élément thead en HTML.
• table-footer-group – l'élément contient un groupe d'éléments avec plusieurs éléments enfants disposés côte à côte et fonctionne comme l'élément tfoot en HTML.
• table-column – décrit les propriétés des cellules d'une colonne. table-column fonctionne comme l'élément col en HTML.
• table-column-group – cet élément contient un groupe d'éléments qui décrivent les propriétés des cellules d'une colonne. Il agit comme l'élément colgroup en HTML.
• table-caption – définit le titre du tableau. Cette propriété fonctionne comme l'élément HTML caption.
En réalité, CSS offre donc un large éventail d'options d'affichage pour différents types d'éléments, qui jouent un rôle crucial dans la position des éléments. Nous en parlerons davantage dans les prochains tutoriels.
