CSS は DHTML の基礎であり、CSS はページ上の HTML 要素の表示スタイルを設定するために使用されますが、CSS-P は CSS の拡張機能であり、HTML の表示スタイルを制御するために使用できます。 Web ページまたはページ上の要素。次の 2 つのリンクでは、CSS と CSS-P の詳細な技術マニュアルを提供しています:
W3C CSS-Positioning
Builder.com's CSS Guide
このコースでは、CSS を繰り返し紹介します。
DIV タグを使用する
主に < div > タグに依存して、それを「DIV ブロック」と呼びます。 DIV 要素」、「CSS レイヤー」、または単に「レイヤー」。
DIV タグの使用方法は他のタグと変わりません。
< div >
効果は < P < /P > を使用する場合と同じです。
しかし、CSSをDIVタグに入れると、HMTL要素が画面上で表示される特定の位置を指定したり、特定の位置に四角形や線を描画したり、特定のブロック内でテキストをどのように表示するかを指定したりできます。最初に行うことは、DIV 要素 (つまりレイヤー) に一意の ID を追加することです (ID の役割はレイヤーに名前を付けるのと似ています)。
< div id="abc" >
ID番号を追加します
< /div >
レイヤーのIDは任意に設定でき、文字、数字、アンダースコアで構成できます。ただし、文字で始める必要があります。
CSS を実装するには、次の 2 つの方法を使用できます:
Embedded CSS:
Embedded は最も一般的に使用される方法です
< div id="abc" style="this is style" >
Embedded CSS
< /div >
外部スタイルシート:
外部導入方法を使った場合も結果は同じですが、書き方が少し複雑になります。
< style type="text/css" >
< !--
#abc {this is style}
-- >
外部スタイルシートの参照
< /div >
クロスブラウザ CSS プロパティ:
私たちの目標は、Netscape と IE の両方でスムーズに記述された DHTML を作成することです。 CSS プロパティの記述にはいくつかの制限があります。一般に、次のプロパティは W3C によって定義された標準です。
position
DIV の配置方法を定義します。「相対」は他の HTML 要素に対する DIV の相対的な位置を指します。「絶対」はウィンドウ内の DIV の絶対的な位置を指します。このレッスンでは主に「絶対」について話します。
left
左マージン（ウィンドウに対するピクセル幅）
top
上マージン
幅
レイヤー幅高さ
床の高さ
すべての DIV 内 すべてHTML 要素は、この制限された幅と高さの範囲内に収まります。
clip
DIVの表示部分を定義します。フォーマットは次のとおりです:clip(top,right,bottom,left)
visibility
DIVブロックを非表示または表示します。その値は「visible」です。 「非表示」、「継承」 (デフォルト)。
z-index
ページに表示される DIV のレベル。
background-color
DIVの背景色です。 Netscape では、このプロパティはテキストの背景色として表示されます。
layer-background-color
NetscapeブラウザのDIVの背景色。
background-image
DIV の背景画像 Netscape では、この属性はテキストの下に背景画像として表示されます。
layer-background-image
Netscape の DIV の背景画像。
CSSの構文はHTMLとは異なり、属性と値を区切るのに「:」が使用され、各種属性を区切るのに「;」が使用されます。
位置: 絶対;
左: 50px;
上: 100px;
幅: 200px;
高さ: 100px;
clip:ピクセル 200ピクセル 100ピクセル 0ピクセル);
可視性: 表示;
z-index: 1;
background-color:#FF0000;
layer-background-color:#FF0000;
background-image:URL(filename.gif);
layer-background-image:URL(filename.gif);
在设置CSS属性时你有较大的灵活性。你不必定义所有的CSS属性，你可以把所要定义的属性写在一行里，也可以分开几行来写，或是在每个属性之间空开一段距离。大小的值为pixel（像素），在CSS中可以简写为“px”。
内部CSS例子：
< div id="abc" style="position: absolute;
left:50px; top:100px; width:200px; height:100px;
clip:rect(0px 200px 100px 0px);
visiblity:visible;
z-index:1;" >
< /div >
外部CSS例子：
< style type="text/css" >
< !--
#abc { position: absolute;
left:50px; top:100px; width:200px; height:100px;
clip:rect(0px 200px 100px 0px);
visiblity:visible;
z-index:1;}
-- >
< /style >
< div id="abc" >
< /div >
;*******************************************
以
align="center"
可选值：center ; left ; right 。决定字、画、表格等居中、靠左或靠右。
CSS单元的位置和层次-div标签
我们都知道，在网页上利用HTML定位文字和图象是一件“令人心痛”的事情。我们必须使用表格标签和隐式GIF图象，即使这样也不能保证定位的精确，因为浏览器和操作平台的不同会使显示的结果发生变化。
而CSS能使你看到希望的曙光。利用今天我们即将学到的CSS属性，你可以精确地设定要素的位置，还能将定位的要素叠放在彼此之上，还有...还有......你自己慢慢看吧！
Cascading Style Sheets（CSS）是 DHTML 的基础。CSS 用来设定你网页上的元素是如何展示的。Cascading Style Sheets Positioning（CSS-P）是 CSS 的一个扩展，它可用来控制任何东西在网页上或是说在窗口中的位置。请你记住这两个名词：CSS 和 CSS－P。下面四个英文网址提供了详细的关于 CSS 和 CSS-P 的文件和解释。
● 1．使用 DIV 标签 （div）
当我们使用 CSS-P 的时候， 我们主要把它用在 DIV（division）tag 上。当你把文字，图象，或其他的放在 DIV 中，它可称作为“DIV block”，或“DIV element”或“CSS-layer”，或干脆叫“layer”。而中文我们把它称作“层次”。所以当你以后看到这些名词的时候，你就知道它们是指一 段在 DIV 中的 HTML。
使用 DIV 的方法跟使用其他 tag 的方法一样：
如果单独使用 DIV 而不加任何 CSS-P, 那么它在网页中的效果和使用
是一样的。但当我们把 CSS-P 用到 DIV 中去以后，我么就可以严格设定它的位置。首先我们需要给这个可以被 CSS-P 控制的 DIV 一个 ID 或说是它的名字。比如说我们给下面这个 DIV 的名字是 truck。给名字的目的是我们以后可用JavaScript 来控制它， 比如说移动它或改变它的一些性质等等。
This is a truck
给层次取什么名字是随意的，名字可以是任何英文字母和数字，但第一个必须是字母。有两种把 CSS-P 应用到 DIV 的方法。
Inline CSS：Inline 是最常用的方法。
This is a truck .
External STYLE tag：使用 External 方法的结果是一样的。我们会在以后的课程里再详细解释这种方法。现在我们主要讨论Inline 方法。请注意在 External 方法里，在 STYLE 里的 ID 和 DIV 里的关系。
クロスブラウザ CSS プロパティ:
私たちのコースの主な目的は、作成した Web ページを NS4 と IE4 の両方で動作させることです。そのため、主に両方に共通するプロパティについて説明します。次のプロパティは、W3C によって与えられた標準に準拠しています。
position DIV タグの配置方法を決定します。 「相対」は、DIV の位置が他のタグに対して相対的であることを意味し、「絶対」は、DIV タグの位置が、DIV タグが配置されているウィンドウに対して相対的であることを意味します。
left ウィンドウの左側からの相対位置
top ウィンドウの上端からの相対位置
width DIVタグの幅。 DIV 内のすべてのテキストまたは HTML が内部にあります。
height DIVタグの高さ。このプロパティは、階層をクリップする場合を除き、ほとんど使用されません。
clip は、レイヤーのクリッピング (表示) 部分を与えます。クリップすると、DIV が正確に定義可能なボックスとして表示されます。次の 4 つの値を使用して、DIV 内のこのボックスの位置とサイズを指定できます。
clip:rect(top,right,bottom,left);
visibility「visible」、「hidden」、「inherit」の値に従って DIV を非表示または表示します。
z-index DIVタグの三次元位置。値が大きいほど、DIV は上に位置します。
background-color DIVの背景の色。
layer-background-color NetscapeのDIV背景色。
background-image DIVの背景画像。
layer-background-image Netscape の DIV の背景画像。
● 2．絶対位置決めと相対位置決め (位置)
絶対位置決め:
位置決め属性はネチズンの幸福への扉を開く鍵になります:
H4 { 位置: 絶対位置; 左: 100px; 上: 43px }
この CSS ルールは、ブラウザーに
left 属性と top 属性は非常に直感的で、left (左) はブラウザ ウィンドウの左側からの距離を設定し、top (上) はブラウザ ウィンドウの上部からの距離を設定します。これらの距離を設定するときは、学習したさまざまな度単位やスケール値を使用できます。スケール値を使用する場合、スケール値は親フィーチャの寸法を基準とします。
何を狙えますか？何でも！段落、単語、GIF および JPEG 画像、QUICKTIME ムービーなど。
相対配置:
絶対配置を使用すると、ページ上の他の要素の配置設定に関係なく、ページ上の要素の独立した位置を正確に配置できます。相対配置とは、配置しているフィーチャの位置が、ファイル内で割り当てられた位置に対して相対的であることを意味します。例:
I {position:relative; left: 40px; top: 10px }
相対配置の鍵は、配置された要素の位置が通常あるべき場所に対して相対的であることです。相対位置決めユニットは、通常の静止位置決めユニットの行間に出現し、静止位置決めユニットから完全に分離することなく位置決めされます。相対配置の使用を中止すると、テキストの表示位置は通常の位置に戻ります。相対位置を使用する場合は注意してください。そうしないと、ページが乱雑になりやすくなります。
相対配置と絶対配置に加えて、静的なパラメータ値も使用できます。 static は、position 属性のデフォルト値です。使い方は通常のHTMLにおける配置方法と同じであり、特別な配置設定を付けることはできません。つまり、margin プロパティ、または float プロパティを使用してセルを浮動させること以外は、セルの位置に影響を与えることはできません。
●３．位置決めユニットの制御 (幅、高さ、可視性)
位置決めユニットの左上隅の位置を制御することに加えて、ユニットの幅と高さ、ページ上のユニットの可視性も制御できます。
幅: 配置された要素は、ページ上に表示されるときにも左から右に表示されます。 width 属性を使用すると、右側の文字の流れに制限を設定する、つまり要素の幅を設定できます。
DIV {position:Absolute; left: 200px; top: 40px; width: 150px }
ブラウザはこのルールを受け取ると、ルールで指定された効果に従ってテキストを表示し、最大値も調整します段落の水平サイズ 150 ピクセルに制限されます。
width 属性は、絶対配置された要素にのみ適用されます。学習した長さの単位を使用することも、親フィーチャを基準としたスケール値を使用して幅を設定することもできます。 IE 4 では、この属性は画像にも使用できます。幅設定を使用して、画像を人為的に広げたり圧縮したりできます。
高さ: 理論上、高さは垂直方向を除いて幅と同様に設定する必要があります:
DIV {position:Absolute; left: 200px; height: 150px; }
ここにあります。一部のブラウザでは高さ属性がサポートされていないため、「理論的に」としました。
可視性: CSS を使用すると、要素がページ上に表示されないように非表示にすることができます。この属性は、位置が特定されたフィーチャと位置が特定されていないフィーチャの両方に適用されます。
H4 { Visibility: hidden }
オプション:
visible はフィーチャーを表示します
hidden はフィーチャーを非表示にします
inherit は、親フィーチャーの可視性設定を継承することを意味します。
値継承はデフォルト値です。これにより、セルは親セルの表示設定を継承します。したがって、段落が非表示の場合、段落に含まれるインライン セルも非表示になります。この継承は、明示的に指定された可視性によってオーバーライドできます。たとえば、セクション内の EM セルが表示可能に指定され、そのセクションが非表示になっている場合、セクション内の他のコンテンツはすべて表示されなくなり、EM セル内のテキストのみが表示されます。
;********************************************** ******* ****
3. スタイルシートの配置
Author: Awen
スタイルシートは、異なる場所に配置され、異なる効果範囲を持ちます。スタイルシートは大きく分けてインラインスタイルシートと外部スタイルシートに分けられ、ページ上に配置する方法、外部参照する方法、外部インポートする方法があります。
1. インライン スタイル シート
前のレッスンで示した例は、実際には、スタイル シートのルールが < HEAD> と < /HEAD> の間に配置されています。現在の HTML ページ全体。
インラインスタイルシートには、HMTL ページ内で特定のマークを個別に指定し、そのスタイルを指定する直接挿入方法もあります。
< Table style=" font-size: 10pt; color :blue">
表の文字サイズを10pt、色を青と定義します。
2. 外部スタイル シート
ウェブサイトのカテゴリ ページをコンパイルするとき、スタイルは同じか類似していることがよくあり、テーブル ルールが作成されるたびに同じ面倒で複雑なスタイルが挿入されます。明らかに私たちが望んでいることではありません。
同じスタイルで別のページに実装するにはスタイルシートを書く これは外部スタイルシートを導入することで実現できます。また、外部スタイル シートが変更されると、そのスタイル シートを参照する各 HTML ページのスタイルもそれに応じて変更され、それぞれを手動で変更する必要はありません。
外部スタイルシートとは、拡張子が.cssの完全に独立したテキストファイルを作成することを指し、ファイルの内容には関連するHTML言語を除いたスタイルシート情報が入力されます。
たとえば、外部スタイル シートに次のように入力します。
body { line-height: 130pt}H1,H2,H3,H4,H5,H6 {りー
りー
りー
< STYLE> タグが欠落しているだけで、記述された外部スタイル シートの残りの部分は変更されていないことがわかります。入力後、example.cssとして保存します。
外部スタイルシートを参照するには2つの方法があります。
(1) < LINK> タグを使用して外部スタイル シートにリンクします
外部スタイル シートにリンクするには、次のステートメントを使用します。
HREF を使用する必要があります パス情報が含まれており、スタイルシートファイルと HTML ドキュメントが同じディレクトリにあることを意味します。
1 つの HTML ドキュメントで複数の外部スタイル シートを参照できます。例:
< LINK REL=STYLESHEET HREF="example.css">
< LINK REL=STYLESHEET HREF="style/other. css ">
最初にリンクされた example.css は、ドキュメントのデフォルトのスタイル シートとして機能します。スタイル定義に矛盾がある場合は、前者が最初に満たされる必要があります。
(2) @IMPORT を使用して、ページに外部スタイルシート情報をインポートします。 < STYLE> タグ内にあります。例：
りー
もちろん、このメソッドでは複数の外部スタイルシート情報を同時に参照することもできます。スタイルシートの優先順位はインポートの順序に従って設定されます。
これら 3 つの方法は混合して使用することもできます。つまり、これら 3 つの方法を 1 つのページ内で同時に使用することもできます。ただし、スタイルシート情報のルールが多すぎると、競合が発生する可能性が高くなります。例えば、引用されているスタイルシート情報にはH1タイトルの設定がいくつかありますが、どれがメインでしょうか？このとき、どのスタイルシートが最初に参照されるかによって、どちらが優先されるかが決まります。したがって、複雑なスタイルシート情報を扱うときは、スタイルシートの競合の可能性を十分に考慮し、競合をより適切に解決し、それらを調整して一致させる必要があります。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
