カスケーディング スタイル シート (CSS) ファイルとは

Dynamic HTML Standard Edition テンプレートには、生成されたすべての HTML ファイルが使用する単一の CSS ファイルが含まれています。standard.css ファイルは、サポート ディレクトリに含まれており、プロジェクトを生成するときに出力ディレクトリにコピーされます。CSS ファイルは、HTML ファイルの次の <HEAD> セクションで参照します。

<link rel="StyleSheet" href="standard.css" type="text/css" 
media="screen"> 

<LINK> タグは、CSS ファイルを指定する唯一のタグです。ただし、ドキュメント全体に、スタイル シートのコンポーネントを参照する HTML コードが表示されます。次のような段落の代わりに、

<H1> 
This is heading 1 text. 
</H1> 

次のようなタグの一部として CLASS 属性が表示されます。

<H1 class="Heading1"> 
This is heading 1 text. 
</H1> 

CLASS 属性は、CSS ファイルで定義されている Heading1 と呼ばれるスタイルを参照します。

CSS ファイルの最初のセクションは、ドキュメントのデフォルトを定義します。例を示します。

/* Document Defaults */ 
body { font-family: Verdana, Arial, Helvetica, sans-serif; font-
size: 10pt; font-style: normal; font-weight: normal; color: 
#000000; background-color: #FFFFFF; letter-spacing: normal; text-
align: left; text-indent: 15pt; word-spacing: normal} 
a:active { color: #0000CC} 
a:hover { color: #CC0033} 
a:link { color: #3366CC} 
a:visited { color: #9999CC} 

次のセクションは、ブロック属性、つまり段落のスタイルを定義します。これは、CLASS 属性によって呼び出される項目です。standard.css ファイルには、WebWorks Publisher Standard Edition テンプレートにあるそれぞれの段落スタイルと文字スタイルに対するスタイル定義が含まれています。例を示します

/* Paragraph Styles */ 
.Body { margin-left: 30pt} 
.BodyRelative { } 
.CellBody { } 
.CellHeading { text-align: center; font-weight: bold; color: 
#003366} 
.GroupTitlesIX { font-size: 16pt; color: #003366} 
.Heading1 { font-size: 18pt; color: #003366 ; font-weight: bold; 
margin-top: 20px} 
.Heading2 { font-size: 15pt; font-weight: normal; color: #003366} 
.Heading3 { font-size: 12pt; font-weight: bold; color: #003366} 
... 

Heading1 スタイルは、18 ポイントのフォント サイズ、003366 カラー (青-灰色)、太字フォントを使用し、前の段落 (またはタグ) から 20 ピクセルのマージンをとるように定義されています。これらの設定のいずれかを CSS ファイルで変更すると、CLASS=Heading1 の設定を使用するすべてのエンティティが自動的に変更されます。

CSS ファイルの最後のセクションは、文字レベルの形式を定義します。例を示します。

/* Character Styles */ 
.Code { } 
.CodeEmphasis { font-style: italic} 
.CodeStrong { font-weight: bold} 
.Emphasis { font-style: italic} 
.EmphasisUnderline { font-style: italic; text-decoration: 
underline} 
.Strong { font-weight: bold} 
.StrongUnderline { font-weight: bold; text-decoration: underline} 
.SubScript { } 
.SuperScript { } 
.WebJump { } 

文字スタイル セクションの定義は、CLASS タグとも呼ばれます。たとえば、次のように表示されます。

<STRONG CLASS="Strong">This text will be bold.</STRONG> 
 

注記: Strong クラス属性とともに <STRONG> タグを使用するのは重複しているように思われるかもしれませんが、これは CSS ファイルをサポートしないブラウザ用に必要です。それらのブラウザは <STRONG> タグを使用し、CSS 形式情報を無視します。


Quadralay Corporation
Voice: (512) 719-3399
Fax: (512) 719-3606
info@webworks.com