Способы оформления web-страниц приложения (CSS, Темы)

Содержание:

Введение

Тема курсовой работы – «Способы оформления web-страниц приложения (css, темы)».

Технология CSS – одна из широкого спектра технологий, одобренных консорциумом W3C и получивших общее название «стандарты Web». Сокращение произошло от английских слов Cascading Style Sheets, что в переводе обозначает каскадные таблицы стилей.

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

Цель курсовой работы заключается в изучении каскадных таблиц стилей, как способа оформления web-страниц. Необходимо уделить особое внимание практическому применению и использованию CSS в процессе создания макета страниц.

В соответствии с целью курсовой работы поставлены следующие задачи:

• рассмотреть основные понятия каскадных таблиц стилей;
• изучить структуру селекторов;
• научиться управлять сложной структурой стилей;
• рассмотреть практическое применение CSS при работе с текстом;
• рассмотреть практическое применение CSS при работе с графикой;
• проанализировать способы создания навигации с использованием CSS;
• определить структуру разметки страницы с применением CSS;
• привести примеры использования CSS для создания адаптивного дизайна.

Предметом курсовой работы являются селекторы каскадных таблиц стилей, позволяющих оформлять web-страницы.

В основе написания курсовой работы лежат следующие источники литературы:

1. Макфарланд Д. Большая книга CSS3. 3-е изд. – СПб.: Питер, 2016. – 608 с – книга имеет доступное изложение теоретического материала, подкрепленного практическими примерами и советами.
2. Фрэйн Б. HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств. 2-е изд. – СПб.: Питер, 2017. – 272 с. – книга издана в 2017 году, поэтому в ней собраны последние данные по стандарту CSS3, а также изложены методики и технологии, призванные стать инструментами будущего для web-разработчиков клиентских приложений.
3. М.А. Одинокая. «Об эффективном использовании современных технологий создания интерактивных веб-документов» - данная статья опубликована в Педагогическом экспрессе в 2017 году.
4. А.В. Новожилов, Г.С. Акулов «Поддержка браузерами технологий HTML 5 и CSS3» - статья была опубликована Вестником ТГУ, т.19, вып.2, 2016

Глава 1 Основные понятия CSS

1.1 Создание стилей и таблиц стилей

CSS – это язык, описывающий внешний вид документа, который написан с использованием языка гипертекстовой разметки. Каскадные таблицы стилей (CSS) являются стандартом W3C, и предназначены для визуального оформления HTML-документов.

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

Каскадные таблицы стилей или CSS являются довольно поздним нововведением. Сравнивая с HTML, который появился в 1989 году, каскадные таблицы стилей появляются в 1997 году. Как правило, разработчики не считают таблицы стилей частью HTML. Объясняется это тем, что World Wide Web была создана учеными как средство для обмена текстовыми документами, а HTML был инструментом, который создавал эти документы. Целью данных документов было передать их содержимое, а не оформление. Поэтому первые версии HTML не включали даже средств для размещения на Web-страницах графических изображений, не то что для сложного форматирования текста.

На фоне всех требований и возникли каскадные таблицы стилей. В данный момент, актуальны версии CSS2, CSS3. Однако современные Web-браузеры, да и то самые последние их версии, полностью поддерживают CSS1, CSS2 и, частично, CSS3.

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

CSS – это язык описания внешнего вида документа, написанного с использованием языка разметки. CSS3 – это новый стандарт оформления HTML-документов, значительно расширяющий возможности предыдущего стандарта. Многие возможности, которые были труднодоступны в CSS2.1 и требовали использования дополнительных внешних программ, написания скриптов (JavaScript, VBScript), могут легко достигаться в CSS3 за счет использования новых свойств оформления.

Стандарт CSS использует три способа задания стиля для элемента страницы. Способы задания стиля могут быть реализованы в виде:

1. Внешней таблицы стилей. Стили хранятся в отдельном файле с расширением .css, внедряются в Web-страницу с помощью тэга <LINK>.
2. Внутренней таблицы стилей. В этом случае, таблица стилей имеет такую же структуру, что и внешняя, но находится между тегами <head> </head> HTML-документа используя тэг <STYLE>.
3. Внутренних стилей. В данном случае, стили помещаются внутри нужного тэга, используя специальный атрибут STYLE [3].

