入れ子になったルール。 HTML ドキュメントを構築するためのルール ルール HTML 一般ファミリー ルール 2
ブログ サイトの読者の皆さん、こんにちは。 今日は、上の記事で始めた会話を続けることを提案します。 さらに早い段階で、カスケード スタイル シートとは何かを知り、その意味などを学びました。
このブログで既に公開されているカスケード スタイル シートに関する資料はすべて にあります。 今日は、まずセレクターを組み合わせてグループ化する方法について説明し、次に HTML コード内の同じ要素に適用されるルールを詳しく見ていきます (セレクターのカウントと style 属性での記述ルールが重要です)。
CSS でのセレクターの組み合わせとグループ化
前回の記事では、次の 7 つのタイプを検討しました。
これら 7 つの可能なビューのうち、CSS で組み合わせを作成できます。 これから行うすべての組み合わせは (祖先 - 子孫、親 - 子、兄弟 - 姉妹) に直接関係しています。
最初のタイプの組み合わせは次のように呼ばれます。 コンテキストセレクター。 「祖先 - 子孫」の原則に従って、HTML コード要素の関係が考慮されます。
別 セレクターの組み合わせはスペースで区切って記述します、右から左に読む必要があります。 それ。 CSS ルールは、この組み合わせの最後のもの (右端) にのみ適用され、それより前のすべてのものでは、ルール (強調) のより正確な適用 (ターゲティング) を指定することのみが可能になります。
最初の例では、祖先として Div 要素を持つすべての B 要素 (太字) が緑色になることを示しています。
上記のコードでは、下線付きの部分のみが緑色になります。 その先祖の中には Div があり、B タグで強調表示されているコードの 2 番目のフラグメントは、デフォルトで選択されている色のままになります。これは、Div コンテナがその先祖の中にはもう含まれていない (P と Body のみ) ためです。
このような組み合わせはどのブラウザでも機能します。
次に考えられる組み合わせは、 子セレクターこれは、「親 - 子」タイプのコード要素間の関係の原則に基づいて構築されています。
区切って書かれています もっと身近なもの (>):
このエントリはブラウザによって次のように解釈されます。 for では、Div コンテナである「親」 (最も近い祖先) が赤色で強調表示されます。
上の例では、親 (最も近い祖先) である Div コンテナに直接囲まれているため、アウトラインで囲まれた段落のみが赤く表示されます。 上記の子セレクターの例を次のように変更すると、次のようになります。
本体＞P（カラー：レッド）
すると、最後の段落のみが赤で強調表示されます。 その親は Body タグであり、最初の 2 つの段落はデフォルトの色のままになります (Body はその親ですが、親である Div ではありません)。 子セレクター Ie6ブラウザでは動作しません.
CSS コードでセレクターがグループ化される方法と理由
最後の組み合わせは次のように呼ばれます 隣接するセレクターまた、「姉妹 - 兄弟」タイプの HTML コード要素間の関係の原則を満たしています。 区切り文字として「+」または「~」を使用できます。
このエントリは、要素 I (斜体) の左隣 (コードの上側) が要素 B (太字) である場合にのみ、要素 I (斜体) の内容が赤色になることを意味します。 たとえば、この例ではこの条件が満たされます。
隣接するセレクターを CSS コードで次のように記述すると、次のようになります。
H1～P（カラー：レッド）
これは、コードの上位に隣接する H1 要素 (見出し) を持つすべての段落 (P) が赤色になることを意味します。 これは、特に隣接する要素 (「姉妹 - 兄弟」タイプの関係) を指します。 以下の例では、指定されたセレクターは丸で囲まれた段落と一致します。
Ie 6 ブラウザーでの隣接するセレクターの組み合わせも、残念ながらサポートされていません。 Ie 6 では、最初のタイプの組み合わせのみがサポートされますが、Ie 7 以降では、他のすべての組み合わせがサポートされます。 他のブラウザでは問題ないはずです。
CSSのセレクター グループ化することもできます。 たとえば、それらの一部が 1 つ以上の同一のルールを使用している場合、それらを 1 つのグループに結合して、Css コードの量を減らすことができます。
スクリーンショットに示されている例では、ヘッダー セレクター (h1 ～ 3) ごとにこの操作が繰り返されているため、このプロパティの値を変更する場合に複雑さ (複数の作業) が発生する可能性があります。 したがって、グループ化されたエントリの 2 番目のオプションの方が少し望ましいように見えます。
グループ化する際の注意点 セレクターはカンマで区切って記述します。 同一のルールがより多く存在する場合、コードの節約はより顕著になります。 そして、それらの独自のルールは依然として個別に書き留める必要があります。
CSS プロパティの優先順位 (重要の有無)
ここで、この HTML コード要素にスタイルが指定されていない場合にブラウザがどのスタイルを使用するかを考えてみましょう。 そしてこれについては、すべてが説明されている対応する仕様があります。
ご覧のとおり、Html と Css が最終的に分離されました。 それらの。 純粋な HTML コードの場合でも、ブラウザはスタイル シートのデフォルト プロパティを使用します。 したがって、デフォルトのプロパティは次のとおりです。 優先順位が最も低い.
ユーザーがブラウザ設定で割り当てたプロパティの方が優先されます。 これらのスタイルは、このブラウザで表示するすべてのドキュメントに適用されます。
確かに、すべてのブラウザにこの機能があるわけではありませんが、少なくとも Ie と Opera にはあります。 それらの。 必要に応じて、ユーザーはスタイル マークアップのソースとして独自の CSS ファイルを含めることができます。
たとえば、Ie の場合、これを行うには、右上のメニューから「ツール」-「インターネット オプション」を選択し、最初の「全般」タブで下部の「外観」ボタンをクリックする必要があります。 開いたウィンドウで、「カスタム スタイルを使用したデザイン」ボックスをオンにし、「参照」ボタンを使用して、コンピュータ上で必要な CSS スタイル マークアップ ファイルを見つける必要があります。
それらの。 ユーザーは、ブラウザーで開いているサイトを、CSS ファイルに記述されている要件に従って表示することができます。 いわゆる 「カスタムスタイル」これらは、デフォルトの仕様で定義されているスタイルよりも優先されます。 しかし、いわゆる作者のスタイルはさらに優先されるでしょう。
つまり、私 (サイト開発者) が HTML コード要素のデザインでデフォルト以外のスタイルを使用したい場合 (仕様に記載されていることを覚えておいてください)、ユーザーは私のデザインをオーバーライドすることはできません。彼自身の Css ファイル。
ユーザーはこれを受け入れることを強制されるのでしょうか? いいえ。 彼にはチャンスがある 重要を追加して CSS プロパティの優先度を上げます。それぞれの最後に。 この単語はスペース文字で区切られ、その前に感嘆符が付けられて書かれます。
P (色:赤!重要;)
ユーザーがブラウザに接続した自分のスタイル ファイルに「重要」と同じプロパティがある場合、すべての段落が赤色で表示されます。 ただし、サイトの作成者 (開発者) は、このプロパティに [重要] を使用することもできます。 その場合、誰が勝ち、誰の優先順位が高くなりますか?
私たちはそう決めました 重要なカスタム スタイル重要の有無にかかわらず、いずれの場合も作成者のスタイルよりも優先されます。
スタイル プロパティの優先順位に関して提示されたすべての情報をリストの形式でまとめてみましょう。 優先度は上から下に低くなります。
- 重要なカスタム
- 重要な著作権
- 著作権
- カスタム
- 仕様の Html 要素にデフォルトで受け入れられるスタイル (作成者もユーザーも他に何も指定していない場合)
それらの。 「重要」を指定しない場合は、作成者のスタイルがより重要になり、「重要」を指定すると、ユーザーのスタイルが最も重要かつ優先されます。 さて、ここで作成者のテーブルを扱いましょう。ユーザーが何をするかは私たちには分からず、闇に包まれているからです。
著者スタイルで CSS プロパティの優先順位を上げる方法
いよいよ質問に移ります カスケードCSSスタイルシート。 わかりやすくするために、例を挙げて見てみましょう。 次の Html 要素 (Div コンテナ内の段落) を含むコードがあるとします。
コンテナの内容
まず次のプロパティを書き留めましょう。
P (色:赤) .sbox (背景:#f0f0f0)
その結果、最初のプロパティは段落 (P タグによって形成されているため) と、この段落にもある「sbox」クラスを持つ要素の灰色の背景を設定するプロパティの両方に適用されます。
ここで、(クラスの) 2 番目のセレクターにもう 1 つのプロパティを追加しましょう。これは最初の行と競合します (両方とも を設定しますが、異なる値を使用します)。
P (色: 赤) .sbox (背景:#f0f0f0;色: 青)
これにより、段落のテキストの色が赤ではなく青に変わります。
なぜ？ これは、同じ Html コード要素が複数の同一のルールを一度に受け取ったが、値が異なり、Css コード内の異なる場所から受け取った場合に競合を解決する方法とまったく同じであるためです。 どのルールの優先度が高いかを判断するには、そのセレクターを数える必要があります。
これ以外にも自分で セレクタには優先度に応じたグラデーションがある。 ID が最も優先されます。 この例では、ID (#out) の優先順位がタグ セレクター (p) の優先順位よりも高くなるため、テキストの色は青になります。
P（カラー：レッド） #out（カラー：ブルー）
優先順位ラダーのさらに下には、クラス、疑似クラス、および属性のセレクターがあります。 次の例では、タグ (p) が再度再生され、段落テキストの色は青色になります。これは、より高い優先順位 (クラス) のセレクターと競合するためです。
P (色:赤) .sbox (色:青)
そうですね、優先順位が最も低い (重みが最も低く、そのような突き合わせに変更を加えないユニバーサル * は除きます) のは、タグと疑似要素のセレクターです。
Div p (色: 赤) p (色: 青)
結果の段落テキストは何色になりますか? そう、赤いから… このプロパティには、より多くのタグ セレクターがあります (2 つ対 1 つ)。 ああ、なんと。 それらの。 ID が最初に考慮されます。 勝者が特定されない場合は、クラス、疑似クラス、および属性が考慮されます。 そこで何も解決されなかった場合、またはそのようなものが見つからなかった場合は、タグと疑似要素のセレクターが考慮されます。
しかし、勝者が現れず、競合するクラスのセレクターが合計で同じ優先順位を持つことになる可能性は十分にあります。 たとえば、Div コンテナに囲まれた長い苦労の段落の場合は次のようになります。
コンテナの内容
次のような CSS コードを記述することも十分に可能です。
Div.box #out(color:red) #in p.sbox(color:blue)
そして、段落テキストは何色にすべきでしょうか? どちらの組み合わせも、私たちの段落を正確に説明しています。 最初のプロパティは、通常どおり、右から左に読む必要があります。これらのプロパティ (色: 赤) を、Div コンテナの内部 (「先祖」の中にある) のどこかにある ID #out の要素に適用します。 class.box (div.box)。 私たちの段落と完全に一致します。
2 番目の組み合わせ: これらのプロパティ (color:blue) を、ID #in を持つ任意の要素内にある sbox クラス (p.sbox) を持つ段落要素に適用します。 繰り返しますが、これは私たちの段落を完全に説明しています。 セレクターを数えてみましょう。
ID は両方の組み合わせで 1 回発生します。クラスについても同じことが言えます。 残っているのはタグ セレクターを数えるだけですが、これらは両方の組み合わせで同じ回数 (1 回) 使用されます。 待ち伏せ。
分かりました 同等の優先順位同じプロパティが異なる値 (テキストの色が赤または青) を持つ。 ブラウザはこのジレンマをどのように解決するのでしょうか?
ルールはここに適用されます - 最後は誰ですか、 彼は正しい。 したがって、この例では、このプロパティ (color:blue) がコードの下位にあるため、段落テキストの色は青になります。 これらのルールが逆の場合:
#in p.sbox(色:青) div.box #out(色:赤)
その結果、段落テキストの色が赤に変わります。 Q.E.D. たとえば、任意の組み合わせに別のタグ セレクターを追加できます。コード内でそれが下位にない場合でも、スケールを有利に傾けます。
Body #in p.sbox(color:blue) div.box #out(color:red)
この場合、段落の色は青に変わります。 ユニバーサル セレクター「*」は、優先順位の計算にはまったく影響しません。 ちなみに、上記では、「重要」を追加して CSS ルールの優先度を上げる方法を説明しました。 この例では、次のようになります。
P (色:緑!重要) #in p.sbox(色:青) div.box #out(色:赤)
この場合、段落テキストは何色になりますか? もちろんグリーンです。 そして、何も数える必要さえありません。 重要な追加スタイル プロパティに追加すると、コード内のどこにあっても、セレクターの数に関係なく、この物議を醸す問題が明確に解決されます。
ただし、プロパティの優先度を無条件に高める唯一の方法は「重要」ではありません。 増やす 2 番目の方法は、スタイルを使用することです Style 属性のプロパティ必要な HTML 要素。
それらの。 同じ辛抱強い P タグ内に、任意の色を指定する Style 属性を追加します。
コンテナの内容
それでおしまい。 これで、外部スタイル シート ファイルまたは Style Html コード タグ内でこの要素にどのようなプロパティが指定されているかに関係なく、段落テキストの色は黄色になります。
ただし、「重要」のプロパティに勝つことはできません。 それらの。 ルール「p (color:green ! important)」を追加した最後の例では、style="color: yellow" であっても、テキストの色は緑色のままです。
実際、2 つのルール (外部スタイル シート ファイルとスタイル属性で重要) の優先順位は等しいため、セレクターのカウントに進む必要があります。 本当に style 属性内に含めることができますか?
はい、存在することはできません。つまり、style 属性に記述されたルールは、セレクターの数が少ないという理由だけで、常に 重要 のルールに負けます (ゼロはどの数値よりも小さくなります)。
さて、それではどうでしょうか？ Css プロパティを最優先します? そうです、それは style 属性に、そして Minimum を付けても書かれます:
コンテナの内容
この場合、段落テキストの色は黄色になり、作成者のスタイルでこれを中断することはできなくなります。 私たちはスタイルを設定する絶対的な方法を見つけました。 これを中断できるのは、独自のスタイル ファイルとこれに指定された Minimum プロパティを持つユーザーのみです。
それでは作曲してみましょう 優先順位に影響を与える要因のリスト著者のスタイルのプロパティを降順で並べたもの:
- 必要なタグの style 属性にプロパティを重要とともに指定します
- 外部スタイル シート ファイルまたは HTML コード内のスタイル タグのプロパティに「重要」を直接追加する
- 要素では、style 属性でこのプロパティを設定するだけで済みます。
- 特定のプロパティに対して多数の ID を使用する
- より多くのクラス セレクター、疑似クラス、または属性の使用
- より多くのタグセレクターと疑似要素の使用
- CSS コード内のプロパティの配置を低くします。他のすべての条件が等しい場合
実際、style 属性のルールが使用されることはほとんどありません (この場合、個別の CSS ファイルではなく、サイト コード全体に変更を加えることがどれほど難しいかを想像してください)。
この属性は主に、何かをすばやくテストする必要がある場合に使用されます。 また、他の人の Html ページにコードを挿入する場合にも便利です。このページには独自のスタイルがあり、挿入した要素を継承 () できます。
自分のコードを他の人のページに挿入する理由とその方法は? その必要はないかもしれませんが、Yandex と Google は他の人のサイト (当社のサイト) で、またはその上でこれを行います。
広告ブロック コードのすべての要素に style 属性を追加し、プロパティを指定し、重要を追加すると、広告コードが何らかの方法で変更されることを心配する必要がなくなります (ただし、Yandex 広告は CSS を使用して変更できます)そして重要なことに、どうやら彼らはこの方法を使用していないようです）。
頑張って！ ブログサイトのページでお会いしましょう
興味があるかもしれません
タグ、クラス、ID、ユニバーサル セレクター、および最新の CSS の属性セレクター 
CSS の疑似クラスと疑似要素のセレクター (hover、first-child、first-line など)、HTML コードのタグ間の関係 
リスト スタイル (タイプ、画像、位置) - HTML コード内のリストの外観をカスタマイズするための CSS ルール 
CSS の目的、カスケード スタイル シートを HTML ドキュメントに接続する方法、およびこの言語の基本構文 
CSS - とは何ですか。スタイルとリンクを使用してカスケード スタイル シートを HTML コードに接続する方法 
CSS の寸法単位 (ピクセル、Em および Ex) と継承ルール 
CSS の背景 (色、位置、画像、繰り返し、添付ファイル) - Html 要素の背景色または背景画像を設定するためのすべて 
サイトの CSS ファイル内の未使用のスタイル行 (余分なセレクター) を見つけて削除する方法 CSS を使用した内部リンクと外部リンクの異なるスタイル
ルールは私たちの世界の一部であり、常に私たちの日常の行動を導きます。 私たちの生活のほぼすべての分野にルールがあります。行動のルール、エチケットのルール、道路を横断するルールなど、リストは無限です。
ルールは何ですか? これは、従うか従わなければならない一連の指示です。 ルールを暗示する、またはルールに言及する英語の単語は数多くあります。
- 注意 - 警告
- 戒め – 命令、指示
- 道順 - 指示
- 警告 - 警告
- ガイド
- ガイドライン
- 説明書 - 説明書
- 法律 - 法律
- ポリシー - 設定
- 手順
- 規制 - ルール
- 警告 - 警告
Googleショートコード
ルールは私たちに毎日影響を与え、最も簡単な場所であっても避けるのは困難です。たとえ通りを歩いているだけでも、従うべきルールの警告や指示を与える周囲に掲示されている標識をすべて見逃すことはできません。 ルールを説明する最も簡単な方法は、それを本に書き留めるか、誰もが見える看板を立てることです。 ここでは、道路や公共の場所でよく見かける警告標識と呼ばれる標識の形で掲示されているルールをいくつか紹介します。
- サイクリング禁止 – 自転車に乗ることはできません
- 立ち入り禁止 – 立ち入りは禁止されています
- スケート禁止 - ローラースケートはできません
- 対向自転車に注意してください - 対向自転車に注意してください
- 立ち去ってください = このエリアをブロックしないでください – このエリアを占有しないでください
- ここではガス缶にガスを入れることはできません - ガスボンベにガスを入れることはできません
- 毒＝食べてはいけない – 毒＝食べてはいけない
- 禁煙 - 禁煙
- 道路を横断する人に注意してください - 歩行者、注意してください
- 駐車禁止 - 駐車禁止
- ゴミを落とさないでください - ゴミを捨てないでください
- 子供不可 - 子供不可
- 写真撮影禁止 - 写真撮影は禁止されています
- 犬の後は片づけてください – 犬の後は片づけてください
- 死の危険 – 危険、高圧電気が近くにある – 危険! – 危険な高電圧
- 唾吐きは禁止 - 唾を吐くことはできません
ご覧のとおり、私たちの周りにはたくさんのルールがあり (ルールは私たちの周りにたくさんあります)、私たちはそれらに従わなければなりません。ただし、時にはルールを守らない人、ルールを破る人、またはルールに反する人もいると言わざるを得ません。ルール（ルールに反する）、時には「捕まって」罰せられる（罰せられる）こともあります。 ルールを破った場合、金銭の支払いを強制される可能性があります。 罰金/罰金、あるいはそれ以上の罰金が科せられ、警察署に行くことを強制される可能性があります。
ルールを破ったことがありますか? ルールを常に守る人を「順法者」と呼び、ルールを破る人を「法破り者」と呼びます。
最後に、皆様の「ご多幸」をお祈り申し上げます。 、「ルールを守ろう！」、「トラブルに巻き込まれないように！」。
正しいCSSコードの書き方は？
基本を知らなければ先に進むことはできません。 さらに、これらの基本は潜在意識のレベルまで訓練されなければなりません。 きれいでわかりやすいコードを書くためのルールをすべて暗記し、それをあらゆる場所に適用する必要があります。 現在のプロジェクト、あるいは多くても次のプロジェクトからすぐに始めましょう。 これはあなたのCSSバイブルになります
以下に、ユーザーフレンドリーでプロフェッショナルな CSS コードを記述するための 15 の黄金律を示します。
1) CSS-Resetを使用する
CSSリセット- これは、スタイル ファイルの先頭に記述される特定のコードです。このコードでは、すべての値がリセットされ、すべてのスタイルに対してすべての基本パラメータが設定されます。おそらく、特定の ID ごとに記述する必要があります。 /クラス。 これにより、後でコードを短縮できるほか、ブラウザごとの表示の違いを避けることができます。
http://meyerweb.com/eric/tools/css/reset/index.html から引用した CSS-Reset の例を次に示します。
/* v1.0 | 20080212 */ html、本文、div、span、アプレット、オブジェクト、iframe、h1、h2、h3、h4、h5、h6、p、blockquote、pre、a、abbr、頭字語、アドレス、big、cite、code、del , dfn, em, フォント, img, ins, kbd, q, s, サンプ, 小さい, ストライク, 強い, サブ, sup, tt, var, b, u, i, センター, dl, dt, dd, ol, ul 、li、フィールドセット、フォーム、ラベル、凡例、テーブル、キャプション、tbody、tfoot、thead、tr、th、td (マージン: 0; パディング: 0; ボーダー: 0; アウトライン: 0; フォント サイズ: 100%;垂直配置: ベースライン; 背景: 透明; ) 本体 (行の高さ: 1; ) ol, ul (リストスタイル: なし; ) blockquote, q (引用符: なし; ) blockquote:before, blockquote:after, q: before, q:after ( content: ""; content: none; ) /* フォーカス スタイルを定義することを忘れないでください。 */:focus (outline: 0; ) /* 何らかの方法で挿入を強調表示することを忘れないでください。 */ ins ( text-decoration: none; ) del ( text-decoration: line-through; ) /* テーブルのマークアップにはまだ「cellspacing="0"」が必要です */ table ( border-collapse: Collapse; border-spacing : 0; )
2) 略語を使用する
たとえば、長い文章を書くには、
境界線上部: 5px; 境界線右: 10px; ボーダー下: 15px; 境界左: 20px;
簡単に書くことができます:
境界線: 5 ピクセル 10 ピクセル 15 ピクセル 20 ピクセル;
つまり、上から時計回りに開始します。
主にボーダー、マージン、パディング、フォント、背景が省略されています。
これについて詳しく見ることができます
ただし、色は次のように減らすことができます。
カラーコードが 3 桁の繰り返しで構成されている場合は、これら 3 桁を書き留めるだけで済みます。
例: #FFFFFF は #FFF と書くことも、#990055 は #905 と書くこともできますが、#F091A4 は省略できません。
3) コメントを使用する
コメントは必要に応じて使用してください。コメントはコードを整理するのに非常に役立ち、自分自身やコードを扱う人にとってコードをより理解しやすくします。
次のようになります。
/* コメントはここに */
コメント：
a) スタイル ページのタイトル - コードの作成者といつ書かれたかを書きます。
b) スタイル セクションにマークを付ける - これにより、すべてのコードがセクションに編成されます。
例えば：
c) 問題領域についてコメントします。 たとえば、ブラウザによってページが異なる可能性があるものです。次に例を示します。
入力 /* IE6 の問題 */
d) 一緒に働く人たちに小さなコメントを書きます - たとえば、何かを改善する必要がある場合。
4) 花の凡例を追加する
小さな CSS ファイルを使用すれば、サイトのすべての色を追跡することは難しくありません。
しかし、5000 行のコードがある場合はどうなるでしょうか? - 間違った色の使用を許可することはできません。
この目的のために、色の凡例、つまりファイルで使用する色のリストがあります。 例えば：
/* /* 水色: #4595be /* ダークブルー: #367595 /* リンク用の赤: #9F1212 ************************** ******/
5) Position:realative と Position:absolute が何であるかを覚えておいてください
ほとんどの初心者のレイアウト設計者はこれらの概念に混乱しますが、混乱を避けるためのルールがあります。
位置:絶対オブジェクトをページに対して相対的に配置します。HTML ストリーム内のどこにオブジェクトがあるかは関係ありません。 デフォルト値は左が 0、上が 0 です。
通常、このオプションは不便であり、オプションが限られているため、使用されません。 しかし、あなたにとって役立つのは、要素の親 (「ラッパー」) を Position: realtive に設定すると、Position:Absolute がすでに位置合わせされることです。 親の左上隅を基準にして。 したがって、必要に応じてこのプロパティを追加できます。 写真で明らかに：
6) ハッキングの使用を避ける
場合によっては、IE6 や IE7 などのブラウザーが単にハッキングの使用を強制するだけです。 カーキはバリデーターにとって即時エラーです。 したがって、ブラウザごとに特別な CSS ファイルに配置します。
各ブラウザのハッキングの特別なエントリと、それらを別のファイルに入れる方法を確認できます。
7) 場所の説明に余白を使用する
これはあまり注目されることではありませんが、異なるブラウザ間での問題を回避するのに役立ちます。
考え方は次のとおりです。親要素でパディングを使用する代わりに、子要素でマージンを使用します。 したがって、代わりに
#main-content (パディング左: 10px)
#メインコンテンツ ( ) #メインコンテンツ #左列 ( margin-left: 10px )
パディングを使用することに問題はありませんが、マージンを使用した方が良いことが経験的に示されています
8) フロートを使用する
要素に float を割り当てたい場合は、その親に書き込みます オーバーフロー:非表示
Ul (オーバーフロー: 非表示; ) UL li (フロート: 左; )
このプロパティがないと、要素の流れが美しくなくなる可能性があり、マージンや境界線を設定するときに問題が発生する可能性もあります。
要素が周囲に流れないようにする場合は、次のように指定します クリア:両方流線型要素の下。 これは、overflow: hidden; の代わりによく使用されます。
9) float要素にdisplay:inlineを追加
IE6 では、float 要素のマージンが 2 倍になるというよく知られた問題があります。 つまり、20px が必要な場合は、このインデントが 2 倍になるため、10px を記述する必要があります。 IE6 はすでに廃止されつつあり、多くのデザイナーは IE6 用にサイトを最適化することに時間を費やしていませんが、それでも小さなコードを追加するだけで、IE6 での表示がより快適になります。 それでは、入れてみましょう
表示: インライン /* IE6 の問題 */
float が適用された要素の場合
10) スプライトで生活をもっと快適に
スプライトピクチャはとても便利なものです。 ページ全体のグラフィックの概要が表示され、読み込み時間が短縮されます。
英語がわかる方はこちら
11) サイトファイルの構造は明確でなければなりません
時間をかけてサイトの構造を明確にしてください。 すべてを棚に置きます。
例えば：
ここ 「ウェブサイト名」- 私たちが協力しているサイトの名前。 このフォルダーには、サイトの HTML ファイルとフォルダーが含まれています。 資産そして スタイル.
フォルダ内 資産アーカイブや PDF ファイルなど、サイトからダウンロードできるファイルが含まれます。 フォルダ内 スタイルさらに、CSS、画像、JavaScript フォルダーが含まれます。
- css-reset.css、layout.css、main.css などのすべての CSS ファイルが含まれています
- 画像- サイトのすべての写真。 このフォルダーはセクションに分割することもできます。
- JavaScript- すべての JavaScript ファイル。
この図は概算であり、さまざまな方法で表示できます。 これにより、作業が速くなり、サイトがより明確で整然としたものになるという考えです。
12) スタイルを展開する
オプションのアドバイス - すべてが明確で視覚的にわかるように、クラスの名前とスタイル ID をツリー状に記述することをお勧めします。
13) 相対値ではなくピクセルを使用する
すべてが非常に単純です。ドキュメントでは相対値のパーセンテージを計算する必要がないため、ピクセルによるコードの読み込みが少なくなります。
相対量の問題は、この相対性の伝達です。
わかりやすくするために、例を挙げて説明します。
body ( font-size: 62.5% ) は font-size: 1em、つまり 10px を意味します。
#blog-content に 14px が必要な場合は、次のように記述します。
#ブログコンテンツ (フォントサイズ: 1.4em; )
#blog-content 内の H3 タグに 20 ピクセルが必要な場合は、次のように設定できます。
#ブログコンテンツ ( フォントサイズ: 1.4em; ) #ブログコンテンツ h3 ( フォントサイズ: 2.0em )
すべてがうまくいくでしょうが、私たちには相対性があります。 そしてこれら 2.0em は 1.4em に適用されます
#ブログコンテンツ, そして最終的に得られるサイズは28pxです。
したがって、固定値を使用します.
14) 疑似クラスをアンカータグに制限する
新しいブラウザにはこの問題はありませんが、原因はすべて、IE6 をはじめとする多くの古いブラウザにあります。
問題は、古いブラウザでは疑似クラス (:hover など) がタグに適用された場合にのみ機能することです。 ある、 あれは
#header ul li:hover (背景色: #900 )
IE6では動作しません
この問題はjQueryで解決されます
15) セレクターに関する問題を回避する
可能な場合はセレクターを使用する
たとえば、代わりに次のように使用します。
#メインコンテンツ.メインヘッダー
#メインコンテンツh1
セレクターのグループ化には注意してください
結局のところ、相対値を使用すると、ここで誤った動作をする可能性があります
この例ですべてがOKであれば、
メインコンテンツ div,.main-content p ( color: #000; )
この点に関しては、相対値には注意してください。
メインコンテンツ div,.main-content p ( line-height: 1.3em; )
そして最後に
適切なコードを作成するには、常にあるものを別のものにラップすることなどを避けてください。
h1、ul、pタグを学びましょう。
成功の鍵はシンプルです - 練習、練習、練習
トレーニング頑張ってください）
» »
共有することは思いやりです！
何をするかの属性
