WEB WebデザインにおけるDIV+CSS入門（転載元：China Webmaster Online）_html/css_WEB-ITnose

CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。
一、基本语法规范
分析一个典型CSS的语句：
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}

其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式； 样式声明写在一对大括号"{}"中； COLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔； "#FF0000"和"#FFFFFF"是属性的值(value)。

1、颜色值
颜色值可以用RGB值写，例如：color : rgb(255,0,0)，也可以用十六进制写，就象上面例子color:#FF0000。如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。
2、定义字体
web标准推荐如下字体定义方法：
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }

字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，； Lucida Grande字体适合Mac OS X； Verdana字体适合所有的Windows系统； Lucida适合UNIX用户 ； "宋体"适合中文简体用户； 如果所列出的字体都不能用，则默认的sans-serif字体能保证调用；

3、群选择器
当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，： p, td, li { font-size : 12px ; }
4、派生选择器
可以使用派生选择器给一个元素里的子元素定义样式，例如这样：
li strong { font-style : italic; font-weight : normal；} 
就是给li下面的子元素strong定义一个斜体不加粗的样式。
5、id选择器
用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层

次に、スタイル シートで次のように定義します:
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
ここで、「menubar」は定義した ID 名です。先頭の「#」記号に注目してください。
ID セレクターは派生もサポートしています。例:
#menubar p { text-align : right; margin-top : 10px; }
このメソッドは主に、レイヤーと複数の派生を持つより複雑な要素を定義するために使用されます。
6. カテゴリ セレクター
CSS では、先頭にドットを使用してカテゴリ セレクターの定義を示します。例:
.14px {color : #f60 ;font-size:14px ;}
ページでは、class=" を使用します。カテゴリ名" メソッド呼び出し:
14px size font
このメソッドは比較的シンプルで柔軟で、ページのニーズに応じていつでも作成および削除できます。
7. リンクのスタイルを定義します
リンクのスタイルを定義するために CSS で 4 つの疑似クラスが使用されます。つまり、a:link、a:visited、a:hover、a:active です。例:
a: link{フォントの太さ : 太字 ;テキスト装飾 : なし ;カラー : #c00 ;}
a:visited {フォントの太さ : 太字 ;テキスト装飾 : なし ;カラー : #c30 ;}
a:hover {font- weight : 太字 ;text -decoration : 下線 ;color : #f60 ;}
a:active {font-weight : 太字 ;text-decoration : none ;color : #F90 ;}
上記のステートメントはそれぞれ「リンク、訪問済みリンク」を定義します, マウスは「上で止まったときとマウスをクリックしたとき」スタイル。上記の順番で書かないと、予想と異なる表示になる場合がありますのでご注意ください。 「LVHA」の順序であることに注意してください。
はは、あまり読んでいると少しめまいを感じます。実際には、CSS には他にも多くの文法仕様があります。結局のところ、私たちはそれを段階的に進めているので、太ることは不可能です。一口で:)

2. CSS レイアウトの概要

CSS レイアウトと従来のテーブル レイアウトの最大の違いは、元の配置ではテーブルが使用され、テーブルの間隔またはカラーレスを使用してテキスト レイアウト セクションの間隔を制御することです。透明な GIF 画像も含まれますが、現在はレイヤー (div) を使用して、マージン、パディング、境界線、およびレイヤーのその他の属性を通じてセクションの間隔を制御します。

1. DIV を定義します

一般的な定義 div の例を分析します:
#sample{ MARGIN: 10px 10px 10px 10px;
PADDING:20px 10px 10px 20px;
BORDER-TOP: #CCC 2px Solid;
BORDER-RIGHT : # CCC 2px ソリッド;
ボーダー下: #CCC 2px ソリッド;
ボーダー左: #CCC 2px ソリッド;
背景: url(images/bg_poem.jpg) #FEFEFE リピートなし右下;
カラー: #666; TEXT-ALIGN: center;
LINE-Height: 150%; WIDTH:60%; }
説明は次のとおりです:

レイヤーの名前は「sample」です。このスタイルは、ページ上で

を使用して呼び出すことができます。
MARGIN は、レイヤーの境界線の外側に残された空白スペースを指し、ページの余白または他のレイヤーとのギャップを作成するために使用されます。 「10px 10px 10px 10px」はそれぞれ「上・右・下・左」（時計回り）の4つの余白を表し、すべて同じであれば「MARGIN: 10px;」と省略できます。マージンがゼロの場合は、「MARGIN: 0px;」と記述します。注: 値がゼロの場合、後にパーセント記号を続ける必要がある RGB カラー値 0% を除き、その他の場合には単位「px」を続ける必要はありません。 MARGIN は透明な要素であるため、色を定義できません。 PADDING は、レイヤーの境界線とレイヤーのコンテンツの間のスペースを指します。マージンと同様に、上、右、下、左の境界線からコンテンツまでの距離をそれぞれ指定します。すべて同じである場合は、「PADDING:0px;」と省略できます。左側を個別に指定したい場合は「PADDING-LEFT: 0px;」と記述します。 PADDING は透明な要素であるため、色を定義できません。 BORDER は、レイヤーの境界線を指します。「BORDER-RIGHT: #CCC 2px Solid;」は、レイヤーの右側の境界線の色を「#CCC」、幅を「2px」、スタイルを「実線」として定義します。 。点線のスタイルが必要な場合は、「dotted」を使用できます。 BACKGROUND はレイヤーの背景を定義します。これは 2 つのレベルで定義されます。最初に画像の背景を定義し、「url(../images/bg_logo.gif)」を使用して背景画像のパスを指定します。次に、背景色「#FEFEFE」を定義します。 「no-repeat」は、背景画像を繰り返す必要がないことを意味します。水平方向に繰り返す必要がある場合は「repeat-x」を使用し、垂直方向に繰り返す場合は「repeat-y」を使用し、カバーするまで繰り返します。背景全体を印刷するには、「リピート」を使用します。次の「rightbottom;」は、背景画像が右下隅から始まることを意味します。背景画像がない場合は、背景色 BACKGROUND: #FEFEFE のみを定義できます。 COLOR は、前のセクションで紹介したフォントの色を定義するために使用されます。
TEXT-ALIGN は、レイヤー内のコンテンツの配置を定義するために使用されます。center は中央、left は左側、right は右側です。
LINE-HEIGHT は行の高さを定義します。150% は、高さが標準の高さの 150% であることを意味します。LINE-HEIGHT:1.5 または LINE-HEIGHT:1.5em と書くこともできます。これらは同じ意味です。 WIDTH は定義されたレイヤーの幅で、500px などの固定値、またはここでは「60%」などのパーセント値にすることができます。この幅はコンテンツの幅のみを指し、マージン、ボーダー、パディングは含まれないことに注意してください。ただし、一部のブラウザではこのように定義されていないため、さらに試してみる必要があります。

2. CSS2 ボックス モデル
1996 年の CSS1 の発表以来、W3C 組織は、Web ページ上のすべてのオブジェクトをボックスに配置することを推奨しています。これらのオブジェクトの例には、段落が含まれます。 、リスト、タイトル、画像、レイヤー

。ボックス モデルは主に、コンテンツ、パディング、ボーダー、マージンの 4 つの領域を定義します。上で説明したサンプル レイヤーは典型的なボックスです。初心者にとっては、margin、background-color、background-image、padding、content、border のレベル、関係、相互影響について混乱することがよくあります。ここにボックス モデルの 3D 概略図を示します。理解しやすく、覚えやすいと思います。

3. 補助画像はすべて背景付きで処理する必要があります
XHTML+CSS レイアウトを使用するのは、最初は慣れない技術であると言うべきです。従来のテーブル レイアウト、つまり、すべての補助画像はすべて背景を使用して行われます。次のようなもの:

BACKGROUND: url(images/bg_poem.jpg) #FEFEFE no-repeat rightbottom;
をコンテンツに直接挿入することもできますが、これはお勧めできません。ここでいう「補助絵」とは、ページ上で表現すべき内容ではなく、装飾や間取り、注意喚起などにのみ使用される絵のことを指します。たとえば、フォト アルバムの画像、画像ニュースの画像、および上記の 3D ボックス モデルの画像はすべて、 要素を使用してページに直接挿入できます。その他の画像はロゴに似ています。タイトル画像とリストのプレフィックスは、背景または他の CSS メソッドを使用して表示する必要があります。

これには 2 つの理由があります:

パフォーマンスを構造から完全に分離し、CSS を使用してすべての外観とパフォーマンスを制御し、改訂を容易にします。
ページをより使いやすく、フレンドリーにします。たとえば、視覚障害者がスクリーン リーダーを使用する場合、バックグラウンド テクノロジを使用して実装された画像は読み上げられません。
3. 最初の CSS レイアウトの例

次のステップは、実際にレイアウトをデザインすることです。従来の方法と同様に、まず頭の中に大まかなアイデアがあり、それを Photoshop を使用して描きます。 Web 標準は構造とコンテンツに重点を置いているため、Web 標準に関連するほとんどの Web サイトは非常にシンプルであることがわかります。実際、Web ページのレイアウトは自由にデザインできます。従来のテーブルメソッドを使用して実装することもできます。テクノロジーには成熟の過程があります。DIV を TABLE と同じツールとして考えてください。使い方はあなたの想像力次第です。

注: 実際のアプリケーションでは、背景色の定義など、いくつかの場所では DIV はテーブルほど便利ではありません。しかし、何事にも得と損があり、選択はあなたの価値判断によって決まります。さて、早速始めましょう:

1. レイアウトを決定します
w3cn の初期設計スケッチは次のとおりです:

用表格的设计方法的话，一般都是上中下三行布局。用DIV的话，我考虑使用三列来布局,成为这样。

2、定义body样式
先定义整个页面的body的样式,代码如下：

body { MARGIN: 0px;
PADDING: 0px;
BACKGROUND: url(../images/bg_logo.gif) #FEFEFE no-repeat right bottom;
FONT-FAMILY: 'Lucida Grande','Lucida Sans Unicode','宋体','新宋体',arial,verdana,sans-serif;
COLOR: #666;
FONT-SIZE:12px;
LINE-HEIGHT:150%; }
以上代码的作用在上一天的教程有详细说明，大家应该一看就明白。定义了边框边距为0；背景颜色为#FEFEFE，背景图片为bg_logo.gif，图片位于页面右下角，不重复；定义了字体尺寸为12px；字体颜色为#666;行高150%。

3、定义主要的div
初次使用CSS布局，我决定采用固定宽度的三列布局(比自适应分辨率的设计简单,hoho，别说我偷懒，先实现简单的，增加点信心嘛！)。分别定义左中右的宽度为200:300:280，在CSS中如下定义:
/*定义页面左列样式*/
#left{ WIDTH:200px;
MARGIN: 0px;
PADDING: 0px;
BACKGROUND: #CDCDCD;
}
/*定义页面中列样式*/
#middle{ POSITION: absolute;
LEFT:200px;
TOP:0px;
WIDTH:300px;
MARGIN: 0px;
PADDING: 0px;
BACKGROUND: #DADADA;
}
/*定义页面右列样式*/
#right{ POSITION: absolute;
LEFT:500px;
TOP:0px;
WIDTH:280px;
MARGIN: 0px;
PADDING: 0px;
BACKGROUND: #FFF; }
注意：定义中列和右列div我都采用了POSITION: absolute;，然后分别定义了LEFT:200px;TOP:0px;和LEFT:500px;TOP:0px;这是这个布局的关键，我采用了层的绝对定位。定义中间列距离页面左边框200px，距离顶部0px；定义右列距离页面左边框500px，距离顶部0px；。

这时候整个页面的代码是：

页面左列

页面中列

页面右列

这时候页面的效果仅仅可以看到三个并列的灰色矩形，和一个背景图。但是我希望高度是满屏的，怎么办呢？

4、100%自适应高度?
为了保持三列有同样的高度，我尝试在#left、#middle和#right中设置"height:100%;"，但发现完全没有预想的自适应高度效果。经过一番尝试后，我只好给每个div一个绝对高度:"height:1000px;"，并且随着内容的增加，需要不断修正这个值。难道没有办法自适应高度了吗？随着阿捷自己学习的深入，发现一个变通的解决办法。

自适应高度
如果我们想在3列布局的最后加一行页脚，放版权之类的信息。就遇到必须对齐3列底部的问题。在table布局中，我们用大表格嵌套小表格的方法，可以很方便对齐三列；而用div布局，三列独立分散，内容高低不同，就很难对齐。其实我们完全可以嵌套div，把三列放进一个DIV中，就做到了底部对齐。下面是实现例子(白色背景框模拟一个页面)：

Body
#header{ MARGIN: 0px; BORDER: 0px; BACKGROUND: #ccd2de; WIDTH: 580px; HEIGHT: 60px;}
#mainbox { MARGIN: 0px; WIDTH: 580px; BACKGROUND: #FFF; } 
#menu{ FLOAT: right; MARGIN: 2px 0px 2px 0px; PADDING:0px 0px 0px 0px; WIDTH: 400px; BACKGROUND: #ccd2de; }
#sidebar{ FLOAT: left; MARGIN: 2px 2px 0px 0px; PADDING: 0px; BACKGROUND: #F2F3F7; WIDTH: 170px; }
#content{ FLOAT: right; MARGIN: 1px 0px 2px 0px; PADDING:0px; WIDTH: 400px; BACKGROUND: #E0EFDE;}

#footer{ CLEAR: both; MARGIN: 0px 0px 0px 0px; PADDING: 5px 0px 5px 0px; BACKGROUND: #ccd2de; HEIGHT: 40px; WIDTH: 580px; }。
这个例子的页面主要代码如下：

   

   

   

特定のスタイルシートは、対応するセクションに記述されています。重要な点は、#mainbox レイヤーが #menu、#sidebar、#content の 3 つのレイヤーにネストされていることです。 #content のコンテンツが増えると、 #content の高さが増加し、 #mainbox の高さも拡張され、 #footer レイヤーは自動的に下に移動します。これにより、高度な適応性が実現されます。

#menu と #content がページの右側「FLOAT: right;」にフローティングし、#sidebar が #menu レイヤーの左側「FLOAT: left;」にフローティングしていることにも注目してください。はフローティング方式の位置決めであり、絶対位置決めを使用してこの効果を実現できます。

この方法のもう 1 つの問題は、#sidebar の背景を 100% 正確にできないことです。一般的な解決策は、ボディの背景色で塗りつぶすことです。 (Mozilla などのブラウザでは #mainbox の背景色が無効のため、#mainbox の背景色は使用できません。)
4. CSS2 ボックスモデルの 3D 図

CSS2 のボックスモデルは、私たちの

などのレイアウトの配置はボックス モデルの仕様に従います。ボックス モデルによって定義されるマージン、背景色、背景画像、パディング、コンテンツ、境界線は、初心者のレベル、関係、および相互作用によって混乱することがよくあります。ここにボックス モデルの 3D 概略図を示します。理解しやすく、覚えやすいと思います。

元の画像: hicksdesign

IE ブラウザーと Mozilla ブラウザーではボックス モデルの解釈が一貫していないため、位置決めに問題が生じることに注意してください。

IE は 2 つの div 間の距離を計算します。距離が の場合、1px 境界線はカウントされますが、Mozilla はカウントしません。div の幅を設定した後、パディングに値を追加すると、IE はこの値を幅から減算しますが、Mozilla はその値を幅に加算します。この値について。

5. w3c 技術アーキテクチャの紹介
原文: http://www.w3.org/Consortium/technology
原著者: w3c
翻訳: Ahong

凡例の説明
W3C 技術アーキテクチャ図 2 層モデルが示されています。World Wide Web アーキテクチャ (「One Web」というラベルが付いています) は、インターネット (内部) アーキテクチャ上に構築されています。図のリッチ Web レイヤーは、W3C の関心領域と開発中のテクノロジを示しています。

Web アーキテクチャは一連のレイヤーとして描かれており、各レイヤーは他のレイヤーの上に構築されます。下から上に:

URI/IRI、HTTP Web アーキテクチャ原則 XML Infosets、RDF(S) グラフ XML、名前空間、スキーマ、XQuery/XPath、XSLT、DOM、XML Base、XPointer、RDF/XML、SPARQL

最上位には、Web アプリケーション、モバイル、音声、Web サービス、セマンティック Web、およびプライバシーの主要な W3C アクティビティ グループに対応する 6 つのボックスが含まれています。

[インタラクション] ボックスには、XHTML、SVG、CDF、SMIL、XForms、CSS、および WCID がリストされます。 [モバイル] ボックスには、XHTML Basic、Mobile SVG、SMIL Mobile、XForms Basic、CSS Mobile、MWI BP がリストされます。 「Voice」ボックスには、VoiceXML、SRGS、SSML、CCXML、および EMMA がリストされます。「Web サービス」ボックスには、SOAP、XOP、WSDL、WS-CDL、および WS-A がリストされます。「Semantic Web」ボックスには、OWL、SKOS、および RIF がリストされます。 [プライバシー] ボックスには、P3P、APPEL、XML 暗号化、XML 署名、および XKMS がリストされています

オレンジ色のバーは、Web アクセシビリティ、国際化、モバイル アクセス、デバイスの独立性、および品質保証の領域を接続します。

この図例は、World Wide Web の基本フレームワークと W3C の取り組みの焦点を示しています。

URI、HTTP、XML、RDF の基盤は、作業の 5 つの側面をサポートします。 Web アクセシビリティ、国際化、デバイスの独立性、品質管理などのトピックが W3C テクノロジーに統合されています。

W3C は、World Wide Web を元の設計 (基本的な HTML、URI、HTTP) から将来必要となるモデルに変換するために取り組んでいます。 W3C のテクノロジーは、将来の World Wide Web が情報世界における安定性、拡張性、適応性の高い基本フレームワークとなるのに役立ちます。
6. CSS 互換性ポイントの分析 IE と FF

CSS 互換性ポイント:

DOCTYPE は CSS 処理に影響します

FF: margin-left と margin-right が auto に設定されている場合、div はすでに中央に配置されていますが、IE は中央に配置されませんwork

FF: body text-align を設定するとき、div は margin: auto (主に margin-left、margin-right) を中央に設定する必要があります

FF: パディングを設定した後、div は高さと幅を増やしますが、 IE ではサポートされないため、使用する必要があります! important 追加の高さと幅を設定します

FF: ! important はサポートされていますが、IE は無視します。FF のスタイルを設定するには ! important を使用できます

div の垂直方向のセンタリングの問題:vertical-align:middle; 行間隔を DIV 全体と同じ高さに増やします。 line-height:200px; 次に、テキストを挿入すると、垂直方向の中央に配置されます。欠点は、ラップせずにコンテンツを制御する必要があることです

cursor: ポインターは IE FF でカーソルの指の形を同時に表示できますが、手は IE でのみ表示できます

FF: リンクに境界線と背景色を追加するには、改行がないように、display: block と float: left を設定する必要があります。メニューバーに関して、a とメニューバーの高さを設定するのは、下端の表示のズレを避けるためです。高さが設定されていない場合は、メニューバーにスペースを挿入することができます。 XHTML+CSS アーキテクチャを使用することには多くの利点がありますが、未熟な使用法によるものであるか、不明確な考え方によるものであるかにかかわらず、いくつかの問題があることも事実です。皆さんが探し回らないように、私が遭遇した問題のいくつかを以下に書き留めておきます。 ^

1. mozilla Firefox と IE の BOX モデルの説明 不一致により 2px の違いが生じます。 解決策:

div{margin:30px! important;margin:28px;}

これら 2 つのマージンの順序に注意してください。 Ajie 氏によると、! important 属性は IE では認識できませんが、他のブラウザでは認識できるそうです。実際、IE では次のように解釈されます:

div{maring:30px;margin:28px}

定義を繰り返すと、最後の定義に従って実行されるため、単に margin:XXpx と書くことはできません!重要;

2、IE5 および IE6 IE5 では、BOX の解釈に一貫性がありません。 div{width:300px;margin:0 10px 0 10px;} の幅は、300px-10px (右パディング)-10px (左パディング) として解釈されます。最終的な div の幅は 280px ですが、IE6 の他のブラウザでは、幅は 300px + 10px (右パディング) + 10px (左パディング) = 320px として計算されます。現時点では、次の変更を行うことができます

div{width:300px! important;width /**/:340px;margin:0 10px 0 10px}

、これについて/**/ IE5 と Firefox がサポートしていることしかわかりませんが、IE6 はサポートしています。そうではありません。誰かが理解したら、教えてください、ありがとう！ :)

3. Mozilla では ul タグにデフォルトでパディング値がありますが、IE ではマージンのみが値を持つため、最初に定義してください

ul{margin:0;padding:0;}

でほとんどの問題を解決できます

4. スクリプトに関しては、言語属性は xhtml1.1 ではサポートされていません。コードを

• HTMLの知識のまとめ
• HTMLを早く学ぶ方法
• html xhtml xml の違い
• src 属性と href 属性の違い
• HTML5とCSSの置き換え利用について

福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！

私たちについて免責事項Sitemap

© php.cn All rights reserved