, а затем
идёт тег |
. Если в стилях для селектора TABLE
задать цвет текста, то он автоматически устанавливается для содержимого ячеек,
как показано в примере 18.1.
Пример 18.1. Наследование параметров цвета
HTML5
CSS 2.1
IE
Cr
Op
Sa
Fx
Наследование
| Ячейка 1 | Ячейка 2 |
| Ячейка 3 | Ячейка 4 |
В данном примере для всей таблицы установлен красный цвет текста, поэтому в
ячейках он также применяется, поскольку тег |
наследует свойства тега
. При этом следует
понимать, что не все стилевые свойства наследуются. Так, border
задаёт рамку вокруг таблицы в целом, но никак не вокруг ячеек. Аналогично не
наследуется значение свойства background
. Тогда
почему цвет фона у ячеек в данном примере тёмный, раз он не наследуется? Дело
в том, что у свойства background
в качестве значения
по умолчанию выступает transparent
, т. е. прозрачность.
Таким образом цвет фона родительского элемента
«проглядывает» сквозь дочерний элемент.
Чтобы определить, наследуется значение стилевого свойства или нет, требуется
заглянуть в и посмотреть там. Подключать свою интуицию
в подобном случае бесполезно, может и подвести.
Наследование позволяет задавать значения некоторых свойств единожды, определяя
их для родителей верхнего уровня. Допустим, требуется установить цвет и шрифт
для основного текста. Достаточно воспользоваться селектором BODY
,
добавить для него желаемые свойства, и цвет текста внутри абзацев и других текстовых
элементов поменяется автоматически (пример 18.2).
Пример 18.2. Параметры текста для всей веб-страницы
HTML5
CSS 2.1
IE
Cr
Op
Sa
Fx
Наследование
В данном примере рубленый шрифт и цвет текста абзацев устанавливается с помощью
селектора BODY
. Благодаря наследованию уже нет нужды
задавать цвет для каждого элемента документа в отдельности. Однако бывают варианты,
когда требуется всё-таки изменить цвет для отдельного контейнера. В этом случае
придётся переопределять нужные параметры явно, как показано в примере 18.3.
Пример 18.3. Изменение свойств наследуемого элемента
HTML5
CSS 2.1
IE
Cr
Op
Sa
Fx
Наследование
Цвет текста этого абзаца синий.
А у этого абзаца цвет текста уже другой.
В данном примере цвет первого абзаца наследуется от селектора BODY
,
а для второго установлен явно через класс с именем red
.
» важнейшие понятия группирования и наследования в CSS
. Кто уже давно следит за моими публикациями, наверное, уже проникся мыслью о необходимости постижения основ каскадных таблиц стилей (Cascading Style Sheets). И это правильно, поскольку современный вебмастер непременно должен знать базовые понятия и алгоритм применения основных знаний HTML и CSS на практике.
Я уже предоставил на суд суд читателей довольно приличную серию материалов на эту тему, в том числе публикации о различных видах селекторов CSS, а также . Эта часть каскадных таблиц стилей очень важна, впрочем, маловажные мы не рассматриваем.
Ну, а теперь переходим непосредственно к сегодняшней теме и разберем правила группирования и наследования в CSS
, благодаря которым появляется возможность упорядочить и оптимизировать документы, описывающие стили элементов вебстраниц сайта.
Группирование в CSS
На скриншоте красной рамкой обведены данные о том, какие свойства CSS наследуются, а какие - нет. И напоследок разъясню более подробно по столбцам, какая информация здесь представлена:
«Name» - название CSS свойства;
«Values» - все возможные значения для этого свойства;
«Initial value» - начальное значение для данного свойства, которое используется по умолчанию (об этом я упоминал)
«Applies to» - к каким элементам применяется правило, в которое входит свойство CSS;
«Inherited?» - наследуется это правило или нет.
Это все, о чем я хотел сегодня вам рассказать. Постарался преподать нюансы группирования и наследования CSS максимально доступно и эффективно. Как это у меня получилось? Судить вам. Уровень вашей активности при подписке на новые материалы блога дадут ответ на этот вопрос. Засим разрешите откланяться. Напоследок не помешает небольшая разрядка, особенно тем, кто неравнодушен к КВН:
Наверняка у каждого из Вас была такая ситуация, что прописываешь какие-нибудь css инструкции для элементов сайта, а они никак не хотят
применяться.
В основном это происходит из-за применения основных принципов применения css стилей — наследования и каскадирования.
То есть, к элементу может иметь отношение несколько css свойств, которые конфликтуют
друг с другом (имеют разные значения). Естественно, все они примениться не могут. Применяется именно та css инструкция, которая имеет более высокий приоритет.
Но как же тогда определить, какая инструкция имеет больший приоритет? И как задать нужной нам инструкции больший приоритет, чтобы применилась именно она, а не какая-нибудь другая? Об этом мы и поговорим в этой статье.
Но сначала давайте рассмотрим основные принципы применения css стилей.
1. Принцип наследования css стилей.
Ни для кого не секрет, что структура кода любой интернет страницы имеет иерархическую структуру. То есть одни элементы входят в состав других, а те, в свою очередь — входят в состав третьих и так далее.
Для каждого уровня вложенности можно прописать свои css инструкции. Но если Вам нужно чтобы все одинаковые элементы страницы имели одинаковые стили, то Вам не нужно прописывать эти стили на каждом уровне вложенности.
Дочерние элементы (которые находятся внутри других) наследуют стили от своих предков. И нам нужно прописать стили только на самом верхнем уровне — и они применятся на всех уровнях.
Это очень удобно. Например
: нам нужно задать цвет шрифта для всех элементов страницы. Мы прописываем css инструкцию для самого верхнего уровня:
| body {
color
:
#000000
;
}
|
Эта инструкция применит черный цвет текста для всех элементов, находящихся внутри тега . А мы знаем, что все элементы страницы находятся внутри тега . Больше ничего нам прописывать не нужно. Стиль применится на всех уровнях вложенности.
Нужно учесть, что элемент будет наследовать только те стили, которые он поддерживает. Так, не смогут наследовать свойства, предназначенные для , например height (высота).
2. Каскадирование css.
Принцип каскадирования стилей css применяется в том случае, если одному и тому же элементу задано несколько css свойств с разными значениями и между ними возникает конфликт.
Что это значит? Для того, чтобы правильно назначить стили какому-либо элементу, мы можем использовать различные комбинации и придать нашему свойству более весомый приоритет, чем тот, который наследуется элементом от родителя или прописан в другой css инструкции.
3. Приоритеты css стилей.
Итак, мы с Вами подошли к самому интересному. Сейчас мы научимся правильно адресовать стили, чтобы они применялись именно там, где нам нужно, а не где попало.
Начнем с самого низа:
- Самым низким приоритетом обладают стили браузера. Не удивляйтесь — каждый браузер имеет свои стили по умолчанию. Они применяются, если для элемента вообще не заданы никакие стили. Поэтому, если Вы хотите, чтобы Ваш сайт во всех браузерах смотрелся одинаково — нужно обязательно прописывать стили всем элементам.Есть еще один способ на тот случай, если Вы все-таки забыли прописать стили к какому-нибудь элементу. Это сброс css стилей. Смысл заключается в том, чтобы изначально сбросить все стили браузеров. Для этого используются готовые блоки css инструкций, которые нужно просто вставить в начало вашего файла со стилями. Вот Вам один из вариантов такого «сбрасывающего» блока инструкций:
| 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
| 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,
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-weight
:
inherit
;
font-style
:
inherit
;
font-size
:
100%
;
font-family
:
inherit
;
vertical-align
:
baseline
;
}
:focus
{
outline
:
0
;
}
body {
line-height
:
1
;
color
:
black
;
background
:
white
;
}
ol,
ul {
list-style
:
none
;
}
table {
border-collapse
:
separate
;
border-spacing
:
0
;
}
caption,
th,
td {
text-align
:
left
;
font-weight
:
normal
;
}
blockquote:before
,
blockquote:after
,
q:before
,
q:after
{
content
:
""
;
}
blockquote,
q {
quotes
:
""
""
;
}
|
Просто вставляете этот код в начало Вашего файла css и можете не беспокоиться о том, что Ваш сайт будет выглядеть в разных браузерах по разному.
- Вторыми по значимости являются стили, которые пользователь выставил в настройках браузера. Они тоже сбрасываются при помощи вышеуказанного списка инструкций.
- Следующим уровнем приоритета обладают стили, унаследованные элементами от своих предков. Это то, о чем мы говорили в начале статьи.
- Еще более высокий приоритет имеют стили, прописанные при помощи различных селекторов во внешнем файле с css стилями. Как подключить файл со стилями к Вашей интернет странице, я рассказывал в статье:
- Следующими по значимости являются стили, прописанные при помощи селекторов непосредственно внутри HTML документа внутри тегов
Заголовок второго уровня
Полный
абзац
В этом примере для элемента мы установили зеленый
цвет текста и тип шрифта Arial
.
CSS свойства color и font-family наследуются, а это означает, что эти свойства будут применяться и на вложенные элементы внутри (на все его потомки).
Обращаю Ваше внимание на то, что вы всегда можете посмотреть наследуется или нет конкретное свойство в полном справочнике CSS .
Результат нашего примера:
В выше рассмотренном примере все элементы, расположенные внутри (его потомки) унаследовали его свойства.
Механизм наследования имеет многоуровневую систему и распространяется не только на прямых потомков элемента, но и переносится на все вложенные элементы. В нашем примере к такому элементу относится элемент , который по аналогии с другими элементами унаследовал все свойства стиля, заданного для элемента . В этом заключается основной смысл наследования, который используется в CSS.
Механизм наследования значительно сокращает код CSS, например, если бы наш элемент получил цвет по умолчанию – чёрный, то нам пришлось бы отдельно для этого элемента устанавливать стиль, который бы определял как цвет, так и тип шрифта, что значительно увеличивало бы трудозатраты на разработку конкретной страницы.
Еще один момент, который обязательно необходимо понять, это то, что аналогично действует механизм наследования не только для селекторов типа, но и для всех типов селекторов, рассмотренных в предыдущих статьях, посвященной этой тематике. Допустим, мы создали селектор класса с аналогичными CSS свойствами и применили его к элементу , то в этом случае все элементы, вложенные в него также унаследуют эти свойства.
Вы будете в дальнейшем использовать эти особенности CSS для упрощения Вашей работы по созданию стилей для элементов документа.
Ограничения и нюансы наследования
Ограничения:
- Не наследуются свойства, которые влияют на размещение элементов на странице, свойства отвечающие за внешние и внутренние отступы элемента, свойства отвечающие за границы элементов. Все эти свойства мы подробно рассмотрим далее в учебнике. Повторюсь, что вы всегда можете посмотреть наследуется или нет конкретное свойство на сайте в справочнике CSS .
- Я хочу, чтобы вы поняли, что многие свойства не наследуются по объективным причинам, представьте, что мы создаем границу для родительского элемента и после этого все потомки по этой логике должны унаследовать это свойство, что выглядело бы абсурдно и напротив увеличивало бы работу по созданию стилей (их отмене, или сбросу).
Нюансы:
Все современные браузеры используют собственные встроенные CSS стили для HTML элементов, эти стили, при необходимости, вы можете посмотреть у конкретного элемента на сайте в справочнике HTML (значение CSS по умолчанию). В следующей статье мы научимся обнулять встроенные стили для отображения ваших страниц одинаково во всех популярных браузерах.
А сейчас на примере элемента , определяющего гиперссылку, мы рассмотрим пример в котором рассмотрим почему некоторые элементы не наследуют некоторые свойства своего предка:
</span>Нюансы наследования стилей
Абзац, который содержит внутри себя href =
"#"
>
гиперссылку
.
В этом примере для элемента мы установили следующие стили: зеленый
цвет текста и отсутствие декорирования текста (убрали нижнее подчеркивание снизу). Обратите внимание на элемент на изображении, он полностью не изменился. Давайте разберемся ниже (после просмотра изображения) почему так происходит.
Результат нашего примера:
При возникновении конфликта побеждает сильнейший, в CSS это, как правило, явно определенный стиль. Откроем инструменты разработчика (для Chrome это F12). Обратите внимание какие встроенные в браузер CSS свойства (user agent stylesheet
) имеет любая ссылка (any link
) в документе. Для неё заданы следующие стили: цвет текста синий
(-webkit-link
- значение браузера по умолчанию), декорирование текста (нижнее подчеркивание) и определено, что браузер устанавливает курсор автоматически (значение auto
CSS свойства cursor).
Ниже отображаются свойства, которые были унаследованы (Inherited from
) элементом от . Как вы можете заметить, браузер отбросил все стили элемента , по той причине, что у элемента стиль, который определяет цвет текста явно определен (встроенный стиль по умолчанию), а свойство, которое определяет декорирование текста не наследуется
и отображается с небольшой прозрачностью в инструментах разработчика, но даже если бы оно наследовалось, то не применилось бы по аналогии с цветом теста (у элемента это свойство тоже явно определно).
Такие конфликты между стилями всегда разрешает браузер, а по каким правилам определяет, кому отдает приоритет и как он в том, или ином случае себя должен повести, на чью сторону встать, определяется правилами каскадности
. Подробнее о правилах каскадности мы поговорим в следующей статье учебника.
Вопросы и задачи по теме
Перед тем как перейти к следующей статье ответьте на следующие вопросы.
|
Обзор Samsung Galaxy A7 (2017): не боится воды и экономии Стоит ли покупать samsung a7
Делаем бэкап прошивки на андроиде
Как настроить файл подкачки?
Установка режима совместимости в Windows
Резервное копирование и восстановление драйверов Windows