МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ РФ
ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ
БЮДЖЕТНОЕ ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ
ВЫСШЕГО ОБРАЗОВАНИЯ
«ВОРОНЕЖСКИЙ ГОСУДАРСТВЕННЫЙ
УНИВЕРИТЕТ»
Д.В. Груздев
ПРАКТИКА ЭВМ – CSS (3 КУРС)
Учебное пособие
Воронеж
Издательский дом ВГУ
2017
Стр.1
Введение в CSS
После знакомства с HTML разработчики сайтов разделяются на две основные
категории. Одна часть считает, что с помощью HTML на сайте можно создавать
все или практически все, другая же понимает, что в целом средств разметки не
достаточно для оформления веб-документов. Действительно, HTML лишь первый
этап в процессе обучения созданию сайтов. Следующим шагом является
изучение стилей или CSS (Cascading Style Sheets, каскадные таблицы стилей).
Стили представляют собой набор параметров, управляющих видом и положением
элементов веб-страницы. Чтобы стало понятно, о чем идет речь, посмотрим на
рис. 1.1.
Рис. 1.1. Веб-страница, созданная только на HTML
Это обычная веб-страница, оформленная без всяких изысков. Тот же самый
документ, но уже с добавлением стилей приобретает совершенно иной вид
(рис. 1.2).
Стр.3
font-weight: normal; /* Нормальное начертание текста */
}
p {
*/
}
text-align: justify; /* Выравнивание по ширине */
margin-left: 60px; /* Отступ слева в пикселах */
margin-right: 10px; /* Отступ справа в пикселах */
border-left: 1px solid #999; /* Параметры линии слева */
border-bottom: 1px solid #999; /* Параметры линии снизу */
padding-left: 10px; /* Отступ от линии слева до текста */
padding-bottom: 10px; /* Отступ от линии снизу до текста
В файле style.css как раз и описаны все параметры оформления таких тегов
как ,
и
. Заметьте, что сами теги в коде HTML пишутся как
обычно.
Поскольку на файл со стилем можно ссылаться из любого веб-документа, это
приводит в итоге к сокращению объема повторяющихся данных. А благодаря
разделению кода и оформления повышается гибкость управления видом
документа и скорость работы над сайтом.
CSS представляет собой свой собственный язык, который совпадает с HTML
только некоторыми значениями, например способом определения цвета.
Типы стилей
Различают несколько типов стилей, которые могут совместно применяться к
одному документу. Это стиль браузера, стиль автора и стиль пользователя.
Стиль браузера
Оформление, которое по умолчанию применяется к элементам веб-страницы
браузером. Это оформление можно увидеть в случае «голого» HTML, когда к
документу не добавляется никаких стилей. Например, заголовок страницы,
формируемый тегом
, в большинстве браузеров выводится шрифтом с
засечками размером 24 пункта.
Стиль автора
Стиль, который добавляет к документу его разработчик. В примере 1.1 показан
один из возможных способов подключения авторского стиля.
Стр.6
Стиль пользователя
Это стиль, который может включить пользователь сайта через настройки
браузера. Такой стиль имеет более высокий приоритет и переопределяет
исходное оформление документа. В браузере Internet Explorer подключение стиля
пользователя делается через меню Сервис > Свойство обозревателя > Кнопка
«Оформление», как показано на рис. 1.3.
Рис. 1.3. Подключение стиля пользователя в браузере Internet Explorer
В браузере Opera аналогичное действие происходит через команду Инструменты
> Общие настройки > Вкладка «Расширенные» > Содержимое > Кнопка
«Параметры стиля» (рис. 1.4).
Стр.7
Рис. 1.4. Подключение стиля пользователя в браузере Opera
Указанные типы стилей могут спокойно существовать друг с другом, если они не
пытаются изменить вид одного элемента. В случае возникновения противоречия
вначале имеет приоритет стиль пользователя, затем стиль автора и последним
идёт стиль браузера.
Преимущества стилей
Стили являются удобным, практичным и эффективным инструментом при верстке
веб-страниц и оформления текста, ссылок, изображений и других элементов.
Стр.8
Несмотря на явные плюсы применения стилей, рассмотрим все преимущества
CSS, в том числе и незаметные на первый взгляд.
Разграничение кода и оформления
Идея о том, чтобы код HTML был свободен от элементов оформления вроде
установки цвета, размера шрифта и других параметров, стара как мир. В идеале,
веб-страница должна содержать только теги логического форматирования, а вид
элементов задается через стили. При подобном разделении работа над дизайном
и версткой сайта может вестись параллельно.
Разное оформление для разных устройств
С помощью стилей можно определить вид веб-страницы для разных устройств
вывода: монитора, принтера, смартфона, КПК и др. Например, на экране
монитора отображать страницу в одном оформлении, а при ее печати — в другом.
Эта возможность также позволяет скрывать или показывать некоторые элементы
документа при отображении на разных устройствах.
Расширенные по сравнению с HTML способы оформления элементов
В отличие от HTML стили имеют гораздо больше возможностей по оформлению
элементов веб-страниц. Простыми средствами можно изменить цвет фона
элемента, добавить рамку, установить шрифт, определить размеры, положение и
многое другое.
Ускорение загрузки сайта
При хранении стилей в отдельном файле, он кэшируется и при повторном
обращении к нему извлекается из кэша браузера. За счет кэширования и того, что
стили хранятся в отдельном файле, уменьшается код веб-страниц и снижается
время загрузки документов.
Кэшем называется специальное место на локальном компьютере пользователя,
куда браузер сохраняет файлы при первом обращении к сайту. При следующем
обращении к сайту эти файлы уже не скачиваются по сети, а берутся с локального
диска. Такой подход позволяет существенно повысить скорость загрузки вебстраниц.
Единое
стилевое оформление множества документов
Сайт это не просто набор связанных между собой документов, но и одинаковое
расположение основных блоков, и их вид. Применение единообразного
оформления заголовков, основного текста и других элементов создает
преемственность между страницами и облегчает пользователям работу с сайтом
и его восприятие в целом. Разработчикам же использование стилей существенно
упрощает проектирование дизайна.
Централизованное хранение
Стр.9
Стили, как правило, хранятся в одном или нескольких специальных файлах,
ссылка на которые указывается во всех документах сайта. Благодаря этому
удобно править стиль в одном месте, при этом оформление элементов
автоматически меняется на всех страницах, которые связаны с указанным
файлом. Вместо того чтобы модифицировать десятки HTML-файлов, достаточно
отредактировать один файл со стилем и оформление нужных документов сразу
же поменяется.
Способы добавления стилей на страницу
Для добавления стилей на веб-страницу существует несколько способов, которые
различаются своими возможностями и назначением. Далее рассмотрим их
подробнее.
Связанные стили
При использовании связанных стилей описание селекторов и их значений
располагается в отдельном файле, как правило, с расширением css, а для
связывания документа с этим файлом применяется тег. Данный тег
помещается в контейнер , как показано в примере 3.1.
Пример 3.1. Подключение связанных
стилей
Стили
Заголовок
Стр.10