DIV+CSS_html/css_WEB-ITnose に関するちょっとしたヒント

DIV+CSS网页布局技巧实例1：设置网页整体居中的代码

以前用表格布局时设置网页居中非常方便，把表格对齐方式设置为居中就行了，就这么简单，现在呢，用DIV+CSS样式表控制，好像不是那么容易了，其实也很简单，只不过方式不同而已。

标准之路www.aa25.cn

　　请看这段代码，宽度为适合800×600分辨率浏览器的宽度，margin:0 auto; 这句代码就是让居中了，意思是外边距上下设置为0，左右设为自动。这样它就居中了。

　　那么可能你要问了，text-align:center;为什么还要让内容居中呢？呵呵，别着急，这句是为了适应IE6以下版本的浏览器而加的，IE6以下对margin:0 auto;不能解析为居中，所以用这种方式来补救，以下在设计内容时再用 text-align:left;就可以了。

　　注：margin和padding的值的顺序为顺时针上右下左，如margin:1px 2px 3px 4px;还可以缩写为上下、左右，如本例，如果为margin:0px;则是各边都为0

标准之路www.aa25.cn

提示：可以先修改部分代码后再运行

DIV+CSS网页布局技巧实例2：设置容器中的内容垂直居中

如实例1设置网页整体居中的代码中内容是居容器的顶部的，而在表格布局时默认是垂直居中的，当我们需要垂直居中的时候该怎么办呢？别害怕，跟我来，也是比较简单的，只用设置容器内的行高就行了。

line-height:500px;

标准之路www.aa25.cn

提示：可以先修改部分代码后再运行

这是一种方法，另外和种方法就是设置的它内边距padding了，自己可以试试哟～～

DIV+CSS网页布局技巧实例3：设置层的透明度

有时候我们需要用到层的透明度，把下边的背景透出来，如下图：
 

                       

这种半透明的形式在blog上应用比较广泛，那么这种效果是怎么做出来的呢？用JS，NO,NO，既然我们是CSS布局教程，那么就尽量用CSS来解决问题！

filter: alpha(opacity=70);
opacity: 0.7;

把这两句代码加入到要实现半透明层的CSS样式表里即可，简单吧！！
注：70和0.7的值可改为你需要的

ヒント: 実行する前にコードの一部を変更できます

この記事は http://www.aa25.cn/336.shtmlDIV+CSS Web ページ レイアウト スキルの例から引用しています。 4: CSS の略語を使用する

略語を使用すると、CSS ファイルのサイズが小さくなり、読みやすくなります。 CSS 省略形の主な規則については、「一般的な CSS 省略形構文の概要」を参照してください。 CSS 省略形の主な規則は次のとおりです。

カラー

16 進数のカラー値。各 2 桁の値が同じ場合、省略できます。たとえば、その半分です:
#000000 は OK 省略形は #000;

ボックスサイズ

は通常次の4つの書き方があります:

property: value1; はすべての辺に値があることを意味します; property: value1 value2; は上と下の値が value1 であることを意味します右側と左側が value2 プロパティ: value1 value2 value3; 上の値が value1、右側と左側の値が value2、下の値が value3 であることを意味します property:value1 value2 value3 value4;順番に右、下、左

時計回り、右上、左下と覚えておくと便利です。マージンとパディングの具体的な適用例は次のとおりです。

margin: 1em 0 2em 0.5em;

ボーダー (ボーダー)
ボーダーのプロパティは次のとおりです。 -color: #000;

は 1 つの文に省略できます: border:1px Solid #000;

構文は border:width style color; です。

Backgrounds (背景)

背景のプロパティは次のとおりです:

background- color:#f00; 背景-画像:url(背景.gif); 背景-繰り返し: 固定; 背景-位置: 0 0; (background.gif) no-repeat fixed 0 0;

文法 背景:カラー画像のリピート添付位置です;

1 つ以上の属性値を省略できます。省略した場合、属性値はブラウザのデフォルト値を使用します。デフォルト値は次のとおりです:

