Каскадные таблицы ститей(css). наследование и приоритеты стилей

Позиционирование

position

  Определяет порядок, в соответствии с которым элемент отображается на веб-странице.

bottom

  Сдвигает элемент относительно нижнего края. Используется совместно со свойством position.

left

  Сдвигает элемент относительно левого края. Используется совместно со свойством position.

page-break-before

  Сдвигает элемент относительно верхнего края. Используется совместно со свойством position.

right

  Сдвигает элемент относительно правого края. Используется совместно со свойством position.

z-index

  Определяет порядок, в соответствии с которым элементы накладываются друг на друга, если необходимо отобразить их на одном месте.

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

• Recommendation (Рекомендация
  ) — спецификация одобрена W3C и рекомендована как стандарт.
• Candidate Recommendation (Возможная рекомендация
  ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
• Proposed Recommendation (Предлагаемая рекомендация
  ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
• Working Draft (Рабочий проект
  ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
• Editor»s draft (Редакторский черновик
  ) — черновая версия стандарта после внесения правок редакторами проекта.
• Draft (Черновик спецификации
  ) — первая черновая версия стандарта.

Группирование селекторов (А, B)

Группирование применяет один и тот же стиль сразу к нескольким селекторам. Это делается для удобства представления и сокращения кода CSS. В примере 1 показана обычная запись, здесь для каждого селектора приводится свой набор стилевых свойств.

Пример 1. Стиль для каждого селектора

Из данного примера видно, что стиль для элементов <h1>, <h2>, <h3> содержит одинаковое значение font-family. Группирование как раз и позволяет установить одно свойство сразу для нескольких селекторов, как показано в примере 2.

Пример 2. Сгруппированные селекторы

В данном примере единое для всех селекторов свойство font-family применяется сразу к нескольким селекторам, а отдельные свойства уже добавляются к каждому селектору отдельно.

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

Здесь свойство background применяется одновременно к элементу <h2> и к классам block и msg.

Создание и порядок слоев

Для создания каскадных слоев предназначено новое @-правило .

Самый простой способ создать слой — прямое объявление:

Мы создали слой с именем и сразу определили для него какие-то стили.

Функцию также можно использовать внутри правила . Например, это очень полезно при работе со сторонними библиотеками, когда вы все стили библиотеки сразу помещаете на отдельный слой.

Кроме того, правило может использоваться для указания порядка слоев. Нужно просто перечислить имена слоев в нужной последовательности.

Эта строчка создаст три слоя, а стили на эти слои можно добавить позже в коде.

Это очень удобно: вы можете управлять взаимным расположением слоев в одном месте, без необходимости перемещать большие куски кода. Порядок слоев имеет большое значение, так как влияет на приоритет стилей. Здесь работает то же правило — последний побеждает.

В примере стили фреймворка bootstrap находятся на самом нижнем уровне (слой ), поверх них находятся базовые стили (слой ). И наконец на самом верху, с максимальным приоритетом расположен слой (основные стили приложения).

Вы можете добавлять стили в уже созданные ранее слои, обращаясь к ним по имени:

Второй блок просто добавит новые стили к уже созданному слою , не перезаписывая его.

Вложенные слои

Слои можно вкладывать друг в друга. Сослаться на вложенный слой можно через родительский, используя оператор (точка), как в JavaScript.

Порядок вложенных слоев также можно определить заранее, перечислив несколько в одной инструкции :

Имена вложенных слоев могут повторять имена слоев с верхнего уровня, конфликта не будет:

В этом примере создается новый слой , отличный от слоя .

Анонимные слои

На самом деле давать имя слою необязательно, вполне можно использовать анонимные слои.

Однако у такого подхода есть недостатки. Вы не сможете позднее добавлять в такой слой новые стили, так как не сможете к нему обратиться. И нет возможности явно указать порядок безымянного слоя, он будет зависеть только от «порядка появления» в коде.

Анонимные слои можно использовать в качестве “приватных” слоев, если вы намеренно не хотите, чтобы кто-то другой мог ими манипулировать.

Псевдо-классы

В отличие от классов, псевдо-классы не нужно указывать в HTML разметке, они сами вычисляются браузером. У нас есть 4 статических псевдо-класса и 3 динамических псевдо-класса, без учёта CSS 3, о нём ближе к концу. К статическим относятся ( :first-child, :link, :visited, : lang() ):

<style>
p:first-child {color: green;} /* сработает, если p является первым ребёнком своего родителя */
</style>
<div>
  <p>Прямой наследник (первый уровень)</p>
  <span>
    <span>
      <p>Третий уровень</p>
    </span>
  </span>
  <p>Прямой наследник (первый уровень)</p>
  <span>
    <p>Второй уровень</p>
  </span>
  <p>Прямой наследник (первый уровень)</p>
</div>

Результат:

Естественно можно комбинировать селекторы как захотим, например:

div>span p:first-child {color: green;} /*сработает, если p является первым ребёнком своего родителя и находится внутри тега span, который является прямым потомком тега div */

Название представленного выше псевдо-класса говорит само за себя first-child – первый ребёнок.

Следующие два статических псевдо-класса применяются только к тегу гиперссылки (:link, :visited), они применяют CSS свойства в зависимости от того, посещалась данная ссылка конкретным пользователем или нет:

a:link {color: blue;} /* у не посещённых ссылок задаём синий цвет, и по умолчанию они подчёркнуты */
a:visited {color: green; text-decoration: none;} /* у посещённых ссылок текст будет красным, убираем подчёркивание */

Псевдо-класс :lang() используется для задания разного стиля оформления в зависимости от языка. В скобочках указывается язык, к которому нужно применить оформление. Это можно использовать, например, для задания разных стилей кавычек в цитатах:

q:lang(de) {quotes: "\201E" "\201C";} <span class="code-comm">/* кавычки для немецкого языка */</span>
q:lang(en) {quotes: "\201C" "\201D";} <span class="code-comm">/* кавычки для английского языка */</span>
q:lang(ru) {quotes: "\00AB" "\00BB";} <span class="code-comm">/* кавычки для русского языка */</span>

Это, пожалуй, единственный из всех возможных видов селекторов, который я никогда не использовал.

Универсальный селектор

С этим разобрались, у нас на вооружении уже 3 вида селекторов, теперь хочу вам рассказать о весьма необычном селекторе, который выделяется среди всех остальных – это так называемый универсальный селектор, который обозначается звёздочкой (*):

* {margin: 0; padding: 0;}

Так у меня начинается каждый новый проект, советую вам делать также. Универсальный селектор распространяется на все элементы страницы (теги), но имеет нулевой приоритет (ниже только отсутствие приоритета вовсе). Его обычно используют, чтобы перебить CSS свойства, которые браузеры устанавливают по умолчанию для некоторых тегов. Представьте себе, и такое имеет место быть! Достаточно многим тегам браузеры по умолчанию устанавливают свои свойства, например, тегу гиперссылки <a> синий цвет текста и подчёркивание, тегу body они задают поля (padding) и тд. Нам это запоминать, знать и использовать совсем не к чему, поэтому самые банальные свойства мы сразу же убираем с помощью универсального селектора, однако я бы не советовал дописывать в него что-то ещё (или дописывать, но аккуратно), несмотря на наименьший (нулевой) приоритет универсального селектора, он в некоторых случаях всё же может перебить вам другие свойства, так что имейте это в виду.

Преимущества оптимизации HTML за счёт CSS

Суть всего написанного выше отчасти заключается в том, чтобы отказаться от повсеместного использования атрибутов class и id в HTML, тем самым возложив всё на плечи могучих таблиц стилей.

Внешние файлы стилей, как и внешние файлы Javascript отлично кэшируются, а это значит, что зайдя первый раз на любую страницу вашего сайта, браузер пользователя запоминает эти файлы и более их не скачивает, в отличие от самой страницы сайта, то есть вашей HTML разметки, картинок и текста, которую браузер загружает снова и снова. Тоже самое касается и поисковых систем, им вообще нет дела до ваших внешних файлов, но вот до объёма и содержания вашей HTML разметки им дело есть. Поисковым системам приходится сканировать всю структуру страницы и в ваших же интересах помочь им в этом, сосредоточить их усилия на контенте, а не на громоздкой стене разметки состоящей из кучи классов и идентификаторов или того хуже – Javascript обработчиков событий и CSS стилей прямо в атрибутах тегов (и такое до сих пор бывает).

Вы можете со мной поспорить, мол, мы можем заставить клиентский браузер скачивать себе в локальную среду все подключаемые файлы, картинки, закэшировать всю страницу целиком и так далее и тому подобное. На таком фоне подобная мелочь совсем теряется, но так или иначе максимально сократив HTML разметку, вы только выигрываете, при этом ничего не потеряв, кроме возможной привычки.

Подытожим: благодаря оптимизации и сокращению HTML мы имеем совсем небольшой выигрыш в скорости загрузки сайта и в SEO (поисковой оптимизации), а также более чистый код.

Часть 3. Медиа-запросы

Медиа-запросы в CSS — это база для создания отзывчивой верстки, позволяющая стилизовать элементы в зависимости от размера экрана или устройства, на котором отображается веб-сайт. Технически Медиа-запрос — это простое логическое выражение, которое может быть или истинным или ложным. Условиями для такого выражения являются либо параметры устройства, на котором отображается веб-страница, либо размер экрана в пикселах.

В данном руководстве мы рассмотрим базовые возможности медиа-запросов, которые необходимы для адаптивной верстки сайтов и практически полезны.

Медиа-запрос пишется в самом файле стилей или в теле документа (тег style) и начинается с объявления правила @media. Структура медиа запроса довольно проста:

Условием может выступать либо устройство — all (все устройства), screen, print, tv и т.д., либо медиа-функции, которые задают параметры устройства или разрешение экрана, на котором отображается документ.

Наиболее часто используемые медиа-функции определяют именно максимальное и минимальное разрешение экрана устройства:

Здесь устройства с максимальным разрешением экрана 480px или минимальным разрешением 320px будут отображать текст тега с классом .my-class серым. Данное условие я привел для примера, практически оно бесполезно. Чаще всего требуется указать либо только максимальное разрешение, либо только минимальное, в пределах которого будет прменяться свойство.

Кроме всего прочего, как мы видим из примера, функции могут содержать условия and (И), not (НЕ) и only (Для старых браузеров, не поддерживающих медиа-запросы). Нет логического оператора or (ИЛИ), его роль выполняет запятая. Медиа-функции, как мы видим заключают в обычные круглые скобки.

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

Приоритеты стилей в зависимости от типа селектора

Да, селекторы CSS также влияют на стилевые приоритеты, причем в расчет берутся не только простые селекторы (классы, селекторы тегов, атрибуты и т.д.), но и составные (дочерние, соседние, селекторы потомков и т.д.).

Чтобы вычислить уровень приоритета (специфичности) какого-либо селектора браузеры используют определенный алгоритм, где каждому типу начисляется определенное количество баллов, определяющее вес селектора. Стили того селектора, который наберет больший вес, в конечном итоге и будут применены к элементу. Если же получится так, что какие-то селекторы, которые воздействуют на один и тот же HTML-элемент наберут одинаковое число баллов, то будут использованы стилевые свойства того, который находится в коде ниже.

А теперь давайте рассмотрим, каким же образом браузеры считают эти баллы.

1. Универсальный селектор — количество начисляемых баллов равно нулю (0).
2. Селекторы тегов и псевдоэлементы — по одному (1) баллу за каждый.
3. Селекторы атрибутов, классы и псевдоклассы — по десять (10) баллов за каждый.
4. Идентификаторы — по сто (100) баллов за каждый идентификатор находящийся в селекторе.
5. Атрибут style — встроенные стили не используют селекторов, а указываются непосредственно внутри тегов элементов, но при этом они имеют самый высокий приоритет исчисляемый тысячей (1000) баллов.

Чтобы вы лучше поняли, как вычисляются эти виртуальные баллы, вот вам несколько простых примеров.

Как видите все довольно просто. Только вы не пугайтесь заранее, думая, что вам придется постоянно высчитывать эти баллы при создании своих таблиц стилей. На самом деле их никто никогда просто так не считает. Обычно про селекторный приоритет вспоминают только тогда, когда какие-то стили не хотят работать. Вот тут-то и начинаются «танцы с бубном» и поиски виновного.

Пример демонстрирующий приоритеты селекторов

Результат в браузере

Обычный параграф.

Примечание.

В этом примере цвет текста примечания черный, как и цвет остальных параграфов, хотя для него и указан зеленый, а используемое свойство находится ниже в коде. Но при этом стили рамки и внутренние отступы к примечанию были добавлены. Почему это произошло, я думаю, понятно. Выходом в данной ситуации будет перед классом note дополнительно поставить идентификатор #content, который увеличит вес селектора или применить правило !important, о котором читайте далее.

Как переопределить важное в CSS

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

Почему работают эти два метода? Из-за правил специфики. Когда два объявления, использующие правило! Important, применяются к одному и тому же элементу, будет применяться объявление с большей специфичностью или объявление, определенное последним

Возможно, вы помните эти правила из введения, но важно понимать, что они применяются к объявлениям, использующим правило! Important, а также к объявлениям, не использующим правило

Вместо того, чтобы заменять свойство! Important в CSS другим свойством! Important, лучше всего переписать правило и полностью отказаться от использования этого свойства. Но иногда это невозможно.

Возьмем, к примеру, пользовательские таблицы стилей. Используя настраиваемую таблицу стилей пользователя, читатель может переопределить стили веб-сайта в соответствии со своими пожеланиями. Читатель может, например, увеличить размер шрифта или изменить цвет типографики на странице, чтобы они могли лучше видеть контент.

Поскольку определяемая пользователем таблица стилей переопределяет таблицу стилей автора независимо от специфики, читатель может добавлять правила CSS без тега! Important. Однако, если таблица стилей автора использует правило! Important для определения размера или цвета шрифта, тогда в таблице стилей пользователя будет необходимо правило! Important.

Давайте продолжим использовать тот же пример кнопки сверху. Скажем, на моем веб-сайте уже были применены важные правила к классу кнопок. Но теперь я хочу, чтобы все элементы с именем «content» имели синюю пунктирную рамку.

Мне нужно просто переписать код, удалив все важные теги из моего CSS. Но, допустим, у меня не хватает времени и я ищу быстрое решение. Затем я мог бы просто добавить тег! Important в селектор CSS ID. Тогда оба объявления будут использовать свойство! Important, и, поскольку селекторы ID имеют более высокую специфичность, чем селекторы классов, элемент в разделе содержимого будет иметь синюю пунктирную границу.

HTML остается прежним:

CSS становится:

Результат:

Теперь предположим, что я хочу, чтобы все кнопки на моем веб-сайте были обведены синей пунктирной рамкой. Опять же, мне нужно просто переписать код, но я могу использовать тег! Important для быстрого исправления. Используя тот же селектор классов .btn с новым правилом для синей пунктирной границы и тегом! Important, я могу просто добавить его после существующего правила в таблице стилей. Поскольку он появится позже, он имеет более высокую специфичность и будет применяться к элементам с классом .btn.

HTML остается прежним:

CSS становится:

Вот результат:

List-style-image и сборное Css правило

Далее у нас на очереди List-style-image — позволяет задать картинку, которая будет использоваться в качестве маркера. Это правило по умолчанию имеет значение None (т.е. никакой картинки в качестве маркера не используется), но вы можете прописать функционал Url (), указав в нем путь до изображения, которое в последствие будет выполнять роль маркера в этом списке:

Выглядеть это может так:

List-style-image: url(https://сайт/images/list_star.png);

1. Здесь все по умолчанию
2. Вот так может выглядеть использование картинки в качестве маркера. Понятно, что можно подобрать более подходящее для этой цели изображение
3. Например, как здесь.

Как вы помните, в статье про я говорил, что картинки относятся к строчным элементам (собственно, для браузера эта та же самая буква, но иногда очень большого размера).

Вот картинка и встает на место маркера (буквы или цифры). При этом высота строки с элементом списка будет увеличена, если вы вставите в качестве маркера большую картинку (как это произошло во втором элементе приведенного чуть выше примера).

В функционале для list style image можно указывать как на изображения. Если картинка не подгрузится, то будет использоваться маркер или нумерация по умолчанию, либо то, что прописано в list-style-type для этого элемента списка.

Чтобы записать все три описанных выше CSS правила в одно единое, можно будет использовать List-style, которое является сборным для оформления списков. Порядок указания значений в нем не имеет никакого значения. Те значения, которые вы не зададите в List-style, в явном виде будут интерпретированы браузером со значениями принятыми по умолчанию.

Где посмотреть значения по умолчанию? Да все там же — в спецификации CSS валидатора W3C в столбце «Initial value» напротив интересующих вас свойств:

Значения для отдельных свойств в сборном правиле List-style разделяются пробелами. Места расположения, как уже упоминал, не важны:

На практике это может выглядеть, например, так:

List-style:inside upper-roman url(https://сайт/images/list_star.png);

Можно использовать значения в любом порядке и любом количестве (начиная от одного). Кстати говоря, с помощью списков чаще всего формируются на сайтах меню и свойство List-style при этом используется для того, чтобы убрать маркеры из списков меню
, которые там совершенно не нужны:

List-style-type:none;

List-style:none;

Удачи вам! До скорых встреч на страницах блога сайт

Вам может быть интересно

Display (block, none, inline) в CSS — задаем тип отображения Html элементов на вебстранице
Как настроить чередование фонового цвета строк таблиц, списков и прочих Html элементов на сайте с помощью псевдокласса nth-child
Float и clear в CSS — инструменты блочной верстки
Позиционирование с помощью Z-index и CSS правило Cursor для изменения курсора мыши
Position (absolute, relative и fixed) — способы позиционирования Html элементов в CSS (правила left, right, top и bottom)
Для чего нужен CSS, как подключить каскадные таблицы стилей к Html документу и основы синтаксиса этого языка
CSS свойства text-decoration, vertical-align, text-align, text-indent для оформления текста в Html
Правила Font (Weight, Family, Size, Style) и Line Height для оформления шрифтов в CSS
Background в CSS (color, position, image, repeat, attachment) — все для задания цвета фона или фоновой картинки Html элементов
CSS — что это такое, как таблицы каскадных стилей подключаются к Html коду с помощью Style и Link
Приоритеты в Css и их повышение за счет Important, комбинация и группировка селекторов, пользовательские и авторские стили

Устанавливает адрес изображения, которое служит в качестве маркера списка. Это свойство наследуется, поэтому для отдельных элементов списка для восстановления маркера используется значение none
.

Не переусердствуйте

Можно вложить CSS селектор потомков настолько глубоко, насколько нужно, но не увлекайтесь. Все становится запутанно, когда вы начинаете писать правила, которые выглядят так:

/* Старайтесь избегать такого */
.article h2 .subheading em {
  /* Конкретные стили */
}

Эти стили нельзя будет повторно использовать, поскольку они соответствуют только следующей структуре HTML:

<div class='article'>
  <h2>
    <span class='.subheading'>Это <em>на самом деле</em> особенный текст.</span>
  </h2>
</div>

Если захотите применить эти стили к заголовку <h2>, который не был обернут в тег <div class = ‘article’>, придется здорово поломать голову. Та же ситуация, если вы захотите применить их к заголовку <h3>.

List style — оформление списков в Html коде

Итак, в языке стилевой разметки существует три отдельных правила начинающихся с list-style, которые служат для настройки внешнего вида списков (нумерованных или маркированных) в коде веб документов. Кроме этого существует сборное Css правило list-style, которое позволяет несколько сократить количество кода. Но обо всем по порядку.

То, что мы сейчас будем с вами рассматривать, допустимо использовать как для Html элементов LI, так и для элементов Ul и Ol (маркированный и нумерованный списки, соответственно). В чем будет разница применения list-style для этих тегов?

Собственно, узнать, наследуется ли свойство или нет, можно на сайте валидатора (читайте про по приведенной ссылке) в разделе посвященном спецификации таблиц каскадных стилей. В столбце «Inherited» напротив наследуемых правил будет стоять «Yes»:

Давайте начнем с list-style-type
, которое позволяет задать тип маркирации для отдельных элементов Html списка. Для этого правила допустимы следующие значения:

1. None — маркирация осуществляться вообще не будет (list-style-type:none; применено для этого пункта и поэтому у него нет маркера)
2. Disc — закрашенный кружок (для этой строки как раз применено list-style-type:disc;)
3. Circle — окружность в качестве маркера
4. Square — квадратик в качестве маркера
5. Decimal — арабские цифры (list-style-type:decimal;)
6. lower-alpha — в нижнем регистре
7. upper-alpha — латинские буквы в верхнем регистре
8. lower-roman — римские цифры в нижнем регистре
9. upper-roman — римские цифры в верхнем регистре

Как вы думаете, с помощью каких элементов Ul или Ol был создан расположенный чуть выше список? Вопрос на засыпку

Оказывается, что это уже не важно, хотя в данном конкретном случае я использовал Ol, но изменив его на Ul — внешний вид останется прежним, ибо он задается для каждого элемента своим значением CSS правила list style type

По сути Ul и Ol отличаются только поведением по умолчанию (Ul — маркирует, а Ol — нумерует). Но если вы захотите, то сможете легко превратить один вид списка в другой с помощью list-style-type. Шрифт для маркирования цифрами или буквами используется точно такой же, какой был вами определен для содержимого тегов LI. Например, поменяв цвет шрифта для списка мы поменяем и цвет маркеров
:

1. Поменяли цвет текста (list-style-type:lower-roman;color:red) и поменялся цвет маркера

Давайте перейдем с следующему CSS свойству — list-style-position
. С помощью него можно задать позицию (размещение) области с маркером. Для него предусмотрено всего два варианта значений:

Т.е. по сути в list-style-position мы указываем, где нужно размещать область с маркерам — за пределами элемента LI (outside) или внутри него (inside). По умолчанию область с маркером выносится за пределы, т.е. используется значение outside.

Давайте посмотрим это на примере. В первом элементе списка я специально пропишу list-style-position:inside и мы посмотрим, что из этого выйдет:

Здесь все по умолчанию
Вот так будет выглядеть размещение области маркера с inside

Обратите внимание, что вторая строка в этом элементе и маркер расположены на одном уровне
Здесь все по умолчанию