joliesse.css

Bonjour,
joliesse.css est un style basique pour du html natif que vous pouvez simplement copier-coller pour avoir quelque chose d'utilisable.
Cette page vous permet d'avoir une vue d'ensemble de la plupart des éléments HTML, lien vers la page complète.
Note : absence de JavaScript et de langage serveur type PHP. Que du HTML et CSS natif.

Libre de droit pour utilisation personnelle ou commerciale avec modifications si nécessaires,
avec ou sans obligation de me citer (même si ce serait plus sympa de me citer).
La seule chose que je refuse est que vous utilisiez cette page en prétandant que c'est vous qui l'avez faite.
Emmanuel Orchanian https://www.emmanuelorchanian.fr Télécharger le style (copier-coller) - Version minifiée Télécharger le style (copier-coller)

<hr> ligne horizontale (ci-dessus)

<h1> Titre de niveau 1

<h2> Titre de niveau 2

<h3> Titre de niveau 3

<h4> Titre de niveau 4

<h5> Titre de niveau 5

<h6> Titre de niveau 6 = MAX

<p> Paragraphe

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio quia voluptatum dicta voluptas provident odit fugit alias autem, vel, omnis praesentium iste corporis ab quidem quae odio sequi doloribus rem maxime ipsa? Praesentium minima similique provident, nesciunt fuga laudantium officia eaque temporibus voluptate illum, magnam quos velit non, nemo perspiciatis mollitia. Minima, quod sunt, accusantium dolores dolore itaque tenetur vero eveniet, illum voluptates libero officiis quisquam maxime repellat hic cumque alias, nostrum maiores nihil? Fuga enim, maxime quisquam ipsam, asperiores neque quae. Quod atque tempore nemo minima provident excepturi, commodi eius accusamus deserunt hic esse voluptatibus beatae libero, est ipsa.
<br> permet d'aller à la ligne et <wbr> saut de ligne que s'il y en a besoin (essayer de rétrécir l'écran) voiciUneTrèsLonguePhraseDeTelleSorteQueICIOnVoudraiRetournerÀLaLigneSiOnRétrécitLÉcran.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi suscipit similique nam repellat debitis dolores, voluptatem accusamus ad saepe error aliquam id placeat dolore maiores, autem, fuga numquam minima temporibus.

---- ⚓⚓⚓⚓⚓⚓⚓⚓TEST ANCRE, si vous avez cliqué sur l'ancre, cette ligne doit être en haut de votre écran 😀 ----

L'écriture en <i> italique
L'écriture en <b> gras
L'écriture en <u> souligné
L'écriture en ~~<strike> barré~~
L'écriture en <mark> surligné
L'écriture en ^{<sup> exposant} Par exemple 1^er régiment
L'écriture en _{<sub> indice} Par exemple molécule d'eau = H₂O
L'écriture en <small> petits caractères (juridiction)
L'écriture en <strong> haute importance
L'écriture en <em> mise en emphase

Lien <a> Lien hypertexte
Lien Lien interne vers ancre
Lien TARGET_BLANK Lien qui s'ouvre dans un autre onglet

~~<del> cet élément a été supprimé~~
<ins> cet élément a été inséré
<abbr>Essayez de SURVOLER l'abréviation suivante : W3C Note la balise acronym est obsolète, à remplacer par abbr
<code> fragment de code machine
<var> x pour une variable mathématique ou informatique

<samp> sortie d'ordinateur <samp> sortie d'ordinateur (avec la classe danger) <samp> sortie d'ordinateur (avec la classe warning) <samp> sortie d'ordinateur (avec la classe success) <samp> sortie d'ordinateur (avec la classe info) <output> pour une sortie de la part de votre site (en JavaScript par exemple)
<kbd>Touche clavier CTRL + R

✔🚀🌊🚜🦋 Note : Si vous êtes sous Windows, appuyez sur Windows + ; (point-virgule) pour faire emoticones.

<pre> Texte préformaté

|  L          TE
|    A       A
|      C    V
|       R A
|       DOU
|       LOU
|      REUSE
|      QUE TU
|      PORTES
|    ET QUI T'
|    ORNE O CI
|     VILISÉ
|    OTE-  TU VEUX
|     LA    BIEN
|    SI      RESPI
|            RER       - Apollinaire

<blockquote> Longue citation.
La Terre est bleue comme une orange.
Paul Eluard

Voici une petiteQ citation en incise.

<address> Pour les blocs d'adresse
26500 BOURG-LÈS-VALENCE (France)
jim@rock.com pour les liens qui ouvrent l'application des mails
(+33) 06 02 19 88 94 pour les liens qui ouvrent l'application des téléphones

<summary> élément toujours visible ***CLIQUER ICI***

*******************************
*******************************
*******************************
***<details> présente une boîte permettant de révéler/cacher un contenu.***
*******************************
*******************************
*******************************

<summary> ***CLIQUER ICI***

*******************************
*******************************
*******************************
***<details> présente une boîte permettant de révéler le contenu d'un résumé ou d'une légende.***
*******************************
*******************************
*******************************

<div> conteneur neutre de type "block"

<span> conteneur neutre de type "inline"

<header> équivalent d'une div. Sémantiquement une entête.

<main> équivalent d'une div. Sémantiquement le contenu principal de la page. Il ne foit y en avoir qu'un seul.

<section> équivalent d'une div. Sémantiquement une section.

<article> pour les articles (de blog par exemple...)

<ul> Élément de liste sans ordre
<li> Élément de liste sans ordre
<li> Élément de liste sans ordre

<ol> Élément de liste ordonnée
<li> Élément de liste ordonnée
<li> Élément de liste ordonnée

On peut changer
le style des puces
En utilisant du CSS
qui cible le parent d'une liste

<type>=I puces en chiffres romains (obsolète)
préferer CSS
list-style-type

<start>=40 puces commençant selon un certain nombre (obsolète)
préferer CSS
lien

<menu> nouvelle balise, alias de ul, pour les menus

Menu lien 1

Menu lien 2

Menu lien 3

<dl> Liste de définitions

<dt> Terme : Platane: Les platanes sont de grands arbres, pouvant atteindre de 25 à 55 m de haut, dont les caractéristiques générales diffèrent peu d'une espèce à l'autre. Ils ont une durée de vie assez longue (plusieurs centaines d'années, voire dix siècles et plus).
Saule pleureur: Le saule pleureur (Salix babylonica) est une espèce d'arbre de la famille des Salicaceae. Son port retombant est caractéristique et en fait une espèce très appréciée comme arbre d'ornement notamment au bord des pièces d'eau.
Bouleaux: Les bouleaux font partie de la famille des bétulacées et du genre Betula. La plupart des espèces sont des arbres ; quelques-unes, comme Betula nana, sont des chaméphytes. Les bouleaux poussent en général sur les terres pauvres et souvent siliceuses, jusqu'à 2 000 m d'altitude, ainsi que dans les régions arctiques.

<dfn> (pour un mot qui est en train d'être défini)

Les platanes sont de grands arbres, pouvant atteindre de 25 à 55 m de haut, dont les caractéristiques générales diffèrent peu d'une espèce à l'autre. Ils ont une durée de vie assez longue (plusieurs centaines d'années, voire dix siècles et plus).

<dfn> Images
ALT Chien noir

<figure>
<figcaption> Légende

<audio>

<video>

<caption> Titre du tableau
<tr> TH Entête de tableau	Entête de tableau	Entête de tableau
<tr> TD Donnée tabulée 1	Donnée tabulée 2	Donnée tabulée 3
Donnée tabulée 4	Donnée tabulée 5	Donnée tabulée 6

Table avec thead, tbody et tfoot
<thead>	Entête de tableau	Entête de tableau	Entête de tableau
<tbody>	Donnée tabulée 1	Donnée tabulée 2	Donnée tabulée 3
	Donnée tabulée 4	Donnée tabulée 5	Donnée tabulée 6
	Donnée tabulée 7	Donnée tabulée 8	Donnée tabulée 9
<tfoot>	total 1	total 2	total 3

Formulaires

<form>
<label>

<input> [type="text"] (texte sur une seule ligne)

<input> [type="email"]

<input> [type="password"]

<input> [type="number"]

<input> [type="date"]

<input> [type="time"]

<input> [type="range"]

<input> [type="color"]

<input> [type="file"]

<input> [type="submit"]

<input> [type="image"]

<output>

<datalist> pour une liste d'autocomplétion dans un input type texte.

<textarea> Entrée de texte sur plusieurs lignes.

<legend> <fieldset> Regroupement d'entrées de formulaire

SELECT

<radio> 1 <radio> CHECKED 2 Radio 3

<checkbox> 1 <checkbox> CHECKED 2 Checkbox 3

<progress> 70%

<meter> mesure basse
mesure moyenne
mesure haute
mesure optimale

NOTE : à partir d'ici, ce sont des balises obsolètes à éviter d'utiliser pour l'accessibilité des mal-voyants.

<marquee> (obsolète) Ce texte va défiler de bas en haut Ce texte va rebondir

BLINK (obsolète et à éviter pour l'accessibilité des malvoyants)

ANCRE VIDE # retour en haut de page

Emmanuel Orchanian www.emmanuelorchanian.fr