Механизм наследование стилей в css

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

Наследование – это прием, с помощью которого css – свойства, относящиеся к одному тегу веб-страницы, распространяются и на вложенные теги. Например, тег <p> всегда находится внутри <body> и атрибуты, применяемые к <body>, наследуются <p>. Допустим, вы создали css-стиль для <body>, который устанавливает  атрибут color (например, темно-красный цвет). Производные теги, являющиеся потомками <body>, то есть теги, расположенные внутри его, наследуют его же атрибут. Это означает, что любой текст, заключенный в <h1>..-..<h6>, <p>, будут отображаться темно-красным цветом.

Скорей всего вы немного не поняли что тут было щас написано, но механизм наследование классов на самом деле облегчает и экономит вашу работу в css. Если бы наследование классов не существовало, то веб-страницы выглядели бы все одного типа.

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

Каскадность – ряд правил, определяющих, какие именно стилевые  свойства необходимы элементам веб-страницы, то есть задающих последовательность применения многократно определенных стилей.

1. Откроем первоначальный наш файл, который еще не содержит наследование классов и начнем с ним работать. В файле main.css добавляем два таких стиля

body {

color: #B1967C;

font-family: «Palatino Linotype», Baskerville, serif;

padding-top: 100px;

background: #CDE6FF url(images/bg_body.png) repeat-x;

width: 800px;

margin: 0 auto;

}

h1 {

font-size: 3em;

font-family: «Arial Black», Arial, sans-serif;

}

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

2. Теперь создадим комбинированный стиль.

В файле main.css  пропишем следующие свойства

h2 {

font-size: 2.2em;

color: #AFC3D6;

margin-bottom: 5px;

}

#main h2 {

border-bottom: 2px white solid;

background: url(images/bullet_flower.png) no-repeat;

padding: 0 0 2px 80px;

color: #E8A064;

}

Стиль h2 менят цвет текста, увеличивает размер шрифта тега.

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

Отлично идем дальше.

3. Поскольку свойтсва css конфликтуют, когда несколько стилей применяются к одному и тому же тегу, и после вы изменения в css, вы не видите изменения в веб-страницы, то срочно требуется в этом разобраться.

#main p {

color: #616161;

font-family: «Palatino Linotype», Baskerville, serif;

font-size: 1.1em;

line-height: 150%;

margin-bottom: 10px;

margin-left: 80px;

}

Этот стиль изменяет цвет, размер и шрифт текста, растягивает строки (  line-height: 150%;

) и регулирует нижние и левые отступы абзацев.

#main .intro {

color: #6A94CC;

font-family: Arial, Helvetica, sans-serif;

font-size: 1.2em;

margin-left: 0;

margin-bottom: 25px;

}

Этот стиль изменяет цвет, шрифт и размер, а также регулирует отступы. Теперь применим класс к HTML коду. Пишим под этим <div id=”main”> добавляем класс intro, <p class=”intro”>.

Таким способом у нас есть наследуемый селектор, составленный из индефикатора и класса. Этот стиль является более специфичным, чем #main p и его свойство замещают аналогичные стили.

Наследование класса в css это сложный урок, вам станет более понятней, когда уже будем дальше с ними работать.

 

About: neadmin


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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Перейти к верхней панели