CSS — основы

CSS для чайников, часть 1Привет, друзья! Недавняя запись по поводу создания идеально круглой картинки посредством 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