Урок 9. уроки css. наследование css-свойств, каскадирование

X Y


CSS

li a { text-decoration: none; }

1 2 3

li a {

text-decorationnone;

}

Следующий наиболее комментируемый селектор — потомок. Пользуйтесь им, когда к своим селекторам нужно отнестись более конкретно. Например, что делать, если нежели выбирать все тэги-привязки all, лучше было бы сделать своей целью привязки внутри неупорядоченного списка? Вот когда вы определенно воспользовались бы наследованием селекторов.

Профессиональная подсказка – если ваш селектор выглядит как X Y Z A B.error, вы поступаете неправильно. Всегда спрашивайте себя, так ли уж абсолютно необходимо применять всю эту нагрузку.

Правила специфичности

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

Пример

h1 {background-color: yellow;} h1 {background-color: red;}

Всегда применяется последнее правило!

ID селекторы имеют более высокую специфичность, чем селекторы атрибутов — посмотрите на следующие три строки кода:

Пример

div#a {background-color: green;}#a {background-color: yellow;}div {background-color: blue;}

Первое правило более конкретное, чем два других, и будет применяться.

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

Пример


Из внешнего файла CSS:#content h1 {background-color: red;} В HTML файле:<style>#content h1 {  background-color: yellow;}</style>

Последнее правило будет применяться.

Селектор класса перебивает любое количество селекторов элементов — селектор класса, такой как .intro, перебивает h1, p, div и т.д.:

Пример

.intro {background-color: yellow;}h1 {background-color: red;}

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

❮ Prev Next ❯

Пожалуйста, включите JavaScript для просмотра комментариев, предоставленных Disqus.

В пределах одной таблицы стилей

Предположим, у нас есть HTML-разметка: 

DOCTYPE html> <html lang=»ru»> <head> <meta charset=»UTF-8″> <title>Документtitle> <link rel=»stylesheet» href=»styles.css»> head> <body> <div class=»module module-foo module-bar»> Содержимое div> body> html>

Порядок атрибутов в HTML значения не имеет. Все дело в порядке внутри таблицы стилей. Давайте посмотрим внимательнее на background:

/* У всех селекторов ниже одинаковая специфичность */

