Les éléments <bloc> |
Les éléments <bloc> sont des blocs servant à la fois à regrouper de l'information (regrouper des titres, des paragraphes, des images...) et à leur donner éventuellement une mise en page particulière.
Cet attribut style fait partie de l'ensemble des attributs partagés avec tous les autres blocs. C'est le cas également de l'élément <titre> qui permet de donner un titre au bloc. |
<bloc> sans style pour regrouper des informationsLes éléments <bloc> qui ne possédent pas d'attribut style servent simplement à réunir des éléments d'information pour leur appliquer l'un ou l'autre traitement. On les utilise, par exemple, dans les listes à puces ou dans les présentations pour indiquer que la puce ou la présentation doit s'appliquer à l'ensemble du bloc et non pas aux éléments individuels qu'il contient. |
Dans cet exemple, une liste à puce s'applique à un <bloc> contenant deux <p>, ainsi qu'à deux autres <p>. Il n'y aura qu'une seule puce qui s'affichera devant la première et la deuxième ligne, car elles sont regroupées au sein d'un <bloc>. |
Exemple <liste> <bloc> <p>Première ligne</p> <p>Deuxième ligne</p> </bloc> <p>Troisème ligne</p> <p>Quatrième ligne</p> </liste> Cela donnera ceci comme résultat:
|
Vous pouvez également utiliser <bloc style=""> ou <bloc style="transparent"> pour créer un bloc sans style. Cela produira le même effet. <bloc> avec style pour mettre en évidence de l'informationUn élément <bloc> utilise les mêmes attributs que tous les autres bloc afin de mettre en évidence l'information qu'il contient. Tous les attributs (style, bords et ses variantes, ajuster-hauteur...) définis pour les blocs peuvent être utilisés, ainsi que l'élément <titre>. En voici quelques exemples: |
Exemple <bloc style="colorBar6" bords="arrondis"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </bloc> |
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
Exemple <bloc style="voile" bords="carrés"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </bloc> |
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
Exemple <bloc style="important" bords="carrés" bords-droite="arrondis""> <titre> <titre3>Lorem Ipsum</titre3> </titre> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </bloc> |