Что такое CSS?
Начнем как обычно с расшифровки новых понятий. CSS это аббревиатура от словосочетания «Cascading Style Sheets», что переводится на русский как «Каскадные Таблицы Стилей». Но выговаривать каждый раз «Каскадные Таблицы Стилей» довольно долго, поэтому в среде веб-разработчиков принято говорить стили CSS или просто CSS.
Для чего же нужен CSS?
Дело в том, что когда-то, до создания CSS, все свойства для тегов задавались прямо внутри этих тегов. Например, чтоб задать какому-либо абзацу красный цвет, нужно было содержимое этого параграфа дополнительно обернуть в тег font, которому задать атрибут color и указать название нужного цвета, т.е. red. Теперь представьте, что в абзаце нужно что-то сделать жирным, что-то курсивом, что-то зачеркнутым, что-то подчеркнутым. Каждое из перечисленных действий – это дополнительные теги с необходимыми атрибутами. В конце концов код страницы становился настолько захламленный и загруженный подобного рода вставками тегов и атрибутов, что разобраться в нем было сложно не только сторонним людям, но и авторам самого проекта.
Создание CSS стало реальным решением данной проблемы и с тех пор в веб-разработке используется следующий принцип разделения задач: при помощи языка разметки HTML строят структуру веб-документа, а при помощи стилей CSS – оформляют его внешний вид, т.е. размеры и параметры отображения любого тега, включая ширину, высоту, отступы, различные цветовые, фоновые и текстовые настройки, и даже позиционирование самих элементов на странице тоже задается через стили CSS.
Как же пользоваться CSS и задавать тегам необходимые стили?
Очень просто. И для этого существует аж целых 3 способа.
Самый простой из них - применить стили CSS к тегу при помощи универсального атрибута style. Напомню, что универсальные атрибуты, это атрибуты, которые можно применять ко всем тегам. Например:
<p style="color: red;">...</p>
<p style="color: blue;">...</p>
<p style="color: red;">...</p>
В данном примере при помощи универсального атрибута style каждому из абзацев задан свой цвет. Обратите внимание, что атрибут задан один и тот же, на то он и является универсальным, что его можно задавать абсолютно любому тегу на странице. А вот значение у этого атрибута в каждом случае разное. И сейчас нас как раз интересует, что же является значением этого атрибута. Это и есть задание каких-то свойств тегу p на языке CSS. Синтаксис довольно простой: сначала пишется название свойства, которое мы хотим изменить у тега, потом – двоеточие, далее – значение свойства, и завершается это все знаком точка с запятой. В данном примере слово color является свойством элемента, которое отвечает за цвет текста. После него стоит двоеточие, а далее указаны конкретные цвета, которые мы хотим задать каждому абзацу. Еще раз обращаю ваше внимание на то, что важно помнить о точке с запятой, которую необходимо ставить в конце. Почему это важно. Потмоу что у каждого тега свойств может быть задано сразу несколько.
Такой способ задания стилей называют «инлайновые стили». Но задавать стили таким образом для каждого тега с помощью атрибута style, скажем так, не очень правильно. Во-первых, код становится плохо читаемым, а во-вторых появляется большое количества повторяющегося кода.
Вторым вариантов задания стилей для элементов является использование тега style.
Но когда мы задавали стили инлайновым способом ни у нас, ни у браузера не возникало вопросов относительно того, к какому элементу применятся заданные стили. В том теге, в котором мы их написали, к тому они и применялись. Сейчас же возник вопрос: а как нам задать нужные стили нашим параграфам? Для решения этой задачи в CSS существует такое понятие, как селектор.
Общий синтаксис CSS-правил выглядит так:
селектор {
свойство1: значение1;
свойство2: значение2;
...
}
Что такое селектор лучше всего понять на примерах: p {color: red;}
В данном случае мы использовали самый простой тип селекторов - селектор по имени тега p. Что произошло? Браузер увидел селектор p, нашел их все на странице и применил ко всем абзацам заданные стили.
Но ведь у нас была задача сделать все абзацы разными цветами, а не одним. Частичным решением проблемы является использование на странице различных тегов. Например, h1, h2, …, h6, blockquote, div и т.д.
Теперь используя разные селекторы имен всем группам элементов можно задать свои свойства.
Но, думаю, вы прекрасно понимаете, что это далеко не лучшее решение, т.к. нам нужно использовать именно теги р, а не какие-либо другие.
Поэтому более лучшим решением будет использование «классов».
Напомню, что класс - это один из универсальных атрибутов HTML-тегов.
.paragraf_2 {color: blue;}
.paragraf_3 {color: orange;}
Вся сила и мощь использования CSS – это возможность задания одинаковых свойств для целого ряда однотипных элементов. Представьте, что у вас на странице есть 25 параграфов. Задание им всем красного цвета текста – это написание в CSS буквально одной строчки кода.
А теперь представьте, сколько нужно затратить времени, чтобы 25 раз задать этим параграфам красный цвет при использовании атрибута style. Ориентировочно тоже самое было раньше, до создания CSS, когда все свойства тегам задавались приблизительно таким же способом – каждому тегу отдельно.
Теперь я покажу третий, самый наилучший и самый распространенный способ использование стилей CSS – при помощи подключаемого внешнего файла с помощью тега link.
Общий смысл заключается в том, чтобы вынести все правила CSS из html-документа в отдельный файл.
Делается это с помощью специального тега link, который необходимо писать в теге head.
При этом, в теге link должны быть 2 обязательных атрибута. Одним из них, естественно, должен задаваться путь к файлу CSS, который мы хотим подключить к данному документу html. Задается он в атрибуте href.
Вторым должен быть атрибут rel со значением stylesheet т.к. тег link может использоваться для многих абсолютно разных целей. Этим мы говорим браузеру, что тип подключаемой ссылки – ссылка на таблицу стилей.
Теперь, после подключения файла CSS нам остается лишь перенести в него все написанные правила из тега style, ну и при необходимости – дополнить другими правилами.
Еще хочу отметить важность фигурных скобок как группирующих элементов, а также важность наличия закрывающей скобки, иначе код перестанем работать.
Итак, подытоживая сегодняшний урок, еще раз хочу отметить, что язык CSS состоит из селекторов и набора свойств для каждого из них.
При помощи селекторов происходит выборка нужных тегов, а при помощи свойств CSS мы можем отобранные теги форматировать.
CSS-свойств существует очень много, некоторые из них можно применять для любых тегов, некоторые – являются более специфичными и применяются лишь к какому-то конкретному.
В завершении хочу отметить, что из трех показанных методов задания CSS-свойств для тегов лучше всего использовать третий, т.е. выносить все стили в отдельный файл и подключать его к документу html.