Твитнуть об этом видео
Поделиться на Facebook
Поделиться по E-mail
Скачать исходники к 16 видеоуроку по CSS Размер: 520.18 kB, скачали: 469 раз.
- Разархивировать скачанный файл.
- Открыть папку index.
- Запустить файл index.html в браузере.
Наследование в CSS
Структура сайта напоминает родовое дерево. Все начинается с родительского элемента. В нашем случае — это тег <html>. Потом появляются потомки — элементы head и body. Их еще называют дочерними по отношению к родителю. У дочерних элементов могут быть и свои потомки. Например, тег <div>, тег абзаца и тег заголовка. Чем больше сайт, тем больше дерево рода.
Наследование в CSS происходит следующим образом: мы задаем какие-либо свойства для тега <body>. Тег <body> является родительским тегом для всех своих дочерних тегов. В нашем случае дочерними являются теги <div> и <h1>. Так как тег <body> является для них родительским, то он передает эти свойства всем своим дочерним тегам. А дочерние теги их наследуют. Если мы укажем для тега <body> свойство шрифта, то его дочерние элементы унаследуют это свойство, если для них самих это свойство не будет указано.
Давайте посмотрим пример наследования со свойством color. Я открываю файл typography.css и добавляю сюда стили для тега <body>. Так как цвет текста задан у нас и заголовкам, и абзацам и ссылкам, то мы эти цвета пока закомментируем.
body {
color: #0D7200;
}
Сохраняем и переходим в браузер. У нас пока что заголовки имеют голубой цвет, а весь остальной текст — черный цвет. Давайте обновим страницу. Мы видим, что после изменения кода весь текст на нашей странице стал зеленого цвета, кроме заголовка в шапке. Это произошло из-за того, что заголовок является ссылкой. Но это уже ближе к специфичности, с которой мы разберемся позже. Пока мы видим, что весь текст у нас зеленого цвета. Мы задали зеленый цвет текста для тега <body>, а для всех его дочерних элементов мы цвет убрали. В итоге все дочерние элементы унаследовали цвет от тега <body>.
Давайте перейдем в код и уберем комментарии у закомментированных строк. Сохраняем и обновим страницу. Мы видим, что цвет текста стал прежним.
Теперь давайте перейдем в код файла st.css. Для тега <body> мы добавим красную четырехпиксельную рамку.
body { background: #B3A57F url('img/bg.png') repeat; text-align: center; border: 4px dashed red}
Переходим в браузер. Обновляем страницу. Видим красную четырехпиксельную рамку. Но возникает вопрос. Почему эта красная рамка не унаследовалась ни для тегов абзаца, ни для изображения, ни для заголовков, а только для тега <body>? На самом деле здесь ошибки нет. Все дело лишь в изначальной наследуемости свойств. Откройте у себя страницу . Ссылку я прикладываю в документе Ссылки.txt в дополнительных материалах к видеоуроку. По этой ссылке вы можете посмотреть таблицу наследуемости свойств. Колонка «Name» означает имя свойства, а колонка «inherited» переводится как «наследование». Если указано значение «yes», то свойство наследуется по умолчанию. Если указано «no», то не наследуется. Давайте посмотрим свойство color. В колонке «inherited» указано значение «yes». Оно у нас наследовалось по умолчанию. Мы это уже проверили. Теперь посмотрим свойство «border». В колонке «inherited» указано значение «no». Это свойство по умолчанию не наследуется. Именно поэтому у нас красная четырехпиксельная рамка была задана только для тега <body>.
Представим, что у нас возникла ситуация, когда нам нужно использовать наследование для дочерних элементов. Например, для оболочки wrapper. Давайте перейдем в код, удалим рамки, которые у нас сейчас существуют и добавим свойство border со значением inherit (наследовать), а также укажем цвет рамки, чтобы их отличать.
#wrapper {
width: 80%;
min-width: 720px;
max-width: 1200px;
border: inherit;
border-color: blue;
margin: 0 auto;
background-color: #fff;
text-align: left;
min-height: 100%;
height: auto !important;
height: 100%;
position: relative;
}
Сохраняем. Смотрим, что получается в браузере. Рамка border унаследовалась для оболочки wrapper. Ей мы указали синий цвет. Таким образом, с помощью значения inherit вы можете насильно указать, какое свойство вам следует унаследовать от родительского элемента. Вот пример записи этого значения:
div{
background: inherit;
}
Давайте перейдем в документ st.css и вернем его к первоначальному виду. Я это делаю с помощью сочетания клавиш CTRL+Z. Сохраняю и мы переходим к следующей теме.
Каскадность в CSS
Каскадность. Слово «каскад» у нас скрывается в аббревиатуре CSS (Cascading Style Sheet – Каскадные Таблицы Стилей). Под каскадностью понимается применение разных стилей к элементам документа. Чтобы было понятнее, я открою файл typography.css. Смотрите, у нас есть абзац. Ему задан цвет текста. Помимо этого цвета текста ему также задан цвет текста от тега <body>, потому что он наследуется. Именно это и понимается под значением слова «каскадность».
Специфичность в CSS
Специфичность. Когда какому-то элементу задано несколько стилей, перед браузером стоит задача «Какой из этих стилей вывести на экран?». Для этого он определяет приоритеты для стилей и выводит стиль с наивысшим приоритетом. Для определения приоритета используется таблица специфичности. Это таблица с условными значениями, но она поможет вам понять принцип работы браузера. В левой колонке таблицы специфичности указаны стили, а в правой колонке указаны значения специфичности, которые даются за использованный стиль. Давайте перейдем в файл typography.css и укажем стили для заголовка нашего документа, который у нас располагается в шапке.
Добавляю первый стиль — для посещенного состояния. Здесь участвуют два тега: h1, a — и один псевдоэлемент visited.
h1 a:visited { color: #FF00FF; }
Добавляю второй стиль. В нем участвуют два тега и один идентификатор, который мы сейчас добавим в страницу page.html.
h1#home a { color: #7E6752; }
Также еще добавим класс для ссылки. Мы его будем использовать в следующем стиле.
<h1 id="home"><a href="#">Познай мир сейчас!</a></h1>
Указываем следующий стиль. В нем участвуют два тега и один класс.
h1 a.color1 { color: #7E282A; }
Укажем еще один стиль. В нем присутствуют только два тега и ключевое слово «important».Оно уже возникало в течение видеокурса. Это слово переводится как «важно». Замечу, что оно имеет наибольшее значение специфичности.
h1 a { color: #2B9A9E !important; }
Сохраняем файл typography.css и перейдем снова в файл page.html. В нем мы добавим еще один стиль. Этот стиль называется встроенным. Укажем черный цвет.
<h1 id="home"><a style="color: black;" href="#">Познай мир сейчас!</a></h1>
А теперь давайте откроем браузер и посмотрим, что у нас произошло с заголовком нашей страницы. Заголовок изменил свой цвет на зеленый.
Теперь давайте подсчитаем значения специфичности для каждого стиля. Для первого стиля специфичность равна трем, для второго — ста двум, так как за идентификатор дается сотня. Третий стиль имеет специфичность, равную двенадцати, так как за класс дается десять. Четвертый стиль имеет специфичность, равную 10002 за счет слова «important». Следующий стиль имеет специфичность, равную двум, так как используются только два тега. Еще у нас есть встроенный стиль, где специфичность равна тысяче. В итоге у нас получается таблица, представленная на экране. На первом месте идет стиль с использованием important, на втором — встроенный стиль, на третьем — стиль с идентификатором, на четвертом — стиль с классом, на пятом — стиль с псевдоэлементом, на шестом — стиль с двумя тегами, на седьмом — стиль с одним тегом и на восьмом — стиль с одним тегом <body>. Из этой таблицы мы понимаем, что браузер выберет тот цвет заголовка, для которого использовалось слово «important». Это зеленый цвет. Перейдем в браузер и видим, что так оно и есть.
Чтобы отследить весь процесс наследования и специфичности, нажмите сочетания клавиш Ctrl+Shift+I. У вас откроется встроенное в браузер окошко. Мышкой выберите желаемый элемент. У нас — заголовок. Нажав на «+», можем раскрыть код. Справа на вкладке стилей мы можем увидеть все стили, применяемые для этого элемента. Как вы видите, здесь у нас показаны селекторы, а также свойства, которые они задают. Для удобства также указан цвет. Мы видим, что некоторые строчки зачеркнуты. Это значит, что они не применяются для данного элемента. Строка со свойством, где мы употребляли important не зачеркнута. Это свойство было использовано. Мы можем визуально отключить это свойство, убрав галочку напротив. Цвет при этом поменяется на следующий по приоритетности. Помните, мы задавали встроенный стиль с черным цветом? Это как раз таки он. Если мы его уберем, то заголовок поменял цвет на коричневый. Сработало свойство с идентификатором. Уберем его. Следующий цвет — бардовый. Уберем и этот цвет. Теперь используется розовый цвет, который набрал три очка. Уберем его. Используется синий цвет, который имеет значение специфичности, равное двум из-за двух тегов. Убрав его, мы видим, что цвет стал тем, который используется для всех ссылок. Таким образом работает специфичность.
Надеюсь, на этих простых примерах я вам доступно объяснил, как работает наследование, каскадность и специфичность в CSS. На этом, должен вам сообщить, видеокурс по CSS закончился 🙂
Но, за ваше старание на протяжении всего видеокурса, вас ожидает 5 приятных подарков (5 бонусных видеоуроков по CSS):
- Памятка записи селекторов, создание красивого поиска на сайте
- Расширения и виджеты для браузера Opera разработчику
- 7 полезных дополнений для браузера Mozilla Firefox разработчику
- Полезные расширения Google Chrome для разработчика
- Как создать красивый сайт? Пошаговое создание красивого сайта.
Info-line.net
Молодец Олег рад что попал на твой уроки кстати мы сейчас проходим в универе эту область программирования и мне легче ее проходить чем другим,могу даже домашку не делать ура... 😉
Классно!) Рад, что помог)
Олег, а будут ли уроки по PHP??
Имеется в планах.
Прошел твой полный курс месяца два назад.Жду PHP+MySQL а их все нет PHP+MySQL будут?
Пока что записываю другие курсы, которые стоит изучать перед PHP и MySQL 🙂
К примеру?
Не раскрываю планы 🙂 Скоро увидите сами 🙂