1

HTMLページの周りに配置されたコンテンツを含むバブルを作成したいと思います。そこで、.bubble CSSクラスを作成し、位置の値をインラインスタイルとして配置しました。これは私にいくつかのかなり長い行を与えました。私が使用したプログラミング言語のスタイルガイドは、最大行長を指示し、長すぎる行をどのように分割するかを指定します。何かのようなもの

<div class="bubble"
    style="top: 10%;
    left: 40%;
    right: 60%;
    width: 480px;
    height: 295">
    Content.
</div>

...ばかげているように見えます。これの良い形は何ですか？

4

3 に答える 3

4

私はむしろそれを一行で見たいと思います。そうは言っても、そのように壊れているのはほとんど見たことがありません。また、場合によっては、ブラウザが改行を削除すると思います。

私はインラインCSSを見たくないのですが。

ただし、インラインCSSが必要な場合は、80文字程度の「画面に収まるもの」の標準が引き続き有効であると思います。

編集

念のために言っておきますが、インライン CSS のガイドラインを簡単に検索したところ、実践として強く反対しているサイトを見つけたことがあります。あなたの質問がインライン CSS に関するものであることは知っていますが、私はdon'tと言う義務があると感じています。これは、関心の分離の概念を破ります。HTML と CSS を緊密に結合します。新しいデザインで遊びたい場合はどうしますか？ここで、html を直接編集する必要があり、新しい CSS ファイルを指すだけではなく、フローやページを完全に壊してしまうリスクがあります。

特定の要素に特定の CSS が必要な場合は、その要素に ID を付けて、外部の CSS ドキュメントに挿入します。

于 2012-10-16T00:44:13.747 に答える
1

編集：左と右の両方の宣言を持つ必要はありません。要素が左から40％であることをブラウザに伝えると、要素は右から60％であることがわかります。これにより、数文字のコードが節約され、結果が変わることはありません。

あなたはバブルCSSクラスを作りませんでした。バブルクラスを作成し、インラインcssをdivタグに追加しました。かなりの数の選択肢があります。なぜあなたがそれらを選ばなかったのかよくわかりません。

行の長さが問題になる場合は、スペースを削除してください。あなたはそれらを必要とせず、そしてラインを短く保ちます。

<div class="bubble" style="top:10%;left:40%;width;480px;height:295;">
Content.
</div>

ただし、ここで別の投稿に同意する場合は、インラインcssを使用しないでください。それは悪い習慣です。（Tumblrテーマのように）スタイルをファイル内に含める必要がある場合は、スタイルタグ内に配置します。

<style> .bubble {top:10%;left:40%;width:480px;height:295;}
</style>

または、私たちのほとんどが行うことを実行し、headタグの間にリンクを付けて別のcssファイルにスタイルを配置します。

 <link href="yourstyles.css" rel="stylesheet" />
于 2012-10-16T00:53:48.307 に答える
0

jsとjQueryを介してこれを行うことを検討しましたか？または、次のようにすることもできます。

$('.someBubble').css({
top: 10%;
    'left': '40%',
    'right': '60%',
    'width': '480px',
    'height': '295px'
});

使用する必要のある制約や制限がわからない場合は、少なくともスタイルがインライン化されないようにすることができます。

于 2012-10-16T01:05:25.017 に答える