recherche

Maison  >  Article  >  interface Web  >  Comment ajouter du CSS personnalisé à votre GitHub README.md ?

Comment ajouter du CSS personnalisé à votre GitHub README.md ?

Barbara Streisand
Barbara Streisandoriginal
2024-11-03 21:48:02842parcourir

How to Add Custom CSS to Your GitHub README.md?

CSS personnalisé pour Readme.md dans GitHub Repos

Vérification du nom du fichier CSS qui modifie le fichier readme.md à la racine d'un dépôt GitHub est crucial lors de la personnalisation de l'apparence du dépôt. Même si certains pensent qu'il s'agit de .github/github.css, il se peut qu'il ne donne pas les résultats escomptés.

Au lieu de s'appuyer sur un fichier CSS dédié, une approche plus efficace consiste à intégrer HTML et CSS dans un fichier balise dans le fichier README de GitHub. Ceci peut être réalisé en utilisant un fichier avec un balise, qui prend en charge à la fois le code HTML et CSS.

Par exemple, pour créer une animation simple qui change la couleur du texte h1 :

<code class="css">h1 {
  color: red;
  animation: myanimation 2s infinite;
}

@keyframes myanimation {
  from {
    color: red;
  }
  to {
    color: yellow;
  }
}</code>

Et puis intégrez l'animation dans le SVG file :

<code class="html"><svg width="100%" height="100%">
  <foreignObject width="100%" height="100%">
    <html>
      <head>
        <style>
          <!-- Code from above -->
        </style>
      </head>
      <body>
        <h1>Hello world!</h1>
      </body>
    </html>
  </foreignObject>
</svg></code>

Enfin, incluez le fichier SVG dans le README GitHub à l'aide d'un tag:

<img src="custom-animation.svg" alt="Animated text" />

Cette méthode fournit un moyen flexible et efficace de personnaliser l'apparence d'un fichier readme.md dans un dépôt GitHub, sans les limitations des fichiers CSS dédiés.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

css html for while include using finally this animation github embedding
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment pouvez-vous étendre dynamiquement un champ de saisie de texte avec CSS et contenu modifiable ?Article suivant：Comment pouvez-vous étendre dynamiquement un champ de saisie de texte avec CSS et contenu modifiable ?

Articles Liés

Voir plus