Div+CSSの基本的な使い方整理_html/css_WEB-ITnose

1.CSSの略語ルールを上手に活用する

/*上下左右の書き順に注意*/ 1.余白(4辺)について: 1px 2px 3px 4px (上、右、下、左) 1px 2px 3px (省略された左は右と等しい) 1px 2px (省略された上は下と等しい) 1px (4 つの辺はすべて同じ)

2. すべてを簡略化します: */ body{margin:0}--- ------- --Web ページ内のすべての要素のマージンが 0 であることを示します。 #menu{ margin:0}-----------Web ページ内のすべての要素のマージンが 0 であることを示します。メニュー ボックスは 0

3 です。 略語 (境界線) 固有のスタイル:

Border:1px Solid #ffffff; テキストの略語規則: Font-style:italic formフォント バリアント:小文字/標準; フォント バリエーション:小文字/標準; フォント サイズ:1.2em(120%)/1.5em(150%); :arrial,sans-serif,verdana; 省略形 Into: Font:italic small-caps 太字 12px/1.5em arrial,sans-serif; 注: Font-size と Line-height はスラッシュで結合されており、別々に記述することはできません。

5. 背景画像について: 背景:#FFF url(log.gif) no-repeat 左上固定;

6. リストについて: リスト スタイル タイプ: 正方形/なし; inside ; List-style-image:url(filename.gif); と省略します: List-style:none inside url(filename.gif);

2. CSS スタイルを導入する 1.link rel 関係タイプのデータ型。複数の href パスがあり、一部のブラウザでは候補スタイルがサポートされます。キーワード: 代替: 内部スタイル ブロック --外部参照CSSファイル

(2) 優先順位はアクセス順ではなく、CSS内の宣言順で設定されます。 上の例と同様に、CSS 定義では . yellow が .blue の後にあるため、

は黄色として表示されます。

も黄色として表示されます。

8. 正しいリンク スタイルを記述します

CSS を使用してリンクのさまざまな状態を定義するときは、次の記述順序に注意してください: L V H A の最初の文字を使用すると、LoVe を思い出すことができます。 、Hate、順序を覚えておくための2つの単語。

:link --------リンクの色

:visited -----マウスをクリックした後の色

:hover -------マウスをクリックしたときの色配置されているがクリックされていない (hover)

:active-----マウスクリック時の色

9. :hover

の柔軟な使用

IE6 は a タグ以外の :hover 属性をサポートしていません:hover 属性はマウス ホバー効果であると理解しています。 IE7 および FF では、ほぼすべての要素に :hover 属性効果を設定できます。これは、さまざまな訪問を行う場合に非常に効果的です。

のような:

p {

width: 360px;

height: 80px;

padding: 20px;

margin: 50px auto 0 auto;

border: 1px Solid #ccc;

行の高さ: 25px;

背景 : #fff;

}

p:hover {

ボーダー : 1px ソリッド #000;

背景 : #ddd;

}

---------- -----この効果は IE7 および FF 用です

p a {

color : #00f;

text-decoration : none;

font-size : 13px

}

p a:hover {

; color : #036;

text-decoration:Underline;

}

---------------この効果は IE6

10 を定義する際に注意すべき小さな問題です。 A タグ

a{color:red;} を定義すると、A の 4 つの状態のスタイルを表します。マウスが置かれている状態を定義したい場合は、他の 3 つの状態を定義するだけです。 are A で定義されたスタイル。

a:link が 1 つだけ定義されている場合は、他の 3 つの状態を忘れずに定義してください。

11. コンテンツのラップの禁止とコンテンツのラップの強制

テーブルやレイヤーでは、いくつかの CSS 属性を使用してこれらの要件を実現できます。

改行を無効にする: White-space:nowrap

改行を強制する: word-break: Break-all; White-space:normal; 12. 相対と絶対の違い

絶対---CSSでの書き方は:position:absolute ; これはブラウザの左上隅を指し、TRBL が設定されていない場合、

のデフォルトになります。親のマーキングの原点が原点になります。 TRBL が設定されており、親が位置属性を設定していない場合、現在の絶対値はブラウザの左上隅を原点として配置され、位置は TRBL によって決定されます。

Relative---CSS での記述方法は、position:relative; 親の原点を原点として参照することを意味します。 TRBL では、親

にパディングなどの CSS 属性がある場合、親コンテンツ領域の原点を基準に配置されます。

その 13. ブロックレベル要素 block とインライン要素 inline を区別します

ブロックレベル --- 幅と高さを定義でき、別の行を占有します (例: div ul)

