alt

Когда человеку тяжело,
это часто означает,
что он идёт к успеху.

alt


Наследование свойств css.

Категория: Уроки CSS Просмотров: 4029 Коментариев: 0 Дата: 2018-03-31 Добавил: admin

 Наследование свойств css

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

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

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

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

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

Схема потомков

Таким образом если прописать CSS свойство для родителя, например: для тега <body> </body>, то свойства автоматически будут унаследованы всеми тегами, которые находятся внутри него.

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

HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>HTML страница</title>
     <link  href="css/fonts.css" type="text/css" rel="stylesheet">
</head>
<body>

Заголовок первого уровня



Обычный параграф для примера
  • Список для приммера
  • Список для приммера
  • Список для приммера

Обычный заголовок второго уровня


Обычный параграф для примера

Обычный заголовок третьего уровня


Обычный параграф для примера Самая обычная ссылка никуда не ведущая </body> </html>

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

Теперь нашему родителю тегу <body> </body> зададим свойства: размер, цвет и гарнитуру шрифта и посмотрим его потомки (все теги, которые в него входят) наследуют эти свойства или нет.

HTML
body{
color: #ff0000;   
font-size: 20px;
font-family: courier new; 
}


После того, как задали родителю определенные свойства, обновим страницу и наши потомки должны будут унаследовать указанные стили (весь текст красный, размером в 20px с гарнитурой courier new).

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

И давайте разберем исключения немного подробней.

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

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

Стоит рассмотреть еще момент, когда не наследуются все свойства, например для тега <body> </body> задать рамку.

HTML
body{
color: #ff0000;   
font-size: 20px;
font-family: courier new; 
borde:2px solid #00ff00;
}

В результате, как мы видим рамка появилась только у самого элемента <body> </body>, а все остальные элементы не унаследовали рамку.

От сюда стало ясно, что есть свойства, которые наследуются, а есть которые нет. Узнать, какие свойства наследуются, какие нет можно посмотрев спецификацию CSS. Там Вы найдете все нужные для Вас свойства и в колонке Inherited? указано наследуется свойство или нет. И если Вы, для интереса, посмотрите свойство border, то там будет установлен статут в NO, то есть не наследовать, в чем мы сами ранее и убедились.

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


Просмотреть демо: Демо

Скачать исходник: Скачать



Добавить комментарий:


Ваше имя

Текст комментария


Введите буквы с учетом регистра:





Апдейты

Популярное Свежие записи

Облако тегов