Использование css при форматировании

WEB-СТРАНИЦ

1. Задание стиля для одного тега.

а) создайте или возьмите готовую web-страницу, в которой содержатся три абзаца, размеченные тегом <P>. Далее эту web-страницу вы будете использовать и в последующих заданиях, поэтому исходный текст страницы сохраните. Произведите форматирование этих абзацев, используя атрибут STYLE внутри тега <P>. Выровняйте первый абзац по левому краю (свойство text-align) и задайте отступ красной строки абзаца (свойство text-indent) в 1 см. Второй абзац выровняйте по правому краю (свойство text-align), задайте цвет символов (color) – желтый на зеленом фоне (background-color). Третий абзац выровняйте по ширине и задайте двойную рамку вокруг него (border-style) синего цвета (border-color). В задании приведены свойства, которые вы должны использовать, а значения подберите согласно этому заданию самостоятельно. Сохраните полученный файл под именем st01.htm и просмотрите его в браузере;

б) создайте HTML-страницу, на которой будет находиться таблица с тремя столбцами и тремя строками. Заполните таблицу. В первом столбце введите наименование товара, во втором – старую цену, в третьем – новую цену. Далее произведите форматирование ячеек второго и третьего столбца следующим образом: старая цена – серого цвета, подчеркнутая, новая цена – красного цвета и на 50% больше чем остальной текст. Для этого используйте тег <FONT> для ячейки таблицы с указанием нужных свойств из приведенных: text-decoration – начертание шрифта, font-size – размер шрифта, color – цвет. Значения для этих свойств подберите самостоятельно, согласно этому заданию. Сохраните этот файл под именем st02.htm и просмотрите в браузере.

2. Задание стиля для одной web-страницы.

а) создайте или возьмите готовую web-страницу, в которой содержатся три абзаца, размеченные тегом <P>. Создайте таблицу стилей для web-страницы. Для этого используйте тег <STYLE type =«text/css»> </STYLE>, записанный в заголовочную часть страницы, внутрь этого тега запишите новый сформированный стиль для абзаца. В этом стиле вы должны предусмотреть выравнивание текста по ширине, отступ слева – 2 см, отступ справа – 1 см, красная строка – 1,25 см. Для этого используйте свойства: margin-left, margin-right, text-indent. Затем в каждом абзаце укажите использование данного стиля атрибутом CLASS. Сохраните этот файл под именем st03.htm и просмотрите в браузере.

б) возьмите готовую исходную web-страницу с тремя абзацами. В заголовочной части страницы создайте таблицу стилей, используя тег <STYLE type ="text/css"> </STYLE>. Внутри него запишите два стиля, которые смогут принадлежать любым тегам (используйте правило CSS .класс {свойства}). Для первого стиля задайте цвет текста коричневый на светло-сером фоне, выровненный по левому краю. Задайте рамку для текста темно-серого цвета, текст должен быть выпуклым. Расстояние между содержимым и рамкой элемента должно составлять 0,5 см. Используемые свойства для первого стиля: color, background-color, text-align, border-color, border-style, margin. Для второго стиля цвет фона текста сделайте бирюзовым, поля слева и справа от текста – по 1 см. Используйте семейство рубленых шрифтов. Используемые свойства для второго стиля: color, margin-left, margin-right, font-family. Сохраните этот файл под именем st04.htm и просмотрите в браузере.

3. Задание для создания внешнего стиля, используемого для нескольких страниц. Возьмите готовую исходную web-страницу с тремя абзацами. Добавьте туда графическое изображение. Далее откройте текстовый редактор «Блокнот» и создайте внешний табличный стиль, состоящий из двух классов-стилей. Первый сделайте для графического элемента <IMG> следующим образом: установите рамку, размер элемента должен быть равен половине окна браузера (независимо от его размера), чтобы он был расположен у левого края окна, а остальные элементы страницы «обтекали» бы его справа. Используемые свойства для первого стиля: border-style, width, heigh, margin-left, clear. Второй – для абзаца, который отображается курсивом, размер шрифта измените на больший, цвет установите синий. Используемые свойства для второго стиля: font-style, font-size, color. Сохраните этот файл со стилями под именем style05.css. Теперь вернитесь к web-странице. После заголовочной части и перед тегом <BODY> сделайте ссылку на стилевой файл, т. е. вставьте строку <LINK REL="styleshee"t TYPE="text/cs"s HREF="путь до файла">, где в качестве «пути до файла» запишите имя вашего файла style05.css. Затем сохраните вашу web-страницу в файле под именем st05.htm и просмотрите в браузере.