「CSS/記述」の版間の差分

セレクタについて執筆開始
(→‎書式: 節まで書きこみ)
(セレクタについて執筆開始)
</source>
 
のように読み込む指定をしても、
 
<p style="color:red">文字色その1</p>
 
== 書式 ==
直接<code>style</code>属性で書く場合を除いて、CSSは以下のような書式になっています(角カッコ内は省略できるものです)
 
/* コメント */
 
<code>/*</code> と <code>*/</code>ではさまれた部分はコメントとして無視されます。また、コメントや空白、改行は、単語の途中でなければどこに入れてもかまいません。
 
=== セレクタ ===
ここでは、どんなセレクタがあるかを紹介していきます。指定方法を工夫することで、特定の部分にだけ特定のスタイルを適用できます。
 
==== タイプセレクタ ====
セレクタとして要素名を書くと、文書に登場するその要素全てにスタイルを適用します。先ほどの<code>p { color:red }</code>でも、<code>p</code>がこのタイプセレクタで、文書中の<code>p</code>要素すべてに適用されます。
 
==== 全称セレクタ ====
セレクタとして<code>*</code>を使うと、その文書中にあるすべての要素にスタイルを適用します。なお、CSSには[[CSS/継承|継承]]というシステムがあるので、属性によっては<code>body</code>に適用するだけでいい場合もあります。
 
==== クラスセレクタ ====
このセレクタは<code>.クラス名</code>という形になっています。これは、ある'''クラス'''が指定された要素にだけスタイルを適用します。HTMLの場合、クラスは<code>class="クラス名"</code>と、<code>class</code>属性として与えます。なお、指定したい部分にぴったりな要素がない場合は、<code>div</code>や<code>span</code>要素で囲んで、それらに<code>class</code>属性を付けてください。
 
また、同じクラスの要素は文書中にいくつあってもかまいません。特定の要素に付いたクラスにだけ適用させる場合には、<code>要素名.クラス名</code>とすれば、両方一致するものにだけ適用されます。
 
<source lang="html4strict">
<head>
途中略
<style type="text/css">
<!--
.example1 { color:blue }
em.example2 { color:red }
-->
</style>
</head>
<body>
<p class="example1">クラスのテスト</p>
 :
途中略
 :
<p>クラスのない部分。<span class="example1">ここだけクラスあり。</span>ここは元通り。
<em class="example2">emにクラスを適用。</em><span class="example2">同じクラスでも、spanには適用外。</span></p>
</body>
</source>
 
と入力すると、
 
<p style="color:blue">クラスのテスト</p>
 :
途中略
 :
<p>クラスのない部分。<span style="color:blue">ここだけクラスあり。</span>ここは元通り。
<em style="color:red">emにクラスを適用。</em><span>同じクラスでも、spanには適用外。</span></p>
 
のような表示になります。
 
[[Category:World Wide Web|CSS きしゆつ]]
11

回編集