Главная css Стилевые параметры цвета и фона

Стилевые параметры цвета и фона

CSS для цвета и фона

Параметр Значение Описание
color

(устанавливает цвет текста элемента)

 цвет

transparent - прозрачный

 Значение по умолчанию - наследует значение родителя. Цвет может быть задан названием (например, green) или номером в соответствии со шкалой RGB. 
                    
.p1 {color: red;}
.p2 {color: #c80000;}
.p3 {color: rgb(200,0,0);}
div {color: transparent;} /*прозрачный*/
background
(определяет параметры фона)		 transparent (по умолчанию) Означает отсутствие фона.
цвет
URL - адрес изображения Адрес может быть абсолютным или относительным, но его обязательно следует заключить в скобки и расположить непосредственно за словом url. 
 
BODY { background: 
url(/image/picture.png)}
цвет фона + изображение В этом случае рисунок будет расположен поверх цветного фона. Цвет м.б.либо чистым, либо смешанным из двух.
Изображение имеет три настройки:
1. repeat
=> repeat-x
=> repeat-y
=> no-repeat
Значение по умолчанию - repeat

2. прокрутка определяет, будет ли изображение оставаться на месте при прокручивании страницы или прокручиваться вместе с ней.
Значения - fixed, scroll.

3. положение определяет расположение изображения на странице.
Значения могут быть:
- процентными (горизонтальное, вертикальное),
- абсолютным расстоянием (горизонтальное, вертикальное)
- определенными с помощью ключевых слов: top, middle, bottom, left, center, right.
Свойство background позволяет установить одновременно несколько характеристик фона, которые указываются через пробел в любом порядке. 
 
div {background: url(images/ris.png) repeat-y #ff0000;}

 

Свойства фона по отдельности

Параметр Значение Описание
background-attachment scroll (по умолчанию) Определяет, будет ли прокручиваться фоновое изображение при пролистывании страницы или нет.
fixed
background-color transparent (по умолчанию) Определяет цвет фона. 

Для двух смешанных цветов:
body {background-color: red/blue;}
цвет
background-image none (по умолчанию) URL-адрес фонового изображения
Если одновременно для элемента задан цвет фона, он будет показан, пока фоновая картинка не загрузится полностью. В случае наличия в рисунке прозрачных областей, через них будет проглядывать фоновый цвет.
URL-адрес
background-position top, left (по умолчанию) Задает начальное положение фонового изображения, установленного с помощью свойства background-image.

У свойства background-position два значения: положение по горизонтали (может быть — left, center, right) и вертикали (может быть — top, center, bottom).
Кроме использования ключевых слов положение также можно задавать в процентах, пикселах или других единицах.

положение
background-repeat repeat (по умолчанию) Определяет, повторяется ли фоновое изображение для заполнения страницы или элемента. Если используются repeat-x (или repeat-y), то изображение повторяется лишь вдоль одного направления. По умолчанию устанавливается повторение по обоим направлениям.
repeat-x,
repeat-y
no-repeat

Примеры CSS ... свойство - background

CSS для цвета и фона
1 
<style>
.td_2 {
  color: green;
  background:url(image/picture.gif); 
  background-repeat:no-repeat; 
  background-position:bottom right; 
}
</style>
    
  <table border="0">
  <tr><td class=td_2>
    Наш текст ...
  </td></tr>
  </table>
Результат примера 1

1

Наш текст ...

Фоновая картинка в правом нижнем углу.

CSS для цвета и фона
2 
<style>
.info {
  background:url(info24.png) no-repeat; 
  background-position:10px; 
  background-color: #ddf; 
  border:1px dashed #8080ff; 
  padding-left:54px;
}
</style>

<div class="info">
   Ваш оформленный текст
</div>

 

скачать
Иконки PNG 24х24:



Результат примера 2

2

Уважаемые посетители сайта!
Вы знакомитесь со стилевыми параметрами
цвета и фона

Внимание!
Вы знакомитесь со стилевыми параметрами
цвета и фона

Уважаемые посетители сайта!
Вы знаите, где находится нофелет?

Коды состояния HTTP

  • Код ответа 4xx: Client Error (ошибка клиента):
  • Ошибка 400
    Bad Request («плохой, неверный запрос»)
  • Ошибка 401
    Unauthorized («неавторизован»)
  • Ошибка 404
    Not Found («не найдено»)
  • Ошибка 410
    Gone («удалён»)

  • Код ответа 5xx: Server Error (ошибка сервера):
  • Ошибка 500
    Internal Server Error («внутренняя ошибка сервера»)
  • Ошибка 503
    Service Unavailable («сервис недоступен»)
CSS для цвета и фона
3 
<style>
#vnim{color:#ffffff; 
  border-radius:50%;
  display:inline-block;
  width:24px;height:24px;
  line-height:26px;
  font-size:17px; 
  margin-left:10px;
  font-weight:bold;
  text-align:center;
  font: 300 17px/25px Helvetica, 
  Arial, sans-serif;
    }
#vnim.vred{background:#f20000;}
#vnim.vgrin{background:#00a27f;}
#vnim.vblu{background:#0058b0;}

#htex {letter-spacing: 2.5px;
  padding-left:12px;
  font-size:16px;
}
#htex.hred{color:#f20000;}
#htex.hgrin{color:#00a27f;}
#htex.hblu{color:#0058b0;}
</style>

<span id=vnim class=vred>!</span>
  <span id=htex class=hred>Внимание!</span>

<span id=vnim class=vblu>+</span>
  <span id=htex class=hblu>Дополнительно</span>

<span id=vnim class=vred>♥</span>
  <span id=htex class=hred>Любимая Книга</span>

<span id=vnim class=vgrin>?</span>
  <span id=htex class=hgrin>Вопрос</span>
Результат примера 3

3

!Внимание!

+Дополнительно

♥Любимая Книга

?Вопрос

CSS для цвета и фона
4 
<style>
.notic {
  background: url("galka24.png") #41cb5a 20px 50% no-repeat;
  border: 2px solid #467813;
  border-radius: 5px;
  color: #fff;
  font-family: Arial, sans-serif;
  padding: 15px 20px 15px 50px;
} 
</style>

<div class=notic>
  1. Книги рецептов
</div>
    
<span class=notic>
    2. Книги рецептов
</span>
Результат примера 4

4

1. Книги рецептов

 

2. Книги рецептов