1. HTMLフォントカラー設定 HTML では、フォント タグを使用してフォント コンテンツの色を設定します。 1.フォント構文: コードをコピー コードは次のとおりです。<!DOCTYPE html> <html> <ヘッド> <メタ文字セット="utf-8" /> <title>フォントカラーのオンライン例</p></title> </head> <本文> <font color="#FF0000">私は赤いフォントです</font> <テーブルの幅="300" 境界線="1"> <tr> <td><font color="#0000FF">こんにちは</font></td> <td></p></td> </tr> </テーブル> </本文> </html> まず、フォントは通常のタグのペアです。タグにフォントのテキストコンテンツを入れ、フォントタグにカラーカラー+対応するカラー値を設定して、フォントタグオブジェクトにフォントカラーを設定します。 2. HTMLフォント設定フォント色の例 2-1. HTML フォントカラーの例の完全なコード: コードをコピー コードは次のとおりです。<!DOCTYPE html> <html> <ヘッド> <メタ文字セット="utf-8" /> <title>CSS フォントカラーのオンラインデモ</p></title> <スタイル> .</p>{color:#F00} </スタイル> <!-- HTML コメント: スタイル タグを使用してフォントの色を設定します --> </head> <本文> <div class="</p>">フォントが赤です</div> <div style="color:#00F">フォントは青です</div> <!-- div タグの style 属性を使用してフォントの色を設定します --> </本文> </html> 上記の例では、フォントの色を個別に設定し、表内のフォントの色を設定しています。 2-2. フォント色の例のスクリーンショット HTML フォント色設定例のスクリーンショット 2-3. オンラインデモ: ケーススタディを見る フォントの色を変更するには、色の値を変更するだけです。 2. HTML p cssフォント色設定 CSS スタイルを使用して HTML のフォント色を設定します。 CSS を使用して HTML フォントの色を設定するには、タグ内の CSS と外部 CSS の 2 つの方法があります。 1. 基礎知識の紹介 外部 CSS を使用する場合は、CSS ファイルに CSS コードを別途配置し、html リンクを使用して CSS を導入する (html introduces css) か、html 内の <style> タグを使用して CSS を作成することができます。 HTML タグの style 属性を使用して CSS カラーを設定することもできます。 2. p+CSSの例のデモンストレーション ここでは、HTML フォント カラー設定を実装する 2 つの方法を実践します。1 つはタグで CSS を使用する方法、もう 1 つはスタイル タグを使用してフォント カラー設定を実装する方法です。 3. 完全なHTMLソースコードの例 コードをコピー コードは次のとおりです。<!DOCTYPE html> <html> <ヘッド> <メタ文字セット="utf-8" /> <title>HTML ハイパーリンクのフォント色設定のオンライン デモ</p></title> <スタイル> { 色:#00F } a:hover{ color:#F00}/* マウスがホバーしているときのフォント色*/ /* CSS コメント: 上記のコードは HTML 内のハイパーリンクのフォント色を設定するためのものです */ .div a{ 色:#090} .div a:hover{ color:#090} /* CSS コメント: 上記のコードは、HTML の .div オブジェクト内のハイパーリンクのフォント色を設定するためのものです */ </スタイル> </head> <本文> <p>テストコンテンツの色を青に設定しました<a href="http://www.css.com">cSS</a></p> <div class="div">私は div オブジェクトの中にいます。ハイパーリンクの色は <a href="#">私は緑色のハイパーリンクです</a></div> </本文> </html> HTML でフォントの色を設定するには、<style> タグと p タグの style 属性を使用します。 4. P CSSケースのスクリーンショット CSS フォント色設定例のスクリーンショット 5. CSS+P 事例オンラインデモ:事例を見る 3. HTMLハイパーリンクのフォント色設定 HTML でアンカー テキスト フォントの色を設定する方法は 2 つあります。1 つは、すべての HTML ハイパーリンクに統一されたフォントの色を設定する方法であり、もう 1 つは、指定されたオブジェクトのアンカー テキスト ハイパーリンク フォントに別の色を設定する方法です。 この記事では、HTML のハイパーリンク アンカー テキストのフォント色の統一設定と個別設定を例を通して紹介します。 1. 完全なp+css htmlコードは次のとおりです。
ハイパーリンクの青いフォントは HTML の統一設定であり、緑のフォントは個別に設定されたハイパーリンクのフォント色です。 2. ハイパーリンクのフォント色の例のスクリーンショット CSS ハイパーリンク フォントの例のスクリーンショット 3. オンラインデモ: ケーススタディを見る 上記の 3 つの p+CSS ケースはダウンロード用にパッケージ化されています。 今すぐダウンロード (2.928KB) 4. HTMLで要求される正確なフォント色を取得する方法 正確なカラー値を取得するには、通常、Photoshop (ps) ソフトウェアが使用されます。以下では、PS を使用して特定の場所のフォント カラー値を取得し、それを柔軟に適用して、フォント値を取得することで特定の場所の背景、画像、または境界線のカラー値を取得する方法について説明します。 上記の画像「CSS」の青の特定の色値を取得したいとします。 1. この画像をPSで開く 追伸:この画像を開いてください 2. PSツールの「前景色を選択」または「背景色を選択」ツールを使用します。 ここで赤いボックスの「前景色」ツールをクリックします 3. 「前景色の選択」タブがポップアップ表示されます 2 番目のステップの後、「前景色を選択」タブがポップアップ表示され、マウス ポインターがストローのようなアイコン「カラー ピッカー」に変わります。このとき、色の値を取得する必要がある場所をクリックします。画像が小さく、正確にクリックするのが難しい場合は、「ctrl+++」を使用して画像を連続的に拡大できます。 正確な色値「0000FF」を取得します 4.カラーを使用して取得したカラー値を設定します 色:#0000FF ヒント:色の値を使用する場合は、通常、手動入力エラーを避けるために、PSから色の値を直接コピーすることをお勧めします。同時に、色の値の前に「#」記号を追加することを忘れないでください。 5. HTMLフォントカラーのまとめ ここでは、HTML フォント、CSS テキスト カラー、CSS ハイパーリンク フォント カラーの 3 つのフォント カラー設定を紹介します。また、PS を使用して正確なカラー値を取得する方法も紹介します。フォントや背景色の設定を柔軟に拡張できます。 |
>>: CSS3は小さな矢印のさまざまなグラフィック効果を実現します
上図のように、パディング値は時計回り(右上、右下)の複合属性であり、パディングの内側の余白がボックス...
この記事の例では、Vueモバイル端末で指のスライド効果を実現するための具体的なコードを紹介します。具...
まず、Webフロントエンドエンジニアの価値についてお話ししましょう。現在、Web製品のインタラクショ...
記事マインドマップマスター/スレーブ レプリケーションと読み取り/書き込み分離を使用する理由は何です...
目次【コード背景】 【コード実装】 #1# -> コード再利用の基本は、再利用可能なコンポーネ...
HTML <dl> タグ#定義と使用法<dl> タグは定義リストを定義します...
目次概要型アサーション構文ではインスタンスオブ構文typeof構文要約する概要TypeScript ...
「人間中心」と「グリーンデザイン」という2つの視点から考える——デザイン業界の同僚とも議論する2つの...
Mysqlリモート接続構成を実装する2つの方法会社で働いていると、誰かのコンピュータに保存されている...
目次序文webSocket の操作と例について:ウェブソケット1. webSocketについて2. ...
開発者が Dockerfile を使用してイメージをビルドする場合は、イメージをビルドするときにデー...
目次序文フィルターとは何かフィルターの使い方グローバルフィルターローカルフィルターフィルターは直列に...
前の章では、1 つのテーブルからデータを読み取る方法を学習しました。これは比較的簡単ですが、実際のア...
目次1.まず、main.jsページを設定します2. 対応するパスの下で言語パックを構成します。ここに...
この記事ではMySQL 8.0.15のインストールと設定方法を参考までに記録します。具体的な内容は以...