12783

Цвет и фон. Цвет переднего плана: свойство color

Практическая работа

Информатика, кибернетика и программирование

Цвет и фон На этой лабораторной работе вы научитесь использовать цвета и фон на ваших webсайтах. Мы рассмотрим также продвинутые методы позиционирования и управления фоновым изображением. Будут разъяснены следующие CSSсвойства: color backgroundcolor backgroundimage bac...

Русский

2013-05-03

52.81 KB

5 чел.

Цвет и фон

На этой лабораторной работе вы научитесь использовать цвета и фон на ваших web-сайтах. Мы рассмотрим также продвинутые методы позиционирования и управления фоновым изображением. Будут разъяснены следующие CSS-свойства:

  •  color 
  •  background-color 
  •  background-image 
  •  background-repeat 
  •  background-attachment 
  •  background-position 
  •  background 

Цвет переднего плана: свойство 'color'

Свойство color описывает цвет переднего плана элемента.

Например, представьте, что мы хотим сделать все заголовки документа тёмно-красными. Все заголовки обозначаются HTML-элементом <h1>. В нижеприведённом коде цвет элемента <h1> устанавливается красным.

h1 {

color: #ff0000;

}

  •  Показать пример 

Цвета можно указывать как шестнадцатеричные значения, как в примере (#ff0000), либо вы можете использовать названия цветов ("red") или rgb-значения (rgb(255,0,0)).

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

Свойство 'background-color'

Свойство background-color описывает цвет фона элемента.

В элементе <body> размещается всё содержимое HTML-документа. Таким образом, для изменения цвета фона всей страницы свойство background-color нужно применить к элементу <body>.

Вы можете также применять это свойство к другим элементам, в том числе - к заголовкам и тексту. В следующем примере различные цвета фона применяются к элементам <body> и <h1>.

body {

background-color: #FFCC66;

}

h1 {

color: #990000;

background-color: #FC9804;

}

  •  Показать пример 

Заметьте, что устанавливает два свойства для <h1>, разделяя их точкой с запятой.

Задание: отформатируйте “text1”, для чего задайте для заголовков первого и второго уровня  цвет фона и отобразите шрифтом какого-либо цвета. Также измените цвет фона всего документа.

Фоновые изображения [background-image]

CSS-свойство background-image используется для вставки фонового изображения.

Ниже мы используем в качестве фонового изображение котенка «рыжика».

Для вставки рисунка котенка в качестве фонового изображения web-страницы просто примените свойство background-image в тэге <body> и укажите местоположение рисунка.

body {

background-color: #FFCC66;

background-image: url ("рыжик.jpg");

}

h1 {

color: #990000;

background-color: #FC9804;

}

  •  Показать пример 

Обратите внимание, что мы специфицируем место, где находится файл как url ("рыжик.jpg"). Это означает, что он находится в той же папке, что и таблица стилей. Вы, разумеется, можете ссылаться и на файлы изображений в других папках, используя, например, url("../images/рыжик.jpg"), или даже на файлы в Internet, указывая полный адрес файла, например: url("http://www.html.net/рыжик.jpg").

Повторение/мультипликация фонового изображения [background-repeat]

Вы заметили в предыдущем примере, что изображение рыжика повторяется по умолчанию по горизонтали и вертикали, заполняя весь экран? Свойство background-repeat управляет этим.

В таблице указаны четыре значения background-repeat.

Значение

Описание

Задание:

Background-repeat: repeat-x

Рисунок повторяется по горизонтали

сделать самостоятельно

background-repeat: repeat-y

Рисунок повторяется по вертикали

данный пример рассмотрен ниже

background-repeat: repeat

Рисунок повторяется по горизонтали и вертикали

сделать самостоятельно

background-repeat: no-repeat

Рисунок не повторяется

сделать самостоятельно

Например, для повторения/мультипликации фонового рисунка по вертикали мы должны записать такой код:

body {

background-color: #FFCC66;

background-image: url("рыжик.jpg");

background-repeat: repeat-y;

}

h1 {

color: #990000;

background-color: #FC9804;

}

  •  Показать пример 

Блокировка фонового изображения [background-attachment]

Свойство background-attachment определяет, фиксируется ли фоновый рисунок, или прокручивается вместе с содержимым страницы.

В таблице указаны два значения background-attachment. Щёлкните на примере, чтобы почувствовать разницу между scroll и fixed.

Значение

Описание

Задание:

Background-attachment: scroll

Изображение прокручивается вместе со страницей - разблокировано

сделать самостоятельно

Background-attachment: fixed

Изображение блокировано

данный пример рассмотрен ниже

Например, следующий код фиксирует изображение.

body {

background-color: #FFCC66;

background-image: url ("рыжик.jpg");

background-repeat: no-repeat;

background-attachment: fixed;

}

h1 {

color: #990000;

background-color: #FC9804;

}

  •  Показать пример 

Расположение фонового рисунка [background-position]

По умолчанию фоновый рисунок позиционируется в левом верхнем углу экрана. Свойство background-position позволяет изменять это значение по умолчанию, и фоновый рисунок может располагаться в любом месте экрана.

Есть много способов установить значение background-position. Тем не менее, все они представляют собой набор координат. Например, значение '100px 200px располагает фоновый рисунок на 100px слева и на 200px сверху в окне браузера.

Координаты можно указывать в процентах ширины экрана, в фиксированных единицах (пиксели, сантиметры, и т. п.), либо вы можете использовать слова top, bottom, center, left и right. Модель ниже иллюстрирует сказанное:


В таблице дано несколько примеров.

Значение

Описание

Задание:

background-position: 2cm 2cm

Рисунок расположен на 2 см слева и на 2 см сверху

сделать самостоятельно

background-position: 50% 25%

Рисунок расположен по центру и на четверть экрана сверху

сделать самостоятельно

background-position: top right

Рисунок расположен в правом верхнем углу страницы

сделать самостоятельно

В примере кода фоновое изображение располагается в правом нижнем углу экрана:

body {

background-color: #FFCC66;

background-image: url("рыжик.jpg");

background-repeat: no-repeat;

background-attachment: fixed;

background-position: right bottom;

}

h1 {

color: #990000;

background-color: #FC9804;

}

  •  Показать пример 

Сокращённая запись [background]

Свойство background входит в состав всех свойств, перечисленных в этом документе.

С помощью background вы можете сжимать несколько свойств и записывать ваши стили в сокращённом виде, что облегчает чтение таблиц.

Например, посмотрите на эти строки:

background-color: #FFCC66;

background-image: url("рыжик.jpg");

background-repeat: no-repeat;

background-attachment: fixed;

background-position: right bottom;

Используя background, того же результата можно достичь одной строкой кода:

background: #FFCC66 url("рыжик.jpg") no-repeat fixed right bottom;

Порядок свойств этого элемента таков:

[background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]

Если свойство отсутствует, оно автоматически получает значение по умолчанию. Например, если background-attachment и background-position нет в данном примере:

background: #FFCC66 url("рыжик.jpg") no-repeat;

то этим двум неспецифицированным свойствам будут присвоены значения по умолчанию - scroll и top left.

Задание: теперь попробуйте самостоятельно создать свою HTML страничку, используя все рассмотренные здесь CSS-свойства.

К началу


 

А также другие работы, которые могут Вас заинтересовать

6786. Екологічні і техногенні проблеми в перетворювальній діяльності людини 229.08 KB
  Екологічні і техногенні проблеми в перетворювальній діяльності людини Проблеми загальносвітового рівня - демографічні, екологічні, енергетичні. Техногенні проблеми в суспільстві. Інформаційна система спостереження та аналізу стану природи...
6787. Економічний аналіз проекту. Загальне поняття про економічну систему, продуктивні сили, засоби виробництва, три основних питання економіки 49.94 KB
  Економічний аналіз проекту Загальне поняття про економічну систему, продуктивні сили, засоби виробництва, три основних питання економіки продуктивність праці та основні її показники (норма часу, норма продуктивності). Прибуток і рен...
6788. Шляхи економії матеріальних ресурсів проекту (підвищення якості об’єктів проектування, зменшення ваги, багаторазове використання деяких матеріалів тощо) 37.17 KB
  Шляхи економії матеріальних ресурсів проекту (підвищення якості об’єктів проектування, зменшення ваги, багаторазове використання деяких матеріалів тощо). 2.Поняття маркетингу як дослідження ринку певного регіону. 3.Дослідження потреб ринку. 1.Ш...
6789. Проектування професійного успіху 44.46 KB
  Проектування професійного успіху Основні функції професійної діяльності. Професійна діяльність та професійне самовизначення. Основні поняття: культура праці, професійне становлення особистості, професійна кар’єра. Основні функції профес...
6790. Суть та призначення портфоліо в професійній та в освітній діяльності людини 27.29 KB
  Суть та призначення портфоліо в професійній та в освітній діяльності людини. 2.Основні частини портфоліо в залежності від майбутньої професії. 1.Суть та призначення портфоліо в професійній та в освітній діяльності людини. Портфо...
6791. Компонування портфоліо. Фактори, що впливають на професійну кар’єру (особистісні, службові, виробничі, соціально-економічні тощо) 42.89 KB
  Компонування портфоліо. Фактори, що впливають на професійну кар’єру (особистісні, службові, виробничі, соціально-економічні тощо). 1.Компонування портфоліо. За характером і структурою репрезентованих у портфо...
6792. Изучение методов вывода иллюстраций, создания битовых образов, создания движущихся и изменяющихся рисунков 70 KB
  Цель работы: Изучение методов вывода иллюстраций, создания битовых образов, создания движущихся и изменяющихся рисунков. Приобретение навыков создания программ  мультипликации. Постановка задачи:Изобразить на экране прямоугольник, враща...
6793. ВЫПРЯМИТЕЛЬ СО СГЛАЖИВАЮЩИМИ ФИЛЬТРАМИ 160.5 KB
  ВЫПРЯМИТЕЛЬ СО СГЛАЖИВАЮЩИМИ ФИЛЬТРАМИ Цель работы - изучение принципа действия и экспериментальные исследования однофазного маломощного выпрямителя с простейшими сглаживающими фильтрами. 1.1 Основные положения Для питания постоянным током разл...
6794. УПРАВЛЯЕМЫЙ ВЫПРЯМИТЕЛЬ 139 KB
  УПРАВЛЯЕМЫЙ ВЫПРЯМИТЕЛЬ Цель работы - ознакомление с принципом работы и экспериментальное исследование характеристик однофазного управляемого выпрямителя на тиристорах при различных видах нагрузки. 2.1 Основные положения Для регулирования выпря...