클래스 속성

6.1 클래스 속성과 스타일 태그

하지만 그게 다가 아닙니다. 수백 가지 "스타일"이 발명된 후 문제가 생겼습니다. 어떻게 사용합니까? 그런 다음 그들은 "클래스"로 그룹화하는 아이디어를 내놓았습니다. 물론 이들은 Java와 동일한 클래스가 아닙니다. 특별한 스타일 그룹.

그리고 "클래스"를 사용하기 전에 사진이 있었다면:

<img src="logo.png" style="width=100px;height=100px;opacity=0.5">

이제 다음과 같이 작성할 수 있습니다.

<img src="logo.png" class="picture">

<style>
    img.picture {
        width=100px;
        height=100px;
        opacity=0.5
    }
</style>

우리는 특별한 것을 만들고 «style» picture스타일 값을 style. 그런 다음 <img>와 "style" 사진을 태그로 묶었습니다 class.

6.2 선택자, 선택자 유형

별도로 렌더링된 이러한 스타일은 classes또는 로 알려지게 되었습니다 selectors. 몇 가지 중요한 기능이 있습니다.

하나는 html-element여러 선택자를 가질 수 있습니다. 이름은 공백으로 표시됩니다. 예:

<img src="logo.png" class="picture main">

여기에서 선택기를 다룬 한 가지 이유는 선택기가 자동으로 적용될 수 있기 때문입니다. 그리고 이 유용한 속성은 앞으로 매우 자주 사용될 것입니다. 자바 개발자를 포함합니다.

다음은 짧은 목록입니다.

* {
  margin: 0;
  padding: 0;
}

#img123 {
   width:100px;
   height 100px;
}

table {
   color: black;
}

table.important {
   color: red;
}

.picture {
  opacity: 0.5
}

main article {
  color: blue;
}

a:link {
color: blue;
}

a:visited {
color: red;
}

input[type=radio]:checked {
 border: 1px solid black;
}

div:hover {
  background: red;
}

ul li:first-child {
 border-top: none;
}

다 외울 필요는 없습니다. 그러나이 표를 몇 번 공부하고이 모든 것이 머리에 쌓이면 좋을 것입니다. 현대 생활에서 웹이 없으면 어디에도 없고 웹에도 있습니다. 선택기가 없으면 어디에도 없습니다.