media の複数記述 未対応
＠import 未対応
media="screen, not Netscape"
このように記述して、NS4 をはじいていることが分かるようにする人もいるようだ。
NS 4 は、screen 以外の値があると無視する。（media 属性の複数表記に未対応なため）
import.css を作る
@import url( special.css )
media 属性を入れると、無関係なデバイスが不要なスタイルシートを読み込むロスがない。
<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" type="text/css" href="css/special.css" media="screen,tv,print">
@import url( common.css ) ;
@import url( special.css ) screen, tv, print ;
もしくは
@import " common.css ";
@import " special.css " screen, tv, print ;
次のような記述方法もあり
@media screen { /* 画面出力用 */
body { font-size: 14px ; }
}
@media print { /* 印刷用 */
body { font-size: 12px ; }
}
@media screen, print { /* 両方に適用 */
body { line-height: 1.5 ; }
}
デフォルトのリンクカラーと違う色を部分的に使用したい時は、クラス名、もしくは ID名を付けて範囲指定する。
テーブル内のリンクカラーを変更する。
<a>タグを<div>タグなどで囲って指定する方法。
<td>タグにボーダーの設定をすると、セルの重なり部分のボーダーが太ってしまう。
td { border: 1px solid #990000; }
回避するには、 border-collapse を指定する。
border-collapse とは、テーブルにおけるセルのボーダー表示形式を指定するためのプロパティです。値には collapse と separate があり、collapse はテーブル全体や各セルのボーダーを重ねて表示し、separate は別々に表示します。
td { border: 1px solid #990000; }
table { border-collapse: collapse; }
※クラス名で指定した方が使用しやすい。
.table-collapse {
border-collapse:collapse;
}
※ただしレイヤー、インラインフレームに使用すると不具合が発生することがある。
MT をインストールしてみました。
使いこなせるのでしょうか？
少しずつカスタマイズしていく予定。あくまでも予定！