CSS-технологии
УРОК «Как подключить стили CSS»
Дорогие друзья!
Чтобы правила CSS применились к нашему документу, нужно их правильно разместить и подключить.
Есть несколько уровней подключения правил CSS, и сейчас мы рассмотрим их все по порядку, начиная от
самого нижнего. Следует заметить, что "самый нижний" - это не значит "самый последний", даже наоборот,
стили, определённые в самом документе, в тексте, являются приоритетными для более "высоких" стилей,
то есть преимуществом реализации обладяют именно "нижние", расмещённые в открывающем теге элемента,
правила и значения. Однако, чтобы быть более точным, нужно обязательно упомянуть, что есть ещё более
нижние стили - это правила, которые задаёт сам пользователь в настройках своего браузера, вы можете
это сами проверить, если загляните в настройки.
Итак, у нас есть некий документ, который нужно оформить с помощью стилей. Напомню, что в структуре
веб-документа мы выделяем заголовок (DOCTYPE и метатеги, которые используются для браузеров и поисковых систем)
и тело (контент: текст, списки, изображения, ссылки и т.д.).
В уроке "
Основные селекторы: теги, классы, id" мы рассмотрели один из самых важных моментов - определение элемента, к
которому будем подключать стили. Пойдём дальше.
Для каждого элемента, к которому можно применить стили и изменить его отображение, можно написать правила
CSS в открывающем теге этого элемента - это внутренние стили. Это происходит по аналогии с прописыванием атрибутов и делается
следующим образом: в качестве атрибута открывающего тега элемента, например, <p> мы используем
атрибут style="свойство: значение; свойство: значение;" и в значении этого атрибута
прописываем все нужные свойства и значения. Например, оформим блок текста:
Исследователи наблюдали за динамикой употребления шоколада и его воздействием на сердце и кровяное давление.
Профилактический эффект обусловден наличием в шоколаде флаванолов - природных соединений, которых больше всего
в шоколадных сортах с высоким содержанием какао. Именно флаванолы способствуют эластичности кровеносных
сосудов. А при длительном употреблении шоколад снижает уровень кровяного давления.
Вот код этого блока:
Мы видим, что здесь все стили написаны в одну строку, занимают довольно много места и с трудом читаются.
А представьте, что на страницах вашего сайта десятки таких информационных блоков?.. А если вместо голубого фона
вы заходите сделать бледно-розовый?.. А потом поменять стиль рамки? Представили объём работ? :)
Тогда переходим с следующей ступени: размешение стилей в заголовке документа - глобальные стили. Добавлю, что предыдущий
вариант можно использовать, если нужно оформить какой-то единичный элемент или это запись где-то на другом сайте
и т.д., то есть если не будет возникать потребность в дальнейшем частом его изменении. Всегда нужно
смотреть вперёд и предполагать развитие своего ресурса с приложением наименьших усилий и времени для этого.
Итак, стили можно прописать внутри контейнера <head>содержимое</head>
каждого документа. Это выглядит следующим образом:
То есть, все правила для данного документа помещаются внутри контейнера
<style type="text/css">список правил</style>, причём правила можно описывать как в
примере выше (каждое свойство на новой строке) или в одну строку. Согласитесь, что так будет гораздо
удобнее, ведь теперь мы можем назначить классы и id, а также прописывать правила для определённых элементов-тегов.
Однако, и это - не идеальный вариант, поскольку всё равно код будет громоздким и редактировать его
на всех страницах будет довольно проблематично. Выходим на новый уровень - выносим всю таблицу
стилей (или несколько таблиц) в отдельный файл/файлы и просто подключаем его к нашему документу!
Это так называемые связанные стили.
В заголовке нашего документа это будет выглядеть так:
Про !DOCTYPE и метатеги будет рассказано в другом уроке, а на данный момент в данном примере нас интересует строка
<link rel="stylesheet" style="text/css" href="CSS.css">, именно здесь, мы и
подключаем файл с таблицей стилей. Для этого служит непарный тег <link атрибуты >,
атрибутами которого являются:
- charset - кодировка связываемого документа,
- rel - определяет отношения между текущим документом и файлом, на который делается ссылка, это нужно, чтобы браузер знал, как использовать подключаемый документ,
- href - путь к связываемому файлу,
- type - MIME-тип данных подключаемого файла,
- media - определяет устройство, для которого следует применять стилевое оформление (компьютер, принтер и др.)
В свою очередь, файл с таблицей стилей - это просо текстовый документ с правилами CSS, сохранённый
с расширением имя файла.css. Больше в нём ничего нет.
Все рассмотренные примеры добавления стилей можно использовать как отдельно, так и вместе друг с другом.
Ну вот, почти закончили. Остался только один пункт, а именно: импорт CSS, когда в текущую стилевую
таблицу можно подключить содержимое другой таблицы. Общий синтаксис при этом выглядит так:
@import url("имя файла") типы носителей;
@import "имя файла" типы носителей;
Этот способ нельзя применять со встроенными стилями.
Напоследок хочу сказать, что просто читать материал - мало, даже если всё ясно и понятно, как казалось бы.
Нужно обязательно в процессе изучения применять свои знания и как можно больше практиковаться, тогда ваши знания
перейдут в разряд умений и навыков.
До встречи в следующем уроке!
