TIL no.3-CSSプロパティ、セレクタ

10397 ワード
TIL CSS テキストリンク

cssプロパティ、選択者


1.classとid


スタイルを指定するときに使用するプロパティ
★生成ルール
1.英字で記入
2.最初の文字に数字を含めることはできません
3.特殊文字は「」と「$」の2種類のみ使用します.

1-1 class


複数のタグをグループ化して、スタイルで使用するプロパティを指定します.
スタイルを指定するとき.class名を使用して作成します.

1-2 id


スタイルを指定するときに1つのタグのプロパティのみが使用されます.
1つのドキュメントでは、一意のid名しか使用できません.
スタイルを指定するときに#id名を使用して作成します.

2.選択者


2-1. すべての選択者


パターン*を使用して、内部のすべての要素を選択してスタイルを指定できます.
例1)
* {
  margin: 0;
  padding: 0;
}

2-2. ラベルセレクタ


HTMLのデフォルト要素を直接指定することでスタイルを指定できます.
例2)
p {
 font-size: 16px;
}

2-3. ふくごうセレクタ


複数の選択要素を収集してスタイルを指定できます.
例3)
span.orange {
  color: green
}

<div>
  <ul>
   <li>사과</li>
    <li class="orange">오렌지</li>
   </ul>
    <div>토마토</div>
    <span class="orange">오렌지</span>  <-- 이 부분이 선택됩니다.
</div>

2-4. サブセレクタ


作成時には、選択者1>選択者2のように、選択者1のサブエレメント選択者2のみを選択してスタイルを指定できます.
例4)
ul > .orange {
  color: red;
}

<div>
  <ul>
   <li>사과</li>
    <li class="orange">오렌지</li> <-- 이 부분이 선택됩니다.
   </ul>
    <div>토마토</div>
    <span class="orange">오렌지</span>  
</div>

2-5. サブセレクタ


「選択者1」「選択者2」などの区切り記号は、選択者の記号として使用されます.
例5)
div .orange {
  color: blue;
}

<div>
  <ul>
   <li>사과</li>
    <li class="orange">오렌지</li> <-- 이 부분이 선택됩니다.
   </ul>
    <div>토마토</div>
    <span class="orange">오렌지</span> <-- 이 부분이 선택됩니다.
</div>

2-6. 隣接する兄弟セレクタ


選択者1+選択者2のように、選択者1に続く妹選択者2のスタイルを指定することができる.
例6)
.orange + li {
  color: red;
}

<div>
  <ul>
    <li>레몬</li>
    <li class="orange">오렌지</li>
    <li>사과</li> < 이 부분이 선택됩니다.
    <li>포도</li>
  </ul>
</div>
byteの各bit値と一般的なビット操作の取得方法
Invalid byte 2 of 2-byte UTF-8 sequence. Nested exception: Invalid byte 2 of 2-b