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