Мы принимаем к оплате:

«Подарочный сертификат» от нашего Учебного Центра – это лучший подарок для тех, кто Вам дорог! Оплате обучение и подарите Вашим родным и близким обучение по любому из курсов!!!

«Сертификат на повторное обучение» дает возможность повторно пройти обучение в нашем Учебном Центре со скидкой 1000 рублей!

А также:


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


Наследование и группирование в CSS | Создание сайтов и заработок в сети

Здравствуйте, уважаемые читатели! Сегодня в рамках рубрики «Учебник CSS» важнейшие понятия группирования и наследования в CSS. Кто уже давно следит за моими публикациями, наверное, уже проникся мыслью о необходимости постижения основ каскадных таблиц стилей (Cascading Style Sheets). И это правильно, поскольку современный вебмастер непременно должен знать базовые понятия и алгоритм применения основных знаний HTML и CSS на практике.

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

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

Группирование в CSS

Возьмем для примера теги заголовков h2 h3 h4, стили которых прописаны в файле style.css. Например, так:

h2 { font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 2.5em; color:#fffffd; } h3 { font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 1.8em; color: #265a8b; } h4 { font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 1.7em; color:#6b6b4e; }

Если вы внимательно посмотрите, то можете заметить, что для тегов всех заголовков есть одна общая составляющая стилей CSS, а именно значение font-family, которое определяет вид шрифта. Можно объединить селекторы h2-h4 по этому признаку и составить для них общее правило касательно значения font-family:

h2, h3, h4 { font-family: Tahoma, Arial, Helvetica, sans-serif; }

А индивидуальные свойства для каждого селектора, которые не являются общими, оформить отдельно:

h2 { font-size: 2.5em; color:#fffffd; } h3 { font-size: 1.8em; color: #265a8b; } h4 { font-size: 1.7em; color:#6b6b4e; }

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

Наследование в CSS

Как совершенно явно вытекает из самого названия, наследование предполагает перенос правил стилей для элементов, находящихся внутри других. Такие элементы называются дочерними и они наследуют стилевые свойства своих родителей. Наиболее удачным примером, на котором можно наглядно исследовать нюансы наследования CSS, является, на мой скромный взгляд, таблица html, которая создается с помощью тегов table, tr и td. Допустим, заданы свойства оформления для тега table:

table { color: green; /* Цвет текста */ background: #faee81; /* Песочный цвет фона таблицы */ border: blue solid 2px; /* Рамка вокруг таблицы */ padding: 5px; /* Поля вокруг текста */ }

Теперь составим простенькую таблицу из 4 ячеек:

Ячейка 1Ячейка 2
Ячейка 3Ячейка 4

На вебстранице она будет выглядеть следующим образом:

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

Например, border определяет рамку вокруг таблицы, но не вокруг ячеек, поэтому эти ячейки не выделены рамкой внутри таблицы. Также не наследуется свойство background. Однако, в этом случае возникает вопрос: почему же цвет фона ячеек приобрел песочный цвет, который указан в качестве значения родительского тега table, если он не наследуется?

Здесь все дело в том, что у свойства background в качестве значения по умолчанию для тега td выступает transparent, то есть прозрачность. Таким образом, цвет фона родительского элемента “просматривается” сквозь фон дочернего элемента, который является прозрачным. Отмечу, что во многих случаях для большинства свойств CSS предусмотрены значения по умолчанию. Поэтому, если для какого-то свойства явно не заданы параметры, до вступает в силу предусмотренное значение по умолчанию.

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

body { font-family: Tahoma, Arial, Helvetica, sans-serif; /* Стиль шрифта */ color: black; /* Черный цвет текста */ }

Теперь любой абзац на данной вебстранице, например, такой:

Цвет текста данного абзаца черный, поскольку он наследует свойства родительского элемента тега body.

Будет оформлен соответствующим стилем:

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

body { font-family: Tahoma, Arial, Helvetica, sans-serif; /* Стиль шрифта */ color: black; /* Черный цвет текста */ } p.top { color: blue; /* Синий цвет текста */ }

Теперь обычный параграф на странице будет иметь такой вид:

А уникальный параграф с отдельно прописанным значением color будет таким:

Вот так, используя там, где это необходимо, алгоритмы группирования и наследования, можно максимально оптимизировать файл стилей, сделав его одновременно легко читаемым. Я уже упоминал выше что не все свойства CSS наследуются, поэтому приведу вам одну из страниц официального сайта W3C, где вы при желании можете почерпнуть более подробную информацию по этому вопросу. Итак, страница «Full property table»:

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

«Name» - название CSS свойства; «Values» - все возможные значения для этого свойства; «Initial value» - начальное значение для данного свойства, которое используется по умолчанию (об этом я упоминал) «Applies to» - к каким элементам применяется правило, в которое входит свойство CSS;

«Inherited?» - наследуется это правило или нет.

Наследование CSS стилей: что это и как работает — учебник CSS

Выполняя уроки в предыдущих главах, вы уже имели дело с наследованием стилей CSS (возможно, даже не задумываясь об этом). Определение данного термина довольно-таки очевидное.

Наследование в CSS – это способность элементов-потомков перенимать правила форматирования (свойства CSS), которые присвоены их предкам (о родственных связях элементов HTML мы писали ранее).

Рассмотрим простой пример:

body { color: #913D88; border: 1px solid #333; }

И результат на скриншоте:

Скриншот: пример CSS наследования

На скриншоте можно увидеть, что теги

переняли стиль у своего предка : цвет текста на странице стал #913D88. А вот рамка border появляется только один раз – для тега , но не для

.

Почему рамка не появилась у других элементов веб-страницы? Всё потому, что согласно спецификации CSS, существуют определенные правила наследования. Есть свойства, которые наследуются (в основном, это свойства, определяющие внешний вид текста) и те, которые не наследуются (например, border, а также свойства, определяющие границы, поля, отступы). К тому же, у браузеров есть свои стили, установленные по умолчанию. Именно поэтому стандартная синяя подчеркнутая гиперссылка a не будет перенимать от body свойство color, что видно на скриншоте.

Узнать, наследуется ли то или иное свойство, можно в этом стандарте CSS. Если в колонке «Inherited?» напротив нужного свойства стоит «yes», значит оно наследуется.

Значение inherit

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

Для демонстрации используем предыдущий пример: чтобы всё-таки заставить теги

унаследовать рамку border от своего предка , необходимо записать:

p { border: inherit; } Скриншот: пример использования inherit

Такой вариант удобен тем, что при необходимости можно внести правки только в стиль для элемента body, а на теги

тратить время не нужно, так как стиль автоматически изменится и для них.

Итоги

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

В следующей главе учебника мы будем изучать каскадность CSS.

Наследование в CSS

Скажем, мы хотим изменить цвет текста веб-страницы. Было бы скучно указывать цвет для каждого элемента HTML:

p, ul, ol, li, h2, h3, h4, h5, h5, h6 { color: grey;}

Распространение значения

Значение color может быть унаследовано от предка. Учитывая, что мы хотим изменить всю веб-страницу, то выберем предка всех элементов HTML — тег :

body { color: grey; }

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

Мы также можем использовать тег .

Наследуемые свойства

Только несколько свойств CSS могут быть унаследованы от предков. Это в основном текстовые свойства:

  • цвет текста;
  • шрифт (семейство, размер, стиль, насыщенность);
  • межстрочное расстояние.

Некоторые элементы HTML не наследуют от своих предков. Ссылки, к примеру, не наследуют свойство color.

Перейти к заданиям

Наследование и каскадирование в CSS.

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

После того как браузер считал документ он обязан задать значения всем элементам, для этого есть приоритеты: 1)Если значение явно задано, то использовать его; 2)Если значение не задано, унаследовать его у предков, чаще всего вычисленное значение;

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

Вычисленные значения в свою очередь могут быть: 1)абсолютными('gold', '2cm' и т.д.), эти значения не требуют ни каких вычислений.

2)относительными('1.5ex','1.2em', '#08ff00', '40%' и т.д.), т.е. которые нужно вычислить относительно предков, с цифрами я вам уже рассказывал, а от цветах нет, например '#08ff00' , если бы 00ff00, то такой пример понятен что это зеленый цвет, но первый вариант может быть не поддерживается видеокартой и тогда нужно рассчитать цвет близкий по значению, например вместо '#08ff00' может быть '#00ff00' или '#0fff00' хотя может более близкий.