Правило каскадности: если какой-то стиль определяется одновременно два или три раза, то к его определению, которое сделано во внешней таблице, добавляется определение, которое сделано во внутренней таблице. В том случае, если определение затрагивает один и тот же атрибут, тогда берется определение, сделанное во внутренней таблице. Для более удобного использования CSS вынесем его в отдельный файл, который подключается с использованием тега, приведенного на рис. 1.

Рис. 1. Подключение CSS-файла

Данная структура используется в стандарте HTML5.

Преимущество внешних таблиц стилей заключается в том, что они могут быть привязаны одновременно к нескольким Web-страницам.

Недостатком данного способа является то, что внешняя таблица стилей – это отдельный файл, который с определенной долей вероятности может быть потерян.

Внутренняя таблица стилей записывается непосредственно в HTML-код Web-страницы. Она заключается в парный тег <STYLE> и помещается в верхнюю часть HTML-документа, который должен появиться внутри элемента <HEAD>. На рисунке 2, показана структура внутренней таблицы стилей.

Рис. 2. Структура внутренней таблицы стилей

Внутренний стиль – размещение стилевых команд CSS непосредственно в HTML-коде страницы. Применение внутреннего стиля выглядит следующим образом:

<h1 style="color: #666666;">

Как показывает практика, использование внутренних стилей не обеспечивает экономии времени загрузки web-страниц, а также трафика. В связи с этим, использование их не имеет положительных сторон. В том случае, если необходимо изменить стиль единственного элемента на web-странице, то лучше всего использовать встроенные стили.

Работа с CSS подразумевает использование двух видов программного обеспечения (ПО):

1. ПО для создания CSS-документов.
2. ПО для просмотра HTML-документов.

ПО для создания CSS-документов делится на два вида – визуальное (WYSIWYG) и невизуальное.

К невизуальному ПО относятся:

• Notepad++;
• CoffeeCup HTML Editor;
• SublimeText3;
• Brackets;
• Atom.

Невизуальные редакторы, как правило, устанавливаются на компьютер разработчика.

К визуальному ПО относятся:

• MS FrontPage;
• Adobe Dreamweaver;
• Adobe Muse CC.

Визуальные редакторы могут быть установлены на компьютер пользователя, а могут работать через браузер. Самыми распространенными on-line визуальными редакторами являются:

