Таблица стилей CSSОпределение каскадных таблиц стилей
CSS (Cascading Style Sheets – каскадные таблицы стилей) – это набор параметров форматирования, который применяют к элементам документа, чтобы изменить их внешний вид. Это одна из базовых технологий современной веб-разработки. Практически все сайты создаются с использованием каскадных таблиц стилей, поэтому HTML и CSS, как правило, применяются совместно. С помощью HTML разработчик выполняет верстку размеченного текста, создавая документ с гиперссылками, списками, подзаголовками, различными начертаниями шрифтов и т. д. В результате получается никак не оформленное полотно текста с таблицами и иллюстрациями. На заре эры Интернета этого было достаточно, т. к. сеть использовалась исключительно в профессиональных целях. Но когда WWW стал доступным для широкого круга пользователей, возникла необходимость в оформлении веб-документов для придания им стилистической индивидуальности.
Подключение CSS к HTML-документу
Первая версия CSS была представлена 17 декабря 1996 года. С ее помощью разработчики получили возможность добавлять оформление документа без программирования или сложной логики. Под оформлением принято понимать цвета, шрифты, позиционирование (расположение отдельных блоков на странице) и т. д. Как все происходит на практике? За основу берется HTML-документ, и к нему подключается стиль CSS. Подключение можно выполнить одним из доступных способов.
- Внутри HTML-тега. Такой способ используется довольно редко и, как правило, для каких-то локальных целей. Реализуется он с помощью атрибута style. Код в этом случае выглядит следующим образом:
<div style="css-свойство: значение; css-свойство: значение;...">...</div>
- Через тег <style>. Этот тег располагают в <head> документа. Код при этом имеет такую структуру:
<head>
...
<style>
селектор {
свойство: значение;
свойство: значение;
...
}
селектор {
свойство: значение;
свойство: значение;
...
}
...
</style>
</head>
- С помощью внешнего CSS-файла. Это наиболее распространенный вариант подключения, когда создается отдельный файл, которому присваивается имя, например, style.css. Это, по сути, текстовый документ, структура которого аналогична рассмотренной в предыдущем примере. Подключение к HTML-документу выполняется с помощью тега <link>, размещаемого в <head>. Выглядит это следующим образом:
<head>
...
<link href='path/to/style.css' rel='stylesheet'>
</head>
Как работают таблицы стилей
Таким образом, в таблицах прописываются стили (правила) оформления. Каждое правило состоит из селектора и блока объявлений. Чтобы увидеть, как это работает, можно, например, назначить определенный шрифт абзацу и указать цвет текста:
p {
color: #0000ff;
}
В данном случае мы получим текст синего цвета, написанный шрифтом Arial (если этот шрифт недоступен, будут использоваться следующие по списку – Helvetica, Sans Serif). Как видно из примеров, CSS определяет стиль отдельных элементов и всего HTML-документа. С помощью правил, свойств и их значений можно выделить поля, выбрать шрифт для заголовков, подзаголовков и текста, указать цвет фона и т. д. В данном случае в руках разработчика – удобный и эффективный инструмент, открывающий широкие возможности для творчества.
Как оформлялись документы до появления CSS
До того, как был разработан CSS, оформление документа выполняли с помощью HTML-таблиц. Это означает, что любое позиционирование осуществлялось средствами HTML. Так, если нужно было сверстать боковое меню или страницу в три колонки, создавали таблицу с заданным количеством столбцов и прозрачными границами. Чтобы увеличить отдельные ячейки, в них вставляли прозрачные картинки. Все это было крайне неудобно, т. к. контент привязывался к оформлению, и при изменении содержания приходилось менять и дизайн. Очевидно, что с появлением CSS жизнь разработчиков стала значительно легче. Причем изначально таблицы стилей предназначались только для оформления страниц. Но впоследствии их стали использовать и для макетирования.
Макеты на основе CSS float
HTML-кодПервоначальное предназначение свойства float сводилось к размещению картинки внутри колонки текста справа или слева. По определению, это свойство говорит, по какой стороне будет выравниваться элемент. Остальные элементы при этом обтекают его с других сторон. Впоследствии был придуман способ создания CSS с помощью float для простых макетов с колонками.
- Разметка. HTML в этом случае выглядит следующим образом:
<div id="header"></div>
<div id="container">
<div id="center" class="column"></div>
<div id="left" class="column"></div>
<div id="right" class="column"></div>
</div>
<div id="footer"></div>
- Оформление. CSS-файл имеет такой вид:
body {
min-width: 550px; /* 2x LC width + RC width */
}
#container {
padding-left: 200px; /* LC width */
padding-right: 150px; /* RC width */
}
#container .column {
position: relative;
float: left;
}
#center {
width: 100%;
}
#left {
width: 200px; /* LC width */
right: 200px; /* LC width */
margin-left: -100%;
}
#right {
width: 150px; /* RC width */
margin-right: -150px; /* RC width */
}
#footer {
clear: both;
}
/*** IE6 Fix ***/
*html #left {
left: 150px; /* RC width */
}
В результате получается страница с неизменными значениями ширины левой и правой колонок (200 и 150 пикселей соответственно) и центральным полем, занимающим остальное пространство.
Макеты на основе Flexbox
CSS Flexbox представляет собой особый способ размещения элементов, основанный на идее оси. Сам модуль состоит из гибкого контейнера (Flex Container) и гибких элементов (Flex Items). Блоки внутри контейнера можно выстраивать в столбик или в строку, а пространство между ними заполняется разными способами. Flexbox позволяет определять и контролировать размер, порядок и выравнивание Items по нескольким осям. С помощью спецификации легко и элегантно решается множество задач, на которые раньше приходилось затрачивать массу времени и сил. Значительно упрощается макетирование трехколоночных страниц с «резиновым» средним полем. С учетом того, что основная идея Flexbox – дать возможность контейнеру изменять ширину, высоту и порядок дочерних элементов так, чтобы оставшееся пространство заполнялось наилучшим образом, то это еще и один из лучших инструментов адаптивной верстки.
Макетирование с помощью Grid CSS
Полностью разделить содержание и оформление сайта позволил CSS Grid, предложенный в 2011 году. Это новый способ создания макетов, когда верстка доступна прямо в браузере, что дает множество преимуществ. Он отличается от Flexbox тем, что это система двумерного макета. Плюсы нового модуля особенно очевидны, если сравнивать его с популярным фреймворком Bootstrap, на базе которого создано огромное количество сайтов в Интернете. С помощью Grid можно разрабатывать макеты, которые раньше были невозможны без JavaScript, причем разметка станет более простой. Кроме того, он обладает гораздо большей гибкостью. То есть в данном случае мы имеем дело с модулем, который позволяет менять разметку документа без вмешательства в порядок исходного кода. При правильном использовании Grid он не влияет на внутренние связи содержимого в документе.
Будущее за CSS3
Спецификация CSS3 – неоспоримое будущее сферы декоративного оформления веб-страниц. Ее разработка еще не закончена, многие модули продолжают совершенствоваться и модифицироваться. Третье поколение стандарта изменило CSS в целом так же, как HTML5 – весь язык разметки. CSS3 – это своего рода набор технологий, которые постепенно получают поддержку браузеров. Новая спецификация позволяет:
- · создавать элементы со сглаженными углами (свойство border-radius);
- более гибко оформлять фоновую картинку (background);
- создавать линейные и сферические градиенты (gradient);
- добавлять тени к элементам (box-shadow) и тексту (text-shadow);
- делать анимацию и разные эффекты переходов (transition);
- задавать цвета несколькими новыми способами и многое другое.
Методологии CSS
Методология стилей CSSРазобравшись с возможностями каскадных таблиц стиля, нужно научиться пользоваться стандартом и применять его на практике. Существуют разные подходы к использованию CSS для профессиональной коллективной работы. Описания многих методологий можно найти на форумах разработчиков и других специализированных ресурсах.
- Atomic CSS. Эта методология базируется на идее создания небольших узкоспециализированных классов с названиями, основанными на визуальной функции. При этом каждому свойству соответствует свой отдельный класс, что делает его уникальным и удобным в использовании. В Atomic CSS предлагается несколько готовых решений, включая:
- простую и понятную методику присваивания имен классам;
- готовый к использованию CSS-фреймворк с полноценной типографикой, адаптивным дизайном, normalize, FA-иконками и прочим;
- полный исходный Sass-код, нужный, необходимый для того чтобы легко настроить методологию под свою задачу;
- онлайн-Builder, с помощью которого можно проверить HTML-код прямо в браузере.
- CSS в JS. Методология основана на определении стилей CSS не в отдельной таблице, а прямо внутри каждого компонента. Эта техника используется достаточно давно, позволяя решать проблему, связанную с увеличением размера CSS-кода по мере разработки приложения.
- БЭМ. Аббревиатура методологии расшифровывается как «блок, элемент, модификатор». Это, по сути, набор абстракций, на который можно разбить интерфейс и разрабатывать все в одних и тех же терминах. БЭМ предлагает единые правила написания кода, помогает его масштабировать и использовать повторно, а также увеличивает производительность и упрощает командную работу. Идея методики состоит в том, чтобы ограничить возможности CSS для более предсказуемых результатов. Это должно означать, что при разработке будет использоваться минимум глобальных стилей. При этом каждый отдельный элемент страницы – это блок со своими уникальными классами и стилями, которые полностью его описывают.
- SMACSS. В основе методологии лежит разделение CSS-правил на категории. Под категории предлагается система именования, помогающая с организацией кода и повышающая производительность команды разработчиков. Главные плюсы методики:
- правильные рекомендации для модульного и поддерживаемого кода;
- простота и доступность для освоения;
- меньше деталей и подробностей, чем, например, в БЭМ;
- гибкость системы, позволяющая работать как с крупными, так и с небольшими проектами.
Заключение
Начинающему фронтенд-разработчику важно на самых ранних этапах обучения разобраться, что такое CSS в HTML, как взаимосвязаны эти языки, и что может означать применимая к ним терминология. Правила каскадных таблиц стилей записываются в определенном формате, где основным понятием выступает селектор, используемый для выбора HTML-элементов с последующим их форматированием. То есть CSS имеет свой синтаксис, освоение которого, как правило, не вызывает затруднений. Гораздо сложнее разобраться (а тем более запомнить) с большим количеством свойств CSS и функциями каждого из них.