カラー: 透明画像: なし 繰り返し: 繰り返し 添付ファイル: スクロール位置: 0% 0% フォント (フォント)

フォントのプロパティは次のとおりです:

font-style:italic; -caps; font-weight:bold; font-size:1em; font-family:"Lucida Grande",sans-serif; font:italic small-caps; 1em/140% "Lucida Grande",sans-serif;

フォント定義を省略する場合は、font-size と font-family の少なくとも 2 つの値を定義する必要があることに注意してください。

リスト

デフォルトのドットとシリアル番号をキャンセルするには、 list-style:none;,

list のプロパティは次のとおりです。

list-style-type:square; -style -image:url(image.gif);

は 1 つの文に省略できます: list-style:square inside url(image.gif);

この記事は http://www.aa25.cn/ から引用しました。 337.shtmlDIV+CSS Web ページのレイアウトのヒント 例 5: 値が 0 でない限り単位を明示的に定義する

ディメンションの単位を定義することを忘れるのは、CSS 初心者によくある間違いです。 HTML では width="100" と記述するだけで済みますが、CSS では width:100px width:100em のように正確な単位を指定する必要があります。単位を定義しない場合の例外は、行の高さと 0 の値の 2 つだけです。また、他の値の後には単位を付ける必要があります。値と単位の間にスペースを入れないように注意してください。

DIV+CSS Web ページ レイアウトのヒント 例 6: 大文字と小文字の区別

XHTML で CSS を使用する場合、CSS で定義された要素名は大文字と小文字が区別されます。このエラーを回避するには、すべての定義名に小文字を使用することをお勧めします。

HTML と XHTML では class と id の値も大文字と小文字が区別されます。大文字と小文字を混合して使用する必要がある場合は、CSS での定義が XHTML のタグと一致していることを注意深く確認してください。

DIV+CSS Web ページ レイアウト スキル例 7: クラスと ID の前に要素制限を解除する

要素のクラスまたは ID を定義するために記述する場合、ID はページ内で一意であるため、前の要素制限を省略できます、および Class はページ内で複数回使用できます。要素を修飾することは意味がありません。例:

div#content { /* 宣言 */ }

fieldset.details { /* 宣言 */ }

#content { /* 宣言 */ }

.details { /* 宣言 * のように書くことができます/ }
これにより、いくつかのバイトが節約されます。

DIV+CSS Web ページレイアウトスキルの例 8: 要素属性のデフォルト値

通常、padding のデフォルト値は 0、background-color のデフォルト値は透明です。ただし、デフォルト値はブラウザによって異なる場合があります。競合が心配な場合は、次のように、スタイルシートの先頭ですべての要素のマージンとパディングの値を 0 として定義できます:

* {
margin:0;

padding:0;

}

DIV+CSS Web ページレイアウトのヒント例 9: 継承可能な値を繰り返し定義する必要はありません

CSS では、子要素は親要素の色、フォントなどの属性値を自動的に継承します。親要素で定義されているものは、子要素に直接継承できます。繰り返し定義する必要があります。ただし、ブラウザーがいくつかのデフォルト値で定義をオーバーライドする可能性があることに注意してください。

标准之路（这是父层）

这是子层，继承父层的字体大小及粗体属性

提示：可以先修改部分代码后再运行

DIV+CSS网页布局技巧实例10：最近优先原则

　如果对同一个元素的定义有多种，以最接近(最小一级)的定义为最优先，例如有这么一段代码

　　Update: Lorem ipsum dolor set

　　在CSS文件中，你已经定义了元素p，又定义了一个class"update"

　　p {
　　margin:1em 0;
　　font-size:1em;
　　color:#333;
　　}
　　.update {
　　font-weight:bold;
　　color:#600;
　　}

　　这两个定义中，class="update"将被使用，因为class比p更近。你可以查阅W3C的《 Calculating a selector’s specificity》 了解更多。

DIV+CSS网页布局技巧实例11：多重class定义

一个标签可以同时定义多个class。例如：我们先定义两个样式，第一个样式背景为#666；第二个样式有10 px的边框。

　　.one{width:200px;background:#666;}
　　.two{border:10px solid #F00;}
　　在页面代码中，我们可以这样调用

　　

　　这样最终的显示效果是这个div既有#666的背景，也有10px的边框。是的，这样做是可以的，你可以尝试一下。

DIV+CSS网页布局技巧实例12：使用子选择器

使用子选择器(descendant selectors)
　　CSS初学者不知道使用子选择器是影响他们效率的原因之一。子选择器可以帮助你节约大量的class定义。我们来看下面这段代码：

　　

　　

　　
• Item 1
>
　　
• Item 1

　　
• Item 1

　　

　　

このコードの CSS 定義は次のとおりです:

div#subnav ul { /* スタイリング */ }
div#subnav ul li.subnavitem { /* スタイリング */ }
div#subnav ul li.subnavitem subnavitem { /* いくつかのスタイリング */ }
div#subnav ul li.subnavitemselected { /* いくつかのスタイリング */ }
div#subnav ul li.subnavitemselected a.subnavitemselected { /* いくつかのスタイリング */ }
以下を使用できます上記のコードを置き換えるメソッド

