25 div+css プログラミングのヒントとコツ

25 div+css プログラミングのヒントとコツ

1. ul タグには、Mozilla ではデフォルトでパディング値がありますが、IE ではマージン値のみがあります。

2. 同じクラスセレクターはドキュメント内で繰り返し使用できますが、IDセレクターは1回しか使用できません。CSSでタグを定義するためにクラスとIDの両方を使用する場合、定義が繰り返されると、IDの重みがCLASSの重みよりも大きいため、IDセレクターによる定義が有効になります。

3. 互換性を調整するための愚かな方法 (IE と Mozilla): 初心者は次のような状況に遭遇する可能性があります。同じタグ属性を IE で A に設定すると正常に表示されますが、Mozilla では正常に表示するには B に設定する必要があります (またはその逆)。 一時的な解決策: セレクター {属性名: B !important; 属性名: A}

4. ネストされたタグのグループにスペースが必要な場合は、外側のタグのパディングを定義するのではなく、内側のタグの margin 属性にスペースを残します。

5. li タグの前のアイコンには、list-style-image ではなく background-image を使用することをお勧めします。

6. IE は継承関係と親子関係の違いを区別できません。すべて継承関係です。

7. タグにセレクターを大量に追加する場合は、CSS でセレクターをコメント化することを忘れないでください。 将来 CSS を変更するときに、なぜこれを行うのかがわかります。

8. ラベルに暗い背景画像と明るいテキスト効果を設定した場合。この時点では、ラベルの背景色を暗い色に設定することをお勧めします。

9. リンクの4つの状態を定義する順序に注意してください: リンク訪問済み ホバー アクティブ

10. コンテンツに関係のない画像については、背景を使用してください。

11. 色を定義するには、#8899FF=#89F と省略できます。

12. テーブルは、いくつかの面では他のタグよりもはるかに優れたパフォーマンスを発揮します。列揃えが必要な箇所にご利用ください。

13. <script> には言語属性がないので、次のように記述する必要があります: <script type="text/javascript">

14. タイトルはタイトルであり、タイトルのテキストはタイトルのテキストです。タイトルに必ずしもテキストを表示する必要がない場合もあるので、<h1>タイトル コンテンツ</h1> は <h1><span>タイトル コンテンツ</span></h1> に変更されます。

15. 完璧な 1 ピクセル境界テーブル (IE5、IE6、IE7、FF1.0.4 以降でテスト可能) table{border-collapse:collapse;} td{border:#000 solid 1px;}

16. タグが絶対配置を使用する場合、負のマージン値は相対配置に影響を与える可能性があります。ページが中央に配置されている場合、絶対配置を使用するレイヤーは left:XXpx 属性の使用に適していません。良い方法は、このレイヤーを相対的に配置されるラベルの横に配置し、負のマージン値を使用することです。

17. 絶対配置の場合、マージン値を使用すると、要素自体の位置を基準とした配置を実現できます。これは、ウィンドウの端を基準とした top や left などの属性を使用した配置とは異なります。絶対配置の利点は、他の要素がその存在を無視できることです。

18. テキストが長すぎる場合、長い部分は省略記号として表示されます。IE5 および FF では無効ですが、非表示にすることができます。IE6 では有効です。<DIV STYLE="width:120px;height:50px;border:1px solid blue;overflow:hidden;text-overflow:ellipsis"> <NOBR>たとえば、表の 1 行に収まらないほど長いテキスト行がある場合などです。</NOBR>

19. IE でコメントによってテキストが重複する問題が発生する場合は、コメントを次のように変更できます: <!?[if !IE]>ここにコメントを入力してください…<![endif]?>

20. CSS を使用して外部フォントを呼び出す方法。構文: @font-face{font-family:name;src:url(url);sRules} 値: name: フォント名。フォントファミリプロパティの任意の可能な値 url(url): OpenTypeフォントファイルを指定するには、絶対または相対URLアドレスを使用します sRules: スタイルシート定義

21. フォーム内のテキスト ボックス内のテキストを垂直方向に中央揃えにするにはどうすればよいでしょうか? FF で line-height および height グループを使用しても効果がない場合、解決策としては、目的の効果を達成するために上部と下部のパディングを定義します。

22. A タグを定義するときに注意すべき小さな問題: a{color:red;} を定義すると、A の 4 つの状態のスタイルが表されます。マウスが置かれたときの状態を定義したい場合は、a:hover を定義するだけです。他の 3 つの状態は、A で定義されているスタイルです。 a:link が 1 つだけ定義されている場合は、他の 3 つの状態も必ず定義してください。

23. すべてのスタイルを省略する必要はありません。スタイルシートで p{padding:1px 2px 3px 4px} が定義されている場合、後続のプロジェクトでは上部に 5px のパディング、下部に 6px のパディングを持つスタイルが追加されます。 p.style1{padding:5px 6px 3px 4px}と書く必要はありません。 p.style1{padding-top:5px;padding-right:6px;} と記述できます。これではオリジナルほど良くないと感じるかもしれませんが、自分の書き方はスタイル定義を繰り返していると思ったことはありませんか?また、下パディングと左パディングの元の値を調べる必要もありません!以前のスタイル P が将来変更された場合、定義した p.style1 のスタイルも変更する必要があります。

24. ウェブサイトが大きくなるほど、CSS スタイルも増えます。始める前に、命名規則など、十分な準備と計画を立ててください。ページブロック分割、内部スタイル分類など

25. よく使われる CSS スタイル:
-1) 漢字を両端揃えにする: text-align:justify; text-justify:inter-ideograph;

