Практическое занятие № 10 Разработка web-сайта с использованием таблицы стилей: цвет и фон

Цель работы: знакомство с таблицами стилей CSS, обеспечивающими создание единого фона и цвета на всех страницах сайта.

Коды формируемых профессиональных компетенций: ПК 1.1–1.5, ПК 3.3

Теоретические сведения

Цвет и фон в css

Свойство COLOR. Задает основной цвет (цвет переднего плана) того или иного элемента.

Свойство BACKGROUND-COLOR. Задает фоновый цвет элемента. В отличие от html, в котором фоновый цвет можно использовать только для страницы или ячейки таблицы (т.е. имеющих атрибут bgcolor ) в CSS , фоновый цвет можно задавать для чего угодно: для таблиц, заголовков, параграфов, ссылок и др.

Свойство BACKGROUND-IMAGE. Данное свойство используется для задания фонового изображения. В примере ниже, указано фоновое изображения для всей страницы

Пример: BODY {background-color : #FFEE8C ;background-image : url(smile.png) ;}

H1 {color: red ;background-color :blue ;}

P {color: green ; }

Свойство BACKGROUND-REPEAT. Фоновое изображение по умолчанию повторяется начиная с верхнего левого угла, как по вертикали, так и по горизонтали, пока не заполнит весь экран. С помощью свойства background-repeat можно контролировать эти повторения.

Это свойство может принимать четыре значения:

Background-repeat: repeat-x ;	повторение по горизонтали
Background-repeat: repeat-y ;	повторение по вертикали
Background-repeat: repeat ;	по вертикали и по горизонтали(значение по умолчанию)
Background-repeat: no-repeat ;	не повторяется

Свойство BACKGROUND-ATTACHMENT. При наличии фонового рисунка, это свойство устанавливает, будет ли фоновое изображение прокручиваться с содержимым страницы, или будет заблокировано, т.е. неподвижно. Может принимать два значения:

SCROLL - фон прокручивается вместе с содержимым;

FIXED - фон строго зафиксирован.

Пример: BODY {background-image : url(smile.png) ;

background-repeat: no-repeat;

background-attachment: scroll ;}

ЗАДАНИЕ: Разработайте стартовую страницу развлекательного сайта для детей дошкольного возраста и три дочерних страницу, используя для формирования фона и цвета возможности таблиц стилей CSS

Практическое занятие № 11 Разработка web-сайта с использованием таблицы стилей: шрифты и списки.

Цель работы: знакомство с таблицами стилей CSS, обеспечивающими создание единого дизайна отображения текста на всех страницах сайта.

Коды формируемых профессиональных компетенций: ПК 1.1–1.5, ПК 3.3

Теоретические сведения

Шрифты в css

За шрифты в CSS отвечают следующие свойства:

Свойство FONT-FAMILY. Данное свойство определяет гарнитуру шрифта. Рассмотрим три основных семейства:

• Serif - шрифты с характерными "засечками", наиболее яркий представитель - "Times New Roman";

• Sans-serif - шрифты рубленые, без засечек, например Arial или Verdana ;

• Monospace - моноширинные шрифты (с одинаковым расстоянием между символами, наподобие печатной машинки), такие как "Courier New";

Свойство FONT-STYLE. Данное свойство задает стиль шрифта. Может принимать три значения:

• normal - обычный;

• italic - курсивный;

• oblique - наклонный;

Свойство FONT-VARIANT. Это свойство используется для выбора варианта написания букв нижнего регистра. Может принимать два значения:

• normal - значение по умолчанию, текст отображается обычным образом.

• small-caps - буквы нижнего регистра отображаются как уменьшенные заглавные.

Свойство FONT-WEIGHT. Это свойство определяет насыщенность шрифта, т.е. с его помощью можно сделать шрифт жирным. Основные значения: normal - обычный и bold - жирный. Некоторые браузеры поддерживают числовые значения: 100, 200,300,400,500,600,700,800,900. Для справки: 400 равносильно normal, а 700 - bold .

Свойство FONT-SIZE. C его помощью можно регулировать размер шрифта. В качестве единиц измерения лучше всего использовать пикселы, т.к. это универсальный способ и во всех браузерах вы увидите одинаковый результат, а это самое главное.