li> ;

スタイル定義は次のとおりです:

#subnav { /* いくつかのスタイリング */ }
#subnav li { /* いくつかのスタイリング */ }
#subnav a { /* いくつかのスタイリング */ }
# subnav .sel { /* いくつかのスタイリング */ }
#subnav .sel a { /* いくつかのスタイリング */ }
サブセレクターを使用すると、コードと CSS がより簡潔で読みやすくなります。

DIV+CSS Web ページ レイアウト スキルの例 13: 背景画像のパスに引用符を追加する必要はありません

引用符は必要ないため、バイト数を節約するために、背景画像のパスに引用符を追加しないことをお勧めします。例:

background:url("images/***.gif") #333;
background:url(images/***.gif) #333; と書くことができます。代わりに、いくつかのブラウザエラーが発生します。
DIV+CSS Web ページ レイアウト スキル例 14: グループ セレクター
グループ セレクター (グループ セレクター)

一部の要素タイプ、クラス、または ID に共通の属性がある場合、グループ セレクターを使用して複数の繰り返し定義を回避できます。これにより、かなりのバイトを節約できます。

例: すべてのタイトルのフォント、色、マージンを定義するには、次のように記述できます:

h1,h2,h3,h4,h5,h6 {
font-family: "Lucida Grande",Lucida, Arial,Helvetica, sans-serif;
color:#333;
margin:1em 0;
}
使用中に独立したスタイルを定義する必要がある個別の要素がある場合は、次のように新しい定義を追加したり、古い定義を上書きしたりできます。

h1 { font-size:2em; }
h2 { font-size:1.6em; }
DIV+CSS Web ページのレイアウト スキル 例 15: 正しい順序でリンク スタイルを指定する
CSS を使用して複数のリンクを定義する場合ステータス スタイルを設定する場合は、その記述順序に注意してください::link :visited :hover :active。抽出された最初の文字は「LVHA」で、「LoVe HAte」（好きか嫌いか）として覚えられます。なぜそのように定義されているのでしょうか? Eric Meyer の「Link Specificity」を参照してください。

ユーザーがキーボードを使用して制御する必要があり、現在のリンクのフォーカスを知る必要がある場合は、:focus 属性を定義することもできます。 :focus 属性の効果は、フォーカスされた要素に :hover 効果を表示させる場合は、:hover 効果を置き換える場合は :focus を記述する位置によっても異なります。 :hover の後に :focus を置きます。

DIV+CSS Web ページ レイアウト スキル例 16: フロートのクリア

非常に一般的な CSS の問題は、配置にフロートを使用する場合、下位レイヤーがフローティング レイヤーで覆われているか、レイヤー内にネストされているサブレイヤーが外側のレイヤーを超えていることです。レイヤー範囲。

通常の解決策は、フローティング レイヤーの後ろに div や br などの追加要素を追加し、そのスタイルをクリアとして定義することです:両方。この方法は少し突飛ですが、幸いなことに、これを解決する良い方法があります。「構造マークアップを使用せずにフロートをクリアする方法」を参照してください。

上記の 2 つの方法は、フローティング オーバーフローの問題を非常にうまく解決できますが、レイヤーまたはレイヤー内のオブジェクトを本当にクリアする必要がある場合はどうすればよいでしょうか?簡単な方法は、オーバーフロー属性を使用することです。この方法はもともと「フロートの単純なクリア」で公開され、「クリアランス」および「フロートの超簡単なクリア」で広く議論されています。

上記の明確な方法のどれがあなたにより適しているかは、特定の状況によって異なるため、ここでは説明しません。さらに、float の適用については、いくつかの優れた記事で明確に説明されています。「Floatutorial」、「Float を含む」、および「Float Layouts」を読むことをお勧めします

私の方法は、次のコードをスタイル シートに追加することです。

.clearfloat {clear:both;height:0;font-size: 1px;line-height: 0px;}

次に、float をクリアする必要があるページを追加します:

この記事は、DIV+CSS Web ページ レイアウト スキルの例 17: 水平方向のセンタリング (センタリング) から引用しました

これは簡単なトリックですが、次のような初心者の質問が多すぎるため、もう一度言う価値があります: CSS を水平方向に中央揃えにする方法は?レイアウトがレイヤー (コンテナー) に含まれている場合は、要素の幅を定義し、水平方向のマージンを定義する必要があります。

水平方向に中央揃えにするには、次のように定義できます。

#wrap {
width :760px ; /* レイヤーの幅に変更します */
Margin:0 auto;
}
ただし、IE5/Win ではこの定義を正しく表示できません。これを解決するために、非常に便利なトリックを使用します。それは、text-align 属性を使用することです。こんな感じです:

