CSS: каскад, специфичность и наследование

Перевод статьи Николаса Галлахера «CSS: the cascade, specificity, and inheritance», переводчик — heljoshin

CSS: каскад, специфичность и наследование

Краткая статья, содержащая основные понятия о каскаде, специфичности и наследовании в CSS.

Что такое каскад?

Каскад — это механизм, определяющий какие стили должны быть применены к данному элементу, основываясь на правилах, полученных из различных источников.
Каскад учитывает такие правила как: значимость, происхождение, специфичность и очередность источников устанавливающих стиль. Данный механизм присваивает приоритет каждому правилу. Когда несколько правил применяются к данному элементу, то правило с наибольшей значимостью станет приоритетным. Результатом является четкое определение роли данного элемента или сочетания элементов.

Браузеры применяют следующую логику при сортировке:

1. Найти все декларации, применяющиеся к данному элементу или группе элементов, и относящиеся к определенному типу.
2. Сортировать декларации в соответствии с их приоритетом (обычный или важный) и происхождением (автор, пользователь или пользовательский агент). По нисходящей приоритетности:
   1. пользовательская декларации типа !important
   2. авторские декларация типа !important
   3. обычные авторские декларации
   4. обычные пользовательские декларации
   5. декларации пользовательского агента
3. Если декларации обладают одинаковым приоритетом и источником, то следует сортировать их по специфичности селектора.
4. Наконец, если декларации обладают одинаковым приоритетом, источником и специфичностью, то сортировать их следует по порядку положения в таблице стилей – последний элемент в списке имеет самый высокий приоритет.

Что такое специфичность?

Специфичность — это метод разрешения конфликтов в пределах каскада.
Специфичность рассчитывается своим собственным способом, базируясь на значимости 4 различных категорий. Например, в CCS2 для представления этих категорий использовались буквы a, b, c, и d, где каждая по умолчанию имела значимость равную 0.

• a равняется 1, если декларация указана в атрибуте стиля HTML ("инлайн-стили"), а не в селекторе, при помощи CSS-правила.
• b равен количеству атрибутов ID в селекторе
• c равен количеству других атрибутов и псевдо-классов в селекторе
• d равен количеству элементов и псевдо-элементов в селекторе

Специфичность высчитывается путем сложения результатов всех 4 данных. Селекторы с более высоким показателем имеют приоритет.
Например, селектор #id .class[href] element:hover содержит:

• 1 ID (b равен 1)
• 1 класс, 1 селектор атрибута, и 1 псевдо-класс (c равен 3)
• 1 элемент (d равен 1)

Таким образом, элемент имеет специфичность равную 0,1,3,1. Следует отметить, что селектор, содержащий один лишь ID (0,1,0,0) будет иметь больший приоритет, чем любой другой, пусть даже последний имеет большее количество других атрибутов или элементов (например: 0,0,10,20). Это одна из причин, почему многие современные архитектурные шаблоны CSS не используют ID для стилизации.

Что такое наследование?

Наследование отличается от каскада и включает в себя дерево DOM.
Наследование — это процесс, при котором элементы наследуют значения свойств от своих предков в дереве DOM. Некоторые свойства, например, color, автоматически наследуется дочерним элементом. Каждое свойство определяет, будет ли оно автоматически унаследовано.
Значение inherit может быть задано для любого элемента, что заставит последний наследовать значение свойства родительского элемента, даже если свойство обычно не наследуется.

О значении !important

Написанное выше должно сделать очевидным тот факт, что «!important» отдельное понятие применительно к специфичности, которое никак не влияет на специфичность селектора правила.
Декларация !important имеет больший приоритет, чем обычные декларации (см. ранее описанную логику сортировки каскада), даже чем декларации, содержащиеся в атрибуте style.

Адрес оригинала http://css-live.ru/articles/css-kaskad-specifika-i-nasledovanie.html 

Вменяемый урок о специфике работы CSS

 Источник - http://ruseller.com/lessons.php?rub=2&id=1718

 Метки урока:css

Поговорим о специфике работы CSS

 Если вы часто используете CSS, то наверняка вам будет полезно знать о специфике его работы. Настоящий мастер в первую очередь должен знать именно это, а потом уже как позиционировать и оформлять элементы. Так же, если вы когда-то использовали ключевое слово important!, то эта статья так же для вас.

Как браузер читает CSS

