Использование 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 и просмотрите в браузере.
Контрольные вопросы и задания
1. Дайте определение понятия «стиль».
2. Как расшифровывается CSS?
3. Какие преимущества дает использование CSS?
4. Что собой представляет CSS?
5. Из чего состоит правило таблицы стилей?
6. Что вы можете назвать селектором?
7. Как выглядит свойство селектора?