CSS

スタイルの継承を理解しよう

CSSの由来でもある、スタイル継承の仕組みについて見ていきます。

  • スタイルの継承
  • Cascading Style Sheets

スタイルの継承

・今回はスタイルの継承という考え方について見ていきます。

・CSSではスタイルを子要素に継承して子要素でも同じスタイルを適用することがあり、それをスタイルの継承と言います。

・例えばbodyの中にh1とpタグがあるHTMLを書いてあったとします。h1にはcolorをredにしていたけれどpにも同じようにredにしたいと思った場合、スタイルの継承を利用するとbodyの方にcolor: red;を指定してあげることによりh1にもpにもスタイルをすることが出来る仕様です。

・これはbodyのスタイルがその子要素であるh1やpに引き継がれたからです。これを使いこなすと効率的にコーディングをすることができます。

Cascading Style Sheets

・ちなみにCSSはCascading Style Sheetsの略で段階的に流れていくという意味になります。これは親要素から子要素にスタイルを継承していく様子からこういった名前になったのでイメージをしやすいように覚えておくといいでしょう。

・ただ、すべてのスタイルが継承されるわけではありません。継承されないプロパティも多くあるのでその調べ方は明日見ていきましょう。

-広告-

 

 






-CSS