-2) 固定幅の漢字切り捨て: overflow:hidden;text-overflow:ellipsis;white-space:nowrap; (ただし、1 行のテキストの切り捨てのみ処理でき、複数行の切り捨ては処理できません。) (IE5 以上) FF では処理できず、非表示のみになります。

-3) 固定幅の中国語文字(単語)改行:table-layout:fixed; word-break:break-all;(IE5以上)FFではできません。

-4) <acronym title=”プロンプトを表示するテキストを入力してください” style=”cursor:help;”>テキスト</acronym>効果を確認するには、前のテキストにマウスを置きます。この効果は多くの海外のウェブサイトで見られますが、中国ではまれです。

-5) 画像を半透明に設定します: .halfalpha { background-color:#000000;filter:Alpha(Opacity=50)} テストは IE6 と IE5 では合格しましたが、FF では失敗しました。これは、このスタイルが IE 専用であるためです。

-6) FLASH 透過: swf を選択し、ソース コード ウィンドウを開き、</object> の前に <param name=”wmode” value=”transparent”> と入力します。上記は IE のコードです。 FIREFOXの場合は、同様のパラメータwmode="transparent"を<embed>タグに追加します。

-7) Web ページを作成するときに、マウスを画像の上に置くと画像が明るくなるという効果をよく使用します。画像置換テクニックまたは次のフィルターを使用できます: .pictures img { filter: alpha(opacity=45); } .pictures a:hover img { filter: alpha(opacity=90); }

<<:  JS クロスドメイン ソリューション React 構成 リバース プロキシ

>>:  HTMLポップアップdivはモバイルの中央揃えを実現するのに非常に便利です

推薦する

Antdesign-vueとsortablejsを組み合わせて、2つのテーブルをドラッグして並べ替える機能を実現

目次成果を達成するsortablejs の紹介具体的な実装成果を達成する最初は、antdesign ...

Vue プロジェクトでのスキャンコード決済の実装例 (デモ付き)

目次需要背景思考分析UI 表示始める1. 支払いコンポーネントテンプレートを作成する2. 支払いコン...

良い広告にはどのような特徴が必要ですか?

広告業は人間であることに似ていると言う人がいます。これは本当です。優れた広告には、優れた人間と同じよ...

axiosのシンプルなカプセル化と使用例コード

序文最近、プロジェクトを構築しているときに、リクエストのカプセル化について考え、どのようにカプセル化...

TomcatはNginxリバースプロキシのクライアントドメイン名を取得します

質問Nginx リバース プロキシの後、Tomcat アプリケーションは、クライアント ブラウザーの...

スペース均等互換性の問題を解決する2つの方法についての簡単な説明

flex は 2009 年のリリース以来、ほぼすべてのブラウザでサポートされています。シンプルでレス...

JavaScript データ構造 双方向リンクリスト

単方向リンク リストは、先頭から末尾、または末尾から先頭への方向のみを走査できます。そのため、単方向...

特定のシンボルで複数の行と列に分割するMySQLの例

一部の障害コード テーブルでは、履歴またはパフォーマンス上の理由から、次の設計パターンが使用されます...

Web ページでパラメータ名によって ActiveX コントロールのプロパティに値を割り当てる例

コードをコピーコードは次のとおりです。 <HTML> <ヘッド> <T...

Vue のクロスドメイン問題の処理と解決策の概要

ネットワークリクエストを送信すると、次の保存情報が表示されます。おめでとうございます。ドメインを越え...

MySQLのExcelへのエクスポート方法の分析

この記事では、MySQL を使用してデータを Excel にエクスポートする方法について説明します。...

MySQLのバックアップとリカバリの簡単な分析

目次1. はじめに2. バックアップとリカバリの簡単な定義3. 復旧計画で考慮すべきいくつかの要素4...

Mongodb の GUID 表示の問題の詳細な分析

問題を見つける最近、プログラムのストレージを Mongodb に移行したところ、Guid 型が書き込...

JS変数ストレージのディープコピーとシャローコピーの詳しい説明

目次可変タイプとストレージスペーススタックメモリとヒープメモリ基本的なデータ型参照タイプグラフィック...

マウスオーバーボタンアニメーションを実現する純粋な CSS3 パート 2

前の 2 つの章を終えて、ボタンのフローティング アニメーションについて新たな理解が得られましたか?...