学習スタイルシート CSS リファレンス - よく使用される CSS Knowledge_Experience Exchange

1. ブロック要素とインライン要素の比較

すべての HTML 要素は、ブロックまたはインラインのいずれかに属します。
ブロック要素の特性は次のとおりです:
常に新しい行で開始します。
高さ、行の高さ、上下の余白はすべて制御できます。
デフォルトの幅はその 100% です。コンテナ (幅が設定されていない場合)。

、

、

、

、

、および
• はブロック要素の例です。
  
  逆に、インライン要素の特徴は、
  他の要素が同じ行にあること、
  高さ、行の高さ、上下の余白を変更できないこと、
  width はテキストまたは画像の幅であり、変更できません。
  、、、、、、 はインライン要素の例です。
  
  要素のこの機能を変更するには、display: inline または display: block コマンドを使用します。この属性を変更する必要があるのはどのような場合ですか?
  インライン要素を新しい行で開始します。
  ブロック要素と他の要素を同じ行に保ちます。
  インライン要素の幅を制御します（特にナビゲーション バーに便利です）。
  コントロールインライン要素の高さ;
  幅を設定せずに、ブロック要素の背景色をテキストと同じ幅に設定できます。
  
  2. 別のボックス ハッキング手法
  
  これほど多くのボックス ハッキング手法が存在する理由は、6 より前の IE のボックスに対する理解が他のものとは異なっていたためです。幅にはエッジの幅と空白を含める必要があります。 IE5 を他のブラウザと一致させるには、次の CSS を使用できます:
  
  パディング: 2em;
  ボーダー: 1em ソリッドグリーン;
  幅: 20em;
  width/** /:/* */ 14em;
  
  最初の幅はすべてのブラウザで認識されますが、IE5.x は、その行に空白のコメント記号があるというだけの理由で、2 行目の幅設定を認識しません (なんて愚かな構文解析なんだろう) !)、つまり IE5。
  
  3. ページの最小幅
  
  min-width は非常に便利な CSS コマンドです。要素の最小幅をこれより小さくできないように指定できます。一定の幅があるため、レイアウトが常に正しいことを確認できます。しかし、IE はこれを認識せず、実際には幅を最小幅として扱います。このコマンドを IE で機能させるには、 タグの下に
  を配置し、その div にクラスを割り当てます。
  
  
  

  
  その後、CSS は次のように設計されます:
  
  #container
  {
  min-width: 600px;
  width:expression(document.body.clientWidth }
  
  最初の min-width は通常ですが、2 行目の幅は Javascript を使用しており、IE でのみ認識されます。これにより、HTML ドキュメントも作成されます。あまり形式的ではありません。実際にはJavaScriptの判断により最小幅を実装しています。
  
  同じ方法を使用して IE の最大幅を実現することもできます:
  
  #container
  {
  min-width: 600px;
  max-width: 1200px ;
  width:expression(document.body.clientWidth 1200? ”1200px” : ”auto”;
  }
  
  4 . IE と幅と高さの問題
  
  IE は min- の定義を認識しませんが、実際には通常の幅と高さを min があるかのように扱います。これは大きな問題です。width と height だけを使用すると、この 2 つの値は通常のブラウザでは変更されません。min-width と min-height だけを使用すると、幅と高さはまったく設定されませんIEの下で。
  
  たとえば、背景画像を設定する場合は、この幅の方が重要です。この問題を解決するには、次のようにします:
  
  .box
  {
  width: 80px;
  height: 35px;
  }
  
  html>body 。 box {
  width: auto;
  height: auto;
  min-width: 80px;
  min-height: 35px;
  }
  
  すべてのブラウザ最初のボックス設定は使用できますが、IE はサブセレクター コマンドを使用するため、2 番目の段落設定を認識しません。 2 番目の設定はより具体的であるため、最初の設定はオーバーライドされます。
  
  5. フォント変換コマンド
  
  text-transform コマンドは非常に便利です。このコマンドには 3 つの値があります: text-transform: uppercase、text-transform: lowercase、 text -transform: 大文字にします。 1 つ目はテキストをすべて大文字に変更し、2 つ目はすべて小文字に変更し、3 つ目は最初の文字を大文字に変更します。これはピンイン テキストの場合に非常に便利で、入力時に大文字と小文字の区別が間違っていたとしても、Web ページには表示されません。
  
  6. IE で画像テキストが消える問題
  
  テキストや背景画像が突然消え、更新すると再び表示される問題が発生することがあります。フローティング要素の場合に発生する可能性が高くなります (注: 見たことはありません)。この時点で、消える要素に対して位置:相対を設定できますが、それが機能しない場合は、これらの要素の幅を指定することを検討してください。
  
  7. 非表示テキスト
  
  印刷や小さな画面など、何らかの理由で、一部の Web テキストをブラウザに表示したくない場合があります。一部のテキストが表示されない場合は、display: none を使用できます。これは非常に単純ですが、人によっては少し役に立たない場合があり、このコントロールを削除して、position:Absolute; left: -9000px を使用できます。
  
  これは実際にページの外に表示されるテキストを指定します。
  
  8. ハンドヘルド デバイス用の特別な CSS を設計する
  
  つまり、携帯電話/PDA などの小さな画面を持つユーザーは、Web ページを作成するための特別な CSS を設計できます。表示がより快適になりました。これを行うには、ブラウザ ウィンドウを幅 150 ポイントに調整して効果を確認します。ハンドヘルド固有の CSS を指定する構文は次のとおりです。
  
  
  
  特別なハンドヘルド デバイスの可用性も読み取ることができます。
  
  9. 3D 効果のあるボタン
  
  以前は、クリックに応じて変化する 3D 効果のあるボタンを作成したい場合は、画像を使用する必要がありました。
  
  a
  {
  表示: ブロック;
  ボーダー: 1px ソリッド;
  ボーダーカラー: #aaa #000 #000 #aaa ; 幅: 8em;
  背景: #fc0;
  }
  
  a:hover
  {
  位置: 相対;
  上: 1px;
  left: 1px;
  border-color: #000 #aaa #aaa #000;
  }
  
  効果に関しては、自分で調整することもできます。
  
  10. 異なるページで同じナビゲーション コードを使用する
  
  多くの Web ページにはナビゲーション メニューがあり、特定のページに入ると、この項目がメニューに表示されます。灰色に変わり、他のページが点灯するはずです。通常、この効果を実現するにはページごとにプログラムやデザインを作成する必要がありましたが、CSS を使用してこの効果を実現できるようになりました。
  
  まず、ナビゲーション コードで CSS クラスを使用します。
  
  

  
  
  • Home
    
  • 会社概要
  
  
  • お問い合わせ
  
  

  
  
  次に、各ページの本文に、上記のクラスと同じ名前の ID を指定します。 など。
  
  次に、次のように CSS を設計します:
  
  #home .home、#about .about、#about .about
  {
  強調表示されたナビゲーションのコマンドはここにあります
  }
  
  ここでは、ID が home に設定されている場合、.home が有効になります。つまり、クラスが home に設定されているナビゲーション バーに特殊効果が表示されます。他のページも同様です。