CSS変換仕様
CSSの構文
Durianでは、CSS2のサブセットに対応しています。
CSS非対応機種の場合は、CSSで指定されたスタイルを適用した変換を行います。
対応するCSSのセレクタは、
- タイプセレクタ
- クラスセレクタ
- 一意（ID）セレクタ
- 擬似クラス(:link、:visited、:active)
となります（擬似クラスは、a要素でのみ使用可能です）。対応するプロパティは以下の通りです。
対応するCSSのプロパティ
| プロパティ | 値 | 指定可能な要素 |
|---|---|---|
| color | 色名｜#rrggbb｜rgb(r,g,b) | すべての要素 |
| background-color | 色名｜#rrggbb｜rgb(r,g,b) | body, a:active |
| font-size | xx-small｜x-small｜small｜medium｜large｜x-large｜xx-large | すべての要素 |
| text-decoration | none｜underline｜blink | すべての要素 |
| text-align | left｜right｜center | h1-h6,div,p |
| border | (none｜solid) (0｜1px) (色) | table |
| border-style | none｜solid(none以外) | table |
| border-width | 0｜1px(0以外) | table |
| border-color | 色名｜#rrggbb｜rgb(r,g,b) | table |
| border-top-width | 0｜長さ | div |
| border-top-color | 色名｜#rrggbb｜rgb(r,g,b) | div |
| border-bottom-width | 0｜長さ | div |
| border-bottom-color | 色名｜#rrggbb｜rgb(r,g,b) | div |
※ 色名は、CSS3 color で規定されたシステムカラーを除く全ての色とします
以下にCSSを使用したページの例を示します。
sample.html
<?xml version="1.0" encoding="Shift_JIS"?> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <title>Hello!</title> <link type="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>ようこそ!</h1> <p>DurianではCSSが使えます。</p> </body> </html>
style.css
h1 {
text-align : center;
font-color : blue;
}
p {
font-color : #669933;
}
変換例
<html> <head> <title>Hello!</title> </head> <body> <h1 align="center"><font color="#000080">ようこそ!</font></h1> <p><font color="#669933">DurianではCSSが使えます。</font></p> </body> </html>
CSS2の詳細については、CSS2仕様http://www.w3.org/TR/REC-CSS2を参照してください。
制限事項
- CSSは外部ファイルで保存し、linkタグで読み込んでください。インラインや属性指定には対応していません。
