coffreobsidian/Obsidian/Obsidian CSS.md

Configuration des titres automatiques

Configuration personnelle dans répertoire snippets du coffre obsidian fichier : title_colors.css

Couleur	Code HEX	Aperçu
Rouge	#FF0000
Vert	#00FF00
Bleu	#0000FF
Jaune	#FFFF00
Cyan	#00FFFF
Magenta	#FF00FF
Noir	#000000
Blanc	#FFFFFF
Gris clair	#D3D3D3
Gris foncé	#A9A9A9
Rouge foncé	#8B0000
Vert foncé	#006400
Bleu foncé	#00008B
Orange	#FFA500
Or	#FFD700
Rose	#FFC0CB
Lavande	#E6E6FA
Turquoise	#40E0D0
Indigo	#4B0082
Violet	#800080
Bleu ciel	#87CEEB
Vert citron	#ADFF2F
Rouge corail	#FF7F50
Menthe	#98FF98
Bleu pétrole	#2F4F4F
Sable	#F4A460
Chocolat	#D2691E
Bronze	#CD7F32
Vert forêt	#228B22
Exemple de code du fichier :

.markdown-preview-view h1 {
  color: #e74c3c; /* Rouge */
  background-color: #ffeaea;
}

.markdown-preview-view h2 {
  color: #2980b9; /* Bleu */
  background-color: #eaf4ff;
}

.markdown-preview-view h3 {
  color: #27ae60; /* Vert */
  background-color: #eafff3;
}

.markdown-preview-view h4 {
  color: #e67e22; /* Orange */
  background-color: #fff3e6;
}

/* =========================================
   PERSONNALISATION DES TITRES MARKDOWN
   ========================================= */

.markdown-preview-view h1,
.markdown-preview-view h2,
.markdown-preview-view h3,
.markdown-preview-view h4,
.markdown-preview-view h5,
.markdown-preview-view h6 {
  /* === Apparence du texte === */

  /* Couleur du texte */
  color: #333; /* ➤ Changer la couleur du titre — ex: #e74c3c pour rouge vif */
  /* Pour désactiver : commenter ou supprimer la ligne */

  /* Police en gras */
  font-weight: bold; /* ➤ Force du gras — "normal", "bold", ou 100 à 900 */

  /* Style de police */
  font-style: normal; /* ➤ "italic" pour pencher les titres */

  /* Transformation du texte */
  text-transform: none; /* ➤ "uppercase", "lowercase", ou "capitalize" */

  /* Soulignement, surlignement */
  text-decoration: none; /* ➤ "underline", "line-through", etc. */

  /* Ombre sur le texte */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* ➤ Effet d'ombre douce */

  /* === Fond et encadrement === */

  /* Couleur de fond */
  background-color: transparent; /* ➤ Changer pour mettre en valeur (ex: #f0f0f0) */

  /* Bordure gauche (style bloc-notes) */
  border-left: 4px solid transparent; /* ➤ Couleur & épaisseur personnalisables */

  /* Bordure globale (si besoin) */
  border: none;

  /* Rayon des coins */
  border-radius: 4px; /* ➤ Arrondi des bords */

  /* === Espacement === */

  /* Espace intérieur (entre le texte et le bord) */
  padding: 6px 10px; /* ➤ Haut/Bas 6px, Gauche/Droite 10px */

  /* Marge extérieure (espacement entre éléments) */
  margin-top: 20px;
  margin-bottom: 10px;

  /* === Taille du texte (ajustable par niveau) === */
  /* Décommenter si tu veux des tailles fixes */

  /*
  font-size: 2em;    // h1
  font-size: 1.75em; // h2
  font-size: 1.5em;  // h3
  font-size: 1.25em; // h4
  font-size: 1em;    // h5
  font-size: 0.875em;// h6
  */

  /* === Police personnalisée === */
  /* font-family: 'Fira Code', 'Arial', sans-serif; */
}

1. Structures de base dans obsidian (éléments ciblages en CSS)

Élément Obsidian	Sélecteur CSS	Description
Vue lecture (Preview)	.markdown-preview-view	Affiche la note en mode lecture
Vue édition (Editor)	.cm-s-obsidian	Contenu en mode édition
Titre de niveau 1 (#)	h1	Titre principal
Titre de niveau 2 (##)	h2	Sous-titre
Titre de niveau 3 (###)	h3	Sous-sous-titre
Citation (>)	blockquote	Bloc de citation
Liste à puces	ul, li	Liste non ordonnée
Liste numérotée	ol, li	Liste ordonnée
Case à cocher	input[type="checkbox"]	Checkbox dans les tâches
Tâche cochée	.task-list-item.is-checked	Tâche marquée comme faite
Lien interne	a.internal-link	Lien vers une autre note
Lien externe	a.external-link	Lien vers un site web
Tableau Markdown	table, thead, td, th	Tableau classique
Bloc de code	pre code, code	Code sur plusieurs lignes
Code inline	code	Code en ligne
Image	img	Image insérée
Tags (en bas des notes)	.tag	Balises de tags Markdown

2. Propriétés CSS utiles (et exemples pour obsidian)

Propriété CSS	Exemple	Utilité
color	color: #ff0000;	Couleur du texte
background-color	background-color: #f0f0f0;	Couleur de fond
font-size	font-size: 1.2em;	Taille du texte
font-family	font-family: 'Fira Code';	Police du texte
font-weight	font-weight: bold;	Gras ou fin
text-align	text-align: center;	Alignement du texte (left, right, center, justify)
text-decoration	text-decoration: underline;	Souligné, barré, etc.
text-transform	text-transform: uppercase;	Majuscules, minuscules
padding	padding: 10px;	Espace intérieur
margin	margin: 20px;	Espace extérieur
border	border: 1px solid #ccc;	Bordure autour d’un élément
border-radius	border-radius: 8px;	Coins arrondis
box-shadow	box-shadow: 2px 2px 5px #aaa;	Ombre portée
line-height	line-height: 1.5;	Espacement entre les lignes
display	display: block;	Type d'affichage (inline, block, flex...)
max-width	max-width: 800px;	Limiter la largeur d’un élément
overflow	overflow: auto;	Gérer le débordement (utile pour blocs de code/tables)

3. Tableau spécial : personnalisation des tableaux et blocs de code

Élément	Sélecteur CSS	Propriétés utiles	Exemple
Tableau	table	border, width, border-collapse, margin, background-color	table { border: 1px solid #ccc; border-collapse: collapse; }
Ligne de tableau	tr	background-color, border-bottom, hover effects	tr:hover { background-color: #f5f5f5; }
Cellule	td, th	padding, text-align, color	td { padding: 8px; text-align: left; }
Tête de tableau	thead th	font-weight, background-color	thead th { background-color: #eee; font-weight: bold; }
Bloc de code	pre code	background-color, padding, font-family, border-radius	pre code { background-color: #f4f4f4; padding: 12px; }
Code inline	code	background, padding, font-family, border-radius	code { background: #eee; padding: 2px 4px; }
Scroll horizontal	pre	overflow-x, max-width	pre { overflow-x: auto; max-width: 100%; }