Задание на лабораторный практикум 2 (стр. 1 )

Задание на лабораторный практикум 2

Задание 1(25 %)

Задать стиль страниц в соответствии со следующими требованиями:

текст 3-4 абзаца (можно взять в Интернете) оформить в отдельный тег<div>; граница должна быть видимой; отступы: левый 3 см, правый 1 см, верхний 2 см, нижний 2 см; абзацный отступ: 1,5 см; фон: светло-серый; гарнитура: Times New Roman кегль: 14пт; буквица (первый символ 18 пт).

Задание 2 (15 %)

Определить стиль для таблицы:

заголовок выравнен по центру; первый столбец выровнен по ширине; второй столбец выровнен по центру; четные столбцы светлый фон; нечетные столбцы белый фон.

Задание 3(15 %)

Расположить изображение в тексте (использовать обтекание).

Задание 4* (30%)

Добавить графику <svg>.

Анимировать графику на страницe.

Справочная информация

ВАЖНО! Материал взят с сайта http://www. wisdomweb. ru/CSS/css-first. php

Материал использован в целях экономии трафика. При малейшей возможности обращайтесь к первоисточнику

Что такое CSS?

CSS расшифровывается Cascading Style Sheets (Каскадные Документы Стилей).

С помощью CSS Вы можете оформлять HTML документы.

CSS было представлено вместе с HTML 4.0 и создавалось для разрешения проблем с оформлением, возникающих в предыдущих версиях HTML.

Пример

#css table

{

border-collapse:collapse;

font-family:'arial';

}

#css th

{

background-color:#DC63C2;

padding:7px;

font-size:1.1em;

border:1px black solid;

color:white;

}

#css td

{

padding:7px;

border:1px solid;

}

Использование стилей разрешает множество проблем

Во время создания HTML в 1991 году не предполагалось, что он будет содержать тэги, позволяющие оформлять документы.

Изначально HTML был создан только для группировки текста:

<h1> Заголовок 1 </h1>

<p> Какой-то текст </p>

<h1> Заголовок 2 </h1>

<p> Какой-то текст </p>

Когда в HTML 3.2 были добавлены такие тэги как <font> (данный тэг использовался для изменения шрифта элементов) оформление и разметка смешались в единое целое и оформление элементов стало занимать огромное количество времени.

Для того, чтобы разрешить эту проблему в конце 1996 года W3C (Консорциум Всемирной Паутины - занимается разработкой веб-стандартов) представил CSS.

CSS позволяет хранить информацию об оформлении HMTL документа в отдельном внешнем файле с расширением. css. Редактируя лишь один этот файл стало возможным изменение оформления целого веб-сайта.

На данный момент CSS является стандартом оформления HTML документов и поддерживается всеми современными браузерами.

Таблицы стилей состоят из набора правил(1). Каждое правило состоит из одного или несколькихселекторов(3) и блока определения(2), выделяющегося фигурными скобками.

Блок определения может содержать одно или несколько свойств(4) отделенных точкой с запятой (;) (после последнего свойства точка с запятой необязательна). Каждое свойство должно иметь значение(5)отделенное двоеточием (:).

CSS комментарии

Таблицы стилей могут содержать комментарии. Комментарии используются для создания пояснений.

Комментарии полностью игнорируются браузером при разборе таблиц стилей.

В CSS комментарии начинаются с "/*", и заканчиваются "*/", например:

/* Правило перекрасит абзацы HTML документа в зеленый цвет */

p {color:green;}

Обратите внимание: разбираться в коде с пояснениями намного проще, так что старайтесь использовать пояснения как можно чаще.

Селекторы CSS

С помощью селекторов Вы можете выбирать элементы на странице, которые хотите оформить.

В CSS существуют следующие виды селекторов:

Селекторы тэгов

Вы можете выбирать элементы на странице для оформления по названию тэга.

Пример

p

{

color:green;

}

h2

{

color:red;

}

Селектор id

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

Идентификатор для элемента задается с помощью атрибута id (<p id="идентификатор">текст</p>).

