Введите ваш адрес почты


sdcvoy.ru
Понравился сайт? Поделись с друзьями!
Главная » Css » Background-color-css

Свойства background и color

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

Основные свойства задания цвета и фона в CSS:

Свойство color

Это свойство задаёт цвет переднего плана элемента. То есть с помощью этого свойства можно изменить цвет текста, заголовков и т.д. Чтобы легче было понять как можно использовать данное свойство, предлагаю посмотреть пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html;
 charset=utf-8">
  <title>Свойство color</title>
  <style type="text/css">
  h1 {
color: red ;
}
p {
color: green ;
}
  </style>
 </head>
 <body>
<h1>Заголовок красного цвета</h1>
  <p>Пример текста зеленого цвета</p>
 </body>
</html>

И в итоге вы должны получить следующее:

Применение свойства color

Вот таким простым образом вы можете изменять цвета текста статей, а также отдельных элементов текста. Например вы можете задать цвет таким тегам как strong, b, em, i и т.д. Попробуйте поэкспериментировать с цветами, я уверен у вас всё получится.

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

Свойство background-color изменяет цвет фона какого-либо элемента или всего документа HTML. Например, чтобы изменить фон всей странички достаточно прописать это свойство для тега body. Единственное что от вас требуется так это понимание того, что вы хотите получить в итоге. Вот вам небольшой пример для тренировки:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<title>Свойство color</title>
<style>
body{
background-color:#F4F4F4;
}
p {color:#FFF;
background-color:#CCC
} 
</style>
</head>
<body>
<h1>Простой заголовок</h1>
<p>Текст белого цвета на сером фоне</p>
</body>
</html>

В результате у вас должно получиться следующее:

Свойство background-color

Свойство background-image в CSS

Благодаря этому свойству вы можете вставить какой-нибудь фоновый рисунок. Для этого нужно воспользоваться значением адреса фонового изображения url. То есть вам надо указать путь к файлу с изображением, причем изображение может находиться на другом сайте. Чтобы применить данное свойство достаточно в файле стилей прописать вот такой код:

body {
background-image:url(img/logotip.jpg);
}

По умолчанию фоновое изображение будет повторяться во всех направлениях. Но можно задать это направление или сделать так чтобы изображение не повторялось вообще с помощью следующего свойства:background-repeat

Свойство background-repeat в CSS

Свойство background-repeat может принимать 4 разных значения:

В принципе здесь нет ничего сложного. Стоит заметить что в HTML аналогов этому свойству нет. Это очень удобное свойство. Например его можно использовать при создании меню или выделения какого-либо блока.Причем достаточно использовать небольшой файл изображения для создания нужного эффекта. Вот вам небольшой пример, показывающий повтор изображения по горизонтали:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; 
charset=utf-8">
  <title>Свойство background-repeat</title>
  <style type="text/css">
body {
background-color:#c0c0c0;
background-image:url(img/logotip.jpg);
background-repeat: repeat-x;
}
p {
color:navy;
background-color:#E1E1E1
}
  </style>
 </head>
 <body>
  <p>Повтор изображения по горизонтали</p>
 </body>
</html>

Результат у меня получился следующий:

Свойство background-repeat

Свойство background-attachment в CSS

Свойство background-attachment устанавливает будет ли прокручиваться фоновое изображение вместе с содержимом страницы или будет оставаться фиксированным. Для этого свойства есть всего два значения: scroll и fixed. Причём значение scroll стоит по умолчанию, поэтому это значение можно не использовать. Вот что означают данные значения:

SCROLL — фоновое изображение прокручивается вместе с содержимым страницы;
FIXED — фон строго зафиксирован на странице.

В файле стилей это свойство записывается следующим образом:

body {
background-color:#c0c0c0;
background-image:url(img/logotip.jpg);
background-repeat: repeat-x;
background-attachment: fixed ;
}

Свойство background-position в CSS

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

background-position: center right;

Где первое значение center задаёт позицию изображения по вертикали, а второе right по горизонтали.
Если вы захотите задать позицию фона с помощью относительных и абсолютных единиц, то следует учитывать что отчет начала координат будет начинаться с верхнего левого края экрана, причем первое значение будет показывать изменение по горизонтали, а второе — по вертикали. В качестве примера можете посмотреть вот такой вот простенький код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html;
 charset=utf-8">
  <title>Свойство background-position</title>
  <style type="text/css">
body {
background-color:#c0c0c0;
background-image:url(img/logotip.jpg);
background-repeat: no-repeat;
background-attachment: fixed ;
background-position: 75% 65%;
}
p {
color:navy;
background-color:#FFF
}
  </style>
 </head>
 <body>
  <p>Пример использования свойства background-position</p>
 </body>
</html>

Я получил вот такой результат:

Свойство background-position

Свойство background

Свойство background используется для сокращенной записи всех свойств в одном свойстве. Порядок записи всех свойств в свойстве background таков: background-color_background-image_background-repeat_background-attachment _background-position. Все свойства записываются через пробел, причём если вы не указали какое-нибудь значение, то вместо него присваивается значение по умолчанию. Это свойство помогает намного сократить запись в таблице стилей. Например вместо этого:

body {
background-color:#c0c0c0;
background-image:url(img/logotip.jpg);
background-repeat: no-repeat;
background-attachment: fixed ;
background-position: 75% 65%;
}

Можно (рекомендуется) записать так:


body {
background:#c0c0c0 url(img/logotip.jpg) no-repeat fixed 75% 65%
}

Здесь нет ничего сложного. Я думаю немного попрактиковавшись вы быстро запомните данные свойства.Если вы что-то не запомнили не беда, ведь вы всегда можете вернуться назад к тому или иному уроку. В следующем уроке вы узнаете о свойствах шрифта в CSS



наверх