CSSスタイルの書式設定とページレイアウト要素は、デザイン効果を達成するために結合することにより、メインWebページのレイアウト実用性と感謝のフェーズを実現しています。
- フォント：DIV {フォントファミリ：「微軟雅黒」;}ユーザーのローカルコンピュータにインストールされていない場合ならば、フォントあなたがそれを設定しているため、マイクロソフトエレガントな黒のためのあなたのテキストのフォントとしてセットは、ここでは、珍しいフォントを設定しないように注意してくださいこれは、ブラウザのデフォルトのフォントを表示します。さて、一般的にページを設定することを好む、「マイクロソフトエレガントな黒」、次のコード（ユーザーがフォントスタイル、あなたのセットを使用すると、ユーザーのローカルコンピュータにインストールされているフォントを設定するかどうかに依存するかどうかを見ることができますので。）：体{フォントファミリ：「微軟雅黒」 ;}または身体{フォントファミリ：「微軟雅黒」;}注：最初の方法は、より良い第2の方法互換性の数を超えています。もちろん、あなたが行うにはどのように特殊なフォントを使用したい場合は？カスタムフォントCSS3によって実現フォント面@ {フォントファミリ：dhnblog; SRC：URL（ '画像/ fzm.ttf'）;} / * *カスタムフォントタイプ/
- サイズは、色：div.box {フォントサイズ：14px ;色：＃1 F90;} 提供されたテキスト・ページ・サイズが14個のピクセル、及び＃F90にフォントカラーセットである。さらに、三色のフォームに分割します：。このように特定の参照とともに＃1 F90、としてRGB（255,255,255）は、B。英単語C.16バンド、CSSのCSSコア構文導入基本概念関連する色プレゼンテーションで
- 太字：あなたはH1-H6除く太字テキスト、または強いのラベルを設定したい場合は、することもできCSSスタイルのフォントウェイト：太字;太字のテキスト
- 斜体：CSSスタイルフォントスタイルで：イタリック;テキストイタリック関数は、<EM>が</ em>のタグ、通常のテキストのフォントの太さと同様の効果を達成するために：ノーマル;
- 下線：テキスト装飾：下線; / *下線* /
- 取り消し線：淘宝網、テキスト装飾によってJingdongは電気の供給業者のショッピングサイト共通フォントの取り消し：ライン・スルー;として/ *行削除* /と同じ効果<デル> </デル>
- インデント：このテキストインデントによって、空のセルの前に習慣の第2項を書く：2EM; / * *最初の行のインデント/ 2EMは、テキストの2倍の大きさを意味している。この特定のスタイルを実現。
- 行間隔（行の高さ）：行の高さ/ *行間（行の高さは）* /、次のコード行の高さを属性：2EM;段落の行間が二回達成するために設定しました。
- テキストの間隔、文字間隔：文字間隔であることを特徴とする/ *単語間隔、単語間隔単語* /単語間隔がある/文字間隔* * /
- アラインメント：ブロック要素は、テキスト整列によって提供されているテキスト、サイド整合2枚の画像、中心、左右ディスプレイ、等
1 <！DOCTYPE HTML > 2 < HTML > 3 < ヘッド> 4 < メタのcharset = "UTF-8" > 5 < タイトル> CSS格式化排版</ タイトル> 6 < スタイルタイプ= "テキスト/ CSS" > 7 DIV { 8 フォント-family ：「微軟雅黒」。/ * 字体* / 9 行の高さ：2EM 。行間隔* / 10 テキストALIGN =左：正当化; / * 2側アライメント* / 11 } 12は div.box { 13は 、フォントサイズ：14px ; / * テキストのサイズ* / 14 カラー：＃1 F90 ; / * フォントの色* / 15 テキストインデント：2EM ; / * 最初の行のインデント* / 16 } 。17 ■は>スパン{ 18は、 フォントのウェイト：太字; / * テキスト太字* / 19。 フォントスタイル：斜体; / * 斜体* / 20は 、テキスト装飾：下線; / * 下線付き* / 21は、 テキスト装飾：ライン・スルー; / * 削除行* / 22 } 23は、 EM { 24 文字間隔：10pxの; / * 単語間隔、ワード間隔ワード* / 25 ワード間隔：5pxの; / * 文字間隔は、/ * 26がある } 27 </ スタイル> 28 </ ヘッド> 29 < 身体> 30 < divのクラス= "ボックス" >最初の学習ではなく、盲目的について学ぶことを学ぶ理由を知っている必要があります。、最も重要なことは態度である態度を学び、方法、結果を決定します。根本的に学習が正しいイデオロギー、価値のあることだと信じてする必要が学ぶための勢いを持っています。< スパン>多くの例が異なる考え方が自分で決定している学生になる方法を学ぶに健全な楽観的な態度に、異なる学習効果を持つことになります示しています。行動の運命を決定し、何人かの人々が自分自身を豊かにか仕事を見つけるために学ぶ、私たちは、正確な理由自分自身の学習を理解する必要があります。</ スパン> < デル>あなたが学ぶことではない盲目的に、学ぶべき理由を知るための最初のものです。学ぶための最もimdelortant事は態度です。態度や方法は、結果を決定します。</ デル> < EM >あなたは基本的にその学習が価値のあるものだと思うする必要があります。あなたはイデオロギー的に正しい場合にのみ、あなたは学ぶ意欲を持つことができます。</ EM > </ DIV > 31 </ ボディ> 32 </ HTML >
Webデザインのための強固な基盤を築くためにボックスモデルを学習、Webデザインを通して結果を達成するためのフォーマットCSSレイアウトは、それがCSSレイアウトの礎石で、次の要約ボックスモデルの概念、構造、サイズ：一般的であるでCSSでは、htmlタグの要素ブロック要素、インライン要素（また、線要素として知られている）とインラインブロック要素：3つの異なるタイプに分けます。
☆块状元素：の<div>、<P>、<H1> ... <H6>、<オール>、<UL>、<LI>、<DL>、<表>、<アドレス>、<BLOCKQUOTE> 、<フォーム>
☆内联元素：<A>、<span>を、<BR>、<I>、<em>の、<強い>、<label>は、<Q>、<VAR>、<引用>、<コード>
<IMG>、<入力>：☆内の大規模な要素を持ちます
概要：ブロックレベル要素は何ですか？HTMLの<DIV>、<P>は、<H1>、<FORM>、<UL>と<LI>ブロックレベル要素です。表示設定：ブロックは、表示素子としてのブロックレベル要素です。{表示：ブロック;}としてインライン要素は、要素は、バルク素子特性を有するようにブロック要素を変換することです。
ブロック要素の特徴：1、ブロックレベル要素のそれぞれの新しい行を開始し、それ以降の要素は別々の行にもあります。2、高さ、幅、行の高さ、及び上部マージンと下部要素を設定することができます。図3は、要素の幅が設けられていない場合には、設定された幅でない限り（同じ幅及び親要素）親コンテナ自体の100％です。
HTMLでは、<スパン> A、<ラベル>、<強い>と<EM>は、典型的なインライン要素（インライン要素）（インライン）の要素です。もちろん、コードブロック要素も表示することができる：インライン要素は、インライン要素に設定されています。DIV {表示：インライン;} DIV要素は、バルクインライン要素に変換され、DIV要素となるような特性と関連する要素。
インライン要素の特性：1、および1つの行に他の要素; 2、高さ、幅、及び上下の余白は、要素を設定することができない; 3、要素の幅は、それがテキストや画像幅を変更できない含まれていることです。
インライン、ブロック、インライン要素のブロック要素である：インラインブロック要素（インラインブロック）もインライン要素、ブロック要素、コード表示の特性を有しています。（新CSS2.1）、<IMG>、<input>タグのインラインブロックそのタグです。
インラインブロック要素の特性：1、および1つの行に他の要素; 2、高さ、幅、行の高さ、及び上部マージンと下部要素を設定することができます。
ボックスモデル
ボックスモデルのフレームの境界線：2ピクセル固体赤;完全な言葉遣い：ボーダー幅：2ピクセル;ボーダースタイル：固体;国境色：赤;
注：1、ボーダースタイル（境界線のスタイル）は、共通のスタイルがあります。破線（点線）|固体（実線）|（点線）を点在。
ボーダー色：2、ボーダー色カラー（境界色）など、16進数の色で提供されてもよい＃888; // Doが＃1、上記を忘れません。
最も一般的なまたはピクセル（px）、（非常に一般的ではなく）厚い|中|薄い：3、ボーダー幅の幅（ボーダー幅）に設定することができます。
DIV {ボーダー底：1pxsolidred; }
次の三つの辺（上、右、左）境界を設定達成するために、他のコードを使用することも同様に可能：
ボーダートップ：1pxsolidred;
ボーダー右：1pxsolidred;
ボーダー左：1pxsolidred。
幅と高さが同じではないことを理解し、ボックスモデルの幅と高さは、我々は、通常、オブジェクトの幅（幅）と定義された高いCSS（高さ）を呼び出し、内容物が充填された範囲を指します。
従って、実際の幅（ボックスの幅）の元素含有量=幅+ + +右ボーダー右ボーダーフィラー左境界および左境界+ + +左右のパディングです。
距離は、要素と呼ばれるフレームコンテンツ、の間に設けることができる「フィル」充填は、上部、右、下、左（右回り）に分けることができます。以下のコード：
DIV {パディング：20px10px15px30px;}
配列を混同してはなりません。上記のコードは別に書くことができる：
DIV {
パディングトップ：20ピクセル;
パディング右：10pxの;
パディング底：15ピクセル;
パディング左：30px;
}
右、下、左充填、上部が10pxのであれば、缶ライト
DIV {パディング：10pxの;}
垂直充填10pxの同じ場合、20ピクセルとほぼ同じ、書くことができる：
DIV {パディング：10px20pxを;}
要素と他の要素との間の距離は、境界線（マージン）を用いて設定することができます。境界は、上、右、下、左に分かれています。以下のコード：
DIV {マージン：20px10px15px30px;}
別々に書くことができる：
DIV {
マージントップ：20ピクセル;
マージン右：10pxの;
マージン底：15ピクセル;
マージン左：30px;
}
右下の境界上に残される場合10pxのような、書くことができる：
DIV {マージン：10pxの;}
10pxの同じ上下の境界、20ピクセルとほぼ同じで、書くことができる場合：
DIV {マージン：10px20pxを;}
要約する：サイドバーのパディングとのマージン、パディングの違いを、国境外のマージン。