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

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

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

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

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

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

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

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

Макфарланд Д. Большая книга CSS3. 3-е изд. – СПб.: Питер, 2016. – 608 с – книга имеет доступное изложение теоретического материала, подкрепленного практическими примерами и советами.
Фрэйн Б. HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств. 2-е изд. – СПб.: Питер, 2017. – 272 с. – книга издана в 2017 году, поэтому в ней собраны последние данные по стандарту CSS3, а также изложены методики и технологии, призванные стать инструментами будущего для web-разработчиков клиентских приложений.
М.А. Одинокая. «Об эффективном использовании современных технологий создания интерактивных веб-документов» - данная статья опубликована в Педагогическом экспрессе в 2017 году.
А.В. Новожилов, Г.С. Акулов «Поддержка браузерами технологий 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 использует три способа задания стиля для элемента страницы. Способы задания стиля могут быть реализованы в виде:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

MS FrontPage;
Adobe Dreamweaver;
Adobe Muse CC.

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

Dabblet (http://dabblet.com/);
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>, следующим образом:

Для добавления стиля только к части текста, входящего в абзац, можно добавить тег <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-страницы, то есть задающих последовательность применения многократно определенных стилей. Каскадность определяет, как браузер должен обрабатывать сложную структуру, которая относится к одному и тому же тегу, и как себя вести, если возникает конфликт свойств. Данная ситуация может происходить в двух случаях: