学科 CSS基礎①

リセットCSSとセレクタの得点について

  • リセットCSSは決まった形がない。自分の好みに合わせて作る。
  • セレクタには優先順位があり、得点計算によって高得点のものが適用される
  • 検証ツール→shift+control+P→fullでスクリーンショット

リセットCSSを使用するメリット

  1. ブラウザごとに異なるデフォルトを打ち消してブラウザ間の表示の差異をなくすことができる
  2. 意図しない余計なスタイルを打ち消すことで一からCSSを構築することができる

CSSセレクタの優先順位の計算方法

セレクタの種類記述例点数
!importantfont-size: 140%!important;最優先
タグのstyle属性<div style=”font-size:140%;”>1000点
id#title #sub など100点
class.main-text .box など10点
疑似クラス:hover :nth-child(1) など10点
疑似要素::before ::after など1点
要素名h1 p div span table など1点
全般セレクタすべての要素に適用0点