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

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

1. ?? ? ???? ID ???? ?????.
   ID? ?? ???? ????? ???? ?? ? ??? ???????. ?? ??:

    <code class="css">#header { color: #333; }</code>

2. ??? ??? ???? ?? ??? ??? :
   ??? ???? ???? ???? ?? ??? ???? ???? ? ?????. ?? ??:

    <code class="css">.button { padding: 10px; background-color: #007BFF; }</code>

3. ?? ??? ?? ?? ??? :
   ??? ?? ???? ??? ??? ?????? ? ?????. ?? ??:

    <code class="css">nav ul li a { text-decoration: none; }</code>

4. ?? ??? ?? ?? ??? :
   ?? ?? ??? ?? ??? ???? ? ? ????. ?? ??:

    <code class="css">[type="text"] { border: 1px solid #ccc; }</code>

5. ?? ? ? ?? ?? :
   ??? ?? ???? ??? ??????? ???? ???? ? ?????. ?? ??:

    <code class="css">a:hover { color: #FF4500; }</code>

6. ???? ???? ???? ?????.
   ?? ???? ???? CSS? ????? ? ????? ??? ??? ? ????. ??? ??? ???? ?? ? ??? ?????? ??? ? ???? ???? ???????.

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

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

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

1. ?? ??? ????? ??????.
   ????? ???? ????? ???? ?????. ?? ???? ????? ???? ???? ? ??? ?? ?? ? ????. ?? ?? .class div.class ?? ??????.
2. ???? ??? ???? ?????.
   ??? ?? ??? ???? ??? ??? ?? ? ????. ??? ?? ???????. div div div p ?? .content p ??? ??????.
3. ?? ? ?? ???? ?? ???? ??????.
   ???? ????? ??? ?? ????? ??? ?? ? ?? ????? ????. ?? ?? .button input[type="button"] ?? ??????.
4. ?? ??? ??? ???????.
   * ?? * > * ? ?? ???? ???? ?? ??? ?? ? ? ?? ???? ? ? ????.
5. ???? ?? ???? ?????.
   ??-?? ???? :hover ?? JavaScript ?? ???? ?? ?? ???? ??? ???? ???? ???? ????.
6. CSS ? ??? ?? :
   SASS ??? ??? ???? ?? ? ? ?? ?? ??? CSS? ???? ? ?????? ?????? ?? ????? ? ? ??? ??? ??? ? ????.
7. ??? ? ??? :
   Chrome Devtools? ?? ??? ???? CSS ??? ?????? ???????. ?? ???? ???? ???????.

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

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

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

1. ??? ?? ?? :
   ???? ?? ? ???? ??? ?? ?????.

   • ??? ??? : 1,0,0,0
   • IDS : 0,1,0,0
   • ???, ?? ? ?? ??? : 0,0,1,0
   • ?? ? ?? ?? : 0,0,0,1

2. ???? ???? ?? ???? ??????.
   ???? ?? ???? ???? ???? ???? ??????. ?? ??, ?? p ???? ??? ?????? ID ?? ???? ??? ? ????.

    <code class="css">p { color: #000; } #intro p { color: #333; }</code>

3. ?????! ?? :
   !important ??? ?? ?? ??? ??? ??? ? ??? CSS? ????? ? ??? ? ? ???? ??? ???????. ??, ??? ???? ???? ?? ???? ??????.
4. CSS ?? :
   CSS ??? ??? ???? ????? ???? ????? ? ?????. ?? ??, Element Selectors, ??? ? ?? ID? ??????.
5. ??? ? ??? :
   ???? ??? ??? ???? ?? ???? ???? ??????. ??? ?? ???? ???? ???? ?? ??? ???? ? ??? ? ? ????.

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

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

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

1. ???? ??? ?? :
   Chrome, Firefox ? Edge? ?? ?? ?????? ??? ???? ??? ?????? ? ??? ???? ? ??? ?? ??? ??? ?????. ?? ???? ????? ???? ??? ? ?? ????.
2. CSS ??? ??? :
   CSS ??? ???? ?? ??? ??? ???? ???? ???? ???? ? ??? ? ? ????. ???? ???? ??? ?? ??????.
3. CSS Lint :
   CSS Lint? ??? ? ??? ?? CSS? ???? ??? ???? ?????. ???? ??? ??? ? ?? ?? ??? ???? ? ??? ? ? ????.
4. Chrome DevTools ?? ? :
   Chrome DevTools? ?? ?? ???? CSS ???? ??? ???? ???? ??? ???? ??? ? ??????. ?? ???? ?? ??? ???? ????? ???? ???? ?????.
5. CSS ?? :
   CSS ??? ??? ???, ??? ?? ?? ???? CSS? ?? ??? ??? ???? ??? ?????. ?? ?? ??? ??? ???? ? ??????.
6. ??? ? ? ???? :
   SASS ?? PostCS? ?? ??? ???? ? ?? ?? ? CSS? ???? ???? ?? ???? ??? ? ? ????. Postcss ????? ?? CSS ??? ????? ? ??? ? ? ????.

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

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