CSSでXMLを使用する方法

CSSで HTMLページをスタイルする方法に精通している場合は、フォーマットのコンセプトに感謝します。 XMLマークアップ言語の開始時に、データを表示することは少し複雑でしたが、それはスタイルシートで変更されました。

スタイルシートリファレンスを追加することで、XMLコードをWebページとしてフォーマットして表示することができます。 CSSや他の書式設定がなければ、XMLは基本的なテキストとして表示され、ブラウザは書式設定文書を見つけることができないというエラーが表示されます。

XMLスタイルの例

シンプルなスタイルシートでは、データを表示するために必要な要素と書式設定の属性のみをリストする必要があります。

このコードは、次のように、どの要素を表示し、どのように表示するかをプロセッサに指示します。

サンプル{背景色:#ffffff; 幅:100%;} mymessage {表示:ブロック; 背景色:#999999; margin-bottom:30pt;} body {font-size:50%}

書式設定ファイルの最初の行はルート要素です。 ルートの属性はページ全体に適用されますが、タグごとに変更されます。 つまり、ページの背景色を指定し、各セクションの背景色を指定することができます。

このファイルをXMLファイルと同じディレクトリに保存し、ファイル拡張子が.CSSであることを確認します。

XMLからのCSSへのリンク

この時点では、これらは完全に別の2つのドキュメントです。 プロセッサーは、Webページ作成するために一緒に作業することを望んでいません。

これを修正するには、CSSファイルへのパスを識別するステートメントをXMLドキュメントの先頭に追加します。 この文は、次のように、最初のXML宣言文の直下にあります。

<?xml version = "1.0" encoding = "UTF-8"?> <?xml-stylesheet type = "text / css" href = "products.css"?>

この例では、CSSファイルはproducts.cssと呼ばれています。なぜなら、XML文書でそのようにラベル付けされているからです。 それをCSSファイル用に選択したファイル名に変更します。