body {
text-align:center;
}
#wrap {
width:760px; /* レイヤーの幅に変更します*/
margin:0 auto;
}
本文の最初の text-align:center; ルールは、IE5/Win の本文のすべての要素が中央に配置されることを定義し、2 番目の text-align:left; はテキストを中央に配置することを定義します。 #warp の要素 テキストは左側にあります。
DIV+CSS Web ページ レイアウト テクニックの例 18: CSS をインポートして非表示にする

古いバージョンのブラウザーは CSS をサポートしていないため、一般的なアプローチは @import テクニックを使用して CSS を非表示にすることです。例:

@import url("main.css");
しかし、この方法はIE4では機能せず、しばらく頭を悩ませていました。後で、次のように書きました:

@import "main.css";
これで、IE4 で CSS を非表示にすることができます。笑、これで 5 バイトも節約できました。 @import 構文の詳細な説明を知りたい場合は、「centricle の CSS フィルター チャート」を参照してください
DIV+CSS Web ページ レイアウト スキル例 19: CSS ハックを使用して IE を最適化する

場合によっては、いくつかの特別なバグを定義する必要がありますIE ブラウザの場合 世の中には非常に多くの CSS ハックがありますが、私はそのうちの 2 つだけを使用します。どちらも最も安全です。

1.注釈方法この書き込み方法については、IEブラウザー（他のブラウザーから隠された）によってのみ理解できます（他のブラウザーから隠されています）
* html p {
/*宣言*/
}
（c）時々、ie/が欲しい/ Win to be valid but IE/Mac to be hidden, you 「バックスラッシュ」テクニックを使用できます:
/* */
より持続可能なアプローチは、Microsoft のプライベート属性の条件付きコメント (条件付きコメント) を使用することです。この方法を使用すると、メインのスタイル シートの定義に影響を与えることなく、IE 用にいくつかのスタイルを個別に定義できます。このように: