Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8660

cssでの優先度〜class属性、id属性〜

$
0
0

①class属性

クラスとは、簡単に言うと学校のクラス学級のようなもので、何年何組みたいなものです。
またこのclass名は1ページで何度でも使うことができます。
こちらは、要素に対しての指定として使われます。
例えば、ヘッダーとしての要素があるとします。その際class="header"と使われます👍

②id属性

反対にid属性は1ページで1回のみ使うことができます。
こちらは
固有の名前を付ける場合に使われます👍
class属性とは違いこちらは、出席番号のようなものです。
同じクラスの同じ人が何人もいるわけにいきませんよね(・・;) 

またこれらは、cssを適用する場合にも影響があります。

cssでは、class属性よりもid属性が強い関係にあります。

では、cssでの優先度について考えてみましょう。

cssには記述方法が3つほどあります。

①HTMLタグ

こちらはHTMLタグの中に書く方法です。

index.html
<pstyle="color:aqua">マイメロディ</p>

外部に書くのが基本なのであまり使われませんが、このような書き方も可能です。

②head内に書く

こちらは、HTMLのヘッド内に書くことによって、このページではこのタグはすべてこのようにしてくださいと指定することができます。

index.html
<style type="text/css">p{color:pink;}</style><title>Document</title></head><body><p>お願い</p><p>マイメロディ</p></body>

と書くことにより、このページでpタグが出てきた場合はすべてピンクになります😊♡

③cssの外部ファイルに書く

これは一番ベストなので説明する必要もありませんが、cssno
記述の場合、上から順番に読み込まれていき、一番優先されるのは下にある要素だと学習しましたね。

上記の中で一番優先的に反映されるのは、個別的に当てているHTMLタグの中に当てているcssです。

☆まとめ☆
1.class属性とid属性でcssの強制力が変わる
2.cssを書く場所により強制力が変わる

でした!!


Viewing all articles
Browse latest Browse all 8660

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>