CSS2 クイックリファレンス_CSS/HTML

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%}

#blueBack {background-color:blue;color: yellow}
-->

クラス
を使用し、 ID
コンテンツを表示します。

ここで、.someclass はクラスを表し、#someID は ID を表します。クラスと ID は、要素タグとともに使用することもできます。例:
p.bigFont {...}
は、スタイル シートが bigFont クラスの P タグ (
) で実行される必要があることを意味します。 IDにも同様です。
特定の繰り返し属性を宣言するタグを簡略化するために、「,」を使用して異なるセレクターを区切ることができます。これは、
H1,H2 {color:red} Div, p.mytext {……}

特定の範囲でスタイル シートを有効にしたい場合もあります:

p em {color:red} 要素タグは次のように区切られます。 と で示されるスペース と の間は赤色で表示されます。さらに、「~」を使用して、あるセレクターの後に別のセレクターが続くことを示し、両側を「/」で囲むこともできます。
/ Selector1 ~ Selector2/ {...}
は、それを示しますSelector2 が Selector1 の後に続く場合は、このスタイル シートを使用します。
2. 属性値の単位
スタイル シートでは、属性の単位は主に長さの単位であり、px (ピクセル)、pt (ポンド)、em (写植の単位、1em=12pt) が含まれます。 mm (ミリメートル)、cm (センチメートル)、pc (1pc=12pt)、in (インチ)、これらの単位は、整数 (px など) または実数 (em など)、および要素内の対数値で表現できます。次のような継承関係もあります。
body {font-size:12pt;
text-indent:3em>}
H1 {font-size:15pt}
then表示上のH1の-indent属性が36ptではなく45ptになっています。
一部の属性の単位は、マージンなどの負の値になることもあります。これにより、要素間の重複などの特殊な効果が得られることがあります。
他にも角度などの単位があり、その単位は deg (度)、grad (勾配)、rad (ラジアン) で、周波数の単位は Hz と kHz です。
3. コメントとスペース
スタイル シートにもコメント ステートメントがあります。「/*...*/」をコメント タグとして使用できます。ブラウザには、分析を担当するスタイル シートのアナライザーがあります。スタイルシートをチェックして、アナライザーがコメントタグ間のコンテンツを無視することを確認します。スタイルシートではスペースが有効です。文字間に複数のスペースがある場合、残りのスペースは省略され、1 つだけが保持されます。特に特定のフォントを宣言する場合は、スペースを省略してはなりません。
 注意すべきこと
まず、スタイル シートでは大文字と小文字が区別されるため、スペルに注意してください。次に、CSS2 で宣言されていないプロパティとメソッドについては、スタイル シートのパーサーはその存在を無視します。 :
H1 ,H2 {color:green}
H3 ,H4 & H5 {color:red}
P {color:blue ;font-variant:small-caps}
ここで「&」はスタイルシート 2 行目全体が、そこに含まれていないラベルのパーサーによってスキップされます。3 行目の font-variant は正当な属性ではないため、スキップされます (「color:blue」は有効です)。
上記のルールを理解した後は、スタイル シートについてはすでに理解されています。以下では、スタイル シートのさまざまな属性と属性値について詳しく紹介します。

CSS2 クイック リファレンス 2
キーワード: その他
4. CSS プロパティ:
1. メディア (メディア) タイプ
スタイル シートの最も重要な機能の 1 つは、ページ、スクリーン、電子シンセサイザーなど、さまざまなメディアで動作します。特定のプロパティは特定のメディアでのみ機能します。たとえば、「font-size」プロパティはスクロール可能なメディア タイプ (画面) でのみ有効です。
メディア属性の宣言は、@import または @media を使用して導入できます。
@import url(loudvoice.css) speech;
@media print {
/* 印刷用のスタイル シートがここにあります */
}
ドキュメント タグでメディアを導入することもできます。

