?? ??? ?? ? ??? ?? ???? CSS ???

??

??? ?? ?? ??? ???? ?? ? ???? ???? ?? ??? ? ????. ? ??? ?? ???? ???? ? ?? ????? ?? CSS ??? ????? ??? CSS ??? ???? ?? ???? ??? ?????.

CSS ???? ??

?? CSS? ????? ??? ????? CSS ???? ??? ???? ?? ?????. ??? ??? ???? ???? ??? ???? CSS ??? ?????. ???? ??? ?? ?????.

• ???: 1 | 0 | 0 | 0
• ID: 0 | 1 | 0 | 0
• ???: 0 | 0 | 1 | 0
• ??: 0 | 0 | 0 | 1

? CSS ??? ?? CSS ???

?? CSS ??? ?????? ?? ?? ??? ?????.

1. ??? ??? (???: 1 | 0 | 0 | 0): HTML ??? ?? ??? ??? ???? ?? ?? ???? ????. ??? ?? ??? ???? ???? ? ??? ?? ????? ???? ????.
2. ID ???(???: 0 | 1 | 0 | 0): ID ???? ????? ? ?? ???? ????. ?? ?? ???. ?? ???? ??? ??? ???? ???? ?? ??? ??? ?????.
3. ??? ???(???: 0 | 0 | 1 | 0): ??? ???? ?? ??? ????? ??? ?????. ???. ??? ?? ???? ???? ? CSS ???? ??? ???? ???? ?? CSS ???? ??? ???? ???? ? ????.
4. ?? ??? (???: 0 | 0 | 0 | 1): ?? ???? ???? ?? ????. ?? ???? ????? ??? ???? ?? ? ???? ???? ??? ? ?? ???? ???? ???.
5. !important ??: !important ??? ???? ????? ??? ???? ????? ?????. ? ???. ??? ???? ?? ??? ??? ? ?? ??? ??? ?? ???? ???? ??? ?? ? ???? ???? ???? ???.

?

?? HTML? ?????. ? CSS:

<code class="html"><article>
  <div id="id">
    <div class="class">
      <section>
        <div class="inline" style="background-color:red">
        </div>
      </section>
    </div>
  </div>
</article></code>

<code class="css">body {margin: 0;padding: 0}
div,article {min-height: 200px;height: 100%;width: 100%}

#id {
  background-color: green
}

.class {
  background-color: yellow 
}

section {
  background-color: blue 
}

.inline {
  background-color: purple !IMPORTANT /*going to be purple - final result */ 
}</code>

??? ???? ???? ??? ??? ?????? ?? CSS ???? ????? ????? ? CSS? ??? ???? ?? ????? ??? ??? ??? ? ????. ??.

? ??? ?? ??? ????? ?? ?? ???? CSS? ? ??? ????? ??? ??????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!