Для того, чтобы затем оформить данный элемент необходимо обратиться к идентификатору в таблицах стилей добавив перед ним символ "#" (#идентификатор {color:red}).

Пример

/* Оформим элемент с id="test1" */

#test1

{

color:green;

font-family:verdana;

font-size:1.2em;

}

Селектор class

Данный вид селекторов позволяет выбирать для оформления не единственный элемент, а группу элементов.

С помощью атрибута class можно задать, что элемент относится к группе (<p class="имя_группы">текст</p>).

Для того, чтобы затем оформить эту группу необходимо в таблицах стилей обратится к имени группы добавив перед ней символ "." (.имя_группы {color:red}).

Пример

/* Свойства будут применены ко всем элементам с class="test1" */

.test1

{

color:green;

font-family:verdana;

font-size:1.2em;

}

Обратите внимание: имя группы и идентификатор может состоять только из латинских букв и не может начинаться с цифр.

Селекторы атрибутов

Элементы на странице могут быть выбраны по их атрибутам.

Пример

/* Оформит все элементы имеющие атрибут src */

[src]

{

border:solid green 3px;

}

Пример ниже оформит все элементы, которые ссылаются на главную страницу нашего сайта:

Пример

/* Оформит все элементы, атрибут href которых имеет значение http://www. wisdomweb. ru */

[href="http://www. wisdomweb. ru"]

{color:green;}

Комбинирование селекторов

Для более точного выбора элементов в CSS может использоваться комбинирование селекторов.

Например, Вы можете комбинировать селекторы тэгов с селекторами class:

Пример

/* Свойства будут применены только к тем элементам с class="test1", которые являются заголовками */

h2.test1

{

color:green;

font-family:verdana;

font-size:1.2em;

}

Также Вы можете комбинировать селекторы тэгов:

Пример

/* Свойства будут применены только к тем элементам p, которые находятся внутри элементов div */

div p

{

color:green;

font-family:verdana;

font-size:1.2em;

}

Символ "+" позволяет выбирать элементы, которые идут сразу после указанного.

Пример

/* Свойства будут применены только к тем элементам p, которые идут сразу после элементов div */

div+p

{

color:green;

font-family:verdana;

font-size:1.2em;

}

Группировка селекторов

Часто при оформлении HTML документов с помощью CSS приходится применять одинаковые свойства для разных селекторов, например:

h1

{

font-family:verdana;

color:green;

}

h2

{

font-family:verdana;

color:green

}

p

{

font-family:verdana;

color:green;

}

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

Пример

h1,h2,p

{

font-family:verdana;

color:green;

}

Внешнее объявление стилей

Внешнее объявление стилей используется в случаях, когда оформление задается для группы связанных HTML документов (например для целого веб-сайта).

В этом случае все оформление выносится в один внешний файл, на который должны ссылаться все документы веб-сайта.

Внешнее объявление стилей очень удобно так как позволяет редактируя лишь один файл изменять оформление целого веб-сайта.

Для того, чтобы подключить внешний файл стилей необходимо в секции head каждой страницы веб-сайта указать ссылку на него с помощью элемента <link>:

Пример:

<head>

<link rel="stylesheet" type="text/css" href="адрес_внешнего_файла_стилей" />

</head>

Обратите внимание: атрибут type тэга style стал необязательным в HTML5.

Внешний файл стилей является обычным текстовым файлом с расширением. css.

Пример содержимого внешнего файла стилей:

h1 {color:red;}

p {margin-right:38px;}

div {float:left;}

Внутреннее объявление стилей

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

В этом случае оформление определяется в секции head с помощью тэга style:

Пример:

<head>

<style type='text/css'>

h1 {color:red;}

p {margin-right:38px;}

div {float:left;}

</style>

</head>

Строковое объявление стилей

Строковое объявление стилей используется в случаях, когда необходимо оформить только один определенный элемент в HTML документе.

Для того, чтобы оформить элементы этим способом Вы должны воспользоваться атрибутом style соответствующего элемента.

Атрибут style может содержать любые CSS свойства.

Пример:

<p style="font-size:1.3em"> Абзац оформленный с помощью CSS.</p>

Приоритет стилей

Стили подключенные разным способом имеют разный приоритет:

Внешние стили: 1 Внутренние стили: 2 Строковые стили: 3

Если один HTML документ имеет несколько стилей подлюченных разным способом и в них заданы разные свойства оформления для одного и того же элемента, то в итоге элемент будет оформлен согласно содержимому стиля с более высоким приоритетом.

Пример:

Пример

/* Внутренние стили: */

h1 {color:red}

/* Строковые стили: */

h1 {color:green}

/* В результате заголовок будет зеленого цвета так как строковые стили имеют более высокий приоритет */

Цвет текста

С помощью CSS свойства color Вы можете изменять цвет текста HTML элементов.

Цвет может быть задан следующими способами:

С помощью названия цвета (например 'red' задаст красный цвет); С помощью RGB значения (например 'rgb(255,255,255)' задаст белый цвет); С помощью шестнадцатеричного значения (например '#00ff00' задаст зеленый цвет).

Пояснения:

Первый способ в основном используется для задания основных цветов, названия которых хорошо известны. Например red определит красный, blue - синий, white - белый.

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