JavascriptAddCss属性
__main__ Python module |
code Python module |
COM PHP module |
Ev PHP module |
exp |
html Python module |
http Python module |
iat |
imp Python module |
io Python module |
JavaScript |
operator Python module |
os Python module |
PS PHP module |
Python Development |
Python functions |
re Python module |
select Python module |
selectors Python module |
sep |
site Python module |
square |
StackOverflow |
struct Python module |
types Python module |
UI PHP module
Michael Zippo
CSSセレクターを使用すると、Web開発者はWebページ上の特定の要素または要素のセットのスタイルを設定できます。
セレクターを使用する場合、特定の属性を持つ要素のみをターゲットにすることができます。そこでCSS属性セレクターが登場します。属性ピッカーは、特定の属性を持つ要素にのみ特定のスタイルを適用するのに役立ちます。
このチュートリアルでは、要素のスタイルを設定するときにCSS属性セレクターを使用する方法について説明します。このチュートリアルを終了すると、属性セレクタを使用して要素を定義する方法を十分に理解できるようになります。
HTML属性
HTMLでは、属性を使用して追加の定義を行います。要素の特性またはプロパティ。たとえば、height属性は画像の高さを定義し、title属性はWeb要素のタイトルを定義します。
名前と値のペア構造を使用して属性を宣言します。これは、次のような属性がHTMLファイルに表示されることを意味します： name = "value"。 HTML属性の詳細については、HTML属性のガイドをご覧ください。
CSS属性セレクター
サイトを設計するときは、属性値に基づいて要素のスタイルを設定するかどうかを指定できます。これを行うには、CSS属性セレクターを使用します。
属性セレクターを使用する場合に従うべき2つの手順は、次のとおりです。
- 属性をラップする` sは角括弧で囲みます。
- この名前の属性に適用するスタイルを指定します。
CSS属性セレクターの動作例をいくつか見てみましょう。
CSS[属性]
セレクター属性の最も基本的な形式は、 [attribute]です。つまり、属性の名前を角かっこで囲みます。
title属性を持つ各要素のフォントサイズを16pxに設定するとします。次のコードを使用して実行できます。
CSSルールコードは、title属性を持つ要素にのみ適用されます。タイトル属性が指定されている要素のフォントサイズは、属性に格納されている値に関係なく、上記のルールに従って16pxに変更されます。
次のいずれかまたは両方を指定することにより、より正確な属性セレクター：
- ルールを適用する特定のタイプの要素
- その属性ID値（たとえば、テキストの場合は「title」、リンクの場合は「href」、任意の要素の場合は「class」などです。
たとえば、段落内のすべてのテキストのサイズを設定するとします。 16pxへのヘッダー。これは、次のコードを使用して実行できます。
セレクター属性の先頭にある文字pは、 タグにのみフォントスタイルを適用するようにブラウザーに指示します。 。セレクターの[title]部分は、指定された title属性を持つ
タグにのみポリシーのスタイルを適用するようにブラウザーに指示します。
Tしたがって、このコードを読んだ後、ブラウザはすべての段落タイトル（p）のフォントサイズを16pxに変換します。このコードは、ページ上の他のテキストには影響しません。
[attribute = "value"] 属性セレクターを使用すると、プログラマーは要素にのみスタイルを適用できます。値がセレクターで指定された値と等しい属性。
Python.Engineeringホームページのすべてのリンクの背景色をオレンジ色に設定するとします。このスタイルでは、 a要素の背景色をオレンジに設定する必要があります。このアクションは、次のCSSコードを使用して実行できます。
このルールは、href属性が python.engineeringと等しいWebページ上のすべての要素を選択します。次に、これらすべての要素の背景色をオレンジに設定します。
CSS [attribute〜 = "value"]
[attribute〜 =＆ldquoセレクター; value "] を使用すると、特定の単語を含む属性値「Äã‚Äã」を持つ要素を選択できます。
たとえば、すべてのpにスタイルを適用するとします。 タイトルがblueという単語に対応する要素。このスタイルでは、これらの要素のテキストの色を青に変更する必要があります。
使用できますこれを行うための次のルール：
このルールは、「blue」という単語を含むタイトルに関連付けられた
すべてのタグを検索し、これらのタグ
blueのテキストの色を定義します。したがって、
タグのタイトルがcolorblueまたはcolorblue の場合、このスタイルが適用されます。ただし、このルールは <ではありません。 / strong>は、 blueColor というタイトルのタグに適用されます。これは、 b lueという単語が属性に独立して存在しないためです。
これはとは異なります *=セレクター。属性内の特定の単語を検索できるだけでなく、属性内の特定の値も検索できます。
CSS [attribute | = "value"]
[attribute | = "value"] セレクターを使用すると、属性が特定の値で始まる要素（たとえば、 "Top"）を選択できます。これには、指定された値で始まり、ハイフンの後に追加のテキストが続く属性を持つ要素が含まれます（たとえば、「top-style」およびその他の「top-」値）。コードでは、単語「」の後に縦棒（|）が必要です。クラス。 > top 、ハイフンで区切られた他の値が続くものを含みます。次のコードを使用して実行できます：
このルールは、各<の上部に10pxのパディングを適用しますクラス名がtopで始まるdiv>要素。クラス名がtop-で始まる要素を含みます。
指定する値は、単一の単語全体または単語の後にハイフンを付ける必要があることに注意してください。つまり、上記のスタイルは、クラス名が top styleおよびtop-styleの要素には適用されません。 name topstyle。
CSS [attribute ^ = "value、"]
[attribute ^ =＆ldquoセレクター;値「"]は、属性値が特定の値で始まる要素を選択するために使用されます。 [attribute | = "value"] 前に説明しました。
paddingBottomで始まるクラス属性を持つ各
ユーザーのWebブラウザーは、クラス名が「paddingBotto」で始まるすべての
CSS [attribute $ = "value、"]
L`演算子 $ = は、属性値が特定の値で終わるすべての要素を選択するために使用されます。たとえば、href属性の値が .appで終わるすべてのハイパーテキストテキストのテキストの色を灰色に変更するとします。次のコードを使用してこれを行うことができます：
このセレクターは、href値が .appで終わるWebページのすべての要素に適用されます。
CSS [attribute * = "value"]
演算子*= を使用すると、値「属性」に特定の要素が含まれているすべての要素を選択できます。価値。 〜= 演算子とは異なり、この属性セレクターは、単一の単語だけでなく、クラス内の特定の値を見つけることができます。
Foたとえば、適用したいとします。クラス属性にallPaddingが含まれるすべての
このルールは、 allPaddingという用語を含むクラス属性を持つすべてのHTML要素の周囲に50pxのパディングを定義します。したがって、クラス名が new allPadding 、 around allPadding red 、 allPaddingblue 、および allPadding-trueの要素はすべてになりますこのスタイルに従います。
結論
CSS属性セレクターを使用すると、開発者は属性値に基づいて要素を選択し、それらの要素に特定のスタイルを適用できます。
p> このチュートリアルでは、例を参照して、属性セレクターの基本と、すべてのタイプのCSS属性セレクターの使用方法について説明しました。これで、プロのようにCSS属性セレクターの使用を開始する準備が整いました。
CSSは、Web開発で使用される3つの主要なスキルの1つです。アプリをダウンロードしてください 無料のPython.Engineering 今日話すウェブ開発者としてのキャリアを追求するために必要なスキルについてアドバイスできる経験豊富なキャリアコーチと一緒に。