インライン --- width とテキスト要素(スパンなど)のように高さは定義できません 14. 表示と可視性の違い

Display:none と Visibility:hidden はどちらも要素を非表示にできますが、Visibility:hidden は要素のコンテンツのみを非表示にします。ただし、使用される位置スペースは引き続き保持されます。 Display:none はページから要素を削除するのと同等で、その要素が占有している位置も削除されます。

15. 背景の構文

background-image:url(background pattern.jpg, gif, bmp);

background-color: #FFFFFF; (背景色)

background-color : 透明; -- 背景を透明色に設定しますか?>

background-repeat 背景画像の繰り返しのサイドバイサイド設定を変更します

背景画像が Y 方向に並んでいます

リピートなし背景画像は並べて処理されません

Background-attachment 画像の位置を固定するかどうか

説明

scroll スクロールを引くと背景画像が移動します（デフォルト値）

fixed スクロールを引くと背景画像は移動しませんスクロールが引かれます

長さによる背景位置の位置: x y

パーセンテージによる背景位置の位置: x% y%

説明

x% 右に移動

y% 下に移動

backgroud-position: 0 % 0%; 左上

背景位置: 0% 50%; 左中央

背景位置: 50% 0%; 中央

背景位置: 100% 0%; 右上

背景位置: 0% 100%; 左下

背景位置: 100% 50%; 中央下

背景-位置: 100% 100%; 右下はキーワードで配置されます

キーワード 説明

top 上 ( y = 0 )

center middle ( x = 50, y = 50 )

bottom Bottom (y = 100)

left 左 (x= 0)

Exp:

background-position:center;

画像は、X=50% Y=50% の位置で指定された背景の中央にあります

background-position: 200px 30px

16. コメントの書き方

HTML の場合:

CSS の場合:

/* -- ------- - header --------------- */ style 17. CSS命名規則

1. idの命名

(1) ページ構造

コンテナ:container

コンテンツ: content/container

ページ本文：main

フッター：footer

ナビゲーション：nav

サイドバー：sidebar

列見出し：column

ページ周辺 全体のレイアウト幅を制御：wrapper

控中:左右center

(2) ナビゲーション

ナビゲーション: nav

ドミナントナビゲーション: Mainnav

ナビゲーション: Subnav

ナビゲーション: TOPNAV

ボーダーナビゲーション: サイドバー

左側のナビゲーション: leftsidebar

右側のナビゲーション:

メニュー：menu

サブメニュー: submenu

タイトル: title

要約: 概要

(3) 機能

ロゴ: logo

広告: バナー

ログイン: ログイン

ログインバー: loginbar

登録: regsiter

検索：検索

リボン：ショップ

タイトル：タイトル

参加：ジョイナス

ステータス：ステータス

ボタン：btn

スクロール：スクロール

タグページ：タブ

記事リスト: list

プロンプト情報: msg

Current: current

Tips: Tips

Icon: icon

Note: note

Guide: guild

Service: service

Hotスポット: ホット

ニュース:ニュース

ダウンロード: ダウンロード

投票: 投票

パートナー: パートナー

リンク: link

著作権: copyright

2. クラスの名前付け

(1) 色: 色の名前または 1 6 ベース コードを使用します。

.red { color: red; }

.f60 { color: #f60; }

.ff8600 { color: #ff8600; }

（2）フォントサイズは「font+font Size」を直接使用します。

.font12px { font-size: 12px; }

.font9pt {font-size: 9pt; }

などの名前として (3) 配置スタイル、配置ターゲットの英語名を使用します。

.left { float:left; }

.bottom { float:bottom; }

(4)

.barnews { }

.barproduct { など、「カテゴリ + 関数」を使用して名前を付けたタイトル バーのスタイル}

注::

U はすべて小文字です。

中央のバーと下にスクラッチ行を追加しないようにします (例: mainContent)。

3. メインサイトCSSファイル

モジュール module.css

基本共有base.css (root.css)

レイアウト、layout.css

Themes.css

Columns.css

Text font.css

Forms Forms.css

Patch mend.css

Print print.css

18. パディングは幅に影響します

スペースがある場合の間で必要ですネストするラベルのグループを指定し、外側にあるラベルのパディングを定義するのではなく、内側にあるラベルのマージン属性に任せます。 19 、完全な単一ピクセルの境界テーブル

table{border-collapse:collapse;}

td{border:1px Solid #000;}

20. テキストが長すぎる場合は、長い部分を省略記号として表示に変更します