目次
| 名前: | cursor |
|---|---|
| 値: | [ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress ] ] | inherit |
| 初期値: | auto |
| 適用対象: | すべての要素 |
| 継承: | はい |
| パーセンテージ: | N/A |
| メディア: | 視覚, インタラクティブ |
| 計算値: | 指定された通り。ただし、相対URLは絶対URLに変換される |
このプロパティは、ポインティングデバイスに表示されるカーソルの種類を指定します。値の意味は以下の通りです:
:link,:visited { cursor: url(example.svg#linkcursor), url(hyper.cur), pointer }
この例では、すべてのハイパーリンク（訪問済みであるかどうかに関係なく）に外部のSVGカーソルを設定します。 SVGカーソルをサポートしていないユーザーエージェントは、単に次の値をスキップして"hyper.cur"カーソルを使用しようとします。 そのカーソル形式もサポートされていない場合、UAは次の値をスキップし、単に'pointer'カーソルを描画します。
注記。 システムカラーはCSS3カラー モジュールで廃止されました。 [CSS3COLOR]
CSS2では、テキストや背景などに事前定義されたカラー値を割り当てる機能に加え、 著者がオペレーティングシステムのグラフィック環境に統合された方法で色を指定できる名前付きカラー値のセットを導入しました。
対応する値がないシステムでは、指定された値を最も近いシステム値、またはデフォルトの色にマップする必要があります。
以下に、色関連のCSSプロパティに使用できる追加の値とその一般的な意味を示します。どの色プロパティ（例:'color'や'background-color'）も、次の名前のいずれかを取ることができます。 これらの名前は大文字小文字を区別しませんが、以下に示す混合大文字小文字を使用することをお勧めします。 読みやすさを向上させるためです。
例えば、段落の前景色と背景色をユーザーのウィンドウの前景色と背景色に設定するには、次を記述します:
p { color: WindowText; background-color: Window }
色と同様に、著者はフォントをユーザーのシステムリソースを利用する方法で指定できます。詳細については、'font' プロパティを参照してください。
スタイルシートの著者は、ボタン、アクティブなフォームフィールド、イメージマップなどの視覚オブジェクトを際立たせるためにアウトラインを作成したい場合があります。CSS 2.2のアウトラインは、境界線と以下の点で異なります:
アウトラインプロパティは、これらの動的アウトラインのスタイルを制御します。
| 名前: | outline |
|---|---|
| 値: | [ <'outline-color'> || <'outline-style'> || <'outline-width'> ] | inherit |
| 初期値: | 個々のプロパティを参照 |
| 適用対象: | すべての要素 |
| 継承: | いいえ |
| パーセンテージ: | N/A |
| メディア: | 視覚, インタラクティブ |
| 計算値: | 個々のプロパティを参照 |
| 名前: | outline-width |
|---|---|
| 値: | <border-width> | inherit |
| 初期値: | medium |
| 適用対象: | すべての要素 |
| 継承: | いいえ |
| パーセンテージ: | N/A |
| メディア: | 視覚, インタラクティブ |
| 計算値: | 絶対長さ; アウトラインスタイルが'none'の場合は'0' |
| 名前: | outline-style |
|---|---|
| 値: | <border-style> | inherit |
| 初期値: | none |
| 適用対象: | すべての要素 |
| 継承: | いいえ |
| パーセンテージ: | N/A |
| メディア: | 視覚, インタラクティブ |
| 計算値: | 指定された通り |
| 名前: | outline-color |
|---|---|
| 値: | <color> | invert | inherit |
| 初期値: | invert |
| 適用対象: | すべての要素 |
| 継承: | いいえ |
| パーセンテージ: | N/A |
| メディア: | 視覚, インタラクティブ |
| 計算値: | 指定された通り |
アウトラインプロパティで作成されたアウトラインは、ボックスの「上」に描画されます。つまり、アウトラインは常に最前面にあり、ボックスや他のボックスの位置やサイズに影響を与えません。そのため、アウトラインを表示または非表示にしても再フローやオーバーフローは発生しません。
アウトラインは境界線エッジのすぐ外側から描画される場合があります。
アウトラインは長方形でない場合があります。例えば、要素が複数行にまたがる場合、アウトラインはその要素のすべてのボックスを囲む最小のアウトラインになります。境界線とは異なり、アウトラインは行ボックスの端で開くことはなく、可能であれば常に完全に接続されています。
'outline-width' プロパティは'border-width'と同じ値を受け入れます。
'outline-style' プロパティは'border-style'と同じ値を受け入れますが、'hidden'は有効なアウトラインスタイルではありません。
'outline-color' はすべての色と、キーワード'invert'を受け入れます。'invert'は画面上のピクセルの色反転を実行すると予想されます。これは、フォーカス境界線が背景色に関係なく見えるようにする一般的な手法で���。
準拠するユーザーエージェントは、画面上のピクセルの色反転をサポートしていないプラットフォームでは 'invert' 値を無視する場合があります。ユーザーエージェントが 'invert' 値をサポートしていない場合、'outline-color' プロパティの初期値は 'color' プロパティの値となります。これは、'border-top-color' プロパティの初期値に似ています。
'outline' プロパティは 省略形のプロパティであり、'outline-style'、'outline-width'、'outline-color' のすべてを設定します。
注記。 アウトラインはすべての側面で同じです。境界線とは対照的に、'outline-top' や 'outline-left' プロパティはありません。
この仕様では、複数の重なり合うアウトラインがどのように描画されるか、または他の要素の背後に部分的に隠れているボックスのアウトラインがどのように描画されるかは定義されていません。
注記。 アウトラインはフォーマットに影響を与えないため（つまり、ボックスモデルにスペースが確保されない）、ページ上の他の要素と重なる可能性があります。
以下は、BUTTON 要素の周りに太いアウトラインを描画する例です:
button { outline : thick solid}
スクリプトを使用してアウトラインの幅を動的に変更することができ、再フローを引き起こすことはありません。
グラフィカルユーザーインターフェイスは、ページ上のどの要素がフォーカスを持っているかをユーザーに知らせるために要素の周りにアウトラインを使用する場合があります。これらのアウトラインは境界線に加えて表示され、アウトラインのオン・オフを切り替えてもドキュメントの再フローを引き起こしません。フォーカスは、ドキュメント内でユーザーの操作対象となるものです（例: テキストの入力、ボタンの選択など）。インタラクティブメディアグループをサポートするユーザーエージェントは、フォーカスの位置を追跡し、フォーカスを表現する必要があります。これは、:focus 疑似クラスと動的アウトラインを組み合わせて行うことができます。
例えば、要素がフォーカスを持っているときにその周りに黒い太線を描き、アクティブな場合には赤い太線を描くには、以下のルールを使用できます:
:focus { outline: thick solid black }
:active { outline: thick solid red }
CSSワーキンググループは、ドキュメントまたはその一部の拡大をスタイルシートで指定すべきではないと考えています。ユーザーエージェントは、拡大をさまざまな方法でサポートする場合があります（例: 画像の拡大、音量の増加など）。
ページを拡大する場合、ユーザーエージェントは配置された要素間の関係を保持する必要があります。例えば、漫画のコマはテキスト要素が重ねられた画像で構成されている場合があります。このページを拡大する際、ユーザーエージェントはテキストを漫画の吹き出し内に保持する必要があります。