Contents
margin の簡略表記プロパティ
値が1つの場合 |
値1:上下左右 |
値が2つの場合 |
値1:上下，値2:左右 |
値が3つの場合 |
値1:上，値2:左右，値3:下 |
値が4つの場合 |
値1:上，値2:右，値3:下，値4:左 |
ある要素の子要素を指定する 子供セレクタ
body > p
body の子ノード p を指す。> は直下の子要素だけマッチさせる働きを持つ。
ある要素の子要素すべてを指定する 子孫セレクタ
p em { font: italic bold 120% serif; }p要素の中身にあるすべてのem要素とマッチする。
要素の前に文字を生成する
:before 疑似要素を使う。
p.special:before { content: "Special! "; }specialクラス属性を持つp要素の前に "Special!" という内容が生成される。
:before および :after疑似要素
:before, :after疑似要素は，'content' プロパティと共に使用する。
要素の先頭の１文字のスタイルを指定する
:first-letter 疑似要素を使う。
p.special:first-letter { color: purple; }:specialクラス属性を持ったp要素の先頭の１文字が紫色になる。
ユーザのシステムのGUI環境に合せた色を指定する システムカラー
color, background-color など色に関するプロパティでは以下の表に挙げる名前(システム属性名)を指定できる。ユーザのシステムのGUI環境に合せた色 とはオペレーティング システムが提供する色ということです。ですから、同じ色名でも Mac OS, Window など OS が違えば表示される実際の色が変化する。
- ActiveBorder
- Active window border.
- ActiveCaption
- Active window caption.
- AppWorkspace
- Background color of multiple document interface.
- Background
- Desktop background.
- ButtonFace
- Face color for three-dimensional display elements.
- ButtonHighlight
- Highlight color for three-dimensional display elements (for edges facing away from the light source).
- ButtonShadow
- Shadow color for three-dimensional display elements.
- ButtonText
- Text on push buttons.
- CaptionText
- Text in caption, size box, and scrollbar arrow box.
- GrayText
- Grayed (disabled) text. This color is set to #000 if the current display driver does not support a solid gray color.
- Highlight
- Item(s) selected in a control.
- HighlightText
- Text of item(s) selected in a control.
- InactiveBorder
- Inactive window border.
- InactiveCaption
- Inactive window caption.
- InactiveCaptionText
- Color of text in an inactive caption.
- InfoBackground
- Background color for tooltip controls.
- InfoText
- Text color for tooltip controls.
- Menu
- Menu background.
- MenuText
- Text in menus.
- Scrollbar
- Scroll bar gray area.
- ThreeDDarkShadow
- Dark shadow for three-dimensional display elements.
- ThreeDFace
- Face color for three-dimensional display elements.
- ThreeDHighlight
- Highlight color for three-dimensional display elements.
- ThreeDLightShadow
- Light color for three-dimensional display elements (for edges facing the light source).
- ThreeDShadow
- Dark shadow for three-dimensional display elements.
- Window
- Window background.
- WindowFrame
- Window frame.
- WindowText
- Text in windows.