.module { background: #ccc; padding: 20px; max-width: 400px; margin: 20px auto; }

.module-foo { background: orange; }

/* Объявлен ПОСЛЕДНИМ, выигрывает это свойство/значение */ .module-bar { background: lightblue; /* Я выйграл! */ }

Решение

Решение проблемы наследования CSS-стилей, по нашему с Юрой мнению, заключается во внедрении стандарта построения DOM и CSS-файлов. Ниже перечислены правила, описывающие данный стандарт:

1. Не использовать !important

Все это знают, но все равно делают. Делают, потому-что так проще. Когда какой-то стиль в течение 20 минут не хочет прикручиваться куда надо, обычно сдаются и ставят этот проклятый !important. Но это плохо, потому что !important-important нету. И если этот самый !important испортит жизнь другим компонентам, то справиться с этим будет еще сложнее. Лучше поступить так: внимательно всмотреться в CSS-правила и найти-таки несоответствие стандартам, перечисленным в данной статье. Это несоответствие с большой долей вероятности и будет служить причиной проблемы.

2. Ни один CSS-селектор не должен содержать записи вида #myid

По той же самой причине, по которой нельзя использовать !important, нельзя использовать и селекторы по идентификаторам. Ибо они всегда круче. У них сильно высокий приоритет. Кроме того, вы не можете дать разным компонентам один и тот же идентификатор, поэтому подобные селекторы не дают возможности использовать CSS в полной мере. Лучше прикрутить к компонентам какие-то классы, и заменить все селекторы по идентификаторам селекторами по классам.

3. Правильно именовать классы


Для каждого компонента ввести уникальный класс x, и классы всех дочерних элементов определять как x-y. Пример:

Это гарантирует, что все классы имеют уникальные имена.

5. Все остальные селекторы строятся только из классов и псевдоклассов

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

Это гарантирует, что стили будут применяться ровно к тем компонентам, о которых мы говорим. Тем самым решается проблема приоретизации.

Важно! Не допускайте селекторов вида:

Это испортит вам всю жизнь. Данный стиль будет прикручиваться ко всем дочерним ссылкам и перебивать их своим высоким приоритетом. Используйте такие селекторы лишь в том случае, если совершенно уверены, что внутри .application-main-panel не может быть вложенных компонентов произвольного вида.

6. (опционально) Для компонентов определить стили по умолчанию

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

Зачем избегать таблиц?

Но прежде всего, для создания колонок, визуального выравнивания элементов и, в целом, позиционирования элементов относительно друг друга, веб-разработчики использовали элемент <table> для дизайна своих веб-страниц, потому что он естественным образом обеспечивал визуальную сетку.

<table> <thead> <tr> <th>Логотип</th> <th colspan=»2″>Слоган</th> </tr> </thead> <tfoot> <tr> <th colspan=»3″>Copyright 2015</th> </tr> </tfoot> <tbody> <tr> <td>Левое меню</td> <td>Основное содержимое</td> <td>Правый сайдбар</td> </tr> </tbody> </table>

Такой подход был громоздким по нескольким причинам:

  • таблицы в HTML многословны: они требуют много шаблонного кода;
  • разметка была семантически неверной: таблицы должны использоваться для многомерных данных;
  • изменение макета требовало изменения разметки: если мы хотели переместить левую колонку вправо, то должны были модифицировать структуру HTML;
  • таблицы были склонны к ошибкам синтаксиса: строки и ячейки для корректности должны идти и вкладываться определённым образом;
  • разметка была нечитаемой: таблицы вкладывались в другие таблицы, чтобы получить дополнительные колонки внутри колонок.

Именно поэтому от применения таблиц в качестве инструмента вёрстки медленно отказались и вместо них был использован CSS.

Символьные стили

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

Например, создадим стиль term для одинакового выделения терминов.

	span.term {color: Olive; font-style: italic; text-decoration: underline;}

Чтобы применить стиль к тексту, нужно заключить его в такие теги:

	<span class="term">Пример термина</span>

Таким образом мы получим: Пример термина.

То есть символьный стиль задается парным тегом <span> и, при его описании, могут быть выделены следующие основные свойства:

  • семейство шрифта (font-family) с принятием решения об использовании конкретного шрифта браузером
    • serif (шрифт с засечками)
    • sans-serif (шрифт без засечек, рубленный)
    • monospace (моноширинные, все символы имеют одинаковую ширину)
    • cursive (рукописные)
    • courier (похожий на пишушую машинку)…
    • конкретное имя шрифта (а если его нет у читателя сайта?) задание font-family: MyFont, serif; позволит браузеру выбрать точно имеющуюся альтернативу при отсутствии основного шрифта Да, если имя шрифта содержит в названии пробелы, его надо заключить в кавычки:font-family: ‘Times New Roman’, serif;
  • начертания (etc.)
    • полужирное (font-weight: bold;)
    • курсив (font-style: italic;)
    • подчеркивание (text-decoration: underline;)
    • капитель (font-variant: small-caps)
    • всё заглавными (text-transform: capitalize;)
  • атрибут font позволяет многое объединить, но обсуждаться не будет!
  • размер символов (font-size) лучше задавать в пунктах (учтите, что если выбранный браузером шрифт является экранным, то у него есть только фиксированные размеры)
  • уже перечисленного вполне достаточно почти для любых задач.

Псевдоэлементы

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

Псевдоэлементы и не работают так, как вы могли предполагать. Они действуют лишь на первый символ/строку в блоке. С , бывает, возникает ошибка с двухбайтовыми символами, такими как Japanese Kana, и С управлением стилями выделенного текста или placeholder’а, осуществляемого с помощью или , зачастую возникают проблемы. С всё просто: не используйте его

Это особенно важно для полей ввода паролей и т.п

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

Использование в веб-страницах¶


Существует три способа применения таблицы стилей к документу HTML:

  • Встраивание (Inline). Этот метод позволяет применить стиль к заданному тегу HTML.
  • Внедрение (Embedded). Внедрение позволяет управлять стилями страницы целиком.
  • Связывание (Linked или External). Связанная таблица стилей позволяет вынести описание стилей во внешний файл, ссылаясь на который можно контролировать отображение всех страниц сайта.

Встроенные стили

Встраивание стилей предоставляет максимальный контроль над всеми элементами веб-страницы. Встроенный стиль применяется к любому тегу HTML с помощью атрибута style следующим образом:

<p style="font: 12pt Courier">Это текст с кеглем 12 точек и гарнитурой Courier</P>

Пример:

<div style="font-family: Garamond; font-size: 18 pt;>"
Весь текст в этом разделе имеет размер 18 точек и шрифт Garamond.
<span style="color:#ff3300;">
А этот фрагмент еще и выделен красным цветом.</span>
</div>

Встроенные стили полезны, когда необходима тонкая настройка отображения некоторого элемента страницы или небольшой веб-страницы.

Внедренные стили

Внедренные стили используют тег <style>, который обычно размещают в заголовке HTML-документа (<head>…</head>):

<html>
<head>
    ...
    <style>
        правила CSS
    </style>

    ...
</head>
<body>
...

Связанные таблицы стилей

Связанные (linked), или внешние (external) таблицы стилей — наиболее удобное решение, когда речь идет об оформлении целого сайта. Описание правил помещается в отдельный файл (обычно, но не обязательно, с расширением .css). С помощью тега <link> выполняется связывание этой таблицы стилей с каждой страницей, где ее необходимо применить, например так:

<link rel=stylesheet href="sample.css" type="text/css">

Любая страница, содержащая такую связь, будет оформлена в соответствии со стилями, указанными в файле sample.css. Следует отметить, что файл со стилями физически может находиться на другом веб-сервере, тогда в href нужно указать абсолютный путь к нему.

Примечание

Проблемы с браузерами

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


С этим читают