Задания для самостоятельного выполнения
Вариант выбирается по последней цифре порядкового номера студента в журнале группы.Тема сайта является продолжением лабораторной работы №1.
1 Новостной блог
2 Электронная библиотека
3 Форум
4 Корпоративный сайт
5 Дистанционное обучение
6 Электронный каталог компаний
7 Доска объявлений
8 Фотогалерея
9 Сайт знакомств
10 Риэлторская компания
Лабораторная работа №4. Каскадные таблицы стилей
Цели и задачи
Цель работы Изучить способы использования стилевой разметки. Научиться создавать и применять таблицы стилей для управления представлением содержимого веб-страниц.
Задание
1.Создать внешние таблицы стилей (раздельные для устройств screen, print и handheld) для разрабатываемого вами сайта.
2.Подключить созданные таблицы к макетам страниц.
Теоретический материал
Общие сведения
Каскадные таблицы стилей (Cascading Style Sheets, CSS) — это стандарт, определяющий представление данных в браузере. Если HTML предоставляет информацию о структуре документа, то таблицы стилей сообщают как он должен выглядеть.
Стиль — это совокупность правил, применяемых к элементу гипертекста и определяющих способ его отображения. Стиль включает все типы элементов дизайна: шрифт, фон, текст, цвета ссылок, поля и расположение объектов на странице. Таблица стилей — это совокупность стилей, применимых к гипертекстовому документу. Каскадирование — это порядок применения различных стилей к веб-странице. Браузер, поддерживающий таблицы стилей, будет последовательно применять их в соответствии с приоритетом: сначала связанные, затем внедренные и, наконец, встроенные стили. Другой аспект каскадирования — наследование (inheritance), — означает, что если не указано иное, то конкретный стиль будет применен ко всем дочерним элементами гипертекстового документа. Например, если вы примените определенный цвет текста в теге <div>, то все теги внутри этого блока будут отображаться этим же цветом. Использование каскадных таблиц дает возможность разделить содержимое и его представление и гибко управлять отображением гипертекстовых документов путем изменения стилей. Официальная информация о спецификации Cascading Style Sheets всегда доступна по адресу http://www.w3.org/Style/CSS/ Общий синтаксис таблиц стилей
|
|
|
Таблицы стилей строятся в соответствии с определенным порядком (синтаксисом), в противном случае они не могут нормально работать. Таблицы стилей составляются из определенных частей (рисунок 1):
Рисунок 1. Синтаксис описания стиля CSS Селектор (Selector).
Селектор — это элемент, к которому будут применяться назначаемые стили. Это может быть тег, класс или идентификатор объекта гипертекстового документа. Свойство (Property). Свойство определяет одну или несколько характеристик селектора. Свойства задают формат отображения селектора: отступы, шрифты, выравнивание, размеры и т.д. Значение (Value). Значения — это фактические числовые или строковые константы, определяющие свойство селектора. Описание (Declaration). Совокупность свойств и их значений. Правило (Rule). Полное описание стиля (селектор + описание). Таким образом, таблица стилей — это набор правил, задающих значения свойств селекторов, перечисленных в этой таблице. Общий синтаксис описания правила выглядит так:
|
|
|
селектор[, селектор[, ...]] {свойство: значение;}
Регистр символов значения не имеет, порядок перечисления селекторов в таблице и свойств в определении не регламентирован.
Правила CSS
Итак, каскадная таблица стилей — это набор правил форматирования тегов HTML. Приведем несколько примеров написания таких правил:
1.Основной текст с выравниванием по ширине, абзацный отступ 30px, гарнитура (шрифт) — Serif, кегль (размер шрифта) — 14px:
p {
text-align: justify; text-indent: 30px; font-family: Serif; font-size: 14px; } Это правило будет применено ко всем тегам <p>.
2.Синий цвет для заголовков с первого по третий уровень:
|
|
|
h1, h2, h3 { color: blue; /* тоже самое, что и #0000FF */ }
3.Таблицы и изображения выводить без обрамления:
table, img {border: none;}
4.Ссылки в элементах списков показывать без подчеркивания:
li a {text-decoration: none;}
5.Внутренние отступы слева и справа для блоков (<div>), заголовков таблиц и ячеек таблиц установить в 10px и залить фон желтым цветом:
div, th, td { padding-left: 10px; padding-right: 10px; background-color: yellow; }
6.Все ссылки в документе отображать черным цветом и полужирным шрифтом, а в основном тексте и списках — обычным, а также выделять их зеленым цветом и подчеркивать только при наведении курсора (в описании правил использован псевдоэлемент a:hover).
a {color: black; font-weight: bold;} p a, li a {font-weight: normal; text-decoration: none;} p a:hover, li a:hover { color: #00FF00; text-decoration: underline; }
Классы
Стандарт CSS представляет возможности создания именованных стилей — стилевых классов. Это позволяет ответить на такой, например, вопрос: Как применить разные стили к одному и тому же селектору? Предположим, что в документе вам нужны два различных вида основного текста — один без отступа, второй — с левым отступом и шрифтом красного цвета. Для этого нужно создать правила для каждого из них, например так:
p {margin-left: 0;} p.warn {margin-left: 40px; color: #FF00;}
Для применения созданного класса его имя нужно указать в атрибуте class для выбранных абзацев:
|
|
|
<p class=”warn”>Красный текст с отступом слева</p>
Общий синтаксис описания класса:
селектор.имя_класса {описание}
При создании класса селектор можно не указывать, тогда это правило можно применять к любому селектору, поддерживающему тот же набор свойств. Вот несколько примеров:
Правило:
.solid_blue {color: blue;}
Использование:
<p class=”solid_blue”>Синий текст абзаца</p><li class=”solid_blue”>Синий текст элемента списка</li>
Правило:
h1.bigsans {font-family: Sans; font-size: 1.5em;} h1.smallserif {font-family: Serif; font-size: .84em;}
Использование:
<h1 class=”bigsans”>Большой, но рубленый</h1><h1 class=”smallserif”>Маленький, но с засечками</h1>
Идентификаторы
В качестве селектора может выступать идентификатор элемента гипертекста, указанный в атрибуте id. Для назначения стилей таким элементам используется синтаксис, аналогичный описанию классов, но вместо точки ставится знак # (“решетка”). Например:
div#content { position: absolute; top: 10px; left: 10%; right: 10%; border: solid 1px silver; } ...
<div id="content">Текст</div>
Следует помнить, что идентификаторы элементов должны быть уникальны в пределах документа. Группировка свойств
Группировка (grouping) состоит в объединении значений родственных свойств. При этом таблица стилей становится более компактной, но предъявляются более жесткие требования к описанию правил. Ниже приведен пример обычного стиля, задающего отступы:
div {
margin-left: 10px; margin-top: 5px; margin-right: 40px; margin-bottom: 15px; } Это же правило можно переписать с группировкой в следующем виде:
div {margin: 5px 40px 15px 10px;} /*порядок: top right bottom left*/
Оба стиля будут отображаться одинаково. Группировка может применяться для таких свойств, как padding, font, border, background и еще некоторых (см. документацию CSS)
Дата добавления: 2018-04-04; просмотров: 669; Мы поможем в написании вашей работы! |
Мы поможем в написании ваших работ!