Задания на отработку использования стилей в WEB-станичках

Задания на использование CSS

Для каждого задания сохранить листинг, результат выполнения работы и отчет в своей папке, которая должна находиться в папке имя_группы\имя_преподавателя.

В отчете указать какой используется способ задания стиля и прокомментировать что делают используемые команды и их атрибуты.

Ответить на вопрос – где можно помещать описание стиля и особенности этого.

Введение

Самый простой случай присвоения какому-либо элементу определенного стиля выглядит так:

имя-элемента {свойство: значение;}

Где имя-элемента - имя HTML-тега (H1, P, TD, А и т. д.), т.е. параметр, а значения в фигурных скобках - список свойств элемента и присвоенных ему значений.

Задание 1

Выполнить пример использования CSS:

Листинг 1.

<HTML>

<HEAD>

<Т1ТLЕ>Основы CSS</TITLE>

<STYLE type="text/css">

body {background-color: lime;}

h1 {font-size: 300%;

background-color:teal;

color: white;

text-align: center;}

</STYLE>

</HEAD>

<BODY>

<Н1>Преимущества использования CSS заключаются в простоте написания HTML-страниц.</Н1>

</BODY>

</HTML>

Задание 2

Выполнить пример использования классов

<HTML> <HEAD>

<TITLE>Определение классов< / TITLE >

<STYLE>

P.big {

text-align: center;

font-style: italic;

font-size: 50;

}

p.middle {

text-align: left;

color: green;

font-size: 40; }

p.small

{

text-align: right;

text-decoration: underline;

font-size: 30;

}

</STYLE>

</HEAD>

<BODY>

<P с1аз8="Ь1дп>Большой абзац.</Р>

<P class="middle">Средний абзац.</Р>

<P class="small">И маленький абзац.</Р>

</B0DY>

</HTML>

Задание 3

<HTML>

<HEAD>

<TITLE>Абзацный отступ</ TITLE >

<МЕТА http-equiv="Content-Type"

content="text/html; charset=windows-1251">

<STYLE>

p {text-indent: 25;

text-align: justify;

font-size: large;}

p.ind {font-family: Courier New;

margin-left: 50;}

</STYLE>

</HEAD>

<BODY bgcolor="#FFFFFF" text=n#000000">

<H1 align="center">Абзацный отступ</Н1>

<Р>Другим вариантом визуального разделения абзацев в документе является создание абзацного отступа или отступа первой строки абзаца. Для этого используется параметр <B>text-indent</B>.</P>

<Р>Например, строка: </Р>

<Р class="ind">p { text-indent: 25; }</Р>

<Р>задает отступ первой строки абзаца в 25 пикселей.</Р>

<Р>Можно также определять отступ в сантиметрах (cm), дюймах (in) и процентах.

</BODY>

</HTML>

Задания на отработку использования стилей в WEB-станичках

1. Создать страничку аналогичную приведенной ниже с использованием таблицы CSS

2. Создать странички с изображением и текстом с их различным взаимным расположением (как показано ниже)

3.Создать страничку с использованием всех псевдостилей:

	Псевдостиль	Описание
	A: link	Применяется ко всем гиперссылкам документа
	A: active	Применяется ко всем активным гиперссылкам документа
	A: visited	Применяется ко всем посещенным гиперссылкам документа
	A: hover	Применяется к гиперссылке, на которую указывает курсор мыши