CSS3: что это такое и зачем?

CSS CSS
Это набор параметров форматирования, который применяют к элементам документа, чтобы изменить их внешний вид.

CSS (Cascading Style Sheets – каскадные таблицы стилей) – это набор параметров форматирования, который применяют к элементам документа, чтобы изменить их внешний вид. Это одна из базовых технологий современной веб-разработки. Практически все сайты создаются с использованием каскадных таблиц стилей, поэтому HTML и CSS, как правило, применяются совместно. С помощью HTML разработчик выполняет верстку размеченного текста, создавая документ с гиперссылками, списками, подзаголовками, различными начертаниями шрифтов и т. д. В результате получается никак не оформленное полотно текста с таблицами и иллюстрациями. На заре эры Интернета этого было достаточно, т. к. сеть использовалась исключительно в профессиональных целях. Но когда WWW стал доступным для широкого круга пользователей, возникла необходимость в оформлении веб-документов для придания им стилистической индивидуальности.

Пример CSS кода
Пример CSS кода

Подключение CSS к HTML документу

Первая версия CSS была представлена 17 декабря 1996 года. С ее помощью разработчики получили возможность добавлять оформление документа без программирования или сложной логики. Под оформлением принято понимать цвета, шрифты, позиционирование (расположение отдельных блоков на странице) и т. д. Как все происходит на практике? За основу берется HTML-документ, и к нему подключается стиль CSS. Подключение можно выполнить одним из доступных способов.

  1. Внутри HTML-тега. Такой способ используется довольно редко и, как правило, для каких-то локальных целей. Реализуется он с помощью атрибута style. Код в этом случае выглядит следующим образом:
<div style="css-свойство: значение; css-свойство: значение;...">...</div>
  1. Через тег <style>. Этот тег располагают в <head> документа. Код при этом имеет такую структуру:
<head>

...

<style>

селектор {

свойство: значение;

свойство: значение;

...

}

селектор {

свойство: значение;

свойство: значение;

...

}

...

</style>

</head>

3. С помощью внешнего 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

Первоначальное предназначение свойства 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 – дать возможность контейнеру изменять ширину, высоту и порядок дочерних элементов так, чтобы оставшееся пространство заполнялось наилучшим образом, то это еще и один из лучших инструментов адаптивной верстки.

Макеты с помощью CSS Grid

Полностью разделить содержание и оформление сайта позволил CSS Grid, предложенный в 2011 году. Это новый способ создания макетов, когда верстка доступна прямо в браузере, что дает множество преимуществ. Он отличается от Flexbox тем, что это система двумерного макета. Плюсы нового модуля особенно очевидны, если сравнивать его с популярным фреймворком Bootstrap, на базе которого создано огромное количество сайтов в Интернете. С помощью Grid можно разрабатывать макеты, которые раньше были невозможны без JavaScript, причем разметка станет более простой. Кроме того, он обладает гораздо большей гибкостью. То есть в данном случае мы имеем дело с модулем, который позволяет менять разметку документа без вмешательства в порядок исходного кода. При правильном использовании Grid он не влияет на внутренние связи содержимого в документе.

CSS3

Спецификация CSS3 – неоспоримое будущее сферы декоративного оформления веб-страниц. Ее разработка еще не закончена, многие модули продолжают совершенствоваться и модифицироваться. Третье поколение стандарта изменило CSS в целом так же, как HTML5 – весь язык разметки. CSS3 – это своего рода набор технологий, которые постепенно получают поддержку браузеров. Новая спецификация позволяет:

  • создавать элементы со сглаженными углами (свойство border-radius);
  • более гибко оформлять фоновую картинку (background);
  • создавать линейные и сферические градиенты (gradient);
  • добавлять тени к элементам (box-shadow) и тексту (text-shadow);
  • делать анимацию и разные эффекты переходов (transition);
  • задавать цвета несколькими новыми способами и многое другое.

Методологии CSS

Разобравшись с возможностями каскадных таблиц стиля, нужно научиться пользоваться стандартом и применять его на практике. Существуют разные подходы к использованию CSS для профессиональной коллективной работы. Описания многих методологий можно найти на форумах разработчиков и других специализированных ресурсах.

  • Atomic CSS. Эта методология базируется на идее создания небольших узкоспециализированных классов с названиями, основанными на визуальной функции. При этом каждому свойству соответствует свой отдельный класс, что делает его уникальным и удобным в использовании. В Atomic CSS предлагается несколько готовых решений, включая:
  • простую и понятную методику присваивания имен классам;
  • готовый к использованию CSS-фреймворк с полноценной типографикой, адаптивным дизайном, normalize, FA-иконками и прочим;
  • полный исходный Sass-код, нужный, необходимый для того чтобы легко настроить методологию под свою задачу;
  • онлайн-Builder, с помощью которого можно проверить HTML-код прямо в браузере.
  • CSS в JS. Методология основана на определении стилей CSS не в отдельной таблице, а прямо внутри каждого компонента. Эта техника используется достаточно давно, позволяя решать проблему, связанную с увеличением размера CSS-кода по мере разработки приложения.
  • БЭМ. Аббревиатура методологии расшифровывается как «блок, элемент, модификатор». Это, по сути, набор абстракций, на который можно разбить интерфейс и разрабатывать все в одних и тех же терминах. БЭМ предлагает единые правила написания кода, помогает его масштабировать и использовать повторно, а также увеличивает производительность и упрощает командную работу. Идея методики состоит в том, чтобы ограничить возможности CSS для более предсказуемых результатов. Это должно означать, что при разработке будет использоваться минимум глобальных стилей. При этом каждый отдельный элемент страницы – это блок со своими уникальными классами и стилями, которые полностью его описывают.
  • SMACSS. В основе методологии лежит разделение CSS-правил на категории. Под категории предлагается система именования, помогающая с организацией кода и повышающая производительность команды разработчиков. Главные плюсы методики:
  • правильные рекомендации для модульного и поддерживаемого кода;
  • простота и доступность для освоения;
  • меньше деталей и подробностей, чем, например, в БЭМ;
  • гибкость системы, позволяющая работать как с крупными, так и с небольшими проектами.

Ссылка на главную страницу

Ссылка на Ingate

Источник
Оцените статью
( Пока оценок нет )
Hack Life - веб для всех
Добавить комментарий