2008年3月9日日曜日

カスケードスタイルシート

a.直接書く場合
<style type="text/css">
TABLE.c {
     border: 1px solid gray;
}
TH.c {
     border: 1px solid gray;
     padding: 5px;
     white-space: pre;
     width: 100%;
     background-color: #fffff0;
}
THEAD.c {
     background-color: #ccffcc;
}
TBODY.c {
     background-color: #bbbbff;
}
</style>



※ちなみにTHEAD.cにborderを設定しても無反応だったりする



b.ファイルに切り離す場合
<link rel="stylesheet" type="text/css" href="Maintenance.css" />



※Maintenance.cssの中身は以下
@CHARSET "UTF-8";
TABLE.c {
     border: 1px solid gray;
}
TH.c {
     border: 1px solid gray;
     padding: 5px;
     white-space: pre;
     width: 100%;
     background-color: #fffff0;
}
THEAD.c {
     background-color: #ccffcc;
}
TBODY.c {
     background-color: #bbbbff;
}



●CSS利用(class=cと書いてあるのがそれに相当する)
※切れ端なのでdataclassとかdatamakerとかを作らないと動かないけど(w
※ちなみにTHやTHEADを積極的に使うことによってTDでクラス分けしたりする手間が省けるかも
<TABLE class=c>
  <THEAD class=c>
    <TR>
      <TH>項目1</TH>
      <TH>項目2</TH>
    </TR>
    </THEAD>
  <TBODY class=c>
    <% for (int i=0; i<datamaker.size(); i++) {
  dataclass data = (dataclass)datamaker.get(i);
    %>
    <TR>
      <TD><%=data.koumoku1 %></TD>
      <TD><%=data.koumoku2 %></TD>
    </TR>
    <% } %>
  </TBODY>
</TABLE>
----------------------------------------------------------------------------
TABLE {
     border: 1px solid gray;
}


とクラス名つけずに書くと


<link rel="stylesheet" type="text/css" href="Maintenance.css" />
の一行でデフォルト適用される



0 件のコメント:

コメントを投稿