Вычисленные значения можно сказать готовы к использованию, за исключением того что браузеры используют реальные значения. Например таблица width=100% с тремя ячейками и размером окна 800пикселей, получается 100%=800px а 800/3=266.6666, но пиксель это точка и не может делиться, значит реальный размер для двух ячеек 266px а третей 267px, тоже самое с абсолютными величинами, например 20mm, опять-же зависит от плотности экрана(качество видеокарты) допустим 96пикселей на дюйм, дюйм это 25.4мм и при делении у нас не получается целых пикселей, потому браузеру придется это значение округлить.

Наследование это передача значений от родителей к потомкам(дочерним или даже более поздним), на пример цвета текста, если мы создаем правило BODY{color:red} т.е. зададим цвет текста, то это свойство будет назначено всем тегам содержащих текст в всем документе, кроме тех случаев если значение переопределяется другим правилом. Сейчас говорить о том, какие значения наследуются а какие нет не имеет смысла даже не потому что мы их не знаем, а потому что есть исключения. Так-что все по порядку.

Каскадирование. Если проще говорить то каскад это ступени, а в CSS эти ступени имеют приоритеты друг над другом. CSS имеет три независимых источника: 1)Авторские таблицы стилей - описаны в спецификации по CSS ; 2)Пользовательские таблицы стилей- разработаны пользователями; 3)Таблицы стилей пользовательских агентов - разработаны и встроены в браузеры. Авторские стили имеют самый высокий приоритет, если чего-то нет в авторских то это можно написать в пользовательских таблицах, но если каких либо свойств нет в авторских и пользовательских, то они должны быть предусмотрены разработчиками браузеров. Но прежде чем приступать создавать новые стили, мы должны узнать все что уже изобретено, и с следующей страницы у нас начинается практика!!!


Смотрите также



Компьютерные курсы по направлениям:

Для начинающих


A

Компьютер для начинающих: Word, Excel, Access и другие программы!

Графические пакеты


B

Популярные пакеты Adobe Photoshop, CorelDraw, ArchiCAD, AutoCAD и другие!

WEB + анимация


C

Курсы по созданию сайтов, WEB-дизайну и крутой анимации в Adobe Flash!

Бухгалтерия + делопроизводство

Сетевые технологии


E

Курсы сборки ПК, системных администраторов и защиты информации!