Бывают случаи, когда на один элемент в html накладывается несколько стилей, которые находятся в разных местах в Css и противоречат друг другу (например p{ color:#fff;} и div p{ color:#000;}). При возникновении подобной ситуации у нас появляется вопрос: «какой же из них будет работать?». Для этого была придумана специфичность.

Специфичность — параметр, представленный 4-мя группами цифр разделённых запятой, позволяющий определить какой из стилей в CSS, будет применён к тому или иному тегу html.

Какая специфичность выше?

Сравнивая специфичность, стоит обратить внимание на цифру перед запятой. Она может быть, как и 0 так и любой другой.

Чем левее цифры в специфичности тем они выше, например 0,0,2,0 будет больше чем 0,0,0,99.

Однако специфика интернет браузера не всегда отвечает этому правилу, так ,к примеру, в Сhrome и Firefox 1 равна 256 на группу ниже (0,1,0,0=0,0,256,0) а в браузере Opera она приравнивается к 65536 (0,1,0,0=0,0,65536,0).

Далее значение имеет величина цифры, выигрывает та специфичность в которой цифры больше ( 0,0,1,1<0,0,1,4 )

За что отвечает каждая цифра в специфичности?

1. Последняя цифра в группе будет отвечать за тег (0,0,0,4).
2. К предпоследней относятся классы, псевдоклассы и атрибуты (0,0,3,0).
3. К второй группе относят id (0,2,0,0).
4. И самым главным приоритетом обладает стиль прописанный самому тегу атрибутом style (1,0,0,0)

Чем больше уточнений будет приведено в СSS, тем выше будет значение специфичности ( header ul li:hover = 0,0,1,3).
В Css это будет выглядеть так:

a /* специфичность  0,0,0,1*/
div a /* специфичность  0,0,0,2*/
.navmenu /* специфичность  0,0,1,0*/
.navmenu li /* специфичность  0,0,1,1*/
#m1 /* специфичность  0,1,0,0*/

<div class=”left” style=”font-size:25px”>TEXT</div>

Частные случаи

• Если к любому из селекторов добавить !important то он предаст «важности» стилю вне зависимости от его специфичности. Таким образом, если запись в Css будет, выглядеть:
  

  p { text-decoration: underline !important;}
  div p { text-decoration: none;}

  
  Текст в теге р будет подчеркнутым не смотря на то что вторая запись имеет больше специфичности.
• Также стоит обратить внимание, на случай совпадения специфичностей к примеру: 0,0,0,2 и 0,0,0,2. При таком раскладе выиграет та, которая в CSS будет написана ниже.
• Специфичность касается только того стиля, который повторяется. Например:
  

  div {
     font-size: 20px;
     color: #ff0;
  }
  .left {
     font-size: 24px;
  }

  
  Так, текст внутри <div class=”left”> будет иметь жёлтый цвет, как это описано в стиле div, но будет иметь размер в 24 px , потому что у .left выше специфичность чем у div.

Наследование

Наследование - механизм передачи стиля дочернему элементу.
Например:

<p>Основной текст<span>дочерний элемент</span></p>
<style>
   p {
      color: red;
   }
</style>

Это позволяет значительно ускорить процесс написания сайта.

Свойства

Не все свойства наследуются. Это вызвано тем, что наследование многих свойств было бы просто не логично и выглядело бы не красиво. По этому разработчики попросту исключили их из списка наследуемых стилей.

<p>Например<span>это</span>выглядит</p>
<style>
p {
   padding: 15px;
}
</style>

Если бы свойство Padding наследовалось, то слово «это» также имело бы границы и выделялось из текста.

Специфичность

Наследование придумано что бы облегчить и ускорить процесс написания сайта, а не усложнить. По этому у наследованных элементов нету специфичности, она даже не равна нулю - её попросту нет. Это сделано для того, чтобы унаследованное свойство не соперничало с прописанным . А не приравнивают её к 0, только по тому, что по правилам css нулевая специфичность выше той специфичности, которой вообще нет.

Браузеры

У каждого интернет браузера есть свой изначально заданный стиль. Это может вызывать косяки при отображении сайта у пользователей с различными браузерами. Воизбежание подобных проблем используют сброс стилей, который обычно пишут в начале документа css, подключенного к нашей странице:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font,
img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot,
thead, tr, th, td {
   margin: 0; /* убираем лишние внешние отступы */
   padding: 0; /* убираем лишние внутренние отступы */
   border: 0; /* обнуляем границы */
   outline: 0; /* обнуляем контуры */
   font-size: 14px; /* размер шрифта */
   vertical-align: baseline; /* стандартное выравнивание по вертикали */
   background: transparent; /* фон по умолчанию */
   font-family:  Arial, sans-serif, Verdana; /* шрифт по умолчанию*/
   line-height: 1.4; /* высота строки по умолчанию*/
   color: #191919; /*цвет шрифта */
   text-align: left; /*выравнивание текста */
}