В первую очередь вам необходимо знать, каким образом браузер читает CSS код. Делает он это сверху вниз, проходясь последовательно по каждой строчке:
/*Строка 10*/
ul li a {
 color: red;
}

/*Строка 90*/
ul li a {
 color: blue;
}

Правило написанное на строке 10, будет заменено на строке 90. В результате цвет ссылки будет синим. Правила с одинаковыми селекторами, которые находятся ближе к концу файла имеют больший приоритет.
Тот же самый принцип работает при последовальном подключении CSS файлов:

Специфика

Всё вышеперечисленное имеет место быть в том случае, если вес ваших селекторов одинаков. Если же вы приписываете ID, классы или вложенность элементов, то тут включается CSS специфика.
Существует 4 категории составляющих веса селектора: строчные стили, ID, классы и простые элементы. Как оценивать вес? Расклад такой:

• ID-шки весят 100 очков
• Классы весят 10 очков
• Элементы весят по 1 очку

Зная это, рассчитаем приоритет селектора:
#content .sidebar .module li a

100 + 10 + 10 + 1 + 1 = 122 (ID, 2 класса, 2 элемента)
Запомните:

• ID весит больше всего по сравнению с классами и элементами, поэтому вы должны ограничить использование ID в ваших стилях до минимума;
• В случаях, когда селекторы весят одинаково, порядок их применения будет такой: последний селектор имеет больший приоритет;
• Стили списанные в HTML самые козырные, так как они ближе всех к элементу;
• Единственный способ переопределить встроенные стили, это использовать ключевое слово !important;
• Псевдо-классы и атрибуты весят так же, как и обычные классы;
• Псевдо-элементы весят, как обычные элементы;
• Универсальный селектор (*) не весит ничего.

Примеры:

 ul li a {
 color: red;
}

Общий вес данного селектора 3 очка, так что добавив класс другой селектор будет иметь приоритет повыше.
.content #sidebar {
 width: 30%;
}
Данный селектор весит 110 очков из-за ID и класса.
.post p:first-letter {
 font-size: 16px;
}
Этот селектор весит 12 очков, так как псевдо-элемент :first-letter и тэг параграфа весят по одному баллу.
p {
font-family: Helvetica, arial, sans-serif;
}
Этот селектор весит всего 1 очко. Подобный тип селектора должен быть написан в верхней части страницы. При написании основных стилей, которые в дальнейшем могут быть переопределены для конкретных областей.
Запомните, что для переопределения ID-шки, вы должны написать 256 классов для одного элемента:
#title {
 font-weight: bold;
}

.home .page .content .main .posts .post .post-content .headline-area .wrapper /* ... etc. ... */ .title {
  font-weight: normal;
}
Только так второй селектор перебьёт первый.

Итог

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

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://www.webdesignerdepot.com/2013/04/how-to-use-css-specificity/
Перевел: Станислав Протасевич
Урок создан: 7 Мая 2013

 

Как узнать IP Вашего друга

Метод 1

1. Закройте все вкладки в браузере и все активные подключения, за исключением служб вашего чата; удалите все куки из браузера.
2. Пока Вы в чате откройте командную строку и введите команду netstat -an
3. Вы увидите все IP адреса всех связей.
4. Найдите адрес и протестируйте его. 

Метод 2

1. Так же как и в методе 1 закройте все вкладки и сделайте чат активным.
2. Пока чат активен, пошлите какой-нибудь файл и убедитесь, что он принимает его.
3. Во время приема файла в отдельном окне, в командной строке введите команду netstat -n  
4. Внешний адрес это то, что нам нужно.
5. Теперь тестируйте его.

Примечание:

• Локальный адрес это наш Ip.
• номер порта и основное назначение

             80,81-------->Используется для передачи данных

             5050 -------->Личные сообщения

             5100 -------->Вэб камера

      5000,5001--------> Голосовые чаты

Другие полезные параметры команды netstat   

  -a Изображает все подключения и слушаемые порты.
  -e Изображает статистику Ethernet. Этот параметр можно употреблять с параметром -s. 

  -n Выводит адреса и порты в цифровой форме.
  -p proto Выводит подключения для указанного протокола proto; proto может быть TCP или UDP.
  -s выводит статистику по протоколу, proto может быть TCP, UDP или IP.
  -r Выводит таблицу соответствия адресов.

netstat -an -p tcp : эта команда расширяет netstat -an при помощи фильтра  -p tcp, она выводит подключения для tcp