0

cssスタイルシートの構文に少し迷いました。私のジレンマは、色が異なるか、1つはあるかもしれないが、別のタグはそれを持っていないかもしれないこと<div>を除いて、ほぼ同じスタイルの4つのタグを持っていることです。float: left

idしたがって、これらすべてに追加して、これらのスタイルステートメントをスタイルシートに移動できるようにしようと考えていました。

スタイルシートの個々のIDにどのように対処しますか？私は何かのようなものを考えてdiv#idいます。basicdivがすでに利用できないと仮定しましょう。ただし、少なくとも含む抽象的なスタイルシートタグとdisplay:block、ID、クラス、または名前でfont-size:11px各タグをアドレス指定するためのより具体的なスタイルシートタグが必要です。<div>

<div style="display:block; color:steelblue; float:left; font-size:11px;">Open Requests&nbsp;</div>
<div id="openNumber" style="display:block; color:steelblue; font-size:11px; clear:right;">13</div>

<div style="display:block; color:green; float:left; font-size:11px;">Completed Requests&nbsp;</div>
<div id="completeNumber" style="display:block; color:green; float:left; font-size:11px;">13</div>

さまざまなセレクタータイプの構文について少し説明します

洞察をありがとう

4

6 に答える 6

1

次のことを試すことができます。

css：

.floatLeft { float: left; }
.clearRight { clear: right; }
.open { color: steelblue; font-size: 11px; }
.complete { color: green; font-size: 11px; }

html：

<div id="openRequests" class="open floatLeft">Open Requests&nbsp;</div>
<div id="openNumber" class="open clearRight">13</div>

<div id="completeRequests" class="complete floatLeft">Completed Requests&nbsp;</div>
<div id="completeNumber" class="complete floatLeft">13</div>

A<div>はすでにブロックレベルの要素であるため、指定する必要はありませんdisplay: block。

于 2013-01-15T16:41:37.780 に答える
0

共有スタイルを保持するクラス.numbers（またはdivのグループ化を最もよく表すもの）を作成し、そのクラスを問題のdivに追加できます。次に、色を微調整するために、IDを使用して個々のdivをターゲットにします。

このようなものが役立つかもしれません：

CSS

.numbers {
 /* shared styles */ 
}

#one {
 /* unique styles */ 
}

#two {

 /* unique styles */ 
}

#three {

 /* unique styles */ 
}

セマンティックで意味のある方法でスタイルを整理するのは難しい場合がありますが、コードの保守を節約する時間はそれだけの価値があります。これを行う方法のより良い要約については、この記事を読むことができます。

于 2013-01-15T16:37:34.070 に答える
0

複数のクラスを使用して、シリマースタイルをグループ化します。意味的な意味を抽出してみてください。

このようなもの：

CSS：

.block11 { display:block;  font-size:11px; }
.left { float:left; }
.clear-right { clear:right; }
.steelblue { color: steelblue; }
.green { color: green; }

HTML：

<div class="block11 steelblue left">Open Requests&nbsp;</div>
<div class="block11 steelblue clear-right" id="openNumber">13</div>

<div class="block11 green left">Completed Requests&nbsp;</div>
<div class="block11 green left" id="completeNumber">13</div>
于 2013-01-15T16:46:20.673 に答える
0

類似点と相違点にクラスを使用できますid。

<div class="common" id="some-id"><!-- ... --></div>

CSS：

.common {
    display: block;
    float: left;
    font-size: 11px;
}

#completeNumber {
    color: green    
}
于 2013-01-15T16:40:07.370 に答える
0

IDは一意である必要があるため、IDを追加して、次を使用できます。

#openRegistration{display:block; color:steelblue; float:left; font-size:11px;}
#openNumber{display:block; color:steelblue; font-size:11px; clear:right;}
#completedRequests{display:block; color:green; float:left; font-size:11px;}
#completeNumber{display:block; color:green; float:left; font-size:11px;}

今、上記を考えると、私たちはそれを次のように単純化することができます：

#openRegistration,#openNumber,#completedRequests,#completeNumber{display:block;font-size:11px;}
#openRegistration{ color:steelblue; float:left; }
#openNumber{color:steelblue;  clear:right;}
#completedRequests{ color:green; float:left;}
#completeNumber{ color:green; float:left; }

または、必要に応じて、クラスを提供して使用します。

.myClass{display:block;font-size:11px;}
#openRegistration{ color:steelblue; float:left; }
#openNumber{color:steelblue;  clear:right;}
#completedRequests{ color:green; float:left;}
#completeNumber{ color:green; float:left; }

編集：または必要に応じて、複数のクラスを提供し、それを使用します：

.myClass{display:block;font-size:11px;}
.complete{ color:green;}
.open{ color:steelblue;}
#openRegistration{  float:left;}
#openNumber{clear:right;}
#completedRequests{ float:left;}
#completeNumber{ float:left; }


<div class="myClass complete" ...
于 2013-01-15T16:40:47.833 に答える
0

いくつかのCSSクラスを定義し、必要に応じてそれらを要素に割り当てることができます。ほんの一例：

CSS：

.myDiv {
  display: block;
  font-size: 11px;
}

.left { float: left; }
.clear-both { clear: both; }
.steelblue { color: steelblue; }
.green { color: green; }

HTML：

<div class="myDiv left steelblue">Open Requests&nbsp;</div>
<div class="clear-both"></div>
<div id="openNumber" class="myDiv steelblue">13</div>

<div class="myDiv green left">Completed Requests&nbsp;</div>
<div id="completeNumber" class="myDiv green left">13</div>

このようにして、クラスを分離し、本当に必要な場合にのみ使用できます。

于 2013-01-15T16:43:26.947 に答える