1.1HTML CS
CSSセレクター
異なるスタイル定義には異なる適用方法があり、対応するスタイル名も異なるため、スタイル名はセレクターであり、異なる適用方法でのスタイルを理解しやすいはずです。
1.クラスセレクター:
名前は、ドット「.」で始まる文字列です。このタイプのスタイルは、タグの class 属性を通じて使用する必要があります。このスタイルは、タグの class 属性を介して適用する必要があります。
例:
.wenzi{font-size:20px;}
<p class=”wenzi”>类选择器样式</p>2. タグセレクター:
名前は、ページ内のスタイルが定義されているすべてのタグについて、タグにクラスセレクタースタイルが適用されていない場合、この内容が一致します。タグはタグセレクターのスタイル表示に従います。このスタイルは、同じ名前のタグが定義されるたびに自動的に適用されます。
例:
p{font-color:#6ec;}ページ上の
タグは色 #6ec で表示されます。
名前は「#」と文字列の組み合わせです。ここで「#」は、特定のタグのID属性の値が一致する場合のIDセレクターの記号です。 "#" の後の文字、このスタイルはこのラベルに適用されます。このスタイルは、ID 属性値が # の後の文字と同じタグに適用されます。
例:
#idname{font-size:26px;}
<p id=”idname”>ID样式</p>同じページドキュメント内の 2 つのタグが同じ ID 属性値を持つことはお勧めできません。そのため、Web 標準に準拠する Web ドキュメントでは、ID スタイルは 1 つのタグにのみ対応します。このスタイルと同じスタイルを使用するタグが複数ある場合は、ID セレクターの代わりにクラス セレクターを使用してスタイルを定義します。
3. レベルセレクター:
(教科書では派生セレクターと呼ばれています。レベルセレクターは私の名前です)
このスタイルの対応するタグが自動的に適用されます。
メソッドの命名については、以下の例を参照してください。
分かりやすいように、以下のタグの入れ子を以下の形で書きます。
<p> <img / alt="Webページ制作（html）の基礎知識（3）html+css" > <span> a <strong> b </strong> c </span> </p>
これらのタグは、pタグの中にimgタグとspanタグが埋め込まれ、strongタグが埋め込まれています。 imgタグ、spanタグ、strongタグはpタグの下位タグ、imgタグとspanタグはpタグのサブタグと言えます。強いタグは、span タグのサブタグであり、その逆は、上位タグまたは親タグです。強いタグは p のサブタグではなく、p タグの下位タグであることに注意してください。
次に、このセレクターを説明するために 2 つの例を見てみましょう:
例 1:
<p><img alt="Webページ制作（html）の基礎知識（3）html+css" ><span>a<strong>b</strong>c</span></p>
p span{font-color:#038;}このようなセレクターは、p タグに埋め込まれた従属タグの spam タグのスタイルを参照します。
p Strong{font-color:#865;}
このようなセレクターは、pタグに埋め込まれた従属タグstrongタグのスタイルを参照します
p span Strong{font-color:#921;}
これis タグpの従属タグspanタグの従属タグstrongのスタイルを指します。
注: 従属タグである限り、この方法で定義できます。この例に示すように、文書内に p タグの従属タグではない他の span タグがある場合、このスタイルは適用されません。以下同様。
例 2:
<p class=”abc”><img alt="Webページ制作（html）の基礎知識（3）html+css" ><span>a<strong>b</strong>c</span></p>
は次のように定義することもできます:
.abc span{font-color:#038;}
.abc strong{font-color:#865;}
.abc span strong{font-color:#921;}これは、スタイル abc が適用されたタグの下位タグのスタイルを参照します。
例 3:
#abc{}
<p id=”abc”><img alt="Webページ制作（html）の基礎知識（3）html+css" ><span>a<strong>b</strong>c</span></p>ID スタイルが定義され、タグ ID がこの属性値を使用する場合、次のように定義することもできます:
#abc span{font-color:#038;}
#abc strong{font-color:#865;}
#abc span strong{font-color:#921;}擬似クラス: のいくつかの states擬似属性のみを導入します。ハイパーリンク スタイル定義メソッド。
このスタイルは、擬似属性の前のタグ a に自動的に適用されます。ハイパーリンクにアクセスしていない場合の
a:link{} スタイル。
a:active{}ハイパーリンク上でマウスの左ボタンが押されたが離されなかったときのスタイル。
a:hover{}マウスがハイパーリンク上を通過するときのスタイル。
a:visited{}訪問後のハイパーリンクのスタイル。
* セレクター:
このセレクター スタイルで定義される名前は、すべてのタグを参照する単なるワイルドカード「*」です。つまり、すべてのタグがこのスタイルを自動的に適用します。
*{}
スタイルの使用方法
ブラウザがスタイル シートを読み取ると、スタイル シートに従ってドキュメントの書式が設定されます。スタイル シートを挿入するには 3 つの方法があります:
外部スタイル シート
多くのページにスタイルを適用する必要がある場合、外部スタイル シートは理想的な選択肢です。外部スタイル シートを使用すると、1 つのファイルを変更するだけでサイト全体の外観を変更できます。
内部スタイル シート 1 つのファイルに特別なスタイルが必要な場合は、内部スタイル シートを使用できます。 head セクションの インライン スタイル 特別なスタイルを個々の要素に適用する必要がある場合は、インライン スタイルを使用できます。インライン スタイルを使用する方法は、関連するタグで style 属性を使用することです。スタイル プロパティには、任意の CSS プロパティを含めることができます。次の例は、段落の色と左余白を変更する方法を示しています。 【関連おすすめ】 2. HTML開発マニュアルead><link rel="stylesheet" type="text/css" href="mystyle.css"></head>
<head><style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style></head><p style="color: red; margin-left: 20px">
This is a paragraph
</p>
以上がWebページ制作（html）の基礎知識（3）html+cssの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
Web開発にとってHTMLタグが重要なのはなぜですか？May 02, 2025 am 12:03 AMhtmltagsareSterenceforwebdevelovementasyStheStructureanhandhancewebpages.1）theydefineLayout、semantics、and-interactivity.2）semanticagsimprovecessibility.3）opeusofusofagscanoptimizeperformanceandensurecross-brows-compativeation。
HTMLタグと属性に一貫したコーディングスタイルを使用することの重要性を説明します。May 01, 2025 am 12:01 AMコードの読みやすさ、保守性、効率を向上させるため、一貫したHTMLエンコーディングスタイルは重要です。 1）低ケースタグと属性を使用します。2）一貫したインデントを保持し、3）シングルまたはダブルの引用符を選択して固執する、4）プロジェクトのさまざまなスタイルの混合を避け、5）きれいなスタイルやEslintなどの自動化ツールを使用して、スタイルの一貫性を確保します。
ブートストラップ4にマルチプロジェクトカルーセルを実装する方法は？Apr 30, 2025 pm 03:24 PMBootstrap4にマルチプロジェクトカルーセルを実装するソリューションBootstrap4にマルチプロジェクトカルーセルを実装するのは簡単な作業ではありません。ブートストラップですが...
DeepSeekの公式Webサイトは、マウススクロールイベントの浸透の影響をどのように達成していますか？Apr 30, 2025 pm 03:21 PMマウススクロールイベントの浸透の効果を実現する方法は？ Webを閲覧すると、いくつかの特別なインタラクションデザインに遭遇することがよくあります。たとえば、DeepSeekの公式ウェブサイトでは、...
HTMLビデオの再生コントロールスタイルを変更する方法Apr 30, 2025 pm 03:18 PMHTMLビデオのデフォルトの再生コントロールスタイルは、CSSを介して直接変更することはできません。 1. JavaScriptを使用してカスタムコントロールを作成します。 2。CSSを介してこれらのコントロールを美化します。 3. video.jsやPLYRなどのライブラリを使用すると、互換性、ユーザーエクスペリエンス、パフォーマンスを検討してください。プロセスを簡素化できます。
お使いの携帯電話でネイティブセレクトを使用することにより、どのような問題が発生しますか？Apr 30, 2025 pm 03:15 PM携帯電話でネイティブセレクトを使用する際の潜在的な問題は、モバイルアプリケーションを開発するときに、ボックスを選択する必要があることがよくあります。通常、開発者...
お使いの携帯電話でネイティブ選択を使用することの欠点は何ですか？Apr 30, 2025 pm 03:12 PMお使いの携帯電話でネイティブ選択を使用することの欠点は何ですか？モバイルデバイスでアプリケーションを開発する場合、適切なUIコンポーネントを選択することが非常に重要です。多くの開発者...
Three.jsとOctreeを使用して部屋で3人のローミングの衝突処理を最適化する方法は？Apr 30, 2025 pm 03:09 PMThree.JSとOctreeを使用して、部屋でのサードパーソンローミングの衝突処理を最適化します。 3つのjsでoctreeを使用して、部屋でサードパーソンローミングを実装し、衝突を追加してください...
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
MantisBT
Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。
SAP NetWeaver Server Adapter for Eclipse
Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。
SublimeText3 中国語版
中国語版、とても使いやすい
MinGW - Minimalist GNU for Windows
このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。
Safe Exam Browser
Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。
ホットトピック
7888
15164914141052130125124729