ホームページ > 記事 > ウェブフロントエンド > Webページ制作（html）の基礎知識（3）html+css
Webページ制作（html）の基礎知識（3）html+css
- 零下一度オリジナル
- 2017-05-06 13:40:191231ブラウズ
1.1HTML CS
CSSセレクター
異なるスタイル定義には異なる適用方法があり、対応するスタイル名も異なるため、スタイル名はセレクターであり、異なる適用方法でのスタイルを理解しやすいはずです。
1.クラスセレクター:
名前は、ドット「.」で始まる文字列です。このタイプのスタイルは、タグの class 属性を通じて使用する必要があります。このスタイルは、タグの class 属性を介して適用する必要があります。
例:
.wenzi{font-size:20px;}
<p class=”wenzi”>类选择器样式</p>2. タグセレクター:
名前は、ページ内のスタイルが定義されているすべてのタグについて、タグにクラスセレクタースタイルが適用されていない場合、この内容が一致します。タグはタグセレクターのスタイル表示に従います。このスタイルは、同じ名前のタグが定義されるたびに自動的に適用されます。
例:
p{font-color:#6ec;}ページ上の e388a4556c0f65e1904146cc1a846bee タグは色 #6ec で表示されます。
名前は「#」と文字列の組み合わせです。ここで「#」は、特定のタグのID属性の値が一致する場合のIDセレクターの記号です。 "#" の後の文字、このスタイルはこのラベルに適用されます。このスタイルは、ID 属性値が # の後の文字と同じタグに適用されます。
例:
#idname{font-size:26px;}
<p id=”idname”>ID样式</p>同じページドキュメント内の 2 つのタグが同じ ID 属性値を持つことはお勧めできません。そのため、Web 標準に準拠する Web ドキュメントでは、ID スタイルは 1 つのタグにのみ対応します。このスタイルと同じスタイルを使用するタグが複数ある場合は、ID セレクターの代わりにクラス セレクターを使用してスタイルを定義します。
3. レベルセレクター:
(教科書では派生セレクターと呼ばれています。レベルセレクターは私の名前です)
このスタイルの対応するタグが自動的に適用されます。
メソッドの命名については、以下の例を参照してください。
分かりやすいように、以下のタグの入れ子を以下の形で書きます。
<p> <img /> <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><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><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><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 つのファイルを変更するだけでサイト全体の外観を変更できます。
018b0a45303559c0bdad20210347a5fe タグを使用して内部スタイル シートを定義できます。
<head><style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style></head>インライン スタイル
特別なスタイルを個々の要素に適用する必要がある場合は、インライン スタイルを使用できます。インライン スタイルを使用する方法は、関連するタグで style 属性を使用することです。スタイル プロパティには、任意の CSS プロパティを含めることができます。次の例は、段落の色と左余白を変更する方法を示しています。
<p style="color: red; margin-left: 20px"> This is a paragraph </p>
【関連おすすめ】
2. HTML開発マニュアル
3. php.cnオリジナルのHTML5ビデオチュートリアル
以上がWebページ制作（html）の基礎知識（3）html+cssの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。