4. Содержание отчета:

4.1 Наименование и цель работы

4.2 Задание своего варианта

4.3 Сценарий таблицы CSS

4.4 Ответы на контрольные вопросы

4.5 Вывод о проделанной работе

5. Порядок выполнения работы:

5.1 Создайте свою папку, куда в дальнейшем будете размещать свои документы.

5.2 Запустите Блокнот.

5.3 Наберите HTML – код своей программы.

5.4 Сохраните свой документ с расширением *.html, для чего в меню файл выберите команду Сохранить как... Из перечня Тип файла выберите Все файлы.

5.5 В отдельном документе составьте правила для своей веб – страничке согласно своему варианту. Для соединения HTL – документа с внешней таблицей стиля используется элемент LINK. Который должен располагаться в заголовке документа внутри элемента HEAD.

6. Контрольные вопросы:

6.1 Какие средства по оформлению HTML – документов предлагает нам CSS?

ПРИЛОЖЕНИЕ:

В качестве фона любого элемента страницы можно задать либо цвет, либо изображение. Свойства фона не наследуется, но фон родительского блока всегда будет виден, т.к. в качестве начального значения свойства background –color выступает значение transparent, т.е. прозрачность.

Свойство background –color устанавливает цвет фона элемента

body { background –color: #FF0000 }

Свойство background –image – задает графический объект в качестве фона. В качестве значения этого свойства выступает адрес картинки.

С помощью CSS можно генерировать содержимое несколькими способами:

• с использованием свойства content в сочетании с псевдоэлементами :before и :after

• с использованием элементов, свойство display которых принимает значение list-item.

С помощью псевдоэлементов :before и :after можно задать стиль и местоположение генерируемо содержимого. Например, пусть браузер сам расставит точки в конце абзацев в документе:

p:after { content: “.” }

Может понадобиться, чтобы в документе или в какой-то его части кавычки отображались не так, как обычно, а в зависимости от стиля и содержимого. Свойство quotes задает пару «» для каждого уровня вложенности цитат, а свойство content предоставляет доступ к этим кавычкам и вставляет их до и после цитаты. Можно задавать кавычки. Используя шестнадцатеричный код, предварительно поставив знак \.

Таблица 1.

Приблизительный вид	Код
″	0022
′	0027
<	2039
>	203А
«	00AB
«	00BB
‘	2018
’	2019
“	201C
”	201D
„	201E

Например:

quotes: ″″″ ″″″ ″\2039″ ″\203A″

Рассмотрим возможности задания спискам различного визуального форматирования. Рассмотрим типы маркеров списка. Первыми рассмотрим глифы. Они представляются с помощью значений disk, circle, square (круг, окружность и квадрат).

Нумерованные списки:

- decimal – десятичные числа

- decimal-leading-zero – десятичные числа, вначале дополненные нулями

- lower-roman – римские цифры, представленные строчными буквами

- upper-roman - римские цифры, представленные прописными буквами

Создание маркированных списков с помощью алфавитной системы:

- lower- latin –строчные буквы (a,b,c…z)

- upper – latin- прописные буквы (A,B,C…Z)

- lower – greek- строчные греческие буквы (α,β…)

Рассмотрим свойство list-style-image – оно представляет файл с картинкой, используемой в качестве маркера элемента списка. Если картинка доступна, то она заменит маркер, устанавливаемый свойством list-style-type. Пример:

UL { list-style-image: url(“http:// my_site.com/my_marker.jpg”)}

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

Средства CSS позволяют задавать указатель мыши свойством cursor. Данное свойство может принимать следующие значения:

• auto – браузер определяет отображаемый указатель исходя из контекста.

• crosshair – простое перекрестие

• default – указатель по умолчанию

• pointer – указатель, обозначающий ссылку

• move – указатель, определяющий объект, который можно переместить

• text – указатель в виде вертикальной черты

• wait – указатель, показывающий занятость программы (циферблат или песочные часы)

• help – указатель представляется в виде вопросительного знака или воздушного шара.

Для задания цвета границы существует четыре свойства для четырех сторон: border-top-color, border-right-color, border-bottom-color, border-left-color и сокращенная запись border-color. Они задают цвет верхней, правой, левой и нижней границ соответственно. Пример:

p{

border-width:2px

border-color: blue;

}

Для элемента р будет создана граница синего цвета размером два пикселя.