HTML の境界線のプロパティを使えば簡単でしたが、今はなくなりました。
私が見つけたのは、CSS がボーダーで行う素晴らしいことに関する多くのことだけです。しかし、一部の画像 (写真) の境界線を有効にし、他の画像 (アイコン) の境界線を有効にしないようにするにはどうすればよいでしょうか?
クラスとの境界線が必要なものをマークします。
<img class='picture' ...>
CSS を使用して境界線を追加します。
.picture {
border: 1px solid green;
}
次のように、画像のスタイルを設定できます。
<img src="yourimage.jpg">
img {border:2px dotted blue;}
そして、次のように、アイコンなどの他の画像に一意のクラスを設定します。
<img src="youricon.jpg" class="noborder">
img.noborder {border:none;}
いずれにせよ、css が互いを識別するために、2 つの画像を区別する必要があります。
すでに指摘されているように、画像にクラスを追加するだけで済みますが、css 以外のコンテンツを変更できない場合や、ほとんどの場合、私のように感じる場合があります。使用しているすべての画像にクラスを追加するための不必要な時間の無駄。正しいセレクターを使用する方が良いかもしれません。クラスを持つ親要素がある場合は、代わりにそれを使用します。それがどのように見えるかのサンプルは次のとおりです。
HTML
<div class="content">
<img/>
</div>
CSS
div.content > img{
border:1px solid;
}
これは、コンテンツに追加のコンテンツを追加しないため、最適な方法です。これにより、読み込みとユーザー エクスペリエンスが高速化されます。
要素で class 属性を使用して、要素を名前付きクラスに割り当てます。クラスにどのような名前を付けるかは、あなた次第です。ドキュメント内の複数の要素が同じクラス値を持つことができます。
スタイル シートで、クラス名をセレクターで使用する場合は、クラス名の前にピリオド (ピリオド) を入力します。
(例については、RichieHindleの回答を参照してください)
要素に id 属性を使用して、要素に ID を割り当てます。ID にどのような名前を選択するかは、あなた次第です。ID 名はドキュメント内で一意である必要があります。
スタイルシートで、ID をセレクターで使用する場合は、ID の前に番号記号 (ハッシュ) を入力します。
<div id="myStyledDiv">
#myStyledDiv{
border: 1px solid black;
}
ソース : Webplatfroms.org (この記事をすべて読むことをお勧めします)
スタイルを特定のイメージ タグに追加することができます。これは、スタイリングに HTML 属性を使用するのと同等です。
<img src="..." style="border:5px solid green" />
スタイル シートでルールを作成し、それを使用するためにイメージ タグにクラスを追加できます。
CSS:
.Picture { border: 5px solid green; }
HTML:
<img src="..." class="Picture" />