W3C (The World Wide Web Consortium) が Cougar というコード名で呼ばれる HTML のバージョン 4.0 を策定して以来、Web ページに存在する動的効果が初めて公式に認められ、W3C は動的ハイパーテキスト (Dynamic HTML) の実装を次のように分類しました。 3 つのセクション: スクリプト、動的効果をサポートするブラウザ、CSS。最初の 2 つは頻繁に使用するかもしれませんが、CSS が何であるかを知らないかもしれません。Web ページを作成した経験がある場合は、スタイル シートについて聞いたことがあるかもしれません。聞いたことがない場合でも、問題はありません。より新しい機能を備えた Web ページを作成したい場合は、この記事も適しています。
1.CSSとは何ですか?
CSS は Cascading Style Sheet の略で、書籍によっては「Cascading Style Sheet」または「Cascading Style Sheet」（以下「スタイルシート」と表記）と訳されています。1997 年に W3C が HTML4 標準を公布しました。 CSS1 はスタイルシートの最初の標準です。スタイル シートは、以前の HTML (3.2 より前の HTML バージョン) の構文における大きな革新であり、以前の HTML バージョンでは、さまざまな機能がマークアップ要素によって実装され、さまざまなブラウザ メーカーが新しいコンテンツを意図的に作成することができました。は自社でのみサポートされています。さまざまなタグを相互にネストしてさまざまな効果を実現できます。たとえば、段落内のテキストの一部を赤色にしたい場合は、HTML3.2 では次のようになります。 🎜>
ここに赤い文字が表示されます
スタイルシートには、スタイルシートを使用していくつかのタグ（上記の例の「font」タグなど）が属性付けされています。上記の例は変更できます。 Cheng:
スタイルシートの機能はこれだけですか?それからは程遠い！前に述べたように、スタイル シートは DHTML の一部であり、スタイル シートを確立する本当の意味は、オブジェクトを HTML に実際に導入し、スクリプト プログラム (JavaScript や VBScript など) を使用してオブジェクト属性を呼び出したり、オブジェクト属性を変更したりできるようにすることです。これは、以前の HTML では不可能でした。VB などのオブジェクト指向プログラミング ツールを使用したことがある場合は、スタイル シートを使用して DHTML を作成することがいかに簡単であるかがすぐにわかるでしょう。スタイル シートのもう 1 つの貢献は、HTML 内のさまざまな煩雑なタグを簡素化し、各タグの属性をより汎用的かつ多用途にすることです。スタイル シートは、元のタグの機能を拡張し、Web の表示機能を超えた効果を実現できます。ページ自体をそのままに、そのスタイルをさまざまなメディアに拡張し、抗いがたい魅力を発揮します。
CSS1版に続き、1998年5月にCSS2版がリリースされ、スタイルシートがさらに充実しました。 Internet Explorer 4 と Netscape Navigator 4 はどちらもスタイル シートのサポートを宣伝していますが、あらゆる面から見て、IE4 と NE4 の JavaScript ドキュメント モデル (DOM) の違いによるものです。この 2 つの違いは、モデルに大きな違いはありませんが、本質的にはかなり異なります。IE4 モデルは、現在 Microsoft 自体によってのみサポートされていますが、明確に記述されています。 W3C の DHTML に組み込まれています。NE4 のスタイル シートは、スクリプトを通じてオブジェクトのプロパティを呼び出すことができません。 (Netscape は、JavaScript を使用してスタイルを定義する J SSS と呼ばれるスタイル シートを開発しましたが、W3C では認識されていません。)
2. スタイル シートについて詳しく見る
Cascading Style Sheet のカスケードは「Cascading」ですこれは、同じ Web ドキュメント内に複数のスタイル シートが存在する可能性があることを意味します。これらのスタイル シートは、その場所に応じて異なる優先順位を持ち、より多くのスタイル シートが表示に使用されます。スタイル シート挿入の形式の観点から、スタイル シートは 3 つのタイプに分類できます。
インライン スタイル シート: 既存の HTML タグを容易にし、先ほどの例のように、タグによって制御される情報に特別なスタイルを追加します。
埋め込みスタイルシート: JavaScript と同様に、HTML ファイルのヘッダー ( タグと
タグに適用されます。
外部スタイル シートは、外部に保存されたスタイル シート ファイルであり、「」などの .CSS 拡張子が付いています。
上記 3 つの方法は適用時に必要に応じて使用できますが、実際にはインライン スタイル シートと埋め込みスタイル シートが使用されることが多くなります。
3. スタイルシートの文法的特徴
スタイルシートには独自の記述方法があり、その文法的特徴をマスターし、そのさまざまな属性を理解すると、Web ページでスタイルシートを使用するのがどれほど楽になるかがわかります。たとえば、最も単純な HTML ドキュメントがあります:
ここにテキストが入ります…
us スタイルは、埋め込みスタイルシートを使用して指定できます。
p {color:red; font-weight:太字}
.bigFont {font-size:200%}
クラス
ここで、.someclass はクラスを表し、#someID は ID を表します。クラスと ID は、要素タグとともに使用することもできます。例:
p.bigFont {...}
は、スタイル シートが bigFont クラスの P タグ (
) で実行される必要があることを意味します。 IDにも同様です。
特定の繰り返し属性を宣言するタグを簡略化するために、「,」を使用して異なるセレクターを区切ることができます。これは、
H1,H2 {color:red} Div, p.mytext {……}
特定の範囲でスタイル シートを有効にしたい場合もあります:
p em {color:red} 要素タグは次のように区切られます。 と で示されるスペース と の間は赤色で表示されます。さらに、「~」を使用して、あるセレクターの後に別のセレクターが続くことを示し、両側を「/」で囲むこともできます。
Some sample text that has no other...
相反的，使用clear属性将禁止元素在BOX的左方或右方飘浮：
属性名称: 'clear'
属性值: left| right|both|none
初始值: none
适合对象: 所有元素
是否继承: no
百分比备注: 被禁止
绝对位置属性：
绝对位置属性有四个属性：top、right、bottom和left，属性值为长度单位或百分数：
属性名称: 'top'、'right'、'bottom'、'left'
属性值:
初始值: none
适合对象: 所有元素
是否继承: no
百分比备注: 被禁止
利用以上属性，用户就可以精确定义元素的位置，如：
I used two red hyphens to serve as a change bar. They
will "float" to the left of the line containing THIS
--
word.
z-index 属性:
CSS で要素を重ねて表示できるようにするため、z-index 属性はコンピュータの画面を考慮した場合の要素の前後の位置を記述します。 X-Y 平面、Z 軸は画面に垂直、z-index は要素の前後の位置を表す整数を使用し、値が大きいほど相対的に前の位置に表示され、CSS が一致します。 Z インデックスで負の数値を使用するには。
属性名: 'z-index'
属性値: auto|
初期値: auto
適切なオブジェクト: 位置属性を使用する要素
継承するかどうか: いいえ
割合の備考: 禁止
width 属性:
BOX の幅が内容に依存しないように、BOX の幅属性を指定します:
属性名: 'width'
属性value:
属性値:
|
初期値: 0
適切なオブジェクト: すべて
継承するかどうか: いいえ
割合備考 : 親要素の幅に依存
|
初期値: 100%
適切なオブジェクト: すべて
継承するかどうか: いいえ
パーセント注: 親要素の幅に依存します
属性名: 'height'
属性値:
|
| auto
初期値: auto
適切なオブジェクト: ブロック要素
継承するかどうか: いいえ
パーセンテージ:親要素の高さ
属性値:
|
初期値: 0
適切なオブジェクト: すべて
継承するかどうか: いいえ
割合備考 : 親要素の高さに依存
|
初期値: 100%
適切なオブジェクト: all
継承するかどうか: いいえ
パーセント注: 親要素の高さに依存します
属性名: 'overflow'
属性値: 表示 | スクロール
適切なオブジェクト: 要素の位置属性
継承するかどうか: いいえ
割合 注: 禁止
属性値の意味は次のとおりです。
visible: 領域を拡張してすべてのコンテンツを表示します。
hidden: 範囲外のコンテンツを非表示にします。
scroll: 要素の右側にスクロール バーを表示します。
auto: コンテンツが要素の領域を超える場合、スクロールバーが表示されます。
clip 属性:
CSS には要素領域をさまざまな形に切り取ることができる Clip 属性も用意されていますが、現在提供されているのは正方形のみです:
属性名: 'clip'
属性値:
| auto
初期値: auto
適切な要素: 要素の位置属性が絶対値に設定されている
継承するかどうか: いいえ
パーセント注: 禁止
値はrect(右上下左)です。
line-height 属性とvertical-align 属性:
line-height 属性は、長さの単位またはパーセンテージを使用して要素内の行間隔を指定できます:
属性名: 'line-height'
属性value:normal |
DIV { line-height: 1.2em; font-size: 10pt }
DIV { line-height: 120%; font-size: 10pt }
vertical-align 属性は要素の表示を決定します垂直方向の位置:
属性名: 'vertical-align'
| 🎜>初期値: ベースライン
適切なオブジェクト: インライン要素
継承に適している: いいえ
パーセンテージ 注: 要素の line-height 属性に依存します
属性値の意味は次のとおりです。
baseline: 要素のベースラインと位置合わせされます。
middle: 要素の中央に揃えられます。
text-top: テキストを上に揃えます。
text-bottom: テキストの下揃え。
上: この行の一番上の要素に揃えられます。
下: この行の一番下の要素に揃えられます。
可視性属性:
この属性は要素の表示または非表示を制御するために使用されます:
属性名: 'visibility'
属性値: 継承表示 | 非表示
初期値: 継承
対象オブジェクト：全要素
継承の有無：値が継承の場合、親要素の属性を継承
パーセント注：禁止
4. 色と背景（Color and Background）属性：
こちらで紹介しています CSSで前景色、背景色、絵を設定する方法について。
color 属性:
color 属性は要素の前景色を設定するために使用されます:
属性名: 'color'
属性値:
初期値: ユーザーの設定に基づきます初期値 定義済み
適切なオブジェクト: すべての要素
継承するかどうか: はい
パーセンテージの注意: 禁止
color 属性の値は、16 進数値、rgb() 関数、または色の名前にすることができます。 CSSで認識されます。例:
EM { color: red }
EM { color: rgb(255,0,0)}
背景属性:
属性名: 'background-color'
属性値:
| 透明
初期値: 透明
適切なオブジェクト: すべての要素
継承するかどうか: いいえ
パーセントに関する注意: 禁止
背景画像の設定には、backgroud-image 属性が使用されます。
属性名: 'background-image'
属性値:
| なし
適切なオブジェクト: すべての要素
継承の有無: いいえ
パーセンテージのコメント: 禁止
URL は絶対アドレスまたは相対アドレスです。例:
BODY {background- image: url( marble.gif) }
P {background-image: none }
上記の 2 つの属性は、通常の HTML 属性を使用して実現することもできます。次の属性は、元の HTML への CSS 拡張です。
属性名: 'background-repeat'
属性値:repeat-x | no-repeat
初期値: 繰り返し
適切なオブジェクト: すべての要素
継承の有無: いいえ
パーセンテージの備考: 禁止
属性値の意味:
繰り返し: X 軸に沿って 2 つY 軸方向は画像を繰り返します。
repeat-x: X 軸方向に沿って画像を繰り返します。
repeat-y: Y 軸方向に沿って画像を繰り返します。
none: 重複した画像はありません。
例如：
BODY {
background: red url(pendant.gif);
background-repeat: repeat-y;
「在軸上重複圖片pendant.gif”，其餘部分以紅色為背景色*/
background-attachment屬性表示在滾動整個文件時，背景圖片的顯示方式。它的屬性值有兩種：fixed和scroll，fixed相當於IE4裡的水印效果，也就是說在拖曳文件時，背景相對是靜止的，scroll則和文檔一起滾動。
background-position屬性用來指定背景圖片顯示的位置：
屬性名稱: 'background-position'
屬性值: [
|
適合對象: 容器元素
是否繼承: no
百分比備註: refer to the size of the element itself
其中屬性值意義為：
「top left」與「left top」表示「0% 0%」。
「top」、「top center」和「center top」表示「50% 0%」。
「right top」和「top right」都表示「100% 0%」。
「left」、「left center」和「center left」表示「0% 50%」。
「center」和「center center」表示「50% 50%」。
「right」、「right center」和「center right」都表示「100% 50%」。
「bottom left」和「left bottom」表示「0% 100%」。
「bottom」、「bottom center」和「center bottom」都表示「50% 100%」
「bottom right」和「right bottom」表示「100% 100%」。
例:
BODY { 背景: url(banner.jpeg) 右上 } /* 100% 0% */
BODY { 背景: url(banner.jpeg) 中央上 } /* 50% 0 % */
BODY { 背景: url(banner.jpeg) 中央 } /* 50% 50% */
BODY { 背景: url(banner.jpeg) 下部 } /* 50% 100% */
背景属性は、上記の背景属性へのショートカットです。
属性名: 'background'
属性値: | > | | 適切なオブジェクト: すべての要素 継承の有無: いいえ
パーセンテージ 注: 背景位置でのみ許可されます
CSS2 クイック リファレンス No. 4 >キーワード: その他
5. フォント (Font) 属性:
フォントに関するさまざまな属性をここで定義します。
font-family 属性はフォントの名前を定義します。フォントの名前またはフォントの種類の名前を指定できます。フォントの名前は、コンピューター システム内の名前とまったく同じである必要があります。
属性名: 'font- family'
属性値: [[
|
],]* [
パーセンテージのメモ: 禁止
一部のコンピューター システムでスタイル シートに必要なフォントがない場合は、念のため 2 番目のフォントを設定できます。例:
BODY { font-family: Baskerville, "Heisi Mincho W3", Symbol, serif }
family-name は、Heisi Mincho W3 などの特定のフォントを指し、generic-family は、特定のタイプを指します。セリフなどのフォントのこと。
font-style 属性は、フォントの傾きの程度を表します。
属性名: 'font-style'
属性値: 斜体
初期値: 通常 |
適切オブジェクト: すべての要素
継承するかどうか: はい
パーセンテージの備考: 禁止 : 通常
対象: すべての要素
継承するかどうか: はい
パーセンテージの注意: 禁止
小文字small-caps 属性を使用する要素は、通常の大文字よりも小さく表示されます。
font-weight 属性は、フォントの太さを記述するために使用されます。
属性名: 'font-weight'
属性値: 太字 | 300 | 600 | 900 | 🎜>適切なオブジェクト: すべての要素
継承するかどうか: はい
パーセンテージの備考: 禁止
100 ～ 900 は 9 種類のフォントの太さを表し、400 は標準、700 は太字を表し、900 は最も重いフォントであり、より太字になりますたとえば、親要素のフォント ウェイトが 400 の場合、太字は 500 のフォント ウェイトを表します。親要素自体のフォント ウェイトが 1 つ大きい場合、またはより軽いです。 9 00 の場合、太字にした後もフォントの太さは 900 のままで、明るい場合も同じです。フォントによっては、ウェイトが 100 ～ 900、おそらく 300 ～ 700 の全範囲に設定されていない場合があります。その場合、最小ウェイトと最大ウェイトも 300 ～ 700 になります。例:
P { font-weight:normal } /* 400 */
H1 { font-weight: 700 } /*大胆 */
font-size 属性はフォントのサイズを表します。
属性名: 'font-size'
属性値:
|
|
パーセント注記: 親要素のフォント サイズに対する相対値
この属性は絶対サイズを使用できます。または、次のキーワードで示される絶対サイズを使用できる相対サイズ。
相對大小可用：larger 或smaller描述。
例如：
P { font-size: 12pt; }
BLOCKQUOTE { font-size: larger } 1.5 em }
Font屬性是上述屬性的捷徑，屬性如下：
屬性名稱: 'font'
屬性值: [ [
]?o
[ / ]? ] 適合對象: 所有元素 是否繼承: yes font: 12pt/14pt sans-serif } P { font: 80% sans-serif } P { font: x-large/110% "new century { font: x-large/110% "new century lic large Palatino, serif } P { font: normal small-caps 120%/120% fantasy }
6、文字（Text）屬性：文本中的屬性影響
text-indent屬性描述文字的縮排程度：
屬性名稱: 'text-indent'
屬性值:
|
初始值: 容器元素
是否繼承: yes
百分比備註: 根據父元素的寬度而定
下面的例子顯示段落的縮排值為3em： 🎜>Alignment屬性顯示文字的對齊方式：
屬性名稱: 'alignment'
屬性值: left | right | center | justify elements
text-decoration屬性描述文字的修飾方法：
屬性名稱: 'text-decoration' underline | | overline | | line-through | | blink ]
初始值: none
適合物件：
屬性值意義分別為：
underline：底線。
overline：上劃線。
line-through：刪除線。
blink：閃爍（如同Navigator中的blink標記的功能）
text-shadow屬性可以為文字加入陰影的特效：
屬性名稱: 'text-shadow'
屬性值: none>屬性值:
[,
]*
初始值: none
適合對象: all
是否繼承: No
百分比備註>P { text-shadow: black }
上例將在文字的右下方顯示黑色陰影，另外陰影將增加BOX的面積。
letter-spacing 属性は、テキストの単語間隔を示します。 属性名: 'letter-spacing'
属性値:normal |
初期値:normal
適切なオブジェクト:すべての要素
継承するかどうか: はい
パーセンテージの注意: '単語間隔' を禁止
属性値: 通常 |
初期値: 通常
適切なオブジェクト: すべての要素
継承するかどうか: はい
例:
H1 { word-spacing: 1em }
text-transform 属性は、BOX 内のテキストを指定された大文字または小文字で表示できます形式:
属性名: 'text-transform'
属性値: 大文字 | 小文字 なし
適切なオブジェクト: すべての要素
継承するかどうか: はい
パーセント記号: 禁止
属性値の意味は次のとおりです:
capitalize : ボックス内の各文の最初の文字を大文字にします。
大文字: ボックス内のすべての文字を大文字に変更します。
小文字: ボックス内のすべての文字を小文字に変更します。
White-space 属性は、HTML ではスペースを省略します。つまり、段落記号の先頭にスペースをいくつ入力しても無効になります。方法は 2 つあります。スペースを入力するには、スペースのコード「 」を直接入力する方法と、CSS にある pre と同様の属性 (
属性名: 'white-) を使用する方法があります。 space'
属性値:normal | pre | nowrap
初期値:normal
適切なオブジェクト:コンテナ要素
継承するかどうか:はい
パーセントメモ:禁止
例: 🎜>PRE { ホワイトスペース: pre }
P { ホワイトスペース: 通常 }
CSS2 クイック リファレンス 5
キーワード: その他
属性リスト:
7.ここでは、一連の属性のリスト ( list ) を記述するために使用されます。
list-style-type 属性は、リスト内の各項目の前に使用される記号を記述します。 | upper-roman | lower-alpha | なし
初期値: ディスク
適切なオブジェクト: リスト要素
継承するかどうか: 禁止
>ディスク: 丸いケーキの形。
円: 中空の円。
正方形: 正方形。
10 進数: 10 進数値。
小ローマ字: 小文字のローマ数字。
upper-roman: 大文字のローマ数字。
小文字: ギリシャ文字の小文字。
upper-alpha: ギリシャ文字の大文字。
例:
これは最初の項目です。
これは 3 番目の項目です。
もできます。 use list -style-image は、リストの前のシンボルをグラフィックスに置き換えます。
属性名: 'list-style-image' 属性値:
なし
継承するかどうか: はい
list-style-position屬性用來描述清單的位置顯示：
屬性名稱: 'list-style-position'
屬性值: inside | outside
初始值: outside 物件: 列表元素
是否繼承: yes
百分比備註: 被禁止
屬性值outside和inside分別表示在BOX外部顯示或內部顯示，例如：
UL { list-style: outside } UL.compact { list-style: inside } oo> > second list item comes second
first 具有🎜>
list- style屬性為上述屬性的捷徑：
是否繼承: yes
屬性名稱: 'list-style'
| |
物件: 列表元素
百分比備註: 被禁止
例如：
UL { list-style ~ UL { list-style: circle outside } /* 對任何UL內部的UL標記有效*/ 8、表格屬性： 由於表格中的大部分屬性已經在以上的各類屬性中探討過了，所以這裡只有兩個屬性介紹： row-span屬性描述表格跨越的行的數目：
屬性名稱: 'row-span'
屬性值:
初始值
初始值: 1
適合對象: 表格元素
是否繼承: no
百分比備註: 被禁止
column-spancom 描述表格跨越的欄位的屬性'
屬性值:
初始值: 1
是否繼承: no 百分比備註 百分比備註🎜>cursor屬性，使用者可以指定在某個元素上要使用的遊標形狀：
屬性名稱: 'cursor'
屬性值: auto | crosshair | default | pointer auto | crosshair | default | pointer auto | crosshair | default resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize| text | wait |
是否繼承: yes
百分比備註: 被禁止
屬性值分別代表滑鼠指標在windows操作裡的各種形狀，另外還可以指定指標圖示的url位址，不過CSS仍暫時不支援ani動畫遊標。
到此，所有關於CSS現有的屬性都介紹完了（還有一些關於聽覺方面的樣式單，就不再作介紹），本文也該結束了，雖然現在支持樣式單的瀏覽器種類還不多，但也佔了大半，樣式單遲早會成為瀏覽器的統一標準，原因有兩個：一、樣式單是W 3C唯一接受的樣式標準，而且沒有任何跡象表明W3C會把javascript樣式單作為樣式單標準；二則是CSS有效的解決了把事件引入元素的問題，配合腳本程序，是動態HTML不可缺少的一部分，嘗試著用樣式單建立W eb頁，你會發現它真的很方便。希望我的這些努力能為你熟練樣式單盡一點力。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
