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}-- ----------メニュー ボックスの下の余白が 0 であることを示します。

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

Border:1px Solid #ffffff; -width:0 1px 2px 3px;

4. テキストの省略規則について:

Font-variant:small-caps/normal; -height:1.2em(120%)/1.5em(150%);

Font-family:arrial,sans-serif,verdana;

の省略形:

Font:italic small-caps 太字 12px/1.5em 到着,sans-serif;

注: フォントサイズと行の高さはスラッシュで結合されており、別々に記述することはできません。

5. 背景画像について:

Background:#FFF url(log.gif) 左上固定

6. リストについて:

List-style-type:square/なし ;

List-style-image:url(filename.gif);

list-style:none inside url(filename.gif);

2 つ目、CSS スタイルを導入する 4 つの方法を使用します

1.link

rel 関係

type データ型、多くの

href パスがあります

一部のブラウザは候補スタイルをサポートしています。キーワード: 代替:

2. 内部スタイル ブロック

h1{color:red;}

?>

3. @import

@import url{a.css}

注: このディレクティブは、

HTML コメントに配置することをお勧めします。 ; ブラウザにはコメントの内容は表示されませんが、インポートやその他の CSS コードは正常に動作します

は基本的な概念です。 css の基本的なルールは次のとおりです:

1. ルールの構造:

h1 {color:red;}

Selector {Attribute: value;}

このタイプは要素セレクターであり、基本的にすべての HTML を含めることができます。要素

属性 値には次のような複数の要素を含めることができます: border: 1px 単色赤;

共通構文

1) グループ化:

セレクターと宣言の両方をグループ化できます:

h1,h2,h3{color: red;background:# fff;}、セレクターは「,」で区切られ、属性は「;」で区切られます

2) クラスセレクター、つまり class="stylename" を通じて適用される宣言

定義:

.stylename{color:red;}

注:

class="cn1 cn2 cn3" など、HTML で複数の選択カテゴリを使用できます

3) ID セレクター、つまり ID に対応するスタイル属性

定義:

#a{color:red ;} ->この定義は id="a" を持つ要素に適用されます

2。この部分は一般的な CSS 構文です

1) 親子構造、文書構造 画像の対応

例えば、p span{border:1px Solid red;} は、

の下の

タグに対応しており、非常に便利です。

一部の特殊なアプリケーション (IE7 サポート):

(1) p > span{}、すべての p の下のすべての span に一致します

(2) p + span{}、 p 要素の場合、2 つは同じ親タグを持つ必要があります

2) 属性セレクター: (注: 属性セレクターは IE7 でのみサポートされており、以下のバージョンではサポートされていません。他のブラウザーでも基本的にサポートできます)

構文: img[alt]{border:1px Solid;}

alt 属性に対応する img タグを表します。 もちろん、img[alt][title]{} などの複数の属性の対応をサポートします。両方の属性に対応し、次のような特定の値にも対応できます: img[ alt=”Photography”]{}

属性セレクターの高度なアプリケーション、特別なマッチング:

;

(1)img[class~=”b”], ~= : 属性の値に対応します。つまり、 に対応します。

(2)[class^=” a ”]、

(3)[class$=”a”] a で始まり、

(4)[class*=”a”] a で終わる、

(5)[class| ]、a に等しい、または a で始まる

3) 疑似クラスと疑似要素

日常的に使用する場合、主に タグの疑似クラスがいくつかあります: link:hover:active:visited

注: 動的疑似クラスは、input:focus{background:red;} などの任意の要素に適用できます。 input タグを取得したとき フォーカスがあるとき背景が赤になります

上記の構文を組み合わせて使用​​すると、正確な位置決めとシンプルで間接的なスタイルを実現できます。

3. セレクタ分類の統合

使用 ‐ ‐ オフライン ‐ ‐

セレクター (例:

;/ p>)

