4

フォールバックとしてサイトの代替デザインを作成しようとしています。システムの構築方法を実際に変更することはできません。メインのスタイルシートが読み込まれ、その後に 2 番目のスタイルシートが読み込まれます。2 番目のスタイルシートを制御できます。特にフォーム要素など、リセットしたい CSS がたくさんあります。

しかし、私はそれに苦労しています。たとえば、次の場合<button>:

background: rgb(88,222,255);
border-radius: 4px;
border: 1px solid #91d7eb;
box-shadow: 0px 2px 4px 0px rgba(1, 75, 138, .8);
color: #FFF;
cursor: pointer;
font-family: "Graphic-Font";
font-size: 25px;
font-weight: bold;
text-shadow: 0px 1px 3px #014b8a;
padding: 10px 40px;

、border-radius: none などを設定することはできbackground: noneますが、ボタンにはデフォルトのブラウザー スタイルではなく、スタイルがありません。ページ上の他の多くの要素の中で、フォーム要素をデフォルトのブラウザー スタイルにする必要があります。しかし、少なくともフォーム要素のスタイルを解除することはできないようです。

明確 にするために質問を単純化します。どのようにスタイル<button>をデフォルトに戻すのですか?

4

2 に答える 2

1

出発点としてCSSリセットを使用することをお勧めします（Eric Meyersがおそらく最も有名です）。

独自のスタイルを設定したくない場合は問題が発生していると思いますが、ブラウザのデフォルトに戻します（たとえばmargin:0;、すべてを必要としない場合は、デフォルトの大きなマージンが必要です。H1デフォルトは小さい方pなど

実際にユーザーエージェントのスタイルシートのコピーを取得し、それらを変更してより具体的にし、上書きするように含めることができます。これは、多くのデフォルトのUAスタイルシートのコピーがあるサイトです。ここでの問題は、すべてのブラウザーが独自のスタイルシートを使用することです。そのため、ブラウザーが選択的なスタイルシートを検出して提供しない限り、そのブラウザーで通常行われているようには見えません。しかし、それは大丈夫だと思います。実際には、好きなブラウザのデフォルトを選択して、すべてのブラウザをそのように設定することをお勧めします。または、デフォルトのブラウザスタイルについてW3Cの提案を使用することもできます。

ただし、フォーム要素のスタイリングは地獄であるため、これらすべてで問題が解決するわけではありません。スタイルを適用するとすぐに、一部のブラウザはフォーム要素のレンダリングモードを切り替えるため、元のスタイルに戻すことはできません。たとえば、IE7は角の丸みをサポートしていませんが、Windows OSスタイルでレンダリングされるため、デフォルトのボタンの角は丸みを帯びています。ただし、ボタンに境界線やその他のスタイルを指定するとすぐに、Windowsの陰影の付いた丸みを帯びた角のデフォルトの外観が失われ、画像を使用せずに元に戻すことはできません。

だから本当に、私はブラウザを元のデフォルトスタイルに戻そうとするために撃つことはしませんでした。UAのデフォルトのスタイルシートを使用し、それを変更して、一種の汎用的なクロスブラウザーのクロスシステムのデフォルトを作成します。ネイティブのスタイルなしコードのようには見えませんが、十分に近く見えます。

于 2012-07-26T18:40:08.623 に答える
0

CSS 固有性がどのように機能するかを理解する必要があります。他のルールよりも具体的なものにすることで、CSS ルールを上書きできます。

例えば：

<div class="content">
    <div class="wrapper"><span>Hello World</span></div>
</div>

CSS:

.content .wrapper span { ... }
.wrapper span { ... }

この場合、最初の宣言は「より具体的」であるため、2 番目の宣言を上書きします。通常は、ツリーを 1 レベル上に移動して、ラッピング要素またはラッピング クラスを指定して、内部要素のルールをオーバーライドできます。これは、WordPress など、メインのスタイルシートにアクセスできない、またはそのままにして必要な部分のスキンを変更したいだけの多くの CMS システムを実際に処理しています。

記事を読んでください、それは重要です。

CSS の特異性: 知っておくべきこと

于 2012-07-26T18:06:10.283 に答える