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-свойства.

К началу


 

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

54174. Система дидактичних умов пізнавальної діяльності учнів на уроках математики 119.5 KB
  Система дидактичних розумів розвитку пізнавальної діяльності учнів на уроках математики. Розвиток пізнавального інтересу учнів. Прийоми активізації пізнавальної діяльності учнів на уроках математики. Інтерактивні технології навчання спосіб створення умов залучення учнів до пізнавальної діяльності.
54175. Первісна. Інтеграл. Застосування інтегралу при розвязуванні задач економічного змісту 690.5 KB
  Група студентів ділиться на чотири команди. На першому етапі заняття проводиться узагальнення та систематизація знань учнів з теми, розглядаються учнівські презентації про виникнення інтегралу та його використання. На другому етапі – пояснення нового матеріалу, потім його закріплення в вигляді створення проектів кожною підгрупою.
54176. Развитие культуры в условиях нижнего и среднего палеолита 33 KB
  Одним из важнейших способов выживания человека в первобытную эпоху стал беспрерывный процесс познания окружающего мира. На раннем этапе жизни человека предметом познания и осмысления является природа, от которой напрямую зависит жизнь человеческого общества.
54177. Новые информационные технологии в профильном обучении математики на примере темы „Многогранники” в 11 классе 827.5 KB
  Рассмотрение различных случаев взаимного расположения диагоналей ребер и граней многогранника использование для этого моделей и готовых чертежей способствует развитию пространственных представлений учащихся их интуиции Рис. Особо подчеркиваются характеристические свойства призмы.
54178. Видатні вчені на уроках математики 165 KB
  Задача 2 Вирішивши поділити всі свої заощадження між усіма синами хтось склав такий заповіт: Старший з моїх синів повинен отримати 1000 франків і 1 8 частину остачі; наступний 2000 франків і 1 8 нової остачі; третій син 3000 франків і 1 8 частини третьої остачі і т. Так як усі сини отримали порівну то 1 8 частина кожної нової остачі була на 1000 франків менше 1 8 частини попередньої остачі тобто уся нова остача була на 8000 франків менше попередньої. Так як за умовою усі гроші були розділені повністю то коли молодший син отримав по...
54179. Видатні вчені на уроках математики: Евклід, Б.В.Гнеденко, Карл Фрідріх Гаусс 110 KB
  Евклід (бл.365 – бл.300 до н. е.) – старогрецький математик визнаний основоположник математики. Родом з Афін, учень Платона. Автор найдавніших трактатів з математики. Основна праця «Начала» (латинізована назва «Елементи») включає в себе 15 книжок, у яких міститься систематизований вклад геометрії, а також деяких питань теорії чисел.
54180. Метод розмірностей 342 KB
  Однак виявляється що метод розмірностей може бути використаний не тільки і не скільки для перевірки правильності розвязку поставленої задачі але й для виведення з точністю до константи невідомих співвідношень між фізичними величинами. 1 Основним фундаментальним підходом методу розмірностей є те що будьяку таку функцію ми можемо представити у вигляді наступного виразу y = C x1α x2β x3γ xnω 2 де C безрозмірна константа;...
54181. Як вчити школярів V-V1 класів розв’язувати задачі 101.5 KB
  Звичайно мова йде не про вправи тренувального характеру а про нестандартні завдання пошук рішення яких складає важливий компонент доступної дітям математичної творчості. Перш за все слід врахувати що навчитися вирішувати завдання школярі зможуть лише вирішуючи їх. Якщо ви хочете навчитися плавати то сміливо входите в воду а якщо хочете навчитися вирішувати завдання то вирішуйте їх пише Д. Рішення будьякого досить складного завдання вимагає від учня напруженої праці волі й наполегливості які найбільш сильно проявляються тоді...
54182. Становление элементов культуры в эпоху верхнего палеолита 37 KB
  Координаты вектора Чтобы найти координаты вектора нужно из координат конца вычесть соответственные координаты начала. Абсолютная величина вектора модуль вектора длина вектора Длина вектора равна корню квадратному из суммы квадратов его координат. Равные вектора Векторы равны если равны их соответственные координаты и наоборот. б Условие коллинеарности векторов Если два вектора коллинеарны то их соответственные координаты пропорциональны и наоборот.