1

サイト全体に表示されるグリフと呼ばれる画像のクラスがあります。むかしむかし、それらはすべて単に と呼ばれていましたglyph。以前は 1 つのボックスにのみ表示されていました。そのボックスは特定のサイズであり、JavaScript メソッドを使用して、テキストが常に収まるようにし、グリフが常に残りのテキストとほぼ同じ高さになるようにしました。これは簡単に行うことができ、グリフは私のスタイル シートのおかげでデフォルトで開始されました。

ここで、さまざまな量のテキストを含む複数のボックスをページごとに含めることにしました。各ボックスのサイズは個別に調整されます。サイジング ルーチンを遅らせてみましたが、これはユーザーの接続速度に大きく依存しています。サイジング ルーチンを実行しないと、まったく正しく見えないので、少なくともすべてのデフォルトの開始サイズを選択したいと思います。もちろん、ロードされるまで、javascript を使用してサイズを変更することはできません。ヘビは尻尾を食べます。

基本的に、ボックスが複数あるので、各グリフはクラス glyph:1、glyph:2 などを取得します。この数は、サイトでユーザーが送信したアイテムの数と同じくらい大きくなる可能性があります。CSS はこれをどのように処理しますか? 私が見る限り、これらの項目には基本的に 2 つのクラス名が必要です。しかし、私はそれが許可されていないことを確信しています。

必要なもの: 「glyph:」で始まるすべての画像クラスを 1em に設定します

これは存在しませんよね？グリフ:*

また、 : は css クラス名で使用するのはおそらく悪いですよね?

4

3 に答える 3

4

: 記号は使用しないでください。要素に対して複数のクラスを持つことができるので、そうしてください

<div class="glyph glyph-1">Foo</div>
<div class="glyph glyph-2">Foo</div>
<div class="glyph glyph-3">Foo</div>
<div class="glyph glyph-4">Foo</div>
于 2012-04-18T20:30:13.953 に答える
2

他の人が言ったように、クラス名にコロン記号を使用しないでください。ハイフンとダッシュは、使用に適した唯一の句読点です。

クラスでコロンを使用し、CSS コードでコロンをエスケープすることは可能ですが、非常に面倒で不要です。

第二に（そして、これは私が他の答えよりも先に進むところです）、要素に一意のクラス名を生成している場合、おそらく何か間違ったことをしています。

属性は、id要素に一意の名前を付けるためにあります。これclassは、同じクラス (または複数のクラス) を複数の要素に適用できるようにすることを目的としているため、それらすべての要素を同じようにスタイルできます。あなたはおそらくこれをすでに知っています。私が言っているのは、idではなくを使用する必要があるように聞こえるということだと思いますclass。

次へ: あなたは、2 つのクラス名が許可されていないことは確かだと言いますが、実際には許可されています。持つことは完全に許容されclass="glyph bob"、要素は classglyphと class の両方からスタイルを取得しますbob。好きなだけクラスを持つことができます。ただし、一意の名前を付けたい場合は、ID にする必要があります。

glyph*また、すべてのクラスを設定するための CSS 構文も要求します。繰り返しますが、あなたは間違っています: この構文は、拡張 attr 構文を介して存在します:

[class^="glyph"] {
    /*styles here for classes beginning with 'glyph'
}

サイジングルーチンの遅延と、それによって生じる問題について話します。これに対する 1 つの解決策は、ブラウザがどのように表示されるかを判断し終えるまで、項目を完全に非表示にすることです。それらをフェードインさせたり、意図的な効果であるかのように見せたりすることもできます。

しかし、結局のところ、なぜ画像にグリフを入れて個別にサイズを変更しているのか疑問に思っています。それはすべて少し奇妙に聞こえます。質問のあなたの説明は、あなたが何を達成しようとしているのか疑問に思っています。

画像ではなく、スケーラブルなグラフィック (SVG/VML) またはカスタム フォントをグリフに使用することを検討しましたか? カスタム フォントを使用した場合は、フォント サイズを通常どおりに指定するだけで、ブラウザにすべてを任せることができます。

その一部が役に立ったことを願っています。

于 2012-04-18T20:51:22.260 に答える
1

CSS クラス名に:記号を含めることはできません。の後のすべて:は疑似クラス ( など:hover) として解釈され、適切に解析されません。

あなたのクラスに関しては、なぜそれらはすべてユニークでなければならないのですか? クラスは一度に複数の要素を選択するように作られているので、これを行うだけです:

<div class="glyph">Foo</div>
<div class="glyph">Foo</div>
<div class="glyph">Foo</div>
<div class="glyph">Foo</div>

そして、それらすべてを 1 つのセレクターで選択します。

.glyph {
  color: red;
}
于 2012-04-18T20:27:24.920 に答える