Блог Vaden Pro

Все о самостоятельном создании и продвижении сайтов

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

Дата:14.03.15 в 16:37
Раздел: 

Бывают случаи, когда на один элемент в 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*/

Если надпись html выглядит следующим образом:
<div class=”left” style=”font-size:25px”>TEXT</div>

То никакая запись в Css не перебьет её, кроме прямого объявления «важности» (!important),Такая запись имеет специфичность 1,0,0,0.

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

  • Если к любому из селекторов добавить !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>

В результате чего весть текст будет красного цвета. Если бы это не работало, то нам бы пришлось в данном примере отдельно прописывать цвет тегу span.

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

Свойства

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

<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; /*выравнивание текста */
}

Оценок: 1 (средняя 5 из 5)

Оценка: 
Понравилась статья? Расскажите о ней друзьям:

Курсы по CSS (в открытом доступе)