カテゴリセレクター (例: クラス) 「交差点」複合セレクター (例: p.menu{color: red}) タグ + カテゴリ/ID の組み合わせである必要があります "Union" 複合セレクター (例:h1,h2,h3{color:red}) "Descendant" 複合セレクター (例: : #menu .menulist{ ... })

	ID セレクター
複合セレクター

🎜 🎜 🎜 🎜 🎜 「子」複合セレクター (例: #menu .menulist .selectit { ... }) 🎜🎜 🎜 🎜

 

 

 

 

四、           使用子选择器减少id和class的定义

       示例结构：

 

     

content

 

CSS の例:

#menu { ... }

#menulist { ... }

.menulist .selectit { ... }

5. グループセレクターを次のように使用します。同じスタイルを異なる要素に適用します

たとえば、h1、h2、h3、div{font-size:16px;font-weight:bold}

すると、h1、h2、h3、div 要素のスタイルはすべて次のフォントになります。 16 ピクセルと太いフォント 本文

6. 疑似クラスとセレクターの併用

疑似クラスとクラスを組み合わせることで、同じページ内に異なるリンク効果の複数のセットを作成できます。リンクのセットは訪問後は赤、青、他のグループは訪問後は緑、黄色になります:

a.red:link {color: #FF0000}

a.red:visited {color: #0000FF}

a .blue :link {color: #00FF00}

a.blue:visited {color: #FF00FF}

別のリンクに適用されるようになりました:

これは最初のリンク セットです

これは 2 番目のリンク セットです

Seven CSS の優先順位の原則

/* 要素に複数のスタイルが定義されている場合、最新のレベルが優先され、最新のスタイルが他のインライン スタイル >ID クラス > タグをオーバーライドします */

以下は引用スニペット:

CSS:

p{color:red}

.blue{color:blue}

. yellow{color: yellow}

HTML:

Red here p>

これは青です

これは緑です< ;/p>下から下に向かって減少します、次のスタイルは上記のスタイルをカバーします):

's's's's's's's

— 外部参照cssファイル

(2) 優先順位はアクセス順ではなく、cssでの宣言順で設定されます。

上の例のように、

ここでは黄色と表示されています

css の定義では . yellow が .blue の後ろにあるため、黄色でも表示されます。

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

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

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

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

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

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

9. :hover

の柔軟な使用

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

例:

p {

width: 360px;

height: 20px;

margin: 50px auto 0 auto; 1px 実線 #ccc; : 25px;

背景 : #fff;

}

境界線 : 1px

}

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

p a {

color : #00f;

font-size : 13px;

p a:hover {

色 ; ちょっとした注意点

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

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

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

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

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

強制改行: word-break: Break-all;

12. 相対と絶対の違い

絶対 ---方法CSSで書くと、position:absolute;となります。TRBLの場合、ブラウザの左上隅を参照し、TOP、RIGHT、BOTTOM、LEFTと連携して位置決めを行います。設定されていない場合は、デフォルトで親が原点としてマークされます。 TRBL が設定されており、親が位置属性を設定していない場合、現在の絶対値はブラウザの左上隅を原点として配置され、位置は TRBL によって決定されます。

Relative---CSS での記述方法は、position:relative; 親が存在しない場合は、親の原点を原点として参照します。 TRBL では、親にパディングなどの CSS 属性がある場合、親コンテンツ領域の原点を基準に配置されます。

13. ブロックレベル要素 block と inline 要素 inline の違い

ブロックレベル --- 定義可能な幅と高さ、別の行 (例: div ul)

inline --- 定義不可能な幅とテキスト要素 (スパンなど) などの高さ

14. display と Visibility の違い

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

15、背景の構文

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

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

background-color: 透明 ; & Lt;-背景を透明に設定しますか? ≫

Background-Repeat 背景画像の重複設定を変更します

背景画像を並べて繰り返しますrepeat-y 背景画像を Y 方向に並べて配置します

no-repeat 背景画像は並べて処理されません

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

説明

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

fixed 拉動卷轴時刻，背景图片不会跟着移動

長度定位background-position: x y

使用百分比定位background-position: x% y%

说明

x% 往右移

y % 下に移動

背景-位置: 0% 0%;

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

背景位置: 50 % 50%;背景位置:100% 0%;

背景位置: 0% 100%;

背景位置: 100% 中央右

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

backgroud-position: 100% 100%; 右下

キーワードによって配置

キーワードの説明

top Top ( y = 0 )

center Middle ( x = 50, y = 50 )

bottom ( y = 100 )

left Left ( x= 0 )

Exp:

background-position:center

画像は指定された背景 X=50% Y = 50% 位置

background-position: 200px 30px

16. Html でのコメント

の書き方:

content

CSS の

:

/* ---------- ヘッダー ------------------ */

style

17. CSS命名規則

1. IDの命名

(1) ページ構造

コンテナ: コンテナ

コンテンツ: コンテンツ/コンテナ

ページ本体: main

Tail: footer

Navigation: nav

(2)ナビゲーション

メインナビゲーション：mainnav

サブナビゲーション：subnav

トップナビゲーション：topnav

サイドナビゲーション：sidebar

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

右側のナビゲーション：rightsidebar

メニュー：menu

サブメニュー: サブメニュー

タイトル: タイトル

in in in in can in in in in on in in on in in on msg

現在: 現在

ヒント: ヒント

アイコン: アイコン

メモ: note

ガイド: ギルド

サービス: サービス

ニュース: ニュース

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

投票: 投票

パートナー: パートナー

フレンドリー リンク: リンク

著作権: copyright

2 . クラスの名前付け

(1) Color:

.red { color: red; }

.f60 { color: #f60; }

{ color: #ff8600; }

(2) フォントサイズは、

.font-size: 12px }

.font9pt {font-size: 9pt; のように、名前として直接使用します。

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

.left { float:left; }

.bottom { float:bottom; }

栏 (4) タイトル バー スタイル、「」 category+function" (例:

.barnews {}

.barproduct {}

注::

u ダッシュや下線を追加しないでください。

u 2 つの単語を組み合わせる場合は、最初の文字を大文字にすることができます2 番目の単語 (例: mainContent) にダッシュや下線を付けません。

u 一目でわかる場合を除き、省略しないでください。

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

Main master.css

モジュール モジュール。 .css

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

layout.css

Themes .css

Columns columns.css

Text font.css

Forms.css

Patch mend.cs

印刷print.css

18. 幅に影響を与えるパディングの問題

グループを埋め込む場合 セット内のラベル間にスペースが必要な場合は、定義する代わりに、内部にあるラベルのマージン属性に任せます。外側にあるラベルのパディング

19. 完璧な単一ピクセルのアウトライン テーブル

table{border-collapse:collapse;}

td{border:1px Solid #000;}

Twenty、テキストが長すぎるため、長い部分は省略記号として表示されます

t;コンテンツ2 li>

;コンテンツの説明 2

l dt と dd に ol ul li と p を追加できます

クリア浮動小数点

clearfix:after {content:"."; 表示:ブロック ; クリア:両方; 可視性:非表示;}

子がすべて浮動している場合、親の高さは変更できません。子全体を完全にラップし、これを使用してフローティング HACK をクリアして親を一度定義すると、この問題は解決できます。

.clearfix {

display:inline-block;

}

/* IE-mac から非表示にする */

* html .clearfix {

height:1%

}

.clear;修正 {

display:block;

}

/* IE-mac から非表示にする */

**この種の使用法は、グラフィックとテキストを混合する場合によく使用されますが、制御するのは簡単ではありません。直接制御するには、clear{ clear:both} を使用します。

28、テキスト処理

1. 一般的なフォント:

font-family: "Lucida Grande"、Verdana、Lucida、Arial、Helvetica、"宋体"、サンセリフ; (h1/h2): フォントファミリー: ジョージア州カンブリア、タイムズ、セリフ;

2. ドロップキャップ:

P:first-letter{padding:10px,fontsize :32pt;float :左}

3. ピンイン中国語文字:

Bruce Wolfbu lu si lang

29、最小高さのマルチブラウザ互換性の問題

Min-height:450px;

height:450px;

overflow:visible;????

}

30、CSS レイアウトのヒント - CSS BUG の韻

·を使用して を使用して を使用して を使用して を使用してフロートをクリアする必要がある場合は、コンテナが自然に表示されます

·高い設定はありません、高い設定はゼロです、デザイン効果も閲覧可能です。签 · すべてのラベルはアクティブですが、デフォルトでは Wiji、Wiji Sheng の 2 つのインストゥルメントとブロック レベルが異なります。IMG は特殊ですが、他のものは異なるだけです。カスケード スタイルはさらに練習が必要です。すべてが規則的です。

· 画像リンクのレイアウトに注意する必要があります。画像リンクのテキストリンクを揃える場合は、padding とvertical-align:middle を設定する必要があります。多少の違いは問題ありません。

· IE フローティング二重マージンの場合は、display: inline を使用してください。

· リストは水平方向に入力する必要があり、リスト コードは互いに近くに配置し、ギャップを覚えておく必要があります。

31、Web のフォント アプリケーション

実用的でシンプルなフォント ファミリーのいくつかのセットをまとめます

フォント ファミリー: Tahoma、Helvetica、Arial、sans-serif;

Tahoma ニュートラル フォント。 13px以上の環境でのご利用を推奨いたします。

フォントファミリー: Trebuchet MS、Verdana、Helvetica、Arial、サンセリフ;

Verdana ワイド フラット フォント。 11px以下の環境でのご利用を推奨します。

フォントファミリー: Geogia、Times New Roman、Times、セリフ;

完璧なセリフ フォント。主に 16 ピクセルを超える大きなタイトル フォントに使用されます。

フォントファミリー: Lucida Console、Monaco、Courier New、mono、monospace;

一連の等幅フォント。コードを書くことは非常に便利です。さらに、Lucida Console が広すぎると感じた場合は、幅の狭い Lucida Sans Typewriter に切り替えることができます。ちなみに、Lao ZhaoのブログのコードブロックはLucida Sans Typewriterを使っていますよ〜

divのスタイルで可視性を非表示に設定すると、divは非表示になりますが、空白スペースを占有します表示するように設定されている場合: None は空白スペースを占有せず、visible="false" は HTML で div が返されないことを意味します。