CSS使い方学習まとめ_体験交流

クラスはカスケードされて認識される可能性があるため、使用はできるだけ少なくしてください。たとえば、 h3 にクラスを追加しない .News h3

3. 既存の要素がない場合は div

を使用します

• ホーム


• 会社概要

• ホーム


• 会社概要

に変更できます。 > 4. セレクタ
p a h1 タイプ セレクタ
Li a {text-decoration:none} 子孫セレクタ
*{padding:0;} ユニバーサル セレクタ、ページ上のすべての要素。
5. 位置決め
相対位置決めは、それが表示されるべき位置を基準とします
絶対位置決めは、最も近い位置にある祖先要素を基準とします（実験により、祖先要素を相対配置に設定する必要があることが判明しました）
フローティング ボックスは、その端が含まれているボックスまたは別の含まれているボックスの端に触れるまで、左右に移動できます。フローティング ボックスはドキュメントの通常のフロー内にないため、ドキュメントの通常のフロー内のボックスは、フローティングボックスは存在しません。
概要: div がフローティングの場合、次の div は最初の div が存在しないものとして扱われます。フローティングボックスまたはボックスを含むボックスに遭遇したときにそれを認識します。
クリア: 右 フローティング ボックスの右側が使用可能
クリア: 左 フローティング ボックスの左側が使用可能
クリア: 両方 フローティング ボックスの両側が使用不可
値が hidden または auto の overflow 属性は、含まれる浮動要素を自動的にクリーンアップします。
6. グラデーションの背景
水平方向にタイル状に並べた、非常に縦長で幅の狭いグラデーション画像を作成します
本文
{
背景: #ccc url (gradient.gif)repeat-x; }
ただし、画像ページの高さを予測するのは難しいため、背景色と組み合わせることができます。画像が終了すると色が出てきます。2 つの色の違いが非常に近い場合、変換は表示されなくなります。
例: 各タイトルにアイコンを追加します
H1
{
Padding-left:30px;
Background: url(/images/bullet.gif) no-repeat left center;
}
7. さまざまな種類のリンクを強調表示します
例: 外部サイト、電子メール、ダウンロードなどへのリンク。
.external
{
背景: url (/images/externalLink. gif) no-repeat right top;
Padding-right:10px;
}
8. テーブル固有の要素
1) 概要とキャプション
概要属性はテーブル ラベルに適用できます。テーブルの内容を説明します
キャプション テーブルのタイトル
2) thead tbody tfoot
つまり、すべての列ヘッダーを thead 要素に配置できます。thead または tfoot 要素を使用することを選択した場合は、次を使用する必要があります。少なくとも 1 つの tbody 要素。テーブルは 1 つの thead と tfoot のみを使用できますが、複数の tbody を使用できます。
9. テーブルの境界線モデル
1) 個別モデル: 各セルの周囲に境界線があります
2) オーバーレイ モデル: セル グリッド共有境界線
10. フォーム レイアウト
フィールドセットは境界線をオフにします。以前のバージョンではサポートされていませんが、使用できます。
フィールドセット
{
境界線: 実線0 透明;
}
11 . フォーム ラベル label
暗黙的モード: email
表示モード: email

フォーム内での段落の使用には議論の余地があります。
12. デザインに役割を持たせる
方法 1:

#wrapper
{
Width:720px;
Margin:0 auto;
}
ただし、IE6 以下ではこの方法は正常ではありません
方法 2 (2 つの要素に基づいて組み合わせる必要があります): 自動空白を使用します
Body
{
Text-align:center;
Min-width: 760;
}
# Wrapper {
Width:720px;
Margin: 0 auto;
Text-align: left;
}
方法 3: 位置決めと負の空白を使用して変更します。
#wrapper {
幅:720px;
位置: 相対;
左: 50%;
左マージン: -360;
}
13: 流体レイアウト:すべてのサイズをピクセル設定ではなくパーセントで使用します
利点: 幅はブラウザのサイズによって変わります。
欠点: 小さくなるにつれて、行が狭くなります。
解決策: 最小幅をピクセルと em 単位で設定します。
14: 柔軟なレイアウト: フォント サイズが変更されると、行も変更されます (単位は em)。
柔軟なレイアウトは、フォントに対する相対的な要素の幅を設定します。サイズ。
1em=10px;
ほとんどのブラウザのデフォルトのフォント サイズは 16 ピクセルで、10 は 16 ピクセルの 62.5% に相当します。
本文
{
Font-size:62.5%;
} #wrapper
{
幅:72em;
マージン:0 自動;
テキスト配置: 左;
}
#mainNav
{
Width: 18em;
Float:right;
}
15. 弾性流体レイアウト: 幅を em で設定し、最大幅をパーセンテージで設定します。
#wrapper
{
幅:72em;
最大幅: 100%;
マージン:0 自動;
テキスト配置: 左;
}
１６：流体と弾性画像
画像変形問題：背景に置いてみる
１７．アスタリスク HTML トリック
* html a:hover
{
本文のスタイル: ソリッド
}
IE6 以下でのみ有効
18: !インポートと下線のトリック
# nav
{
位置: 固定 !重要;
位置 : 静的;
}
または
#nav
{
位置: 固定;
_位置 : static;
}
19、複数の列がある場合

Nav は色を区別して高さを 100% 表示する必要があります。Nav と同じ幅の画像を作成できます。メインに背景画像を設定して並べて表示します。垂直方向に。