TOP スタイルシート基本知識 > HTMLファイル一つだけにスタイルシートを適用したい場合。

HTMLファイル一つだけにスタイルシートを適用したい場合。

「Webページ内の要素の書式を統一する」とは、Webページ全体にスタイルシートで書式をコントロールすることです。

ただ、一つのWebファイルにだけスタイルシートで書式を反映させることもできます。

この場合は、HTMLファイルのヘッダー部(<head>~</head>の部分)のなかに、 <style type="txt/css">~</style>を挿入し、 ~のところに適用したいスタイルシートを記述することになります。

スタイルシートの本文を記述する時に、注意すべきことは本文の前に「<!--」後ろに「-->」を記述して、 本文を囲む必要があることです。「<!--」「-->」はコメントの挿入を意味しており、コレで囲まれた部分は、 Webページを表示する際に無視されます。スタイルシートに対応していないブラウザがスタイルシートの部分を表示しないようにするために、 この点は気をつけましょう。

また、この手法と、 「特定の要素にだけ、スタイルシートを適用」する手法は共存させることができます。同じタグに対し、異なる書式を指定した場合は、 特定の要素に指定された値が優先されます。

 

特定の要素にスタイルシートを適用>HTMLファイル一つだけにスタイルシートを適用

 

 HTMLファイル一つだけにスタイルシートを適用する 

 

<style type="text/css">

<!--

要素名 {プロパティ:値; プロパティ:値; … }

要素名 {プロパティ:値; プロパティ:値; … }

……

-->

</style>

 

HTMLファイル一つだけにスタイルシートを適用する"のサンプルページはコチラをクリック!

 

  • サンプルページのコードは以下のとおりです。
<html>
<head>
<title>HTMLファイル一つだけにスタイルシートを適用したい場合のサンプル</title>
<meta http-equiv="content-type" content="text/html">
<meta http-equiv="content-style-type" content="text/css">

<style type="text/css">
<!--
h1{
color: red;
background-color: yellow;
}
-->
</style>


</head>
<body>
<h1>このWebページ内の</h1>
<h1><h1>タグで囲まれたテキストは</h1>
<h1>すべて文字の色が赤色で、背景色が黄色になります。</h1><br>
<p>h1要素を、文字色を赤色、背景色を黄色に設定しています。p要素であるこの文章はご覧のとおり変化ありません。</p>
</body>
</html>

 

Google
 
Web www.1css.net
 
『1歩!スタイルシート』はリンクフリーです。ご意見・ご感想等なんでもどうぞ!メールはこちらから
『1歩!スタイルシート』の許可なく本サイトの一部あるいは全文のコピーならびに転用を禁じます。