Привет, друзья! Недавняя запись по поводу создания идеально круглой картинки посредством CSS надоумила меня на создание ряда записей, посвященных потрясающе удобной технологии CSS (Cascading Style Sheets — что в переводе звучит приблизительно как «Каскадная таблица стилей»).
Сегодня мы определим, где и с помощью каких методов будет проходит демонстрация работы CSS, ну и узнаем пару интересных вещей об этой технологии, да.
Итак, для демонстрации работоспособности CSS я предлагаю использовать платформу https://codepen.io, позволяющую редактировать, показывать и хранить код в HTML, CSS и JavaScript (о HTML и JavaScript мы поговорим позднее). Каждый пример рабочего кода будет доступен для вас по определенной ссылке. Кликнул, перешел в открывшуюся вкладку, посмотрел пример работы, читаешь дальше 🙂 Важно знать, что любое редактирование кода изменяет готовый результат мгновенно, потому это будет крайне наглядным методом демонстрации работоспособности того или иного кода (это я как бы намекаю на то, что будет и видео).
CSS — а зачем он нужен вообще?
Технология CSS используется при разработке веб-страниц для организации единой схемы показа не только цветов, но и шрифтов, блоков, их расположения и прочего-прочего-прочего. Всего, что имеет отношение к вебу. Удобство очевидно — все параметры задаются в одном или нескольких файлах CSS, а в случае необходимости нам нужно только отредактировать нужный нам — после чего на всем сайте изменения происходят везде автоматически. Представьте, если бы вам пришлось править параметры отображения некоего шрифта на сотне страниц? 🙂
CSS — как использовать?
Все правила описываются в обычном текстовом файле с расширением .css. Да, к этому файлу применяются определенные правила оформления, и их мы рассмотрим чуть позднее. Но сейчас мы рассмотрим варианты подключения файла .css к нашему сайту.
Вариант 1:
Имеется файл с расширением .css. Мы можем подключить его к веб-файлу с помощью тега <link> обладающий атрибутом href. Важно, что бы этот тег располагался строго между тегами <head> и </head>.
Пример варианта 1 в виде кода выглядит так:
<html> <head> <link rel="stylesheet" href="адрес_на_ваш_файл.css"> ... </head> <body> ..... </body> </html>
Вариант 2:
Ваш .css файл можно подключить к веб-документу с помощью директивы @import, которая должна находится между тегами <style> и </style> — которая в скобках указывает адрес на файл .css)
Визуально этот вариант можно представить в виде следующего кода:
<html> <head> ..... <style media="all"> @import url(адрес_на_ваш_файл.css); </style> </head> </html>
Вариант 3:
Использовать стили в самом веб-документе. В этом случае все стили должны находиться между тегами <style> и </style>, которые, в свою очередь, находятся между тегами <head> и </head>. Данную схему можно представить в виде следующего кода:
<html> <head> ..... <style> body { color: red; } </style> </head> <body> ..... </body> </html>
Вариант 4:
Все правила стилей находятся в веб-документе, и расположена в виде отдельного тега в нужном месте этого документа). Подключается так же с помощью тега <style>.
В виде кода эта схема будет иметь следующий вид:
<html> <head> ..... </head> <body> <p style="font-size: 20px; color: green; font-family: arial, helvetica, sans-serif"> ..... </p> </body> </html>
Интересно, что варианты 1 и 2 относятся к формату использования внешних таблиц стилей (мы подключаем внешние файлы с описанием правил), а вариант 3 и 4 используют внутренние таблиц стилей (мы подключаем правила непосредственно в веб-документах).
На сегодня — достаточно 🙂 Спасибо за внимание! Следите за новостями — не за горами следующая часть.
И да, сделайте репост на свою страницу в соц.сетях 🙂
В случае возникновения вопросов — пишите: oleksiy@lavrynenko.com