Файл: «Способы оформления web-страниц приложения (CSS, Темы)».pdf

Введение

Тема курсовой работы – «Способы оформления 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-документов [1].

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Notepad++;
• CoffeeCup HTML Editor;
• SublimeText3;
• Brackets;
• Atom [5].

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

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

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

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

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

1.2 Селекторы

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

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

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

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

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

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

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

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

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

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

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

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

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

<p class="p_one">

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

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

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

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

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

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

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

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

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

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

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

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