http://www.sw.it.aoyama.ac.jp/2012/PB1/lecture5.html
© 2006-12 Martin J. Dürst 青山学院大学
他にスタイル指定として欲しいものは何なのでしょうかを考えて、次回に提案して下さい。
border-top-color
などの特性で細かく指定すると大変
border-color で様々な組み合わせの指定:
border-color:
red; /* 四辺同じ色 */border-color:
red green; /* 上辺と下辺が赤、右辺と左辺が緑 */border-color:
red green blue; /*
上辺が赤、下辺が青、右辺と左辺が緑 */border-color:
red green blue yellow; /* 上右下左はそれそれ赤緑青黄
*/border-style, border-width, padding,
margin も同様
border-top-width, border-top-style,
border-top-color をまとめて設定:
border-top: 3pt solid
red;
border-right, border-bottom,
border-left も同様
border で四辺が同時に同じように設定可能
注: 順番は必ず幅、スタイル、色
font も似たように使える (仕様書参照)
border:
3pt solid red; border-top-color: blue; border-bottom-style: dashed;
border-right-width: 10pt;
<?xml-stylesheet 処理命令:
.css) で @import:
@import
url(http://www.example.org/styles/bluish.css)<?xml-stylesheet
処理命令の属性により、スタイルシートが使い分け可能:
media
を指定するとスタイルシートの用途が限定:<?xml-stylesheet href="my-print-style.css"
type="text/css" media="print"?>screen (普通の PC
など)、print (印刷)、projection
(スライド)、braille (点字) などalternate="yes" と title
を指定するとブラウザによってスタイルシートが選択可能:<?xml-stylesheet href="my-style-fancy.css"
type="text/css" alternate='yes' title='fancy'?>(一部の古いブラウザは未実装)
応用例: <to> の前に「宛先: 」等を追加
選択子: to:before 又は to:after
特性と特性値: content: "宛先: ";
具体例: to:before { content: "宛先: "; }
(一部の古いブラウザは未実装)
属性値は次のように表示可能:
content: attr(date);
応用例:
Letter:before { content: "Date sent: " attr(date); }
(現在一部ブラウザのみで実装)
改ページは印刷用やスライド用のスタイルシートの場合に便利 (ページ毎スライドになる)
page-break-before 特性などで指定
特性値の種類:
auto: 成り行きで改ページalways: 必ず改ページavoid: 絶対改ページしないleft:
必ず新しいページが左に来る様に改ページright:
必ず新しいページが右に来る様に改ページborder-radius:
0.5em 0.2em;border-radius:
0.5em / 0.2em;box-shadow:
0.2em 0.4em red;-moz-box-shadow, Opera は
-o-box-shadow)CSS Zen Garden (CSS の禅の楽園)
(日本語訳)
W3C の CSS Validation Service: http://jigsaw.w3.org/css-validator/
手元のあるファイルをチェックするには「アップロード」が便利
letter-style2.cssmybook.xml