div+css_html/css_WEB-ITnose の基礎知識

データのレイアウトと表示には従来のページテーブルが使用されます
欠点:
1. 表示スタイルとデータがバインドされています
2. レイアウト時の柔軟性が高くありません。
3. ページには多数の

要素が含まれる可能性があり、コードが冗長になります
4. 帯域幅の増加 (200 バイト * 2000000 * 30=?)。
5. 検索エンジンはこのレイアウトを好みません。
利点:
1. 理解するのは比較的簡単です
2. 異なるブラウザーで見られる効果は一般に同じです。
3. データの表示に非常に適しています。
div+css
基本的な考え方: データとスタイルは分離する必要があります
div (セクション) データ
データの表示方法を指定する css ファイル。
要約すると、div+css は人気のある Web ページ レイアウト テクノロジーです。
div は、表示する必要があるデータ (テキスト、グラフなど) を保存するために使用され、データと表示を指定するために使用されます。お互いの効果を分離することができます。
div は、コンテンツ (テキスト、画像、要素) を保存するために使用されるコンテナーです。
CSS は、div に配置されたコンテンツの位置や外観など、コンテンツの表示方法を指定するために使用されます。
例:
my.css
.style{
/*Width*/
width: 400px;
height:300px;/*必ずセミコロンを書いてください*/
background-color:silver;
Solid red border:1px ;
margin-left:400px;
margin-top:250px;
padding-top:20px;
padding-left:40px;
}

デモ.html


< ;CSS 入門の小さなケース


< /head>

div+cssの利点
div+css については、Web デザインの歴史の 3 つの時期について言及する必要があります: table、table+css、div+css
①table Web デザイン: コンテンツとスタイル（見た目）とレイアウト）が混在
②table+css webデザイン：テーブルレイアウト、cssで見た目を指定
③div+css webデザイン：divでコンテンツを配置、cssでスタイル（見た目とレイアウト）を指定、コンテンツとスタイルは完全に分離されています。
/*.s1 は用語クラス セレクターを使用します*/
.s1
{
color:green;
font-size:30px;
}
.s2
{
color: yellow;
font-size:12px;
}
.s3
{
色: 青; テキスト装飾: 下線;
}