Arts numériques

Vous trouverez ici une page de test (réalisée avec jQuery et interface) qui permet de déterminer les deux types de comportement pour les principaux éléments.

Les caractéristiques des éléments de type block

Commence toujours sur une nouvelle ligne ( voila pourquoi parfois vous n’arrivez pas àplacer un bloc a droite d’un autre bloc ;)
– Les attributs height, line-height, margin, padding peuvent être modifiés
– La largeur est par défaut fixée à100% de leur élément conteneur, si une autre largeur n’est pas spécifiée.
On peut forcer la taille des éléments de type bloc, en pixel, en pourcentage, en em, en points. Leur taille totale est l’addtion de du padding, du border, du margin et la largeur (width).

Principaux éléments de type block

• <div> : balise multi-usage. Cette balise est souvent utilisée pour positionner un contenu dans la page.
• <h1> ... <h6> : encadre un titre ou un sous-titre.
• <p> : paragraphe.
• <ul>, <ol>,<dl> : listes (non ordonnée, ordonnée ou avec définition).
• <li>, <dt>,<dd> : élément de liste, définition, et titre de définition.
• <table> : tableau.
• <blockquote> : paragraphe indenté (décalé àdroite) normalement utilisé pour présenter une citation.
• <pre> : bloc de code préformaté.
• <form> : formulaire de saisie.

Les caractéristiques des éléments Inline

Un élément inline se comporte comme des caractères dans une phrase : il continue sur la même ligne que l’élément précédent sauf si celui-ci est un élément de type bloc, évidemment.
– height, line-height, marges top et bottom ne pourront être changées
– La hauteur est déterminée par le contenu de l’élément et ne peut être modifiée.

Liste des principaux éléments inline

• <span> : balise multi-usage, trés pratique pour appliquer un style CSS àune portion de texte, par exemple.
• <a> : ancre, permet de créer un lien sortant ou permet de spécifier un point précis de la page vers lequel on veut diriger un lien.
• <strong> : utilisé pour marquer l’importance particulière d’une portion de texte. Tous les navigateurs actuels afficheront cette portion en gras. NOTE : l’ancienne balise <b> (bold) était obsolète en xhtml mais peut de nouveau être utilisée en html5.
• <em> : utilisé pour accentuer l’importance d’une portion de texte (de façon moins forte que <strong>). Tous les navigateurs actuels afficheront cette portion en italique. NOTE : l’ancienne
  balise <i> (italic) était obsolète en xhtml mais peut être utilisée de nouveau en HTML5.
• <img> : image, permet de placer une image au milieu du flux de texte.
• <br> : saut de ligne. Voilàun cas tout àfait particulier d’élément en-ligne, qui provoque un saut de ligne. Malgré cette particularité, <br> n’est définitivement pas un bloc et doit être classé
  comme élément en-ligne.
• <input> : champs de saisie dans un formulaire, tel que ou
• <abbr> : signale une abbréviation (placez votre curseur dessus pour voir le
  fonctionnement). Note : Internet Explorer ne gère
  pas cette balise dans ses versions antérieures àla version 7.

Changer un élément inline en bloc avec CSS

Il est possible de changer le type d’un élément avec une déclaration CSS.

a {
display:block;
height:200px;
width:200px;
}

Ici, les liens sont transformés en éléments de type bloc grâce àla déclaration css "display:block". On utilise ce type de déclaration pour pouvoir bénéficier des avantages de types de bloc : par exemple, pour pouvoir fixer la taille des éléments ou pour pouvoir les positionner.
L’inverse est possible avec la déclaration "display:inline".

li {
display:inline;
}