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

К началу


 

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

75897. Этапы становления и развития представительной власти в России: вече, Земский собор, Государственная Дума 14.92 KB
  ГОСУДАРСТВЕННЫЙ СОВЕТ законосовещательный орган созданный при Александре. СЪЕЗД СОВЕТОВ представительный и законодательный орган в СССР состоял из Союзного Совета и Совета Национальностей. В НАСТОЯЩЕЕ ВРЕМЯ к представительным органам РФ относятся после 1993 г: Федеральное собрание высший представительный орган законодательные органы субъектов РФ органы местного самоуправления.
75898. Советская власть: теория и практика. Ленинская идея Советов и ее реализация 29.69 KB
  К сожалению с принятием Конституции 1936 года указанная определяющая особенность Советской власти была утрачена и с этого времени постепенно начала меняться классовая природа государственной власти. Большинством правящей партии большинством рабочего класса и большинством народа не был осознан советский принцип организации власти как власти формируемой в трудовых коллективах. Советский характер власти был вроде бы юридически закреплен но лишь по форме а не по существу. Организация власти не была увязана с организацией экономической...
75899. Принципиальные изменения в российском конституционном праве в 1990-2000-е гг.: дрейф в сторону авторитаризма 26.58 KB
  Следствием запрета КПСС стало разрушение всей прежней системы власти которая в меньшей степени коснулась низов политического класса но имела самые радикальные последствия для его верхушки. Запрет КПСС вызвал: ликвидацию традиционных институтов советской власти; ликвидацию института номенклатуры с ее порядком подбора и продвижения руководящих кадров для всех сфер жизни общества; передачу полномочий союзных органов власти российским и другие. Вакуум образовавшийся после распада СССР был одновременно и шансом и угрозой для новой власти....
75900. Россия как федерация: de jure и de facto. Правовой и фактический статус субъектов федерации 18.21 KB
  Правовой и фактический статус субъектов федерации. Принцип равноправия субъектов РФ провозглашенный в федеральной Конституции при последовательном его проведении предполагает построение симметричной федерации. Причем нынешняя асимметрия Российской Федерации вызвана во многом объективными причинами в первую очередь экономическими политическими историческими. Правовое положение субъекта Российской Федерации определяется Конституцией Российской Федерации.
75901. Особенности формирования и деятельности вооруженных сил современной России. Военные реформы в России 18.04 KB
  Направления реформы: Сокращение срока службы по призыву В декабре 2000 года Путин заявил: Армия должна быть профессиональной. Эти изменения в частности предусматривают сокращение с 2008 года срока военной службы по призыву с 24 до 12 месяцев С осени 2007 года россиян стали призывать в армию на 18 месяцев с 1 января 2008 года на 12 месяцев. Увеличение числа контрактников Улучшение материального положения военнослужащих и военных пенсионеров Введение альтернативной службы В 2002 г. Государственная Дума приняла закон согласно...
75902. Крестьянские движения XVII – XVIII вв.: бунт или революция? Сравнительный анализ 15.29 KB
  Первое крестьянское восстание под предводительством Хлопка 1603 вспыхнуло вследствие ужесточения крепостного гнета. Следующее восстание под предводительством И. Еще более крупное восстание в казацкой среде усилившейся за счет большого количества беглых людей произошло в Поволжье под руководством С. Восстание под предводительством К.
75903. Программные установки в движениях декабристов и народников: общее и особенное 19.14 KB
  Северное общество за сохранение монархии но ограниченной парламентом; Южное общество за республику. Северное общество за имущественный ценз. Северное общество за то чтобы их имели все граждане страны. Южное общество согласно но делает одно существенное дополнение гражданские и политические права народ получит только после длительного периода военной диктатуры.
75904. Политические партии в России в начале ХХ в.: сравнительный анализ программных лозунгов и деятельности двух-трех партий на выбор 186.39 KB
  Лидеры партии отстаивали целостность России допуская автономию только для Финляндии и Польши. Лидерами партии были известные предприниматели и финансисты А.
75905. Почему большевики смогли взять и удержать власть 15.43 KB
  Напротив большевики придя к власти незамедлительно приняли Декрет о земле отменивший право частной собственности на землю: земля переходила во всенародную государственную собственность; В 1914-1918 гг. Большевики соответственно также издали и Декрет о мире; Политическая раздробленность царившая среди остальных партийных кругов компромисс кадетов с эсерами с меньшевиками привела к потере ими фактического влияния в стране; наиболее организованной группой оставались лишь большевики способные в короткий срок мобилизовать собственные...