1. Dabblet (http://dabblet.com/);
2. Codepen (http://codepen.io).

1.2 Селекторы

Правило CSS состоит из селектора и атрибута. Селектор предназначен для привязки стиля к элементу Web-страницы, на который он распространяет свое действие. Фактически селектор однозначно идентифицирует данный стиль. После селектора, через пробел, следует список атрибутов данного стиля, а также их значения. Атрибуты должны быть заключены в фигурные скобки. Атрибут стиля может представлять один из параметров элемента Web-страницы, а именно:

• цвет шрифта;
• выравнивание текста;
• величину отступа;
• толщину рамки.

Значение атрибута стиля должно указываться через двоеточие. В отдельных случаях, значение атрибута стиля заключают в кавычки. На рисунке 3, приведен пример селектора.

Рис. 3. Пример селектора

Дизайн web-страницы контролируется селектором, для которого задается описание. На данный момент, существуют следующие виды селекторов:

• селекторы типов;
• селекторы классов;
• ID-селекторы [6].

Селекторы типов являются очень эффективным способом оформления web-страниц. При использовании селекторов типов определяется стиль всех элементов HTML-документа. С их помощью можно быстро изменять дизайн web-страницы с небольшими доработками.

Селекторы исключительно просто определить в CSS-стилях, так как они наследуют названия форматируемых элементов – p, h1, table, img и т.д. На рисунке 4, показана структура селектора для тега <h2>. CSS-стиль с селектором h2, приведенный на рисунке 4, определяет представление каждого заголовка второго уровня для всех страниц сайта.

Рис. 4. CSS-стиль с селектором h2

Селекторы классов позволяют указать конкретный элемент web-страницы, в независимости от тега. Например, при форматировании одного или нескольких слов абзаца, применяется форматирование не ко всему тегу <p>, а лишь к фрагменту абзаца. В этом случае, логично использовать селектор класса для применения его к определенному тексту. Можно применить изменения к множеству элементов, входящих в различные HTML-теги. На рисунке 5, показана структура селектора класса.

Рис. 5. Структура селектора класса

После того, как был объявлен класс, необходимо указать для какого тега он будет применен. Для этого, необходимо добавить атрибут class к HTML-тегу, который подлежит стилизации.

В нашем случае, класс .p_one может быть применен для стилизации первого абзаца. Для применения этого стиля к абзацу, достаточно добавить атрибут class к тегу <p>, следующим образом:

<p class="p_one">

Для добавления стиля только к части текста, входящего в абзац, можно добавить тег <span>, применив к нему созданный класс. Структура данного селектора приведена на рисунке 6, а результат – рисунок 7.

Рис. 6. Применение тега <span>

Рис. 7. Результат работы селектора класса

ID-селектор предназначен для идентификации уникальных частей web-страниц, таких как шапка, панель навигации, основная информационная область содержимого. Структура данного селектора показана на рисунке 8.

Рис. 8. Структура ID-селектора

Применение идентификаторов в HTML схоже с использованием классов, но требует другого атрибута с соответствующим названием – id. Данный селектор может быть применен к тегу <div>, как показано на рисунке 9.

Рис. 9. Применение ID-селектора

В результате, на HTML-странице появится блок, имеющий высоту, ширину и цвет фона (рисунок 10).

Рис. 10. Результат применения ID-селектора к блоку <div>

Существуют также групповые селекторы, универсальные селекторы, селекторы потомков, селекторы атрибутов, селекторы дочерних элементов.

1.3 Управление сложной структурой стилей

Каскадность – ряд правил, определяющих, какие именно стилевые свойства необходимы элементам web-страницы, то есть задающих последовательность применения многократно определенных стилей. Каскадность определяет, как браузер должен обрабатывать сложную структуру, которая относится к одному и тому же тегу, и как себя вести, если возникает конфликт свойств. Данная ситуация может происходить в двух случаях:

1. Из-за механизма наследования.
2. Когда один или более стилей применяются к одному элементу web-страницы.

Наследование CSS гарантирует, что однородные взаимосвязанные элементы веб-страницы получают стилевые свойства родительских элементов. Это избавляет от необходимости создания отдельных стилей для каждого тега веб-страницы. Поскольку тег может унаследовать свойства любого предка (например, ссылка, наследующая шрифт родительского <p>), определить, почему конкретный тег отформатирован именно так, может быть сложной задачей. Предположим такую ситуацию: к <body> применен определенный шрифт, к <p> — размер шрифта, а для <a> — цвет. Таким образом, любой тег <a> абзаца унаследует свойства <body> и <p>. Другими словами, унаследованные стили будут объединены, сформировав один сложный. CSS-код выглядит следующим образом:

body {

font-family: Verdana, Arial, Helvetica, sans-serif;

}

p {

color: #F30;

}

strong {

font-size: 24px;

}

Тег <strong> вложен в абзац, который, в свою очередь, является вложенным в <body>. Стилевые свойства наследует <strong> у всех элементов-предков, получая начертания шрифта font-family от <body> и цвет color от родительского абзаца. Кроме того, <strong> имеет собственное CSS-свойство, устанавливающее размер шрифта 24 пиксела. Конечный внешний вид тега определяется сочетанием всех трех стилей. Другими словами, <strong> выглядит так, будто для него создали следующий стиль [9]:

strong {

font-family: Verdana, Arial, Helvetica, sans-serif;

color: color: #F30;

font-size: 24px;

}

Единственный стиль, обладающий наивысшим приоритетом, является самым близким предком в «генеалогическом» дереве CSS. Это тот стиль, который напрямую применен к тегу. Предположим, что цвет шрифта устанавливается для <body>, <p> и <strong>. Стиль абзаца <p> является определенным по отношению к <body>, но <strong> — еще более конкретный, чем все остальные. Он форматирует только теги <strong>, отменяя любые конфликтующие свойства, унаследованные от других тегов. Другими словами, свойства стиля, явно определенного для тега, отменяют любые унаследованные.

В первой главе курсовой работы были рассмотрены основные понятия, связанные с каскадными таблицами стилей. В рамках данной главы была разобрана структура таблицы стилей, способы размещения CSS, как внутри документа, так и во внешней таблице стилей, рассмотрена структура селектора, определены виды селекторов. Также в данной главе были рассмотрены каскадность и механизмы наследования.

Глава 2 Практическое применение CSS

2.1 Работа с текстом

Для работы с текстом в CSS используется свойство font-family. Данное свойство может иметь вид:

body {font-family: sans-serif;}

Данная конструкция применима ко всем элементам, находящимся в пределах тега <body>. Это будет происходить до тех пор, пока не будет выполнено переопределение. В том случае, если шрифт состоит из нескольких слов, отделенных пробелом или символом, тогда необходимо использовать кавычки. Структура данной конструкции будет иметь вид, представленный на рисунке 11.

Рис. 11. Назначение шрифта для абзаца

Результат выполнения данного правила, показан на рисунке 12.

Рис. 12. Результат выполнения правила

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

p{ font-weight: normal;}

Данное правило может принимать такие значения: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900, inherit. На рисунке 13, показано применение данного правила.

Рис. 13. Применение правила font-weight

На рисунке 14, показан результат выполнения данного правила.

Рис. 14. Результат выполнения правила font-weight

Размер шрифта задается с помощью следующей конструкции:

p{ font-size: 12px;}

Это правило может быть представлено следующим образом (рисунок 15).

Рис. 15. Структура правила

На рисунке 16, показан результат выполнения правил.

Рис. 16. Результат выполнения правил

При применении em, как единицы измерения размера шрифта, необходимо помнить, что CSS определяет значение длины em как процентное соотношение, т.е 1em=100%.

2.2 Работа с графикой

С появлением CSS3 разработчики стали предпочитать этот инструмент canvas и svg для рисования иллюстраций. Поддержка анимирования элементов с помощью браузера значительно ускоряет прорисовку и делает ее более плавной, чем реализация ее более старыми методами (например, с помощью jQuery) [12].

Наиболее простой способ использования SVG-графики совпадает со вставкой в HTML-документ любой графики. Для этого, воспользуемся тегом img:

<img src="mySconeVector.svg" alt="Amazing line art of a scone" />

В данном случае, SVG-изображение ведет себя практически так же, как и любое другое изображение.

Использование тега <object>.

Тег <object> является контейнером, рекомендуемым W3C, для содержимого web-страницы, не имеющего, при этом, отношения к HTML. Данный тег позволяет вставить SVG-графику на HTML-страницу:

<object data="img/svgfile.svg" type="image/svg+xml">

<span class="fallback-info">Your browser doesn't support SVG</span>

</object>

С тегом <object> рекомендуется использовать атрибут data и атрибут type. Атрибут data является внешней ссылкой на SVG-ресурс, поведение которого ни чем не отличается от ссылки на любой другой ресурс. С помощью атрибута type дается описание MIME-типа, соответствующего содержимому. В приведенном выше примере image/svg+xml является MIME-типом, который обозначает данные в формате SVG. В том случае, если необходимо задать размер SVG в пределах контейнера, тогда необходимо добавить атрибуты width и height [4].

SVG-графика, вставленная на страницу с помощью тега object, доступна также коду JavaScript. Данный факт является одним из аргументов плюсов данного способа вставки. Однако дополнительным преимуществом использования тега <object> является предоставление им простого механизма действия в случае, если браузер не понимает типа данных. Например, если бы предыдущий элемент <object> просматривался в Internet Explorer 8 (в котором отсутствует поддержка SVG), то на экране просто было бы показано сообщение о том, что браузер не поддерживает SVG. Пространство, в котором обозначено сообщение, можно использовать для предоставления альтернативного изображения в теге <img>. Но, при этом, следует иметь в виду, что, по результатам моего экспресс-тестирования, браузер всегда будет загружать альтернативное изображение независимо от практической надобности в нем. Поэтому, если вы хотите, чтобы сайт загружался как можно быстрее, данный вариант, наверное, будет не самым лучшим выходом из положения.

Альтернативным вариантом может стать добавление фонового изображения с помощью CSS-свойства background-image. В приведенном выше коде у альтернативного span-контейнера имеется класс .fallback-info. Что позволит нам воспользоваться данным в CSS для ссылки на подходящее фоновое изображение. Данное фоновое изображение будет загружаться только в случае, когда это действительно необходимо.

Вставка SVG-графики в качестве фонового изображения.

SVG-графика может использоваться в качестве фонового изображения в CSS примерно так же, как и изображение любого другого формата (PNG, JPG, GIF). Структура вставки SVG-графики имеет вид:

.item {

background-image: url('image.svg');

}

Для устаревших браузеров, не поддерживающих SVG, может понадобиться включить альтернативное изображение в более широко поддерживаемом формате (обычно PNG). Одно из решений для Internet Explorer 8 и Android 2 имеет следующий вид [8]:

.item {

background: url('image.png') no-repeat;

background: url('image.svg') left top / auto auto no-repeat;

}

В том случае, если в CSS применяются два одинаковых свойства, то нижестоящим свойствам всегда переписывается то свойство, что стоит выше его. Браузер игнорирует те правила CSS, в которых он не может разобраться. В таких случаях устаревшие браузеры получают изображение в формате PNG, так как они не могут работают с SVG, в то время как новые браузеры, применят нижнее свойство, поскольку для них будет отменено первое свойство [3].

Альтернативные варианты можно предоставить с помощью JavaScript-средства Modernizr, предназначенного для тестирования функциональных возможностей браузера. В Modernizr содержатся отдельные тесты для различных методов вставки SVG-графики, а в следующей версии Modernizr может содержаться что-нибудь более специфичное для SVG в CSS. Для начала сделаем следующее:

.item {

background-image: url('image.png');

}

.svg .item {

background-image: url('image.svg');

}

Или инвертировать логику, если вам так удобнее:

.item {

background-image: url('image.svg');

}

.no-svg .item {

background-image: url('image.png');

}

Когда запросы возможностей (feature queries) получат более полную поддержку, можно будет также сделать следующее:

.item {

background-image: url('image.png');

}

@supports (fill: black) {

.item {

background-image: url('image.svg');

}

}

Правило @supports здесь сработает, поскольку fill является свойством SVG, и, если браузер это понимает, то он предпочтет не верхнее, а нижнее правило. Если ваши потребности в SVG-графике сводятся в основном к статичным фоновым изображениям, значкам. На данный момент широко внедряется SVG-графика в качестве фоновых изображений. Для этого существует множество инструментальных средств, автоматически создающих спрайты изображений или ссылки на ресурсы в таблицах стилей, альтернативные PNG-ресурсы и необходимые таблицы стилей из отдельных создаваемых вами SVG-изображений. Это происходит посредствам включения SVG-графики в виде URI-идентификатора данных. Данный способ использования SVG-графики весьма широко применяется, сами изображения неплохо кэшируются, следовательно, их использование приносит довольно просто реализовать.

2.3 Использование CSS для навигации

CSS анимацию целесообразно использовать для реализации популярной техники, так называемого parallax scrolling, когда при прокручивании документа фон и содержимое перемещаются с разной скоростью, создавая эффект трехмерного пространства в WEB-приложении.

CSS позволяет преобразовать список ссылок, расположенных вертикально одна за другой, в список с горизонтальным представлением. Существует два распространенных подхода в создании из списка горизонтальной панели навигации. Первый метод основывается на использовании свойства display: inline-block – он прост, но обычно приводит к маленьким расстояниям между кнопками. Если нужна горизонтальная навигационная панель с соприкасающимися кнопками, обратитесь к методу с применением плавающих элементов <ul>, однако для начала необходимо удалить маркеры и левые отступы тегов <ul>. Самый простой метод создания горизонтальной панели навигации заключается в изменении для элементов списка значения block (блочный элемент) свойства display на inline (линейный элемент).

Шаг 1. Первым делом необходимо создать стиль для маркированного списка, чтобы удалить отступы, поля и маркеры (рисунок 17).

Рис. 17 Создание стиля для маркированного списка

Рис. 18. Результат выполнения стиля

Шаг 2. Преобразуем пункты списка в линейные элементы. Линейные элементы не создают переносов строк ни перед элементом, ни после него, как это делают блочные. Установка значения inline свойства display для тегов <li> приведет к отображению элементов списка в одну строку (рисунок 19).

Рис. 19. Стиль для преобразования списка в линейные элементы

Рис. 20. Результат преобразования

Шаг 3. Следующим шагом является стилизация ссылки. Можно убрать подчеркивание под ссылками и вместо этого добавить вокруг них окаймляющую границу. Чтобы обеспечить визуальную глубину и реалистичность настоящих кнопок, нужно изменить цвет фона или добавить рисунок. При необходимости добавьте отступы вокруг текста ссылок. Если требуется разнести кнопки друг от друга, назначьте для них правое поле.

На рисунке 21, показан окончательная его структура, а на рисунке 22 показан результат данного кода.

Рис. 21. Структура стиля для создания меню из маркированного списка

Рис. 22. Результат выполнения созданного стиля

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

Глава 3 Использование CSS для макета страниц

3.1 Разметка страницы

Flexbox предоставляет следующие возможности:

• выравнивание содержимого по вертикали.
• Изменение порядка визуального отображения элементов.
• автоматическое заполнение пространства пробелами и выравнивание
• элементов внутри блока, автоматически распределяя между ними доступное пустое пространство.

На данный момент flexbox не поддерживают следующие браузеры: Internet Explorer 9, 8 и более ранних версий.

Что же касается всех остальных браузеров, чью поддержку хотелось бы получить (и практически всех браузеров мобильных устройств), то у вас есть возможность воспользоваться большинством, если не всеми свойствами Flexbox.

Структура Flexbox имеет вид, который показан на рисунке 23:

Рис. 23. Структура flexbox

Данная структура будет применена для всех современных браузеров. В том случае, если необходимо получить поддержку со стороны Android-браузеров, а также IE 10, тогда код будет иметь вид показанный на рисунке 24.

Рис. 24. Структура flexbox для более ранних версий браузеров

Необходимость написания всего этого обусловлена тем, что в последние несколько лет во всех браузерах стали доступны экспериментальные версии новых функциональных возможностей, но с использованием так называемого префикса производителя (vendor prefix). У каждого производителя имелся собственный префикс. Например, -ms- для Microsoft, -webkit- для WebKit, -moz- для Mozilla и т. д [4].

Для каждой новой функциональной возможности это означало необходимость написания нескольких версий одного и того же свойства, сначала в форме версий с префиксами, а в конце – в форме официальной версии консорциума W3C.

Flexbox имеет четыре основных характеристик:

• направление (direction);
• выравнивание (alignment);
• определение порядка (ordering);
• и динамическое изменение (flexibility).

Мы рассмотрим все эти характеристики и их взаимоотношения на нескольких примерах. Это намеренно простые примеры, касающиеся простого перемещения блоков и их содержимого и позволяющие понять принципы работы Flexbox [10].

Текст, безупречно выровненный по вертикали.

Разметка выглядит следующим образом:

<div class="CenterMe">

Hello, I'm centered with Flexbox!

</div>

А вот полное CSS-правило, придающее стиль этой разметке:

.CenterMe {

background-color: indigo;

color: #ebebeb;

font-family: 'Oswald', sans-serif;

font-size: 2rem;

text-transform: uppercase;

height: 200px;

display: flex;

align-items: center;

justify-content: center;

}

Результат, показан на рисунке 25.

Рис. 25. Выровненный по вертикали

Большинство пар «свойство – значение» в этом правило просто устанавливают цветовые решения и размер шрифта. Нам интересны лишь три свойства:

.CenterMe {

/* другие свойства */

display: flex;

align-items: center;

justify-content: center;

}

Рассмотрим, что делает каждое из них.

• display: flex – простая настройка элемента на его принадлежность к Flexbox.
• align-items – это свойство приводит к выравниванию элементов внутри Flexbox по поперечной оси.
• justify-content – это свойство задает выравнивание содержимого по центру главной оси. Что касается строки Flexbox, то об этом свойстве можно думать, как о кнопке в текстовом процессоре, выравнивающей текст по левому или правому краю, или по центру.

3.2 Адаптивный дизайн

Благодаря новым технологиям дизайн сайта больше не ограничен фиксированными размерами. Адаптивный дизайн стал не столько тенденцией, сколько необходимостью.

Понятие адаптивного дизайна, наряду с понятием «отзывчивого дизайна» (responsive design), возникло после 2010 года. Его идея состоит в выработке таких приемов верстки, которые видоизменяли бы вид web-страницы в зависимости от формата устройства, на котором она отображается.

Корректное отображение на экране любого устройства, вне зависимости от размеров экрана и операционной системы, стало неотъемлемым критерием для создания web-ресурса. Стоит отметить, что поисковая система Google официально поддерживает адаптивные web-ресурсы, при этом понижая в поиске сайты не дружественные по отношению к мобильным устройствам.

CSS3 состоит из набора «привинчиваемых» модулей. Медиазапросы как раз представляют собой такой CSS3-модуль. Они позволяют нацеливать специфические CSS-стили в зависимости от возможностей по отображению информации, имеющихся у того или иного устройства. Использование лишь нескольких строк CSS-кода, моет привести к изменению способа отображения содержимого. В медиазапросах принимают участие такие параметры, как ширина области просмотра, соотношение сторон экрана, ориентация.

Без медиазапросов невозможно нацелить отдельные CSS-стили на определенные характеристики устройств. Ярким примером такой характеристики является ширина области просмотра.

При создании адаптивных web-дизайнов наиболее часто используемые медиазапросы касаются ширины областей просмотра устройств (width) и ширины экранов устройств (device-width). Остальные характеристики устройств проверяются очень редко.

Сначала нужно создать код CSS для самых скромных по размеру окон просмотра, а затем последовательно добавлять в медиазапросах изменения к различным элементам. Для примера рассмотрим код, который представлен ниже.

.rule {

/* Стили для обычных окон просмотра */

}

@media (min-width: 40em) {

.rule {

/* Изменения для окон просмотра среднего размера */

}

}

@media (min-width: 70em) {

.rule {

/* Изменения для более крупных окон просмотра */

}

}

Для того, чтобы понять, как работает медиазапрос, рассмотрим конкретный пример. На рисунке 26, показана структура css-файла.

Рис. 26. Структура CSS-файла

На рисунке 27, показан результат выполнения одного из медиазапросов.

Рис. 27. Результат выполнения медиазапроса

Данный результат отобразится в браузере в том случае, если совпадут условия следующего медиазапроса:

@media screen and (min-width: 960px) {

body {

background-color: red;

}

}

На рисунке ?, показан результат выполнения следующего медиазапроса:

@media screen and (min-width: 768px) {

body {

background-color: orange;

}

}[4]

Рис. 28. Выполнение медиазапроса (min-width: 768px)

На рисунке 29, показан результат выполнения медиазапроса:

@media screen and (min-width: 550px) {

body {

background-color: yellow;

}

}

Рис. 29. Выполнение медиазапроса (min-width: 550px)

На рисунке 30, показан результат выполнения медиазапроса:

@media screen and (min-width: 320px) {

body {

background-color: green;

}

}

Рис. 30. Выполнение медиазапроса (min-width: 320px)

Для условной загрузки таблиц стилей в существующую таблицу стилей можно использовать также CSS-конструкцию @import. Например, следующий код импортирует таблицу стилей под названием phone.css при условии, что устройством является экран с максимальной шириной окна просмотра 360 пикселов:

@import url("phone.css") screen and (max-width:360px);

Следует помнить, что при использовании CSS-конструкции @import код добавляется к HTTP-запросам, что влияет на скорость загрузки, поэтому данный метод нужно использовать осмотрительно.

3.3 Виды препроцессоров

CSS препроцессор (от англ. CSS preprocessor) – это надстройка над CSS, которая добавляет ранее недоступные возможности для CSS, с помощью новых синтаксических конструкций.

Основная задача препроцессора – это предоставление удобных синтаксических конструкций для разработчика, чтобы упростить, и тем самым, ускорить разработку и поддержу стилей в проектах [10].

CSS препроцессоры преобразуют код, написанный с использованием препроцессорного языка, в чистый и валидный CSS-код. При помощи препроцессоров вы можете писать код, который нацелен на:

• читабельность для человека;
• структурированность и логичность;
• производительность.

Основными препроцессорами являются:

• Less;
• Sass (SCSS);
• Stylus.

Самый популярный на данный момент является Less препроцессор. Основан в 2009 году Алексис Сельер (Alexis Sellier) и написан на JavaScript. Имеет все базовые возможности препроцессоров и даже больше, но не имеет условных конструкций и циклов в привычном для нас понимании. Основным плюсом является его простота, практически стандартный для CSS синтаксис и возможность расширения функционала за счёт системы плагинов [11].

Самым мощным из CSS-препроцессоров является Sass. Имеет довольно большое сообщество разработчиков. Основан в 2007 году как модуль для HAML и написан на Ruby. Имеет больше возможностей в сравнении с Less.

Возможности самого препроцессора расширяются за счёт многофункциональной библиотеки Compass, которая позволяет выйти за рамки CSS и работать, например, со спрайтами в автоматическом режиме.

Данный препроцессор имеет два синтаксиса:

• Sass (Syntactically Awesome Style Sheets) – упрощённый синтаксис CSS, который основан на идентации. На сегодня он считается устаревшим.
• SCSS (Sassy CSS) – основан на стандартном для CSS синтаксисе.

Самым перспективным CSS-препроцессор является Stylus. Он основан в 2010 году TJ Holowaychuk. Данный препроцессор намного гибче чем Sass, написанный на JavaScript. В данном препроцессоре присутствует упрощённый вариант синтаксиса, т.е. отсутствие : , ; , {} и некоторых скобок.

В третьей главе курсовой работы было рассмотрено практическое применение CSS для разметки страниц, создания адаптивного дизайна с применением медиазапросов, приведены виды препроцессоров.

Заключение

В ходе выполнения курсовой работы была достигнута цель за счет выполнения поставленных задач.

Изученные теоретические сведения, рассмотренные во всех главах курсовой работы, позволят без особых усилий управлять сложными структурами стилей, а также, в процессе создания страниц, дадут возможность работать с текстом, графикой, использовать селекторы при создании навигации на сайте.

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

Библиография

1. Браун, Д. Разработка веб-сайта. Взаимодействие с заказчиком, дизайнером и программистом. / Д. Браун, - Спб.; Питер, 2013. – 336 с.
2. Дакетт, Джон. Основы веб-программирования с использованием HTML, XHTML и CSS./ Джон Дакетт, - М.; Эксмо, 2014. – 768 с.
3. Джилленуотер З. Сила CSS3. Освой новейший стандарт веб-разработок./ З. Джилленуотер. – СПб.: Питер, 2012. – 304 с.:
4. Лоусон Б., Шарп Р. Изучаем HTML5./ Б. Лоусон, Р. Шарп. Библиотека специалиста. 2-е изд. — СПб.: Питер, 2014. – 304 с.:
5. Макфарланд Д. Большая книга CSS3/ Д. Макфарланд. 3-е изд. – СПб.: Питер, 2016. – 608 с.
6. Мейер Эрик А. "CSS. Каскадные таблицы стилей. / А. Эрик Мейер. Подробное руководство " 3-е издание. Издательство: Символ-Плюс, 2015.
7. Роббинс Дж. HTML5, CSS3 и JavaScript. Исчерпывающее руководство / Дженнифер Роббинс; [пер. с англ. М. А. Райтман]. — 4-е издание. — М. : Эксмо, 2014. — 528 с. +
8. Фрэйн Б. HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств./ Б.Фрэйн 2-е изд. – СПб.: Питер, 2017. – 272 с.
9. Фримен, Эрик. Изучаем HTML, XHTML и CSS./ Эрик Фримен, Элизабет Фримен, - Спб.; Питер, 2014. – 656 с.
10. Хоган Б. HTML5 и CSS3. Веб-разработка по стандартам нового поколения./ Б. Хоган. — СПб.: Питер, 2014. — 320 с.
11. А.В. Новожилов, Г.С. Акулов «Поддержка браузерами технологий HTML 5 и CSS3» - Вестник ТГУ, т.19, вып.2, 2016. – с.663-665.
12. М.А. Одинокая. «Об эффективном использовании современных технологий создания интерактивных веб-документов». №13. Педагогический экспресс. - 2017. – с. 55-56.
13. Плохенко В.Г., 2 Симонович Е.И. Применение современных стандартов HTML 5 И CSS при проектировании сайта. Международный журнал экспериментального образования, №9. 2016. – с. 321-322
14. Е. И. Полякова, В. В. Кабаченко Учебный курс адаптивного web-дизайна. №8. Серия «Естественные и физико-математические науки». 2016. – с.107-108