http://www.sw.it.aoyama.ac.jp/2010/PB1/lecture5.html
© 2006-10 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:
必ず新しいページが右に来る様に改ページCSS Zen Garden (CSS の禅の楽園?)
(日本語訳)
W3C の CSS Validation Service: http://jigsaw.w3.org/css-validator/
手元のあるファイルをチェックするには「アップロード」が便利
letter-style2.cssmybook.xml