ホームページ  >  記事  >  ウェブフロントエンド  >  GitHub README.md にカスタム CSS を追加するにはどうすればよいですか?

GitHub README.md にカスタム CSS を追加するにはどうすればよいですか?

Barbara Streisand
Barbara Streisandオリジナル
2024-11-03 21:48:02874ブラウズ

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

GitHub リポジトリの Readme.md のカスタム CSS

ルートで readme.md ファイルを変更する CSS ファイルの名前を確認するGitHub リポジトリの外観は、リポジトリの外観をカスタマイズするときに非常に重要です。 .github/github.css であると信じている人もいますが、予期した結果が得られない可能性があります。

専用の CSS ファイルに依存する代わりに、HTML と CSS を 内に埋め込む方が効果的なアプローチです。 GitHub README のタグ。これは、 を使用することで実現できます。 を含むファイルタグは、HTML と CSS コードの両方をサポートします。

たとえば、h1 テキストの色を変更する単純なアニメーションを作成するには、次のようにします。

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

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

次に、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>

最後に、 を使用して SVG ファイルを GitHub README に含めます。 tag:

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

このメソッドは、専用の CSS ファイルの制限なしに、GitHub リポジトリ内の readme.md ファイルの外観をカスタマイズする柔軟かつ効率的な方法を提供します。

以上がGitHub README.md にカスタム CSS を追加するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。