3

どうしても HTML ボタンのスタイルを設定する必要がある場合、それらのいくつかを強調する正しい方法は何ですか? たとえば、「カートに追加」は通常、目立たせるために視覚的に強調されます。

オプション 1 - em または strong + css で送信をラップ

オプション 2 - クラス + CSS

オプション 3 - ?

4

9 に答える 9

6

CSSは行く方法です。たとえば、Facebook の「メモ」アプリケーションでは、「公開」ボタンは強い青色で、その他のボタンはグレーで表示されます。これはすべて、CSS クラスと ID を使用して行われます。

最終的に、CSS に関するセカンドオピニオンが必要な場合は、信頼できるサイトを探す必要があります。Firebugのようなツールを使用すると、スタイリングがどのように行われるかを正確に簡単に確認できます。

于 2009-05-18T17:07:29.767 に答える
2

クラスはおそらく最も柔軟なソリューションです。太字や斜体以外のことをしたい場合は、何らかのクラス/ID を使用する必要があります。

ただし、このアイテムがコンテナにある場合は、そのコンテナを使用してボタンを選択できます。

html

<div class="foo">
  <input type="submit" />
</div>

CSS

.foo input
{
 ...some styles
}

ただし、入力にクラスを配置することは完全に受け入れられます。前の方法は、コンテナーに既にボタンがあり、余分なマークアップを追加したくない場合にのみ使用します。

于 2009-05-18T17:05:39.317 に答える
1

ボタンを強調したい場合、最もセマンティックな表現は、タグ (または使用しているもの) をタグでラップし、CSS でスタイルを設定することだと思います。<button><input type="submit"><em>

em button {
    color: blue;
    font-style: normal;
    font-weight: bold;
}

(イタリック体と太字は、ほとんどのブラウザーの既定の視覚スタイルである可能性がありますが、これは単なる慣例であることを忘れないでください<em>。<strong>何かを「強く」強調していない場合は、<em>太字で表示したい場合でも使用してください。)

于 2009-05-18T17:08:29.967 に答える
1

CSS2+ では、オプション 3 を使用できます: CSS のみ

input[type="submit"] {
    border: 3px solid blue;
}

詳細: http://www.w3.org/TR/CSS2/selector.html

于 2009-05-18T17:40:00.373 に答える
1

正しいセマンティックな方法は次のようになります

<button><em>label</em></button>

しかし、IE は複数の要素をサポートしていないため、<input type="button"> を使用する必要があります。これを em などでラップするのは良くありません。

私は強く好むだろう

<input type="button" class="emphasized"/>

か何か..

于 2009-05-18T17:33:33.817 に答える
0

イメージボタンを使用します...うまく設計されたアイコンの美しさに匹敵する強調はありません...

「百聞は一見に如かず！」

于 2009-05-18T17:06:54.480 に答える
0

この種の問題について考える良い方法は、音声ブラウザーに何を求めているかを考えることです。この場合、ページが読み上げられている場合、ボタンを他のボタンとは異なるトーンまたは音量で強調することもできますか。その場合は、セマンティック マークアップを使用して、これが単なるプレゼンテーションではなく強調であることを示す必要があります。

<em> は、個々の単語を強調して文のどこにアクセントを置くべきかを示すために実際に使用する必要があるため、ボタンが文の途中に表示されない限り、入力要素を <em ではなく <strong> で囲むことをお勧めします>。

さらに、CSS を追加して、必要な視覚効果を得ることができます。

于 2009-05-18T20:13:26.303 に答える
0

開かれた質問をして、正しいが異なる答えをたくさん得る...

ほとんどの人は、多くのブラウザーの問題を回避するため、ボタンとして画像を使用します。すべてのブラウザで同じように表示されることがわかっています。

CSS を使用して、送信に使用する要素のスタイルを設定できます。その方法で、<input type="submit"> とスタイルを適切に使用するか、<button type="submit">[ここにラベルを挿入]</button> を使用できます。スタイリングしやすい後者の方が好きですが、それは主に個人的な好みです.

最善のアドバイスは、周りを見回して、あなたが望むものに似たものを見つけたら、彼らがどのようにそれをしたかを見ることです.

于 2009-05-18T18:03:34.660 に答える