Лекция №4 Основы CSS
1 Добавление CSS к веб-странице
2. Селекторы
3.Форматирование текста в CSS
4. Фон в CSS
5.Списки в CSS
6. «@media» - Типы носителей в CSS
7. Работа с псевдоклассами в CSS
8. CSS: оформление таблиц
CSS (Cascading Style Sheets), или каскадные таблицы стилей, описывают правила форматирования отдельного элемента веб-страницы. Создав стиль один раз, его можно применять к любым элементам страницы сколько угодно раз.
Рис.
1. Структура объявления стиля элемента
в CSS
Определение стиля состоит из двух основных частей: самого элемента веб-страницы – селектора, и команды форматирования –блока объявления. Селектор сообщает браузеру, какой именно элемент форматировать, в блоке объявления перечисляются форматирующие команды.
Добавление css к веб-странице
Первый способ (external style sheets - внешние таблицы стилей). Если вы хотите использовать описанные правила стилей для многих страниц своего сайта, то их нужно сохранять в отдельном файле стилей. Для этого создается обычный текстовый файл, с помощью текстового редактора, с расширением .css и в него вписываются посредством CSS описанные правила стилей. Затем для того, чтобы увязать web-страницу и файл стилей, применяем метатег <LINK> в теге <HEAD> такого вида:
<LINK REL="STYLESHEET" TYPE="text/css" HREF="URL">
или
<STYLE TYPE="text/css" MEDIA="all">@import "URL";</STYLE>,
где атрибуты REL и TYPE указывают браузеру, что в web-документе будут использоваться каскадные таблицы стилей CSS. Ну а атрибут HREF это URL(Uniform Resource Locator) файла стилей. Здесь URL - это либо абсолютный адрес файла стилей, если он размещен на другом сервере, либо относительный адрес, если файл размещен на том же веб-сервере. Параметр MEDIA определяет тип системы отображения информации (монитор, принтер или другие), @import - указывает, что стили должны импортироваться с файла, по указанному адресу.
Итак,
- файл стилей находится на веб-сервере, его можно применять для множества веб-страниц, у которых есть на него ссылка; - при загрузке на компьютер пользователя, происходит его кэширование, что не влияет на время загрузки других страниц сайта; - при необходимости изменения стиля какого-то элемента веб-страниц, изменения вносятся только в одном месте - в файле стилей; - соблюдена схема разделения описания оформления данных страниц от самих данных (в самом веб-документе находится только информация и ни слова о ее оформлении).
Второй способ (document style sheets - таблицы стилей документа) - включение описаний правил стилей непосредственно в код web-страницы, внутри тегов <HEAD>...</HEAD>. Для этого применяется тег
<STYLE TYPE="text/css">...</STYLE>.
Параметр TYPE обязательный и указывает браузеру об использовании каскадных таблиц стилей CSS. Ниже приведем пример, определяющий правило стиля для заголовков первого уровняю H1. Тип шрифта - Verdana или другой из указанного списка, на случай, если у пользователя такой не установлен в операционной системе; размер шрифта - 18 пикселей; выравнивается текст заголовка по центру; цвет заголовка - коричневый.
<head> <style type="text/css">
H1 { Font-Family: Verdana, ARIAL, HELVETICA, SANS-SERIF; Font-size: 18px; Text-align: center; color: #996666;}
</style> </head>
Для данного способа:
- заданные правила стилей применяются только к веб-странице, в которую они включены; - объем страницы увеличивается, что увеличивает время ее загрузки; - для изменения стиля, правки вносятся непосредственно в html-код страницы; - в коде веб-документа размещается и описание оформления данных.
Третий способ (inline styles - стили, вставляемые в строку) - стиль задается конкретному элементу в его теге. Этот способ применяется, когда нужно задать соответствующий стиль какому-то одному элементу в веб-документе. Ниже посмотрим на тег
<p style="margin-left: 20px; font-family: ARIAL; font-weight: bold; font-size: 16px; color: #000099;"> Пример задания стиля в теге, определяющем абзац </p>.
Здесь для абзаца, значением параметра style, задан отступ слева от края окна на 20 пикселей, определен шрифт - Arial, выделение - полужирным, размер шрифта - 16 пикселей, цвет - темно-синий. К другим элементам веб-страницы этот стиль никакого отношения не имеет. А вот как это будет выглядеть в окне вашего браузера:
Пример задания стиля в теге, определяющем абзац.
В этом способе:
- как и в предыдущем, объем страницы увеличивается, что ведет к увеличению времени ее загрузки; - для изменения стиля, правки нужно вносить непосредственно в конкретный тег страницы; - в тегах элементов веб-документа размещается описание стилей.