ご覧のとおり、@import と @media の違いは、前者ではメディア タイプの外部スタイル シートが導入されることです。 、後者はメディア プロパティを直接導入します。 @import を使用する方法は、@import にスタイル シート ファイルの URL アドレスを追加し、その後メディア タイプを追加することです。スタイル シートは複数のメディアで共有でき、メディア タイプは「,」区切りで区切られます。 @メディアの使用法はメディアタイプを最初に置き、その他のルールは基本的にルールセットと同じです。さまざまなメディアの種類を以下に示します。
SCREEN: コンピューターの画面を指します。
PRINT: プリンターに使用される不透明なメディアを指します。
PROJECTION: 表示に使用されるプロジェクトを指します。
BRAILLE: 点字システム。触覚効果のある印刷物を指します。
AURAL: 音声電子シンセサイザーを指します。
TV: テレビタイプのメディアを指します。
HANDHELD: ハンドヘルドディスプレイデバイス (小画面、モノクロ) を指します。
ALL: すべてのメディアに適しています。
2.BOXモデル(BOXモデル)の属性
BOXとは何ですか？ CSSではHTMLの
...で始まる部分をBOX(コンテナ)と呼び、BOXにはpadding、margin、borderの3種類の属性があります。
マージン属性:
マージン属性は、margin-top、margin-right、margin-bottom、margin-left、margin の 5 つの属性に分かれており、それぞれ BOX 内のコンテンツと境界線との距離を表します。その属性値は数値です。単位は長さ、パーセント、または自動です。マージンは負の値に設定することもでき、B OX と BOX の間で表示が重複します。マージン属性の詳細については、以下の表を参照してください。名前: 'margin-top'、'margin-right'、'margin-bottom'、'margin-left'
属性値:
初期値: 0
適切なオブジェクト: すべての要素
継承するかどうか: いいえ
パーセンテージ注記: BOX の幅に対する相対値
例:
H1 { margin-top: 2em }
H2 { margin-right: 12.3% }
Margin には簡単に記述する方法もあります。つまり、margin 属性を直接使用します。例:
BODY { margin: 1em 2em 3em 2em}
は次と同等です:
BODY {
margin-top:1em;
margin-bottom:3em;
margin-left:2em;属性はスペースで区切られ (カンマではないことに注意してください)、順序は「上、右、下、左」です。もちろん、マージンの後に 4 つ未満の値を続けることもできます。例:
BODY { margin: 2em } / * マージンはすべて 2em に設定されます */
BODY { margin: 1em 2em } /* 上下のマージンは 1em 、左右のマージンは 2em */
BODY { margin: 1em 2em 3em } / * 上マージンは 1em、左右マージンは 2em、下マージンは 3em*/
Padding 属性:
Padding 属性は、境界線とコンテンツの間にどれだけのスペースを挿入するかを記述するために使用されます。 BOX はマージン属性と同様に、上、右、下、左、およびショートカット パディングに分かれています。マージン属性の詳細については、次の表を参照してください:
属性名: 'padding-top' 。 'padding-right'、'padding-bottom'、'padding-left'、'padding'
属性値:

初期値: 0
適切なオブジェクト: すべての要素
継承の有無: no パーセンテージ 注: BOX の幅を基準とします
例:
BLOCKQUOTE { padding-top: 0.3em }
padding 属性は margin と似ているため、ここでは省略します。
Border 属性:
通常、HTML ドキュメントを表示してテキストを表示するとき、BOX には枠が付いていますが、通常は枠が表示されません。属性 BOXの境界線を記述するために使用されます。ボーダー属性は、border-width、border-color、border-style に分かれており、これらの属性の下に分岐があります。
border-width 属性:
border-width 属性は、border-top-width、border-right-width、border-bottom-width、border-left-width 属性、border-width 属性、border-width 属性に分かれています。幅は「細/中/太」の長さ、または長さの単位で表されます。 以下は、order-width 属性の詳細なリストです:
属性名: 'border-top-width'、'border-right-width ', 'border-bottom-width', 'border-left-width', 'border-width'
属性値:

初期値: 中
適切なオブジェクト: すべての要素
継承するかどうか: いいえ パーセント 注: 禁止
border-width はショートカットで、順序は上、右、下、左で、値はスペースで区切られます。
border-color 属性:
border-color 属性は、BOX の境界線の色を表示するために使用されます。この属性は、border-top-color、border-right-color、border-bottom-color、border-right- に分かれています。 color および border- color 属性。属性値は color で、16 進数または rg b() で表現できます。属性は次のとおりです。
属性名: 'border-top-color'、'border-right- color', 'border-bottom-color', 'border-left-color',
'border-color'
属性値:

初期値: 要素の色の初期値
適切なオブジェクト：すべての要素
継承の有無：いいえ パーセンテージ 注：禁止
border-color はショートカット、順序は上、右、下、左、値はスペースで区切られます。
border-style 属性:
border-style 属性は、BOX オブジェクトの境界線のスタイルを設定するために使用されます。その属性値は、CSS で指定されたキーワードです。通常、初期値は none であるため、border は表示されません。以下の属性を参照してください:
属性名: 'border-top-style'、'border-right-style'、'border-bottom-style'、'border-left-style'、'border-style'
属性値：
初期値：なし
対象オブジェクト：全要素
継承の有無：なし
割合備考：禁止
border-color はショートカットであり、順序は右上 左下、値はスペースで区切られます。
属性値の名前と意味は次のとおりです。
none: 境界線なし。
点線: 境界線は点線です。
破線: 境界線は長短の線です。
solid: 境界線は実線です。
double: 境界線は二重線です。
溝、尾根、インセット、アウトセット: さまざまな効果を持つ 3D 境界線を表示します (カラー属性に従って)。
border 属性:
border 属性は Border へのショートカットです。属性値はスペースで区切られます。たとえば、

hello!

border-top、border-right、border-bottom、border-left をそれぞれ上、右、下、左のショートカットとして使用することもできます。属性値の順序は同じです。ボーダー属性のもの。
CSS2 クイックリファレンス 3 つ
キーワード: その他
3. レイアウト (レイアウト) 属性:
以前の HTML では、要素の位置は要素の順序的な配置によってのみ決定できましたが、CSS ではここで要素をより正確に配置できます。 Netscape はかつて、正確なレイアウトに非常に適した Layer タグを提案しましたが、W3C は CSS の Layer タグと同様の機能を提案しました。
位置属性:
位置属性は、要素の位置タイプを決定するために使用されます。詳細については、属性を参照してください。
属性名: 'position'
属性値: 絶対相対 | 🎜>初期値: static
対象オブジェクト: すべての要素
継承の有無: いいえ
パーセント備考: 禁止
属性値はそれぞれ以下を表します
absolute: 画面上の絶対位置。
relative: 画面上の相対位置。
静的: 固有の位置。
direction 属性:
direction 属性は、BOX の配置方向を決定します。詳細については、属性を参照してください。
属性名: 'direction'
属性値: ltr| 初期値: ltr
適切なオブジェクト: すべての要素
継承するかどうか: はい
パーセンテージの注意: 禁止
float 属性と clear 属性:
HTML では、画像のフローティング位置を選択できます。 BOX オブジェクトは、CSS の位​​置を介してフローティングすることも選択できます。改变BOX的float属性，BOX将飘浮在其他元素的左或右方：  
属性名称: 'float'  
属性值: left| right|none  
初始值: none  
适合对象: 所有元素  
是否继承: no  
百分比备注: 被禁止  
例如：  
  
  

  
  
Some sample text that has no other...  
  
相反的，使用clear属性将禁止元素在BOX的左方或右方飘浮：  
属性名称: 'clear'  
属性值: left| right|both|none  
初始值: none  
适合对象: 所有元素  
是否继承: no  
百分比备注: 被禁止  
绝对位置属性：  
绝对位置属性有四个属性：top、right、bottom和left，属性值为长度单位或百分数：  
属性名称: 'top'、'right'、'bottom'、'left'  
属性值: ||auto  
初始值: 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: | BOX の幅を最小幅と最大幅の間にするための min-width プロパティと max-width プロパティも提供されます。 属性名: 'min-width'
属性値:
|

初期値: 0
適切なオブジェクト: すべて
継承するかどうか: いいえ
割合備考 : 親要素の幅に依存 属性名: 'max-width' 属性値:
|

初期値: 100%
適切なオブジェクト: すべて
継承するかどうか: いいえ
パーセント注: 親要素の幅に依存します 高さ属性: 同じBOXには、自身の高さを制御する高さ属性もあります:
属性名: 'height'
属性値:
|
| auto
初期値: auto
適切なオブジェクト: ブロック要素
継承するかどうか: いいえ
パーセンテージ:親要素の高さ BOX の高さを最小の高さと最大の高さの間にするための min-height プロパティと max-height プロパティも CSS で提供されます。 属性名: 'min-height'
属性値:
|

初期値: 0
適切なオブジェクト: すべて
継承するかどうか: いいえ
割合備考 : 親要素の高さに依存 属性名: 'max-height' 属性値:
|

初期値: 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.2;
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 属性は、背景色を設定するために使用されます。初期値は透明です:
属性名: 'background-color'
属性値:
| 透明
初期値: 透明
適切なオブジェクト: すべての要素
継承するかどうか: いいえ
パーセントに関する注意: 禁止
背景画像の設定には、backgroud-image 属性が使用されます。
属性名: 'background-image'
属性値:
| なし 初期値: なし
適切なオブジェクト: すべての要素
継承の有無: いいえ
パーセンテージのコメント: 禁止
URL は絶対アドレスまたは相対アドレスです。例:
BODY {background- image: url( marble.gif) }
P {background-image: none }
上記の 2 つの属性は、通常の HTML 属性を使用して実現することもできます。次の属性は、元の HTML への CSS 拡張です。 background-repeat 属性は、背景画像の繰り返し配置を記述するために使用されます。
属性名: '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'  
屬性值: [
 | } ]{1,22 | center | bottom] | | [left | center | right]   初始值: 0% 0%  
適合對象: 容器元素  
是否繼承: 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   是否繼承: yes   百分比備註: 被禁止  
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 | | auto
初期値: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'

属性値:
なし
1. 初期値: なし 適切なオブジェクト: リスト要素
   継承するかどうか: はい
2. パーセンテージ 注: 禁止
   
3. は絶対アドレスまたは相対アドレスです。
   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屬性為上述屬性的捷徑：  
   屬性名稱: 'list-style'  
   • 屬性值: 
      | | 
   •  | | 
      物件: 列表元素  
   是否繼承: yes  
   百分比備註: 被禁止  
   例如：  
   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頁，你會發現它真的很方便。希望我的這些努力能為你熟練樣式單盡一點力。